微信小程序的条件、遍历、网络请求、获取本地图片

来源：互联网发布：淘宝店铺扣48考试编辑：程序博客网时间：2024/06/05 04:06

实例一：条件渲染

如果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进行请求的时候，最讨厌的就是跨域问题，而在小程序上是没有这个问题的。

数据接口：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      })    })  }})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

修改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      })    })  }})1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45