实例内容
实例一： 条件渲染
如果motto为Hello World，则输出你好世界，否则原样输出。
这里是分支条件判断，直接在视图文件里修改，修改index.wxml
<text wx:if="{{motto != 'Hello World'}}" class="user-motto">{{motto}}text><text wx:else>你好世界text>
wx:if、wx:else、wx:elif，是微信条件判断的控制属性，需要添加到组件中使用。
但是如果我们想一次性判断多个组件标签，我们可以使用一个wx:if控制属性。
<block wx:if="{{true}}"> <view> view1 view> <view> view2 view>block>
注意：
实例二： 数据遍历
在index.js中加入数据。
在index.wxml中读取数据。
wx:for-item可以指定数组当前元素的变量名
wx:for-index可以指定数组当前下标的变量名
这两个项也可以不指定，默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。
类似block wx:if，也可以将wx:for用在
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: view> <view> {{item}} view>block>
实例三： 网络请求
当用ajax进行请求的时候，最讨厌的就是跨域问题，而在小程序上是没有这个问题的。
数据接口：
接口内容：
{"data":[{"id":201701,"name":"Jackson","score":100},{"id":201702,"name":"Mike","score":78},{"id":201703,"name":"Joe","score":62}]}
修改index.js
加入变量，添加请求的方法。
//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, myText: '你好，世界！', arr1: [{name:'张三', age:18},{name:'李四', age:19},{name:'王五', age:20}], removeData:'', }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, //自定义事件 myEventHandle : function(){ this.setData({myText:"世界你好"}); }, onLoad: function () { console.log('onLoad') var that = this //获取远程数据 wx.request({ url: '', header:{ "Content-Type":"application/json" }, data: {}, success: function(res){ that.setData({removeData:res.data.data}); }, }) //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }})
修改index.wxml，进行数据读取。
效果：
wx.request说明：
参数说明：
实例四： 获取本地图片
这里使用微信组件wx.chooseImage
修改index.js
//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, myText: '你好，世界！', arr1: [{name:'张三', age:18},{name:'李四', age:19},{name:'王五', age:20}], myPic: null, }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, //自定义事件 myEventHandle : function(){ var that = this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有 success: function(res){ that.setData({myPic:res.tempFilePaths}); }, }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }})
修改index.wxml
效果：
wx.chooseImage说明
wx.chooseImage参数：
收藏