微信小程序开发（二）

微信小程序开发（二）

数据渲染

在page对象里的data中定义的数据，在wxml中如何使用
只需要加上{{ }} 就可以直接使用了

<text>{{isLogin}}</text>

不过要注意的是，如果是在属性中使用，或者是表达式，就需要在 " " 中使用

<text value="{{isLogin}}"></text>

data: {
    userInfo: {},
    isLogin: true
},
getUserInfo(e) {
    console.log(this.data.isLogin)
    console.log(e)    
    this.data.isLogin = false
    console.log(this.data.isLogin)
}

我们可以在一些函数中去改变data中的值,然后就可以看到调试器中的打印结果

不过我们需要注意的是，当我们触发事件时，wxml 中的页面数据并没有跟着一起改变。这时我们就需要对页面数据进行重新渲染

getUserInfo(e) {
    console.log(this.data.isLogin)
    console.log(e)    
    this.setData({
        isLogin: false
    })
    console.log(this.data.isLogin)
}

我们可以看到调试台的打印结果是一样的，不过页面的数据已经一起改变了，也就是已经成功了。✌

条件和列表

现在我们可以显示一些简单的数据了，但当我们显示数组的时候，就没有出现我们希望的那样，我们希望他是以列表的形式出现的。

wx:for

当我们需要显示一个数组的时候，就需要使用循环了

<view wx:for="{{subject}}" wx:key="index">
    {{item}}
</view>

data: {
    subject: ["数学", "物理", "英语"],
}

wx:if

当 if 里的表达式为 false 时，将会显示 wx:else 里的内容，如果没有 else 则不显示

<view wx:if="{{showText}}>
    <text>显示了文字</text>
</view>
<view wx:else>
    <text>你看不见我</text>
</view>

data: {
    showText: true,
}

组件

我们可以在页面上显示数据了，那我们的一个页面是不是就要写一大堆的 wxml 来表示一个页面呢。
当然不是，我们可以使用组件来封装一部分元素，页面直接调用组件就可以了，这样页面的代码量将会大大减少，提高可读性。

在 components 文件夹下新建一个 component , 然后在里面写点代码
在js中，properties表示从父组件传递过来的数据

Component({
    // 组件的属性列表
    properties: {},
    // 组件的初始数据
    data: {},
    // 组件的方法列表
    methods: {}
})

在父组件中使用组件就需要在 .json 中 usingComponents 配置组件名和组件路径。

全局变量

有时我们会需要一些全局变量。

我们可以在 app.js 文件中定义一个 globalData 对象

globalData: {
    userInfo: {},
    openid: '',
}

在我们需要使用的页面进行获取

let app = getApp()
console.log(app.globalData.userInfo)

持久化

我们希望我们的数据在我们退出小程序后就丢失，因此我们可以保存一下。

wx.setStorageSync('userInfo', userInfo)

然后我们就可以在调试器的 storage 中找到我们存储的数据

接下来就是获取保存的数据

const userInfo = wx.getStorageSync('userInfo')

获取用户信息

微信小程序获取用户信息这个功能已经被改了很多次了，我也不知道你看到这篇文章的方法时是否有用。一切还是以官方文档为主。

首先查看是否已经保存了用户信息，如果有就直接使用

const userInfo = wx.getStorageSync('userInfo')
if (userInfo) {
    this.globalData.userInfo = userInfo
} else {
    console.log("no userInfo")
}

<button class="login-btn" bindtap="getUserInfo" type="primary">登录</button>

目前我还没有找到不用触发事件（如点击，或直接点击获取用户信息按钮）的方法去获取用户信息。

getUserInfo(e) {
    let _this = this
    let app = getApp()
    wx.getUserProfile({
        desc: '用于获取用户微信个人信息',
    }).then((res) => {
        let userInfo = res.userInfo
        
        wx.setStorageSync('userInfo', userInfo)
        _this.setData({
            userInfo: userInfo,
            isLogin: true
        })
        app.globalData.userInfo = userInfo
    })
},

点击按钮用户授权后，用户信息就获取到了，这时可以将用户信息上传到服务器上。

🆗， 又结束了，这篇和上一篇一样，写的很简单，不过走完这几步之后，大致的微信小程序开发就应该差不多能写出来了，真正的学习还是需要看官方文档的，更全面一点。

接下来就该是云开发了，对于没有服务器的人来说真的很友好。加油💪💪💪