微信小程序基础知识笔记

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

微信小程序笔记

文件构成

全局文件

app.json

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

app.js

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

app.wxss

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

app.wxml

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

页面文件

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

[page].json

页面配置文件

[page].js

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

[page].wxss

页面CSS样式文件

[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 = truewx:if={{ false }} wx:else={{ isShow }} ...

跳转

内部跳转

wx.navigateTo

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

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

wx.redirectTo

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

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

wx.switchTab

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

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

wx.navigateBack

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

wx.navigateBack({ detal: 1 })

wx.reLaunch

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

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

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

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

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

跳转外部小程序

wx.navigateToMiniProgram

打开另一个小程序

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

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

wx.navigateBackMiniProgram

返回上一个小程序

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

跳转内嵌H5

web-view

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

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

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

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

传参

函数传参

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

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

// page.js handle(e) { const item = e.currentTarget.dataset.item }