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

实例一： 条件渲染

如果

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

修改

index.wxml

效果：

wx.chooseImage

说明

wx.chooseImage

参数：



博客名称：王乐平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin