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()
相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
半生过往7 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript