[]

推广

开发管理

开发设置

[]

解除关联公众号

腾讯云管理

[]

游戏运营管理

开发权限

模板与配置数据绑定

// pages/list/index.js Page({ /** * 页面的初始数据 */ data[id_1465850151] }, })

使用

<view>{{info}}view> <image src="{{img}}" mode=""/>

三元表达式

<view>若随机数1等于或超过5，则结果为“大于5”；反之，若随机数1小于5，则结果为“小于5”。view>

事件绑定

常用的事件

类型绑定方式事件描述

tap

或 bind:tap

手指触摸后马上离开，类似于 HTML 中的 事件

或 bind:

文本框的输入事件

或 bind:

状态改变时触发

事件回调被激活之际，将接收到一个事件实体，其具体属性详见表格内容。

属性类型说明

type

事件类型

页面打开到触发事件所经过的毫秒数

触发事件的组件的一些属性值集合

当前组件的一些属性值集合

额外的信息

触摸事件，当前停留在屏幕中的触摸点信息的数组

触摸事件，当前变化的触摸点信息的数组

和 的区别

是触发该事件的源头组件，而 则是当前事件所绑定的组件。

e所指的是引发事件发生的根本组件，故而，e实际上是指内部的那个按钮部分。

该变量指向的是正在引发事件的那个特定组件，因此，e. 代表的是此刻正在使用的视图组件。

<button type="primary" bind:tap="showLog">点击button>

showLog(e) { console.log(e); },

想进行data中的赋值操作

showLog(e) { this.setData({count: this.data.count + 1}) },

参数传递

在定义原理中，需在前面添加"data-变量"属性，并赋予其"值"，而此值可通过插值表达式来设定。

<button type="primary" bind:tap="showLog" data-count="{{2}}">点击 + 2button>

showLog(e) { console.log(e.target.dataset.coun); },

<input type="text" bindinput="showLog" value="初始值"/>

showLog(e) { console.log(e.detail.value); },

条件渲染

<view wx:if="{{type === 1}}">男view> <view wx:elif="{{type === 2}}">女view> <view wx:else>人妖view>

可以用 标签，不具备任何效果，只起到包裹作用

用 也可以实现隐藏，true 隐藏

<view hidden="{{type === 1}}">男view>

wx:if 与 的对比

运行方式不同

使用建议

列表渲染

<view wx:for="{{arr1}}"> 索引是：{{index}}，列表：{{item}} view>

<view wx:for="{{userList}}" wx:key="id"> 该索引标识为：{{item.id}}，而对应的项目名称则是：{{item.name}}。 view>

WXSS 模板样式

WXSS 拥有 CSS 的众多功能，并且在此基础上进行了扩展和调整，旨在更好地满足微信小程序的开发需求。

与 CSS 相比，WXSS 扩展的特性有：

@import '/common/common.wxss'

什么是 rpx 尺寸单位

rpx（ ）是微信小程序独有的，用来解决屏适配的尺寸单位。

rpx的运作机制相当直观：考虑到不同设备的屏幕尺寸各异，为了实现屏幕的自动调整，rpx将所有设备的屏幕在宽度方向上均分为750个单位（也就是说，当前屏幕的总宽度等于750个这样的单位）。

小程序在各类设备上运行时，会自动将rpx样式单位转换成相应的像素单位进行渲染，以此达到屏幕的适配效果。

rpx 与 px 之间的单位换算*

在具体分析中，我们发现屏幕的宽度为特定尺寸，该尺寸下屏幕上分布着750个物理像素，这些像素被均匀地分割成若干部分。据此，我们可以得出以下结论：

官方建议，在进行微信小程序的开发过程中，设计师应当将 作为设计视觉稿的基准参照。

举例说明：若需在页面中创建一个宽度为20像素、高度为20像素的矩形框，将其尺寸转换为rpx单位后，其宽度和高度分别对应为多少像素。

全局配置全局配置文件及常用的配置项

小程序的根目录中存放的 app.json 文件，充当着小程序的整体配置文件的角色。其中，包含了一系列常用的配置选项，例如：

记录当前小程序所有页面的存放路径

全局设置小程序窗口的外观

设置小程序底部的 效果

是否启用新版的组件样式

属性名类型默认值说明

xt

字符串

导航栏标题文字内容

#

导航栏背景颜色，如 #

le

导航栏标题颜色，仅支持  / 

#

窗口的背景色

dark

下拉 的样式，仅支持 dark / 

h

是否全局开启下拉刷新

e

50

页面上拉触底事件触发时距页面底部距离，单位为px

开启全局下拉刷新， h 改成 true

修改下拉刷新的背景色：

上拉触底距离

上拉触底，这一术语专指移动设备上的操作方式，用户只需用手指在屏幕上向上滑动，就能实现加载更多数据的目的。

在 app.json 文件中进行配置，首先定位到相关部分，然后对 e 变量进行修改，为其设定一个新的数值。

请注意：系统默认间距为50像素，除非有特别要求，否则请直接采用这一预设值。

这是在移动端应用中常见的一种页面展示形式，主要作用是便捷地实现多个页面的快速跳转。在微信小程序中，这一效果通常被细分为不同的类别。

注意：

的 6 个组成部分

该功能的背景色彩为：当选中时，图片的路径将会显示；上边框的颜色设定为：在未选中状态下，图片的路径路径将不显示；在tab标签页上，文字在选中时的颜色设置为：而默认（未选中）时的文字颜色则为：

配置

在 app.json 中加入

{ "tabBar": { "list": [ // 列表项 { "pagePath": "pages/index/index", // 跳转路径 "text": "index" // 内容 }, { "pagePath": "pages/list/index", "text": "list" } ] }, }

节点的配置项

属性类型必填默认值描述

的位置，仅支持 /top

上边框的颜色，仅支持 /

tab 上文字的默认（未选中）颜色

tab 上的文字选中时的颜色

的背景色

list

tab 页签的列表，最少 2 个、最多 5 个 tab

每个list 如何进行配置呢

属性类型必填描述

页面路径，页面必须在 中预先定义

text

tab 上显示的文字

未选中时的图标路径；当  为 top 时，不显示 icon

选中时的图标路径；当  为 top 时，不显示

网络数据请求

鉴于安全性的考量，小程序的官方对数据接口的调用设定了以下两项规定：

只能请求 类型的接口必须将接口的域名添加到信任列表中

登录小程序管理后台

注意事项：

注册的域名仅限协议使用，IP地址和未经ICP备案的域名不可使用；域名须在ICP备案服务器上注册，且一个月内最多可提交五次修改申请。

发起请求

wx.request({ url: 请访问'https://applet-base-api-t.itheima.net/api/get'链接，进行相关操作。, method: 'GET', // post data: { name: 'zs', age: 20 }, success: (res) => { console.log(res); } })

跳过校验 / 跨域 Ajax问题

在微信开发者工具里，我们可以暂时勾选“开发环境不验证请求域名、TLS版本及证书”这一选项，以此绕过对合法域名的验证过程。

在基于浏览器的Web开发领域，跨域问题是一个常见现象。然而，在小程序的开发过程中，这一问题并不存在。这是因为小程序并非运行在浏览器环境中，而是依托于微信客户端。因此，在微信小程序中，开发者无需担忧跨域问题。

Ajax技术的核心功能建立在浏览器内的特定对象之上，鉴于小程序运行在微信客户端的特定环境中，因此在小程序中，我们通常不将其称为“发起Ajax请求”，而是称之为“发起网络数据请求”。

页面上定义了一个名为“声明式导航”的导航组件，用户可通过点击该组件来触发页面间的跳转。此外，还有一种通过调用小程序的导航API来实现的页面跳转方式，这种方式被称为“编程式导航”。

页面指的是被配置为 的页面。

传递参数

<navigator url=在“/pages/message/index”这一页面上，通过查询参数“name”设置为“zs”以及“age”设定为“17”来进行访问。" open-type="switchTab">跳转消息navigator> <navigator open-type="navigateBack" delta="1">后退一步navigator>

编程导航

API

属性类型是否必选说明

url

需要跳转的页面的路径，路径后不能带参数，返回不需要加

当返回时上一层可选，如果值大于页面总数，则首页

接口调用成功的回调函数

fail

接口调用失败的回调函数

接口调用结束的回调函数（调用成功、失败都会执行）

// 跳转到TabBar页面 wx.switchTab({ url: 禁止访问包含“zs”和“17”参数的“/pages/message/index”页面。, }) // 非TabBar页面 wx.navigateTo({ url: 该URL地址指向名为“zs”的17岁用户的个人信息页面，路径为“/pages/index22/index”。, }) // 返回上一页 wx.navigateBack({ delta: 1 // 可省略 })

接收参数

onLoad(options) { console.log(options); // 对象里已经包含了 },

下拉刷新 / 上拉触底

用户下拉松开触发

onPullDownRefresh() { this.setData({count: 0}) wx.stopPullDownRefresh() // 处理完成调用停止事件 },

就是移动端，上拉滑动到低了，触发加载更多数据的操作

然而，我们注意到一个问题，即当我们抵达某个特定位置后，即便只是滑动相同的距离，也会导致多次触发。

onReachBottom() { console.log('触发上拉触底'); },

效果

// 触发Loading wx.showLoading({ title: '数据加载中', }) // 结束loading wx.hideLoading()

自定义编译

可以做操作，比如重新编译后进入指定页面

生命周期

生命周期，即一个实体从诞生至运作再到消亡的整个过程。

在小程序中，生命周期分为两类，分别是：

应用生命周期

页面生命周期

生命周期函数

小程序的生命周期相关函数需在 app.js 文件中进行明确标注，具体示例代码呈现如下：

App({ /** 小程序一旦完成启动初始化，便会自动触发名为 onLaunch 的事件，值得注意的是，这一事件在整个程序运行过程中仅被触发一次。 */ onLaunch: function () { }, /** 小程序一旦启动，亦或是由后台切换至前台，便会自动激活 onShow 事件。 */ onShow: function (options) { }, /** * 当小程序从前台进入后台，会触发 onHide */ onHide: function () { }, /** 若小程序遭遇脚本故障，亦或是API调用未能成功，此时便会激活onError事件，并伴随相应的错误详情一同出现。 */ onError: function (msg) { } })

页面生命周期函数

Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })

WXS 脚本语言

WXS 结合 WXML 可以构建出页面

在wxml文件中，我们无法直接调用页面.js文件中定义的函数，然而，wxml文件却能调用由wxs文件所定义的函数。鉴于此，wxs文件在微信小程序中的常见用途主要体现在充当“过滤器”的角色。

WXS 和 js 的关系

WXS ( ) 支持以下数据类型：

WXS 语法特点

不支持的 ES6+ 语法

WXS 不支持以下 ES6 及以上的语法特性：

支持的 ES5 语法

WXS 支持以下 ES5 语法特性：

模块系统

WXS 遵循 规范，支持模块化开发：

内嵌 WXS 脚本

<view>{{m1.toUpper('zs')}}view> <wxs module="m1"> 导出模块的toUpper方法定义为一个函数，该函数接收一个字符串参数。 return str.toUpperCase() } wxs>

定义外联的 wxs 脚本

WXS 代码同样可被置于以 .wxs 为扩展名的文件之中，这类似于 代码可被编写于以 .js 为扩展名的文件内。以下是一个示例代码：

定义

function toUp(str) { return str.toUpperCase() } module.exports = { toUpper: toUp }

使用

<wxs src="./index.wxs" module="m1">wxs>

特点

在设计阶段，wxs 语言广泛吸收了其语法特点。然而，在本质上，wxs 和该语言截然不同，二者属于完全独立的两种编程语言。

组件

动态标题

/** * 生命周期函数--监听页面初次渲染完成 */ onReady() { wx.setNavigationBarTitle({ title: '标题', position: 'left' }) },

信息框

wx.showToast({ title: '没有更多数据了...', icon: 'none' })

自定义组件

在项目的主目录下，进行鼠标右键操作，选择“创建文件夹”，命名为“test”。接着，在“test”文件夹内，再次使用鼠标右键，点击“新建”，输入组件的名字并按下回车键，系统将自动创建与组件相对应的四个文件，它们的扩展名分别是 .js、.json、.wxml 和 .wxss。

引用组件

{ "usingComponents": { "test": "/components/test/test" // 引用页面处 } }

在app.json 中加入

{ "usingComponents": { "test": "/components/test/test" // 引用页面处 } }

使用

<test>test>

区别

注意，在组件的 jSON文件中

{ "component": true, // 表示是组件 "usingComponents": {} }

在 js 中，主函数，不再是page，而是

// components/test/test.js Component({

样式

样式具备隔离性

注意事项：

在组件及其引用的页面布局中，推荐优先采用选择器，而应尽量避免使用id、属性或标签选择器。

取消样式隔离

方式一：在 js中

Component({ options: { styleIsolation: 'isolated' },

可选值描述

默认值，启用样式隔离，使用 指定的样式将不会相互影响

-

页面的 wxss 样式会对自定义组件产生作用，然而，当自定义组件的 wxss 中定义了样式时，这些样式并不会对页面产生影响。

页面的wxss样式会对自定义组件产生影响，同时，自定义组件在wxss中定义的样式也会反过来作用于页面。

方式二：在 JSON 中

{ "component": true, "usingComponents": {}, "styleIsolation": "isolated" // 这里控制 }

data 和

在所述方法中，以下划线为标识的，代表的是用户定义的处理流程，而未加下划线的则代表的是事件响应的函数。

自定义属性，接收数据

父组件可以传递

properties: { // max: Number 无法使用默认值 max: { type: Number, value: 10 } },

属性和 data 数据的用法相同，它们都是可读可写的

只不过语义上，并不同

鉴于数据与属性在根本属性上并无二致，故而属性的数值同样适用于页面展示，亦或可用来对模板中的属性进行重新指定。

数据监听器

监听目标对象时，必须指定对象的属性名称。无论该属性值发生变动，还是对象本身被重新赋予新的值，这一监听机制都将被激活。

当需要监听的对象数量较多时，可以采用通配符来替代具体对象，而在接收时，只需直接标注为“obj”即可。

在主函数中

observers: { '字段1,字段2': function(字段1新值, 字段2新值) { }, },

纯数据字段

纯数据字段是指那些并不参与界面展示的 data 字段，它们仅限于在当前组件内部被使用。

Component({ options: { // 匹配纯数据字段的正则 pureDataPattern: /^_/ },

组件的生命周期生命周期函数参数描述说明

在组件实例刚刚被创建时执行

在组件实例进入页面节点树时执行

在组件在视图层布局完成后执行

在组件实例被移动到节点树另一个位置时执行

在组件实例被从页面节点树移除时执行

每当组件方法抛出错误时执行

定义生命周期，在主函数中

// 在 lifetimes 中 lifetimes: { created() { } }

页面隐藏、展示、变化的生命周期

生命周期函数描述

show

组件所在的页面被展示时执行

hide

组件所在的页面被隐藏时执行

组件所在的页面尺寸变化时执行，携带参数 Size

Component({ pageLifetimes: { hide() {}, show() {}, resize() {} } })

插槽

在组件内部slot标签之后，用户便能在使用该组件的地方直接填充内容，系统会自动将其内容传递至slot区域。

启用多个插槽

Component({ options: { multipleSlots: true // 启用 },

给插槽定义名字

<slot name="kk">slot>

使用

<test> <view slot="kk">222view> test>

组件传参

父传子

<test count="{{count}}">test> properties: { count: { type: Number, value: 0 } },

子传父

bind:自定义触发点="父组件中触发的方法"

<test count="{{count}}" bind:sync="syncCount">test>

obj. 是传递过来的对象

// 在父组件中 syncCount(obj) { console.log('sync', , obj.detail); },

子组件，触发方法，并传递参数

this.triggerEvent('sync', {value: this.data.count})

获取子组件实例

可以根据 和 id 选择器

const sa = this.selectComponent('.symc')

共享

该特性旨在实现组件间代码的共享，其功能与 Vue.js 中的“”相仿。

每个组件均可嵌入一组特性、信息、生存周期相关函数及操作手段。当组件对其引用时，这些特性、信息及操作手段便会与组件本身融合。

每个组件可以引用多个 ， 也可以引用其它 。

创建 js 文件并导出

module.exports = Behavior({ properties: {}, data: { username: 'zs' }, methods: { } })

使用，只能应用于组件

const myBeh = require('../../behavior/myBeh') Component({ behaviors: [myBeh],

同名覆盖情况

如果是属性名同名，当前组件的权重大于引用的组件

中所有可用的节点

NPM 第三方

npm 包有如下 3 个限制：

不接纳那些依赖Node.js自带的库的软件包，也不接纳那些依赖浏览器内建对象的软件包，同样不接纳那些依赖C++插件构建的软件包。

Vant 由有赞前端团队所开源，它是一套专门针对小程序设计的UI组件库，旨在帮助开发者高效地构建小程序应用。

首先先对项目进行 npm 初始化 npm init -y

安装 npm i @vant/ -S --

启用 npm 支持

关闭样式

在 app.json 文件中将相应的 "": "v2" 字段删除，因为小程序的最新版本强制引入了大量样式，这些样式很难被完全覆盖，若不关闭这一设置，将导致某些组件的样式出现混乱。

使用

在app.json或.json中引入组件

"usingComponents": { "van-button": "@vant/weapp/button/index" }

<van-button type="default">默认按钮van-button>

全局样式

在 html 中创建，具备作用域，在 html 中最好

html { --main-color: #d42525; // 定义，使用 var 使用 } .box1, .box2 { background-color: var(--main-color); }

在 app.wxss 文件内设定 CSS 变量，便能使这些变量在整体范围内产生作用：

为何选择Page节点进行定制呢？这是因为小程序中的节点本质上就是Page节点。

page { 按钮的背景色设置为红色，具体值为#C00000。 按钮危险边框颜色设置为#D60000； }

Vant-Wapp 变量名地址

化

安装

安装 miniprogram-api-promise 包，并使用 -S 参数指定为生产环境依赖。

在 app.js 文件中

// 导入 import { promisifyAll } from 'miniprogram-api-promise' const wxp = wx.p = {} // pomise 化 promisifyAll(wx, wxp)

async getSwiperList() { const aa = await wx.p.request({ url: 该网址指向的是'https://applet-base-api-t.itheima.net/slides'，这是专门用于访问相关幻灯片资源的平台接口。, method: 'GET', }) console.log(aa); },

全局数据共享

使用 mobx- 配合 mobx-- 实现全局数据共享

我这里安装的

"mobx-miniprogram": "^6.12.3" "mobx-miniprogram-bindings": "^5.0.0"

定义仓库

import { observable, action } from 'mobx-miniprogram' export const store = observable({ num1: 1, num2: 2, // 计算属性 get sum() { return this.num1 + this.num2 }, 在编写异步函数时，务必采用function关键字进行定义，而不能采用箭头函数的形式，否则将无法正确获取到this关键字所指向的上下文。 updateNum1: action(function (step) { this.num1 += step }) })

使用仓库

import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from '../../store/store' Page({ /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.storeBindings = createStoreBindings(this, { store, // 使用仓库 fields: ['num1', 'sum', 'num2'], // 映射字段 actions: ['updateNum1'] // 映射函数 }) }, /** * 生命周期函数--监听页面卸载 */ onUnload() { this.storeBindings.destroyStoreBindings() // 需要卸载 },

在组件中使用

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' import { store } from '../../store/store' Component({ behaviors: [storeBindingsBehavior], storeBindings: { // 数据源 store, // 映射字段 fields: { num1: 'num1', // 字符串中是stroe中的字段 num2: 'num2', sum: 'sum' }, // 映射异步方法 actions: { updateNum1: 'updateNum1' } },

分包

分包是指将一个完整的小程序项目，根据具体需求分割成若干个子包，在构建过程中将其打包成多个独立的部分，用户在使用时可以根据实际需要选择性地加载这些子包。

对小程序进行分包的好处主要有以下两点：

在多团队协作开发过程中，若能对小程序首次启动的下载时间进行优化，将有助于提升各团队之间的解耦与协作效率。

在项目分包之前，小程序中的每一个页面及所有相关资源均被合并打包，这致使项目整体规模膨胀，进而延长了小程序启动时所需的下载时长。

分包后，小程序项目由 1 个主包 + 多个分包组成：

分包前

分包后

分包的加载规则 / 分包的体积限制

在小程序启动时，默认会下载主包并启动主包内页面

目前，小程序分包的大小有以下两个限制：

配置分包 / 打包原则

在 app.json 中，定义下面，会自动创建分包

{ // 配置分包 "subPackages": [ { // 第一个分包，根节点是PkgA，pages配置页面 "root": "PkgA", "name": "p1", // 起别名 "pages": [ "pages/cat/cat" ] } ],

查看项目大小

打包原则小程序会依据既定配置进行模块化处理，除指定目录外的其他文件夹将纳入主包；同时，主包内亦允许存在独立模块（即外层配置字段），而各页面必须位于主包内，且各模块间不得相互嵌套。

引用原则

主包无法调用分包中的私密资源，各分包之间亦不可互相引用对方的私有资源，但它们可以访问主包中公有的资源。

独立分包虽然仍属于分包范畴，但其特性较为独特，能够脱离主包及其他分包，独立进行操作。

最主要的区别：是否依赖于主包才能运行

开发者可根据实际需求，将那些功能相对独立且具备一定自主性的页面，分配至各自独立的分包模块中。

理由在于：小程序若是从常规的分包页面启动，必须先下载主包；而独立分包则无需依赖主包即可运行，这极大地加快了分包页面的启动速度。

注意：一个小程序中可以有多个独立分包。

"subPackages": [ { "root": "PkgA", "pages": [ "pages/cat/cat" ], "independent": true // 标志为独立分包 } ],

独立分包、普通分包与主包之间彼此孤立，它们之间无法互相调用对方的资源！

分包预下载

指在什么时候触发分包的下载

在 app.json 中，使用 节点定义分包的预下载规则

"preloadRule": { "pages/concat/index": { // 访问的路径 "packages": ["PkgA"], // 触发后加载包 "network": "all" // 在什么情况下加载，all全部，wifi } },

限制

在微信小程序中，各分包的预下载上限为2兆字节，一旦检测到任一分包的文件大小超过此限制，便无法执行分包的预下载操作。

自定义

自定义 分为 3 大步骤，分别是：

配置信息

"tabBar": { "custom": true, // 自定义tabBar，true "list": [] }

创建目录代码，根目录，创建 -tab-bar 和 文件

引用 标签

编写 代码

保留list节点是为了确保与低版本系统的兼容性，同时将其属性设置为true。

注意需要覆盖样式时，需要配置一下作用域

Component({ options: { styleIsolation: 'shared' },