小程序学习指南(一)
结构
- app.json 文件的配置和路径
{"pages":"pages/index/index"} 表示找到pages文件夹下面的index文件下面的index文件
- app.js 定义全局函数
App({
onLoad(){console.log("加载中")},
ongetString(){console.log("第一个小程序")}
})
- pages文件夹下面每个页面都有自己的文件夹。index文件夹下面就有3个文件index.wxml index.wxss index.js index.json每个文件夹下面都必须有这3个文件
数据绑定
就拿index页面举例:
在小程序里面分为视图层，逻辑层。逻辑层在.js里面。视图层用来显示。
(1)数据绑定
数据绑定一般都在js文件里面再视图层用{{变量名}}来赋值
在js里面Page({
data:{user:"患者名称",title:"请来医院"}
})
//index.wxml
<text class="user">{{user}}</text>
//page.js
data:{
user:"Hello World",
}
(2)数据更改this.setData({})
在逻辑层里面要是想更改数据只有通过事件来触发自己没办法直接设置修改
//index.html
<text class="user">{{user}}</text>
<button bindtap="onchange">点击变换</button>
//page.js
onchange:function(){
this.setData({
user: "病人家属",
title: "离开医院"
})
}
(3)显示用户图片{{userInfo.avatarUrl}}
//index.wxml
<image src="{{userInfo.avatarUrl}}"></image>
//app.js
在onLoad:function(){
var that = this;
//getUserInfo就是个方法
app.getUserInfo(function(userInfo){
that.setData({
userInfo:userInfo
})
})
}
(4)控制属性之if
有的时候通过控制属性来判断视图层显示不显示。wx:if="{{}}"
// index.html
<view wx:if="{{length>5}}"></view>
表示当length>5的时候他才显示
// index.js
Page({
data:{length:6}
})
// 如果要显示很多个视图组件
<block wx:if = "{{config}}">
<view> view1</view>
<view> view2</view>
</block>
关键字
框架提供了两个关键字表示真和假
true : boolean 类型的true,代码真值
false: boolean 类型的false， 代码假值
<checkbox checked="{{false}}"></checkbox>
特别注意不要直接写checked = "false",其计算结果就是个字符串。转成boolean类型后代表真值
(5)控制属性之for循环
//index.html
<view wx:for="{{array}}">
{{index}}:{{item.message}}
</view>
//index.js
array:[{message:"Hello"},{message:"World"}]
index是当前数据的索引的默认变量名.Item是当前数据项的默认变量名.也可以使用wx:for-item 和wx:for-index 来制定别名 (基本上不用)
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
