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()
相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel5 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休5 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪5 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do5 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选5 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选6 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼6 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
吴传逞6 小时前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
DT——6 小时前
前端登录鉴权详解
前端·javascript