微信小程序笔记

微信小程序笔记

文件构成

全局文件

1. app.json

小程序全局配置文件，必要，自动生成

2. app.js

小程序入口JS文件，一般只需申明全局变量、处理生命周期以及版本升级即可，必要

3. app.wxss

小程序全局CSS样式文件，非必要

4. app.wxml

小程序全局HTNL文件，非必要

页面文件

[page]为页面自定义名称，可随意，但建议具有语义性的命名

1. [page].json

页面配置文件

2. [page].js

页面JS文件，一般实现具体的逻辑处理、网络请求等

3. [page].wxss

页面CSS样式文件

4. [page].wxml

页面HTNL文件

---

基本原理

小程序分为两个部分 webview 和 appService 。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。

App()是小程序唯一实例，页面中可通过getApp()获取该实例，而Page()是页面实例。

// app.js
globalData: {
    name: 'zzz'
}
// page.js
const name = getApp().globalData.name

---

生命周期

onLoad——页面加载，调一次，可在参数内获取跳转URL传递的参数

onShow——页面显示，每次打开/切入前台时页面都调用

onReady——初次渲染完成，调一次

onHide——页面隐藏/切入后台，当navigateTo或底部tab切换时调用

onUnload——页面卸载，当redirectTo或navigateBack时调用

graph LR
onLoad页面加载-->onShow页面显示
onShow页面显示-->onReady页面渲染
onReady页面渲染-->onHide页面隐藏/后台
onHide页面隐藏/后台-->onUnload页面卸载

---

基础语法

数据更新

小程序内数据更新必须使用setData函数异步更新

this.setData({
    key: value
}, [function])
// 参数二为可选参数，接受一个函数作为异步更新数据的回调

数据获取

数据获取直接使用对象链即可

const name = this.data.name

数据绑定

插值表达式

{{ name }}

数据遍历

wx:for

wx:for="{{ array }}" wx:key="id"
// 默认：当前项item，索引index
{{ item.id }} - {{ index }}

// 可选参数
wx:for-item="myItem" wx:for-index="myIndex"
{{ myItem.id }} - {{ myIndex }}

条件

wx:if

wx:else

const isShow = true

wx:if={{ false }}
wx:else={{ isShow }}
...

跳转

内部跳转

1. wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）

wx.navigateTo({
    url: `/pages/welcome/index?name=${name}`
})

2. wx.redirectTo

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.redirectTo({
    url: `/pages/welcome/index?name=${name}`
})

3. wx.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数

wx.switchTab({
    url: '/pages/index/index'
})

4. wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

wx.navigateBack({
    detal: 1
})

5. wx.reLaunch

关闭所有页面，打开到应用内的某个页面

wx.reLaunch({
    url: '/pages/index/index'
})

WXML标签，跳转任意页面，可添加属性实现跳转其他小程序

// page.wxml
<navigator url='/pages/index/index'>
// 跳转小程序
<navigator targe="miniProgram" app-id="123456789">

详细参数建议阅读 “navigator｜微信开放文档”

跳转外部小程序

1. wx.navigateToMiniProgram

打开另一个小程序

wx.reLaunch({
    appId: '12345678',
    extraData: {} // 跳转参数
})

详细参数建议阅读 “wx.navigateToMiniProgram｜微信开放文档”

2. wx.navigateBackMiniProgram

返回上一个小程序

wx.reLaunch({
    extraData: {} // 返回参数
})

跳转内嵌H5

web-view

承载网页的容器，每个页面只能有一个 web-view，会自动铺满整个页面，并覆盖其他组件。

跳转至web-view页面并赋值src属性即可

// webview.wxml
<web-view src="{{url}}"></web-view>

// webview.js
page({
    onLoad() {
        this.setData({ src: 'http://xxxxx' })
    }
})

详细内容建议阅读 “web-view｜微信开放文档”（重要）

---

通信

函数传参

小程序函数传递参数语法区别于Vue，不能直接使用bindtap="handle(item)"，需要使用 data- 属性绑定参数

注意：参数名不支持大写，不支持驼峰命名，例如 userName --转换--> username

// page.wxml
<view bindtap="handle" data-item="item"> // 1
<view bindtap="handle" data-userName="zzz"> // 2
// 多参数
<view bindtap="handle" data-item="{{ {item1, item2} }}">
<view bindtap="handle" data-item="{{ [item1, item2] }}">

// page.js
handle(e) {
    const item = e.currentTarget.dataset.item // 1: item
    const name = e.currentTarget.dataset.username // 2: zzz
}

跳转传参

跳转页面path上直接拼接参数即可

wx.navigateTo({
    url: '/pages/welcome/index?name=zzz'
})

// welcom/index.js
onLoad(options) {
    const name = options.name   // zzz
}

与内嵌H5通信

小程序 --> H5

与跳转传参一致，url后拼接参数即可

// webview.js
page({
    onLoad() {
        this.setData({ src: 'http://xxxxx.com?data=xxx' })
    }
})

H5 --> 小程序

需要先引入wxsdk

// 1.npm下载sdk，weixin-js-sdk是非官方npm包，官方并未维护微信sdk的npm包
npm i weixin-js-sdk
import wxsdk from 'weixin-js-sdk'

// 2.直接下载官方jssdk到本地
// 需要做些处理，将jssdk文件内第一个this改为window，然后在文件最后加上 export default wxsdk
import wxsdk from './lib/jweixin-1.3.2'

1.与跳转传参一致，url后拼接参数即可

wxsdk.miniProgram.navigateTo({
    url: '/pages/index/index?data=111'
})

2.postMessage

// 官方api，但局限性大，只能在特定情况（小程序后退、组件销毁、分享）才会触发
wxsdk.miniProgram.navigateBack()
wxsdk.miniProgram.postMessage({
    data: {
        // 参数写在data里
        key: value
    }
})

未完待续...