微信小程序-数据操作

二月 06, 2020 5788

        微信小程序的前端的开发和我们开发网页一样，也是想通过自定的js方法请后台请求到数据，然后渲染到页面上进行显示，不过微信小程序对于数据的操作和网页前端不一样，像数据的赋值、页面之间数据的传递等具体的数据操作是怎么样实现的呢？这篇文章就来简单的介绍一下。

小程序-数据操作

1. 变量的取值与赋值

1.1 单一变量

        先简单说一下什么是单一变量，就是一个变量只保存一个值，比如字符串、整型这种变量。对于小程序来说，页面显示的所有数据都是来自页面js文件进行提供的。首先看一下怎么在页面的js文件里为小程序变量赋值呢。示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//test.js
Page({
    //data存放全局变量数据的地方，是一个json字符串，存放变量的初始值
    data: {
        //变量a是一个字符串
        a: 'hello word',
        //变量b是一个整型
        b: 2
    },
    //自定义方法，为变量进行赋值
    toSetDatas:function(e){
        //方法一：直接赋值，对原数值本身进行操作
        //但是要注意一点，这种方法虽然能给变量重新赋值，但是不会同步更新到页面，
        this.data.a = 'Hello word!',
        this.data.b = 3
        
        //方法二：使用setData方法进行变量赋值
        this.setData({
            a: 'Hello Word!',
            b:3
        })
    }
})

        上述代码中提供了两种赋值方法，但是常用的还是第二种通过setData方法进行赋值，因为第一种方法只能在后台将数据进行修改，不会实时更新页面的数据，所以不实用，第二种方法可以既可以修改变量数据，也可以进行页面数据的实时同步。在页面获取数据的方法其实也很简单，只需要用两个大括号**{{}}**括住变量即可将数据显示在页面上，示例如下：

1
2
3
4
5
6
7
8
9
<!--test.wxml-->
<view>
    <text>变量a的值为：{{a}}</text>
    <!-- 变量a的值为：Hello Word! -->
</view>
<view>
    <text>变量b的值为：{{b}}</text>
    <!--  变量b的值为：3 -->
</view>

以上只是页面获取数据一个简单的数据绑定，其他渲染数据的方法对于数据获取的方法是一样，更多渲染数据请参考WXML语法。

1.2 复合变量

        微信小程序中的复合变量主要有数组和json格式的数据。对这种数据的赋值使用的还是setData方法，但是和单一变量的赋值略有不同，这次在赋值的之后不能直接写变量名了，编译会包错。示例如下：

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
//test.js
Page({
    data: {
        list: [1,2,'a','b'],
    	person: {
            name:'张三',
            age: 18,
            sex: '男'
        } 
    },
    //错误的赋值方法，
    //下面对数据的赋值，编译时就是错的，会报错unknown: Unexpected token, expected
    Error:function(e){
        this.setData({
            list[0]: 4,
            person.name: '李四'
        })
    },
     
    //正确的赋值方法一：直接赋值，用引号包括变量
     Right_1:function(e){
    	this.setData({
            'list[0]': 4,
            'person.name': '李四'
        })
	},
        
    //正确的赋值方法二：拼接赋值
    //首先获取数据变量的字符串格式，然后通过中括号[]包括变量，进行赋值
    //因为先获取的变量的字符串形式，所以可以动态赋值
    Right_2:function(e){
        var i = 1
        var list_1 = 'list[' + i + ']'
        var personName = 'person.name'
        this.setData({
            [list_1]: 4,
            [personName]: '李四'
        })
    }    
})

页面取值和单一变量一下，也是用两个大括号**{{}}**包括起来，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--test.wxml-->
<!-- wx:for:绑定要遍历的列表；wx:for-index:指定数组当前下标的变量名，默认是index；wx:for-item:指定数组当前元素的变量名，默认是item。 -->
<view wx:for="{{list}}" wx:for-index="index" wx:for-item="item">
    <text>数组第{{index}}的值为：{{item}}</text>
    <!--  数组第0的值为：1 -->
    <!--  数组第1的值为：4 -->
    <!--  数组第2的值为：a -->
    <!--  数组第3的值为：b -->
</view>
<view>
    <text>person的姓名为：{{person.name}}</text>
    <!--  person的姓名为：李四 -->
    <text>person的年龄为：{{person.age}}</text>
    <!--  person的年龄为：18 -->
    <text>person的性别为：{{person.sex}}</text>
    <!--  person的性别为：男 -->
</view>

2. 页面之间数据的传递

        一般在页面跳转的时候，需要从当前页面给下一级页面进行数据的传递，传递的数据格式有单一变量、对象、对象数组三种。

2.1 单一变量

        单一变量不是就只是一个变量，也有可能是多个，只是单个传递过去的，没有封装在在一起，传递方式就是URL后面加参数的方式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//indes.js
//向下一级页面传递单一变量
testFunction:function(e):{ 
    wx.navigateTo({
        url: '../tets/test?name=' + name +'&age=' + age,
    })
}

//test.js
//在下一级页面的onload方法中获取
onLoad: function (options) {
    var name = options.name
    var age = options.age
    console.log('name='+name)
    console.log('age='+age)
}

2.2 传递对象

        传递对象也是将数据附加在URL后面进行传递，只不过传递之前要先改变一下格式，将JSON格式的数据转换成string类型，这样才能进行传递。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//index.js
//向下一级页面传递对象参数
// 通过JSON.stringify(obj) 方法将对象转化为字符串进行传递
testFunction: function(e) {
    person = {
        name: '张三',
        sex: '男',
        age: 18
    }
    var data = JSON.stringify(person);
    wx.navigateTo({
        url: '../test/test?data=' + data,
    })
}

//test.js
//在下一级页面的onload中获取,
onLoad: function (options) {
    var person = options.data;
    console.log(person)
    //{"name":"张三","sex":"男","age":18}           json格式的json字符串
},

2.3 传递数组对象

        传递对象也是将数据附加在URL后面进行传递，只不过传递之前要先改变一下格式，将list格式的数据转换成string类型，这样才能进行传递，然后在下一级页面再把接收到的数据转换成list格式就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//index.js
//向下一级页面传递数组对象参数
// 通过JSON.stringify(obj) 方法将对象转化为字符串进行传递
testFunction: function(e) {
    lsit = [1,2,3,4]
    var data = JSON.stringify(list);
    wx.navigateTo({
        url: '../test/test?data=' + data,
    })
}

//test.js
//在下一级页面的onload中获取,
onLoad: function (options) {
    console.log(options.data)
    //[1,2,3,4]    字符串格式
    //将接收到的字符串数据转换成数组格式
    var list = JSON.parse(options.data);
    console.log(list)
    // 1,2,3,4     object格式
},

3. 总结

        本篇主要就是讲述了一下在小程序中对于数据的操作，也是我一步一步踩过的坑。说多了都是泪啊~最主要的就是复合变量的赋值以及后面的对象参数进行传递数据，牵涉到格式转换的问题。不多说了，在这算是把这些坑填上了，下次就不用再踩了。