实例内容
条件渲染数据遍历网络请求获取本地图片实例一: 条件渲染
如果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
,是微信条件判断的控制属性,需要添加到组件中使用。
但是如果我们想一次性判断多个组件标签,我们可以使用一个<block/>
标签将多个组件包装起来,并在上边使用wx:if
控制属性。
<block wx:if="{{true}}"><view> view1 </view><view> view2 </view></block>
注意:<block/>
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
实例二: 数据遍历
在index.js
中加入数据。
在index.wxml
中读取数据。
wx:for-item
可以指定数组当前元素的变量名
wx:for-index
可以指定数组当前下标的变量名
这两个项也可以不指定,默认数组的当前项的下标变量名默认为index
,数组当前项的变量名默认为item
。
类似block wx:if
,也可以将wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view></block>
实例三: 网络请求
当用ajax进行请求的时候,最讨厌的就是跨域问题,而在小程序上是没有这个问题的。
数据接口:/jiangzy27/how_to_react/master/score.json
接口内容:
{"data":[{"id":01,"name":"Jackson","score":100},{"id":02,"name":"Mike","score":78},{"id":03,"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: '/jiangzy27/how_to_react/master/score.json',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, // 默认9sizeType: ['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
参数:
博客名称:王乐平博客
博客地址:
CSDN博客地址:/lecepin
如果觉得《微信小程序入门二: 条件 遍历 网络请求 获取本地图片》对你有帮助,请点赞、收藏,并留下你的观点哦!