2025微信小程序开发实战教程(四)

1.wxml 语法

1.1 模板语法

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

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

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

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

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

例如:

index.wxml:

css 复制代码
<view>
<text>姓名:{{user.name}}</text>
<text>年龄:{{user.age}}</text>
</view>

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

index.js:

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

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

如果是这样定义的:

js 复制代码
Page({
  data: {
   age:18
  }
})

key 不用带双引号:

kotlin 复制代码
this.setData({
  age: 18
})

1.2 列表数据

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

index.js:

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

index.wxml:

css 复制代码
<view wx:for="{{userList}}" wx:key="index">
<text>姓名:{{item.name}}</text>
<text>年龄:{{item.age}}</text>
</view>

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

css 复制代码
<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:

css 复制代码
Page({
  data: {
    age:18
  }
})

indx.wxml:

css 复制代码
<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:

css 复制代码
<button type="primary"  bind:tap="handleShowModel">删除用户</button>

index.js

css 复制代码
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

css 复制代码
<button type="primary"  bind:tap="handleShowTost">弹出消息框</button>

index.js

css 复制代码
Page({
  data: {
    age:18
  },
  handleShowTost(){
    wx.showToast({
        title: '操作成功!',
        icon:'none',
        duration:3000
    })
  }
})

2.生命周期

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

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

javascript 复制代码
App({

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

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

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

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

css 复制代码
 /**
   * 生命周期函数--监听页面加载
   */
  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 里面。

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

同步语法:

保存:

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

获取:

css 复制代码
const name=wx.getStorageSync("name")
const wife=wx.getStorageSync("user")

删除:

css 复制代码
 wx.removeStorageSync('user')

异步语法:

保存

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

获取

css 复制代码
async handleGetStorage() {
    const userInfo = await wx.getStorage({key:'user'})
},

删除

css 复制代码
 wx.removeStorage({
        key:'name'
    })
// 或者
 wx.clearStorage()
相关推荐
OEC小胖胖4 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim5 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头7 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子7 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边7 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客7 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8887 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家7 小时前
微信小店与微信小程序简单集成指南
前端
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试