2025微信小程序开发实战教程（四）

1.wxml 语法

1.1 模板语法

其实微信小程序的模板语法和 Vue 的很像:

• 在 js 页面 Page 方法的 data 对象中定义变量
• 在 wxml 页面中使用 {{}} 显示数据

微信小程序模板语法可以显示的内容有如下几种：

• 变量
• 算数运算
• 三元运算
• 逻辑判断

在微信小程序 Page 方法中定义的变量默认不是响应式的。当 js 中变量的值发生了变化，要想页面的值也发生变化，需要使用 this.setData({key:修改后的值}) 实现响应式。

例如：

index.wxml:

<view>
<text>姓名：{{user.name}}</text>
<text>年龄：{{user.age}}</text>
</view>

<button type="primary" bind:tap="handleUpdateUserInfo">点击修改信息</button>

index.js:

Page({
  data: {
    user:{
      name:"知否技术",
      age:18
    }
  },
  handleUpdateUserInfo(){
    let age = this.data.user.age+2;
    this.setData({
      "user.age": age
    })
  }
})

讲解：上面的例子中，因为是要修改 user 对象里面的 age 值，所以 用双引号包裹起来了。

如果是这样定义的：

Page({
  data: {
   age:18
  }
})

key 不用带双引号：

this.setData({
  age: 18
})

1.2 列表数据

在微信小程序中使用 wx:for 遍历列表数据，其中每一项叫做 item。例如：

index.js:

Page({
  data: {
   userList:[{name:"知否君",age:18},{name:"张三",age:19},
   {name:"李四",age:20}
  ]
  },
})

index.wxml:

<view wx:for="{{userList}}" wx:key="index">
<text>姓名：{{item.name}}</text>
<text>年龄：{{item.age}}</text>
</view>

当然啦，我们也可以修改默认的 item 和 index 属性，例如：

<view wx:for="{{userList}}" wx:key="index" wx:for-item='userInfo' wx:for-index='id'>
<text>姓名：{{userInfo.name}}</text>
<text>年龄：{{userInfo.age}}</text>
</view>

1.3 条件语句

在微信小程序中我们使用 wx:if、wx:elif、wx:else 进行条件语句控制。例如：

index.js:

Page({
  data: {
    age:18
  }
})

indx.wxml:

<view wx:if="{{age>=0&&score<=14}}">青少年</view>
<view wx:elif="{{age>=15&&age<=64}}">壮年</view>
<view wx:else="{{age>=65}}">老年</view>

1.4 模态对话框

index.wxml:

<button type="primary"  bind:tap="handleShowModel">删除用户</button>

index.js

Page({
data: {
    age:18
  },
handleShowModel(){
    wx.showModal({
        title: '您确定要删除该用户数据吗?',
        content: '删除用数据',
        complete: (res) => {
            if (res.cancel) {
                console.log('取消操作')
            }
            if (res.confirm) {
                console.log('确认')
            }
        }
    })
}
})

1.5 消息对话框

index.wxml

<button type="primary"  bind:tap="handleShowTost">弹出消息框</button>

index.js

Page({
  data: {
    age:18
  },
  handleShowTost(){
    wx.showToast({
        title: '操作成功！',
        icon:'none',
        duration:3000
    })
  }
})

2.生命周期

小程序的生命周期分为整个应用的生命周期和每个页面的生命周期。

整个应用的生命周期在 app.js 文件中通过生命周期函数表示：

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log('小程序只要启动，就触发它')
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('小程序切回来了')
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('小程序切到后台了')
    
  },
})

每个页面的生命周期通过该页面 js 文件中的生命周期函数表示：

 /**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
    console.log('（1）页面加载了')
    // 向后端发送请求
    
  },

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {
    console.log('（3）初次渲染完成')
  },

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
    console.log('（2）页面显示')
  },

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
    console.log('（4）页面隐藏了')
  },

/**
   * 生命周期函数--监听页面卸载
   */
onUnload: function () {
    console.log('（5）页面卸载完成')
  },

我们经常在应用生命周期函数 onLaunch 中获取启动参数和全局配置，在页面生命周期函数 onLoad 中获取路由参数和列表数据等等。

3.本地存储

我们在做 Vue 项目的时候，用户登录成功之后需要将 token 等数据存储到 localStorage 或者 sessionStorage 里面。

微信小程序一样也需要本地存储。

同步语法：

保存：

  wx.setStorageSync('name', '知否技术')
  wx.setStorageSync('user', {name:'知否技术',age:'20',sex:'男'})

获取：

const name=wx.getStorageSync("name")
const wife=wx.getStorageSync("user")

删除：

 wx.removeStorageSync('user')

异步语法：

保存

  wx.setStorage({
        key:'name',
        data:'zhifou'
    })
    wx.setStorage({
        key:'user',
        data:{name:'知否技术',age:18}
    })

获取

async handleGetStorage() {
    const userInfo = await wx.getStorage({key:'user'})
},

删除

 wx.removeStorage({
        key:'name'
    })
// 或者
 wx.clearStorage()