网站数据库怎么建,做直播网站视频教程,自己如何建设外贸网站建站,wordpress文章图片轮播实例内容
条件渲染数据遍历网络请求获取本地图片 实例一#xff1a; 条件渲染
如果motto为Hello World#xff0c;则输出你好世界#xff0c;否则原样输出。
这里是分支条件判断#xff0c;直接在视图文件里修改#xff0c;修改index.wxml
text wx:if{{mott…
实例内容
条件渲染数据遍历网络请求获取本地图片 实例一 条件渲染
如果motto为Hello World则输出你好世界否则原样输出。
这里是分支条件判断直接在视图文件里修改修改index.wxml
text wx:if{{motto ! Hello World}} classuser-motto{{motto}}/text
text wx:else你好世界/textwx:if、wx:else、wx:elif是微信条件判断的控制属性需要添加到组件中使用。
但是如果我们想一次性判断多个组件标签我们可以使用一个block/标签将多个组件包装起来并在上边使用wx:if控制属性。
block wx:if{{true}}view view1 /viewview 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}}: /viewview {{item}} /view
/block实例三 网络请求
当用ajax进行请求的时候最讨厌的就是跨域问题而在小程序上是没有这个问题的。
数据接口https://raw.githubusercontent.com/jiangzy27/how_to_react/master/score.json
接口内容
{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: https://raw.githubusercontent.com/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参数 博客名称王乐平博客 博客地址http://blog.lepingde.com CSDN博客地址http://blog.csdn.net/lecepin
