微信小程序开发实战之 06-微信小程序开发进阶
AI 摘要 文章系统梳理微信小程序进阶技能：先示范如何创建与引用自定义组件，涵盖 JSON 声明、Component 构造及局部/全局注册；继而介绍 Vant Weapp、WeUI 两大主流 UI 库的安装、配置与使用要点；最后引入 uni-app 跨端框架，详解 HBuilderX 项目结构、pages.json 全局配置及一键发布至微信小程序的流程，为开发者提供从组件化到多端发布的完整实践路线。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结自定义组件创建自定义组件微信小程序自定义组件一般放在 components 文件夹下，由 JSON、JS、WXML、WXSS 文件组成。组件的 JSON 文件中，需要声明 component 属性，将属性值设置为 true 以表示其是一个组件。{ "component": true, "usingComponents": { } }组件的 JS 文件中，需要调用 Component 函数构建组件。Component({ properties: {}, data: {}, methods: {} });Component 函数的基本选项：名称描述data组件的初始数据，用于组件模板渲染properties组件的属性列表，用于接收外界传递到组件中的数据可以为其指定数据类型和类型，但其本质上与 data 没有区别methods组件的事件处理函数示例：创建自定义组件测试组件配置文件（components/test/test.json）：{ "component": true, "usingComponents": { } }测试组件页面结构（components/test/test.wxml）： 点我欢迎{{name}}的到来 测试组件页面逻辑（components/test/test.js）：Component({ properties: { name: { type: String, value: '张三' } }, data: {}, methods: { showMessage() { wx.showToast({ title: "欢迎你，" + this.data.name }) } } });使用自定义组件自定义组件的引用方式分为局部引用和全局引用。局部引用，即在页面配置文件（pages/xxx/xxx.json）中引用自定义组件。全局引用，即在全局配置文件（app.json）中引用自定义组件。引用自定义组件的基本用法："usingComponents": { "组件标签": "组件路径" }示例：使用自定义组件首页页面配置文件（pages/index/index.json）：{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar", "test": "/components/test/test" } }首页页面结构（pages/index/index.wxml）：<test name="多仔"></test>示例效果：UI 组件库Vant WeappVant Weapp 是有赞前端团队开发的一套开源的微信小程序 UI 组件库，其界面风格统一、功能齐全，提供了一整套 UI 基础组件和业务组件，能够快速搭建出风格统一的页面。Vant Weapp 文档：https://vant-ui.github.io/vant-weapp/0.x/#/intro在微信小程序中使用 Vant Weapp，需要利用 npm 将 Vant Weapp 安装到项目中，并进行相关配置。微信小程序默认没有初始化 package.json，故需要先初始化 package.json。在全局配置文件（app.json）中，需要删除 style 配置项，以关闭新版基础组件样式，避免样式混乱。微信小程序不能使用 npm 包，需要在微信开发者工具中将 npm 包转换成微信小程序可以使用的包。使用 Vant Weapp 组件时，需要局部或全局导入对应的组件。示例：Vant Weapp终端执行：npm init -y npm i vant-weapp -S --production全局配置文件（app.json）：{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom", "enablePullDownRefresh": true }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }构建 npm 包：首页页面配置文件（pages/index/index.json）：{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar", "van-button": "vant-weapp/button" } }首页页面结构（pages/index/index.wxml）：<van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>示例效果：WeUIWeUI 是微信官方设计团队为微信移动 Web 量身设计的一套与微信原生视觉体验一致的组件库。WeUI Web 文档：https://github.com/Tencent/weui/wikiWeUI-MiniProgram 文档：https://wechat-miniprogram.github.io/weui/docs/在微信小程序中使用 WeUI，可以在全局配置文件（app.json）中直接启用 WeUI，或利用 npm 将 WeUI 安装到项目中。WeUI 组件库中的组件有两种类型，一种是直接通过 class 样式类使用的组件（WeUI Web），另一种是需要在页面配置或全局配置中引入的组件（WeUI-MiniProgram）。示例：WeUI全局配置文件（app.json）："useExtendedLib": { "weui": true }首页页面结构（pages/index/index.wxml）：按钮示例效果：uni-appuni-app 概述uni-app 是使用 Vue.js 开发的一个前端框架，基于该框架可以很方便地进行多端项目开发，其支持的平台包括 Android、iOS、响应式 Web 和各种主流的小程序等。使用 uni-app 开发项目的优势：平台能力不受限，一套代码多端发行。性能体验优秀，加载新页面速度快，可以自动更新数据。基于通用技术栈 Vue.js，学习成本低。生态开放、组件丰富。HBuilderXuni-app 官方推荐使用 HBuilderX 来开发 uni-app 项目。HBuilderX 下载：https://dcloud.io/hbuilderx.htmluni-app 项目结构在 HBuilderX 中新建一个 uni-app 项目。uni-app 项目的基本结构：名称描述common存放共用文件components存放可复用的 UI 组件pages存放所有页面static存放静态资源文件，如图片、视频等unpackage存放编译后的文件App.vue页面根组件，用于配置全局样式、生命周期函数等main.js入口文件，在入口文件中可以导入 Vue 实例，将 Vue 实例挂载到页面上使用manifest.json项目配置文件，用于指定应用名称、AppID、Logo 等打包信息pages.json用于对 uni-app 项目进行全局配置，决定页面文件的路径、导航栏、标签栏等信息uni.scss保存 uni-app 项目内置的常用样式变量，方便整体控制应用风格将 uni-app 项目运行至微信小程序使用 uni-app 开发完成项目后，可以将 uni-app 项目运行至微信小程序。打开项目配置文件（manifest.json），获取 uni-app 应用标识 AppId。在项目配置文件（manifest.json）中，配置微信小程序 AppId。在 HBuilderX 运行设置中，配置微信开发者工具路径。在微信开发者工具中，开启服务端口。在 HBuilderX 中，将项目运行到小程序模拟器-微信开发者工具。uni-app 项目全局配置文件在 uni-app 中，可以通过修改全局配置文件（pages.json）来对 uni-app 项目进行全局配置，包括页面文件的路径、导航栏、底部标签栏等。{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "uniIdRouter": {} }
微信小程序开发实战之 05-微信小程序常用 API（下）
AI 摘要 本文系统梳理微信小程序核心 API 实战技巧，涵盖动画、登录、缓存、头像昵称、地图与位置、路由等高频场景。通过 wx.createAnimation 实现流畅动效，借助 wx.login 与 session_key 构建安全用户体系；利用同步/异步缓存 API 加速数据读写；结合腾讯地图 SDK 与 map 组件完成定位、标记与路径规划；以 wx.navigateTo、navigator 实现页面跳转，并给出完整代码示例与配置要点，助力开发者快速落地生产级能力。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结小程序组件与 API动画 APIwx.createAnimation 方法用于获取动画实例 Animation，通过该实例的相关属性和方法实现动画效果。wx.createAnimation 方法的基本选项：名称描述duration动画持续时间，单位为毫秒，默认值为 400timingFunction动画效果，默认值为 linearlinear：匀速ease：开始和结束速度较快，中间速度较慢，比较平滑ease-in：以慢速开始的过渡效果，开始速度较慢，然后逐渐加快ease-in-out：开始和结束速度较慢，中间速度较快的过渡效果，过渡更加自然ease-out：以慢速结束的过渡效果，开始速度较快，然后逐渐减慢step-start：在过渡的开始立即从初始状态跳转到最终状态，没有中间过渡过程step-end：在过渡的结束立即从初始状态跳转到最终状态，没有中间过渡过程，只是在过渡结束时才发生状态变化delay动画延迟时间，单位为毫秒，默认值为 0transformOrigin设置旋转元素的基点位置，默认值（x, y, z）为 50%, 50%, 0Animation 实例的基本方法：名称描述rotate(angle)旋转。旋转角度取值范围为 [-180, 180]export()导出动画队列，该方法每次调用后会清掉之前的动画操作将该方法导出的动画队列传递给页面中组件的 animation 属性，即可为相应的组件添加动画效果scale(sx, sy)缩放translate（tx, ty）平移变换skew(ax, ay)倾斜。倾斜角度取值范围为 [-180, 180]step(object)指定一个动画实例的下一个关键帧，表示一组动画完成opacity(value)设置透明度backgroundColor(value)设置背景颜色width(value)设置宽度top(value)设置 top 值示例：wx.createAnimation首页页面结构（pages/index/index.wxml）： 开始动画 <text>\n</text> <text animation="{{myAnimation}}">Hello World!</text>首页页面逻辑（pages/index/index.js）：Page({ data: { myAnimation: null }, playAnimation() { let animation = wx.createAnimation({ duration: 3000, timingFunction: 'ease', }) // 平移元素 animation.translate(200, 300) // 定义一帧 animation.step() // 导出动画 this.setData({ myAnimation: animation.export() }) } })示例效果：登录流程时序小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。小程序登录流程：登录流程时序说明：在微信小程序中，通过 wx.login 方法获取临时登录凭证 code。每一次调用 wx.login 方法都会生成新的 code，code 有效时间为 5 分钟且只能使用 1 次。获取到临时登录凭证 code 后，通过 wx.request 方法发送携带 code 的请求到开发者服务器。开发者服务器（后端服务器）将小程序 AppId、小程序密钥 AppSecret、临时登录凭证 code 发送请求给微信接口服务进行登录凭证校验。微信接口服务校验成功，会返回用户会话密钥 session_key、用户标识 openid、unionid 等信息。会话密钥 session_key 是对用户数据进行加密签名的密钥，当调用获取用户信息等微信接口时，需要使用会话密钥解密相关数据，因此为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥，一般会将会话密钥存储在开发者服务器中。openid 是用户的唯一标识，同一个微信用户在不同 AppId 的微信小程序中，openid 是不同的。unionid 是用户在微信开放平台账号下的唯一标识，若当前微信小程序已绑定到微信开放平台账号，则会返回此信息。如果开发者拥有多个移动应用、网站应用、和公众账号（包括小程序），可通过 unionid 来区分用户的唯一性，只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号（包括小程序），用户的 unionid 是唯一的，也就是说同一用户对同一个微信开放平台下的不同应用，unionid 是相同的。开发者服务器可以根据用户标识生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。登录 APIwx.login 方法用于获取用户登录凭证 code。wx.login 方法的基本选项：名称描述timeout超时时间，单位为毫秒success调用成功的回调函数该事件回调函数可以接收一个 res 参数，通过 res.code 可以获取用户临时登录凭证fail调用失败的回调函数complete调用结束的回调函数示例：wx.login首页页面结构（pages/index/index.wxml）： 登录 首页页面逻辑（pages/index/index.js）：Page({ login() { wx.login({ success: function (res) { console.log("用户临时登录凭证：" + res.code) // 拿到code后发送请求给开发者服务器登录 } }) } })示例效果：数据缓存 API数据缓存 API 可以实现数据的缓存，加快读取数据的速度。数据缓存的基本方法：方式名称描述异步wx.setStorage(object)将数据存储在本地缓存指定的 key 中单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB wx.getStorage(object)从本地缓存中异步获取指定 key 的内容 wx.getStorageInfo(object)异步获取当前 storage 的相关信息 wx.removeStorage(object)从本地缓存中移除指定 key同步wx.setStorageSync(key, data)同步版本 wx.getStorageSync(key)同步版本 wx.getStorageInfoSync()同步版本 wx.removeStorage(key)同步版本wx.setStorage 方法的基本选项：名称描述key本地缓存中指定的 keydata需要存储的内容只支持原生类型、Date、能够通过 JSON.stringify 序列化的对象encrypt是否开启加密存储，默认值为 false只有异步的 getStorage 接口支持开启加密存储开启后，将会对 data 使用 AES128 解密，接口回调耗时将会增加若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 truesuccess接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行wx.getStorage 方法的基本选项：名称描述key本地缓存中指定的 keyencrypt是否开启加密存储，默认值为 falsesuccess接口调用成功的回调函数该事件回调函数可以接收一个 res 参数，通过 res.data 可以获取对应 key 的数据fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.setStorage 和 wx.getStorage首页页面结构（pages/index/index.wxml）： 存数据 取数据 删数据 首页页面逻辑（pages/index/index.js）：Page({ setStorage() { wx.setStorage({ key: "myName", data: "多仔" }) wx.showToast({ title: "存储成功" }) }, getStorage() { wx.getStorage({ key: "myName", success: function(res) { wx.showToast({ title: "取到的值：" + res.data }) }, fail: function () { wx.showToast({ title: "取值失败" }) } }) }, removeStorage() { wx.removeStorage({ key: "myName", success: function(res) { wx.showToast({ title: "删除成功" }) } }) } })示例效果：头像昵称填写在微信小程序中，当用户登录后，可以在页面中展示用户的头像和昵称。目前微信小程序不允许开发者在未获得用户同意的情况下展示用户的头像和昵称，当需要展示时，应使用微信小程序的头像昵称填写功能。头像选择的基本用法： ... 昵称填写的基本用法： 示例：头像昵称填写首页页面结构（pages/index/index.wxml）：<image src="{{avatarUrl}}" style="width: 200rpx; height: 200rpx;"></image> 选择头像 首页页面逻辑（pages/index/index.js）：Page({ data: { avatarUrl: "https://wwc.6os.net/addons/test_api/avatar.jpg", nickName: "" }, chooseAvatar(e) { console.log(e) this.setData({ avatarUrl: e.detail.avatarUrl }) } })示例效果：腾讯地图 SDK腾讯地图 SDK 是一套为开发者提供多种地理位置服务的工具，可以使开发者在自己的应用中加入地图相关的功能，轻松访问腾讯地图的服务和数据，更好地实现微信小程序的地图功能。腾讯位置服务：https://lbs.qq.com/使用腾讯地图 SDK 前，需要申请开发者密钥。进入腾讯位置服务平台，创建一个新的应用。为已创建的腾讯位置服务应用添加开发者密钥 key，选择所有产品并按照要求填写相关信息。开发者密钥 key 申请完成后，在平台中下载腾讯地图-微信小程序 JavaScript SDK，并将 SDK 文件复制到微信小程序项目中。下载地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview进入微信小程序管理后台，添加腾讯地图的合法的服务器域名 https://apis.map.qq.com。腾讯地图 SDK 的使用方法：引入 SDK 核心类，实例化 QQMapWX 实例，通过 QQMapWX 实例实例的相关属性和方法实现地图功能。微信小程序 JavaScript SDK 开发指南：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview微信小程序在获取当前的地理位置时，需要在开发者在微信小程序全局配置文件（app.json）中对隐私和权限进行声明。声明隐私和权限的基本用法："permission": { "scope.userLocation": { "desc": "需要获取您的位置信息" } }, "requiredPrivateInfos": ["getLocation"]示例：腾讯地图 SDK全局配置文件（app.json）："permission": { "scope.userLocation": { "desc": "需要获取您的位置信息" } }, "requiredPrivateInfos": ["getLocation"]首页页面逻辑（pages/index/index.js）：// 引入腾讯地图SDK const QQMapWX = require("../../libs/qqmap-wx-jssdk.min") // 实例化QQMapWX实例 const txmap = new QQMapWX({ // 开发者密钥key key: "2UDBZ-XXXXX-XXXXX-XXXXX-XXXXX-SHBOM" }) Page({ onReady() { // 搜索附近的地点 txmap.search({ keyword: "学校", success: function (res) { console.log(res) }, fail: function () { console.log("搜索失败") } }) } })示例效果：map 组件map 组件用于在页面中显示地图，支持移动、缩放、添加标记点等功能。map 组件的基本用法： map 组件的基本属性：名称描述longitude中心经度，必填latitude中心纬度，必填scale缩放级别，默认值为 16，取值范围为 3～20markers标记点对象数组show-location是否显示带有方向的当前定位点，默认值为 falsebindregionchange视野发生变化时触发的事件处理函数标记点对象 marker 的基本属性：名称描述id标记点 idlongitude标记点经度latitude标记点纬度iconPath标记点的图标路径title标记点名称，点击时显示zIndex显示层级alpha标记点的透明度，默认值为 1，取值范围为 0～1width标记点宽度height标记点高度示例：map 组件首页页面结构（pages/index/index.wxml）： 首页页面逻辑（pages/index/index.js）：Page({ data: { mapMarkers: [ { id: 1, longitude: 118.12, latitude: 25.12, title: "安溪清水岩", iconPath: "/images/gps.png", width: 50, height: 50 } ] } })示例效果：地图 APIwx.createMapContext 方法用于获取地图上下文实例 MapContext，通过该实例的相关方法实现对 map 组件地图的控制。获取 MapContext 实例的基本用法：const mapCtx = wx.createMapContext("map组件的id")MapContext 实例的基本方法：名称描述getCenterLocation()获取当前地图中心的经纬度，返回国家测绘局（GCJ-02）坐标系moveToLication()将地图中心移至当前定位点getCenterLocation 方法的基本选项：名称描述iconPath图标路径success接口调用成功的回调函数该事件回调函数可以接收一个 res 参数，通过 res.longitude 和 res.latitude 获取经纬度数据fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行moveToLication 方法的基本选项：名称描述longitude经度latitude纬度success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.createMapContext首页页面结构（pages/index/index.wxml）： 前往“清水岩” 首页页面逻辑（pages/index/index.js）：Page({ moveLocation() { let mapCtx = wx.createMapContext("myMap") mapCtx.moveToLocation({ longitude: 118.12, latitude: 25.12, }) } })示例效果：位置 APIwx.getLocation 方法用于获取当前地理位置。对于正式项目，若想使用位置 API，需要在微信小程序管理后台申请接口权限、填写用户隐私保护指引，并在微信小程序全局配置文件（app.json）添加隐私声明。wx.getLocation 方法的基本选项：名称描述type设为 WGS84 可返回 GPS 坐标设为 GCJ-02 可返回用于微信内置地图查看位置的坐标success接口调用成功的回调函数该事件回调函数可以接收一个 res 参数res.longitude：经度res.latitude：纬度res.speed：速度，单位为 m/sres.altitude：高度，单位为 mfail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.getLocation首页页面结构（pages/index/index.wxml）： 获取位置 首页页面逻辑（pages/index/index.js）：Page({ getLocation() { let mapCtx = wx.createMapContext("myMap") wx.getLocation({ type: "GCJ-02", success(res) { console.log(res) mapCtx.moveToLocation({ longitude: res.longitude, latitude: res.latitude }) } }) } })示例效果：路由 API路由 API 用于实现页面跳转。wx.navigateTo：跳转到另一个页面，跳转后原来的页面会保留，并在导航栏左侧提供一个返回按钮，用户可以返回到之前的页面。wx.redirectTo：关闭当前页面，跳转到一个新页面。wx.switchTab：跳转到某个标签页，并关闭其他所有非标签页的页面。路由 API 的基本选项：名称描述url需要跳转的路径，路径后可以带参数在目标页面的 onLoad 钩子函数中，可以接收一个 options 参数对象，以获取跳转时传递的参数数据success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.redirectTo全局配置文件（app.json）："pages": [ "pages/index/index", "pages/users/users" ]首页页面结构（pages/index/index.wxml）： 跳转到users 首页页面逻辑（pages/index/index.js）：Page({ redirect() { wx.redirectTo({ url: '/pages/users/users' }) } })示例效果：navicator 组件navicator 组件用于实现页面之间的跳转。navicator 组件的基本用法：<navicator url="...">...</navicator>navicator 组件的基本属性：名称描述target在哪个目标上发生跳转，默认值为当前微信小程序url需要跳转的路径，路径后可以带参数在目标页面的 onLoad 钩子函数中，可以接收一个 options 参数对象，以获取跳转时传递的参数数据open-type跳转方式navigate（默认值）：保留当前页面，跳转到其他页面，不能跳转到 tabBar 页面redirect：关闭当前页面，跳转到其他页面，不能跳转到 tabBar 页面switchTab：跳转到 tabBar，并关闭其他所有非 tabBar 页面reLaunch：关闭所有页面，打开到应用内的某个页面navigateBack：关闭当前页面，返回上一页面或多级页面exit：退出微信小程序delta当 open-type=navigateBack 时生效，表示回退层数，默认值为 1示例：navicator 组件全局配置文件（app.json）："pages": [ "pages/index/index", "pages/users/users" ]首页页面结构（pages/index/index.wxml）：<navigator url="/pages/users/users" open-type="redirect">跳转到users</navigator>示例效果：WebSocket APIWebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它会在客户端与服务器之间专门建立一条通道，使客户端与服务器之间的数据交换变得简单。客户端与服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。微信小程序提供了 WebSocket API，允许服务器主动向微信小程序发送消息。WebSocket 协议是以 ws 或 wss 开头的，在微信小程序中，正式项目必须使用 wss 开头的 WebSocket 协议。wx.connectSocket 方法用户创建一个 WebSocket 连接。wx.connectSocket 方法的基本选项：名称描述url开发者服务器 wss 接口地址header请求头timeout超时时间，单位为毫秒success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行SocketTaskwx.connectSocket 方法的返回值是一个 SocketTask 实例，SocketTask 实例用于管理 WebSocket 连接，使每一条链路的生命周期都更可控。SocketTask 实例的基本方法：名称描述send()通过 WebSocket 连接发送数据close()关闭 WebSocket 连接onOpen()监听 WebSocket 连接打开事件onClose()监听 WebSocket 连接关闭事件onError()监听 WebSocket 错误事件onMessage()监听 WebSocket 连接接收到服务器的消息事件send 方法的基本选项：名称描述data需要发送的内容success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行close 方法的基本选项：名称描述code关闭连接的状态，表示连接被关闭的原因默认值为 1000，表示正常关闭连接reason可读字符串，表示连接被关闭的原因success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行onClose 方法的基本属性：名称描述code关闭连接的状态豪，表示连接被关闭的原因默认值为 1000，表示正常关闭连接reason可读字符串，表示连接被关闭的原因onOpen 方法的基本属性：名称描述header连接成功的请求头profile网络请求过程中的一些调试信息onError 方法的基本属性：名称描述errMsg错误信息onMessage 方法的基本属性：名称描述data服务器返回的消息
微信小程序开发实战之 04-微信小程序常用 API（上）
AI 摘要 本文系统梳理微信小程序核心 API 的使用要点与实战技巧，涵盖加载与消息提示、网络请求、背景音频与录音、媒体选择、文件上传下载及 canvas 绘图等高频场景。每个接口均给出参数说明、代码示例与效果演示，帮助开发者快速上手并规避 HTTPS 域名配置、后台播放权限等常见坑，为构建流畅用户体验奠定坚实基础。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结小程序组件与 API加载提示框 APIwx.showLoading 方法用于弹出加载提示框，加载提示框弹出后，不会自动关闭，需要手动调用 wx.hideLoading 方法才能关闭加载提示框。wx.showLoading 方法的基本选项：名称描述title提示的内容mask是否显示透明蒙层，防止触摸穿透，默认值为 falsesuccess接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.showLoading首页页面结构（pages/index/index.wxml）： 点击弹出消息框 首页页面逻辑（pages/index/index.js）：Page({ showMessage: function() { wx.showLoading({ title: "正在加载中" }) setTimeout(() => { wx.hideLoading() }, 3000) } })示例效果：消息提示框 APIwx.showToast 方法用于显示消息提示框。wx.showToast 方法的基本选项：名称描述title提示的内容当 icon 的值为 none 时，提示内容最多可以显示两行当 icon 的值为其他时，提示内容最多可以显示 7 个汉字长度icon图标，支持 success/error/loading/noneduration提示停留的时间，单位为毫秒，默认值为 1500mask是否显示透明蒙层，防止触摸穿透，默认值为 falsesuccess接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.showToast首页页面结构（pages/index/index.wxml）： 点击弹出消息框 首页页面逻辑（pages/index/index.js）：Page({ showMessage: function() { wx.showToast({ title: "请求成功啦", duration: 2000, icon: "success" }) } }) 示例效果：网络请求 APIwx.request 方法用于发送网络请求。wx.request 方法的基本选项：名称描述url开发者服务器接口地址data请求的参数，支持 string、object、ArrayBufferheader请求头对象method请求方式，默认为 GETdataType返回的数据格式，默认为 json其决定了小程序接收到服务器响应后，如何解析响应数据responseType响应的数据类型，默认为 text其影响小程序向服务器发送请求时，告知服务器期望返回的数据类型success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行出于安全性方面考虑，微信小程序官方对服务器接口的请求做了限制：只能请求 HTTPS 协议的服务器接口。必须登录微信小程序管理后台，将服务器接口的域名添加到信任列表中。服务器域名配置：当服务器接口不满足条件时，可以在微信开发者工具中勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS”，跳过对服务器接口的校验，但此做法仅限开发与调试阶段。示例：wx.request首页页面结构（pages/index/index.wxml）： 点击发送请求 <text>接收到的userName：{{userName}}</text> <text>\n</text> <text>接收到的age：{{age}}</text>首页页面逻辑（pages/index/index.js）：Page({ data: { userName: '', age: '' }, sendRequest: function() { wx.request({ url: "https://wwc.6os.net/addons/test_api/api.php", data: { userName: "多仔", age: "18" }, success: respData => { console.log(respData) this.setData({ userName: respData.data.data.userName, age: respData.data.data.age }) } }) } })示例效果：背景音频 APIwx.getBackgroundAudioManager 方法用于获取播放背景音频的实例 BackgroundAudioManager，通过该实例的相关属性和方法实现背景音频的播放。BackgroundAudioManager 实例的基本属性：名称描述src背景音频的数据源，设置了 src 时会自动播放，支持 M4A、AAC、MP3、WAVstartTime背景音频开始播放的位置，单位为秒title背景音频标题，用于原生音频播放器的背景音频标题playbackRate播放速率，默认值为 1，范围为 0.5～2.0duration只读属性，当前背景音频的长度，单位为秒currentTime只读属性，当前背景音频的播放位置，单位为秒paused只读属性，当前是否暂停或停止BackgroundAudioManager 实例的基本方法：名称描述play()播放背景音频pause()暂停背景音频seek()跳转到指定位置stop()停止背景音频。onCanplay()背景音频进入可以播放状态的事件时触发onWaiting()监听背景音频加载中事件，当背景音频因为数据不足需要停下来加载时会触发onError()监听背景音频播放错误事件onPlay()监听背景音频播放事件onPause()监听背景音频暂停事件onSeeking()监听背景音频开始跳转操作事件onEnded()监听背景音频自然播放结束事件onStop()监听背景音频停止事件onTimeUpdate()监听背景音频播放进度更新事件，只有微信小程序在前台时会调用在使用背景音频 API 之前，还需要在微信小程序全局配置文件（app.json）中配置 requireBackgroundModes 属性，以开启后台音频播放功能。示例：wx.getBackgroundAudioManager全局配置文件（app.json）："requireBackgroundModes": ["audio"]首页页面结构（pages/index/index.wxml）： 开始播放背景音乐 暂停播放背景音乐 停止播放背景音乐 首页页面逻辑（pages/index/index.js）：Page({ audioBam: null, onReady() { this.audioBam = wx.getBackgroundAudioManager() this.audioBam.onPlay(() => { console.log("背景音乐开始播放") }) this.audioBam.onPause(() => { console.log("背景音乐暂停播放") }) this.audioBam.onStop(() => { console.log("背景音乐停止播放") }) }, playBackgroundMusic() { this.audioBam.title = "AudioBam" this.audioBam.src = "https://wwc.6os.net/addons/test_api/%E9%BB%84%E6%98%8F.mp3" }, pauseBackgroundMusic() { this.audioBam.pause() }, stopBackgroundMusic() { this.audioBam.stop() } })示例效果：录音 APIwx.getRecorderManager 方法用于获取全局唯一的录音管理器实例 RecorderManager，通过该实例的相关方法实现录音。RecorderManager 实例的基本方法：名称描述start()开始录音pause()暂停录音resume()继续录音stop()停止录音onStart()监听开始录音事件onResume()监听继续录音事件onPause()监听暂停录音事件onStop()监听停止录音事件该事件回调函数可以接收一个 res 参数，通过 res.tempFilePath 可以获取录音文件的临时路径onError()监听录音错误事件示例：wx.getRecorderManager首页页面结构（pages/index/index.wxml）： 开始录音 停止录音 首页页面逻辑（pages/index/index.js）：Page({ recorderManager: null, onReady() { this.recorderManager = wx.getRecorderManager() this.recorderManager.onStart(() => { console.log("开始录音") }) this.recorderManager.onStop((res) => { console.log("结束录音") console.log("录音文件临时路径：" + res.tempFilePath) }) }, startRecording() { this.recorderManager.start() }, stopRecording() { this.recorderManager.stop() } })示例效果：音频 APIwx.createInnerAudioContext 方法用于获取音频播放实例 InnerAudioContext，通过该实例的相关属性和方法实现音频播放，音频播放不支持后台播放。InnerAudioContext 实例的基本属性：名称描述src音频的数据源，支持 M4A、AAC、MP3、WAVstartTime音频开始播放的位置，单位为秒playbackRate播放速率，默认值为 1，范围为 0.5～2.0duration只读属性，当前音频的长度，单位为秒currentTime只读属性，当前音频的播放位置，单位为秒paused只读属性，当前是否暂停或停止autoplay是否自动开始播放，默认值为 falseloop是否循环播放，默认值为 falsevolume音量，默认值为 1，范围为 0～1InnerAudioContext 实例的基本方法：名称描述play()播放音频pause()暂停音频seek()跳转到指定位置stop()停止音频destroy()销毁当前音频播放实例onCanplay()音频进入可以播放状态的事件时触发onWaiting()监听音频加载中事件，当音频因为数据不足需要停下来加载时会触发onError()监听音频播放错误事件onPlay()监听音频播放事件onPause()监听音频暂停事件onSeeking()监听音频开始跳转操作事件onEnded()监听音频自然播放结束事件onStop()监听音频停止事件onTimeUpdate()监听音频播放进度更新事件，只有微信小程序在前台时会调用示例：wx.createInnerAudioContext首页页面结构（pages/index/index.wxml）： 开始录音 停止录音 播放录音 首页页面逻辑（pages/index/index.js）：Page({ recorderManager: null, audioCtx: null, data: { audioUrl: '' }, onReady() { this.audioCtx = wx.createInnerAudioContext() // ... this.recorderManager.onStop((res) => { // ... this.setData({ audioUrl: res.tempFilePath }) }) this.audioCtx.onPlay(() => { console.log("开始播放录音") }) }, // ... playRecord() { this.audioCtx.src = this.data.audioUrl this.audioCtx.play() } }) 示例效果：选择媒体 APIwx.chooseMedia 方法用于选择图片或视频。wx.chooseMedia 方法的基本选项：名称描述count最多可以选择的文件个数，默认值为 9mediaType文件类型，默认值为 ['image', 'video']支持 image（图片）、video（视频）、mix（可以同时选择图片和视频）sourceType图片和视频的来源，默认值为 ['album', 'camera']支持 album（相册）、camera（相机拍摄）maxDuration拍摄视频最长拍摄时间，单位为秒，默认值为 10，范围为 3～60，不限制相册camera仅在 sourceType 为 camera 时生效，可设置使用前置或后置摄像头，默认值为 back（后置摄像头）success接口调用成功的回调函数该事件回调函数可以接收一个 res 参数，通过 res.tempFiles 可以获取媒体文件的临时路径fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.chooseMedia首页页面结构（pages/index/index.wxml）：<image src="{{imageUrl}}" style="width: 300rpx; height: 300rpx;"></image> 选择图片 首页页面逻辑（pages/index/index.js）：Page({ data: { imageUrl: '' }, chooseImage() { wx.showToast({ title: "请选择图片", icon: "none" }) wx.chooseMedia({ count: 1, mediaType: ["image"], sourceType: ["album"], success: (res) => { console.log(res.tempFiles) this.setData({ imageUrl: res.tempFiles[0].tempFilePath }) wx.showToast({ title: "图片已选择" }) } }) } })示例效果：图片预览 APIwx.previewImage 方法用于预览图片，预览过程中，用户可以进行保存图片、发送给朋友等操作。wx.previewImage 方法的基本选项：名称描述urls需要预览等图片链接数组，支持 http/https 网络图片地址，不支持本地图片地址showmenu是否显示长按菜单，默认值为 truecurrent当前显示图片的链接，默认值为 urls 的第一张success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.previewImage首页页面结构（pages/index/index.wxml）： 预览图片 首页页面逻辑（pages/index/index.js）：Page({ // ... previewImage() { wx.previewImage({ urls: [this.data.imageUrl] }) } }) 示例效果：文件上传 APIwx.uploadFile 方法用于发送 POST 请求以上传文件。wx.uploadFile 方法的基本选项：名称描述url开发者服务器地址headerHTTP 请求头timeout请求超时时间，单位为毫秒name文件对应的 key，开发者在服务器端可以通过这个 key 获取文件的二进制内容filePath要上传的文件资源路径（本地资源）success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.uploadFile首页页面结构（pages/index/index.wxml）： 上传图片 首页页面逻辑（pages/index/index.js）：Page({ // ... uploadImage() { wx.uploadFile({ url: "https://wwc.6os.net/addons/test_api/upload.php", filePath: this.data.imageUrl, name: "file", success: (res) => { console.log(res) } }) } }) 示例效果：文件下载 APIwx.downloadFile 方法用于下载文件。wx.downloadFile 方法的基本选项：名称描述url下载资源的 URL 地址headerHTTP 请求头timeout请求超时时间，单位为毫秒filePath指定文件下载后存储的路径（本地路径）success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，无论成功还是失败都会执行示例：wx.downloadFile首页页面结构（pages/index/index.wxml）： 下载图片 首页页面逻辑（pages/index/index.js）：Page({ // ... downloadImage() { wx.downloadFile({ url: "https://wwc.6os.net/addons/test_api/avatar.jpg", success: (res) => { console.log(res) this.setData({ imageUrl: res.tempFilePath }) } }) } }) 示例效果：canvas 组件canvas 组件用于自定义绘制图形、创建图片特效和动画，支持 2D 和 WebGL 的绘图。canvas 组件的基本用法： canvas 组件的基本属性：名称描述type指定 canvas 组件的类型，支持 2D 和 WebGLcanvas-idcanvas 组件的唯一标识，若指定了 type 属性，则无需再指定该属性disable-scroll当在 canvas 组件中移动时且有绑定手势事件时，禁止屏幕滚动及下拉刷新，默认值为 false只定义 canvas 组件，canvas 组件是空白的，要想在 canvas 组件中绘制图形，必须在 JavaScript 中使用画布 API 控制 canvas 组件以绘制图形。画布 API使用画布 API，需要先通过 wx.createSelectorQuery 及相关方法获取 Canvas 实例，然后通过 Canvas 实例获取渲染上下文实例 RenderingContext，最后通过 RenderingContext 实例的相关属性和方法完成绘图操作。获取渲染上下文实例 RenderingContext 的基本用法：wx.createSelectorQuery() // 创建节点选择器 .select("#myCanvas") // 选择Canvas节点 .fields({ node: true, size: true }) // 返回节点对象和尺寸信息 .exec(res => { // 执行所有的请求，返回执行结果 // 获取Canvas实例 const canvas = res[0].node // 获取获取渲染上下文实例RenderingContext const ctx = canvas.getContext("2d") })RenderingContext 实例的基本属性：名称描述width画布宽度height画布高度fillStyle设置或返回用于填充绘画的颜色、渐变或模式strokeStyle设置描边颜色lineWidth设置或返回当前线条的宽度font设置或返回文本内容的当前字体属性RenderingContext 实例的基本方法：名称描述rect(x, y, w, h)创建矩形fillRect(x, y, w, h)绘制“被填充”的矩形strokeRect(x, y, w, h)绘制矩形，无填充clearRect(x, y, w, h)在给定的矩形内清除指定像素stroke()绘制当前路径的边框beginPath()开始创建一个路径需要调用 fill 或者 stroke 才会使用路径进行填充或描边closePath()关闭一个路径，会连接起点和终点如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染moveTo(x, y)把路径移动到画布中的指定点，不创建线条。arc(x, y, r, sAngle, eAngle)创建一条弧线创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI用 stroke 或者 fill 方法来在 canvas 中画弧线rotate(rotate)以原点为中心顺时针旋转当前坐标轴，多次调用旋转的角度会叠加translate(x, y)对当前坐标系的原点 (0, 0) 进行变换默认的坐标系原点为页面左上角fillText(text, x, y, maxWidth)在画布上绘制被填充的文本restore()恢复之前保存的绘图上下文save()保存绘图上下文示例：canvas 组件首页页面结构（pages/index/index.wxml）： 首页页面逻辑（pages/index/index.js）：Page({ onReady() { wx.createSelectorQuery() .select("#myCanvas") .fields({ node: true, size: true }) .exec(res => { const canvas = res[0].node const ctx = canvas.getContext("2d") ctx.fillStyle = "rgba(0, 0, 200, 0.5)" ctx.fillRect(100, 100, 100, 50) }) } })示例效果：
微信小程序开发实战之 03-微信小程序页面交互
AI 摘要 本文系统梳理微信小程序页面交互核心机制：从 App 与 Page 注册、生命周期与事件回调，到数据绑定、setData 同步渲染、条件与列表渲染、WXS 轻量脚本及模块化复用，辅以触底加载、下拉刷新、事件冒泡、双向绑定等实战示例，帮助开发者快速构建高效、可维护的小程序页面。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结微信小程序框架接口App 函数在微信小程序中，若要在微信小程序启动、显示、隐藏时执行某些操作，或者在各个页面中需要共享一些数据时，可以通过 App 函数来实现。App 函数用于注册一个微信小程序，该函数必须在 微信小程序入口文件（app.js）中调用，且只能调用一次。App({})App 函数的参数时一个对象，通过该对象可以指定应用生命周期回调函数和保存一些共享数据。App 函数中的基本生命周期回调函数：名称描述onLaunch监听微信小程序初始化，微信小程序初始化完成时触发，全局只触发一次onShow监听微信小程序启动或切前台，微信小程序启动或从后台进入前台时触发onError错误监听函数，微信小程序脚本错误或者 API 调用报错时触发onHide监听微信小程序切后台，微信小程序从前台进入后台时触发onPageNotFound页面不存在监听函数，微信小程序要打开的页面不存在时触发在页面的 JS 文件中，通过 getApp 函数可以获取微信小程序全局唯一的 App 实例。通过 getApp 函数获取 App 实例后，可以访问 App 实例的属性或调用 App 实例的方法。获取 App 实例的基本用法：const app = getApp()Page 函数在微信小程序中，页面交互的代码写在页面 JS 文件中，每个页面都需要通过 Page 函数进行注册。Page 函数只能写在微信小程序每个页面对应的 JS 文件中，并且每个页面只能注册一个。Page 函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。Page 函数的基本用法：Page({ // 页面初始数据 data: {}, // 页面生命周期回调函数 onLoad() { }, // 页面事件处理函数 onPullDownRefresh() { } // ... })页面初始数据微信小程序提供了 Mustache 语法（双大括号语法）用于实现数据绑定，可将 data 中的数据通过 Mustache 语法输出到页面上。示例：页面初始数据首页页面逻辑（pages/index/index.js）：Page({ data: { message: 'hello, world～' } })首页页面结构（pages/index/index.wxml）：<text>{{message}}</text>示例效果：页面生命周期在微信小程序中，页面的生命周期是指每个页面“加载 → 渲染 → 销毁”的过程，每个页面都有生命周期，如果想要在某个特定的时机进行特定的处理，则可以通过页面生命周期回调函数来完成。页面生命周期回调函数用于实现在特定的时间点执行特定的操作，随着页面生命周期的变化，页面生命周期回调函数会自动执行。微信小程序的基本页面生命周期回调函数：名称描述onLoad页面加载时触发，且一个页面只会在创建完成后调用一次onShow页面显示时触发onReady页面初次渲染完成时触发，一个页面只会调用一次onHide页面隐藏时触发onUnload页面卸载释放时触发示例：页面生命周期首页页面逻辑（pages/index/index.js）：Page({ onLoad() { console.log('页面加载') }, onShow() { console.log('页面显示') } })示例效果：页面事件处理函数页面事件处理函数用于监听用户的行为，如上拉、下拉、滚动页面等。微信小程序的基本页面事件处理函数：名称描述onPullDownRefresh监听用户下拉刷新事件onReachBottom监听页面上拉触底事件onPageScroll监听页面滚动事件onShareAppMessage用户点击右上角三点，选择转发给朋友时触发事件上拉触底在微信小程序中，通过手指在屏幕上的上拉滑动操作，当滚动条到达距离页面底部特定的距离时，就会触发上拉触底事件，从而可以加载更多数据或执行相关的操作。微信小程序提供了 onReachBottom 事件处理函数，用于监听当前页面的上拉触底事件。在默认情况下，触发上拉触底事件时，滚动条距离页面底部的距离为 50px，即上拉触底距离为 50px，在全局配置文件（app.json）或页面配置文件（pages/xxx/xxx.json）中可以修改上拉触底的距离。示例：上拉触底全局配置文件（app.json）："window": { "onReachBottomDistance": 20 }首页页面配置文件（pages/index/index.json）：{ "onReachBottomDistance": 20 }首页页面结构（pages/index/index/wxml）：<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar> <view> <text>枯藤老树昏鸦\n</text> <text>小桥流水人家\n</text> <text>古道西风瘦马\n</text> <text>夕阳西下\n</text> <text>断肠人在天涯\n\n</text> </view>首页页面逻辑（pages/index/index.js）：Page({ onReachBottom: function() { console.log("滑到最底部啦...") } })示例效果：下拉刷新在微信小程序中，通过手指在屏幕上的下拉滑动操作，当下拉页面达到顶部时，再进行下拉，从而实现页面数据的重新加载。微信小程序提供了 onPullDownRefresh 事件处理函数，用于监听当前页面的下拉刷新事件。在默认情况下，微信小程序没有启用下拉刷新，在全局配置文件（app.json）或页面配置文件（pages/xxx/xxx.json）中可以启用下拉刷新。示例：下拉刷新全局配置文件（app.json）："window": { "enablePullDownRefresh": true },首页页面配置文件（pages/index/index.json）：{ "enablePullDownRefresh": true }首页页面逻辑（pages/index/index.js）：Page({ onPullDownRefresh() { console.log("下拉刷新啦...") } })示例效果：事件绑定在微信小程序中，事件是视图层到逻辑层的通信方式，通过给组件绑定事件，可以监听用户的操作行为，然后在对应的事件处理函数中进行相应的业务处理。若要为组件绑定事件，可以通过为组件添加“bind + 事件名称”、“bind: + 事件名称”、“catch + 事件名称”、“catch: + 事件名称”属性来完成，属性的值为事件处理函数，当组件的事件被触发时，会主动执行事件处理函数。bind 和 catch 的区别在于 bind 绑定的事件不会阻止冒泡事件向上冒泡，而 catch 绑定的事件可以阻止冒泡事件向上冒泡。微信小程序的基本事件：类别名称描述点击事件tap手指触摸后马上离开时触发长按事件longpress手指触摸后，超过 350ms 再离开时触发如果指定了事件回调函数并触发了这个事件，tap 事件将不被触发触摸事件touchstart手指触摸动作开始时触发 touchmove手指触摸后移动时触发 touchcancel手指触摸动作被打断时触发 touchend手指触摸动作结束时触发其他事件input键盘输入时触发 submit携带 form 组件中的数据触发 submit 事件示例：事件绑定首页页面结构（pages/index/index.wxml）： 点我弹出消息 首页页面逻辑（pages/index/index.js）：Page({ showMessage() { console.log("按钮被点击啦") } })示例效果：事件对象当事件处理函数被调用时，微信小程序会将事件对象以参数的形式传给事件处理函数。事件对象的基本属性：名称描述type事件类型timeStamp事件生成的时间戳target触发该事件的源头组件的一些属性值的集合，实际触发事件的组件具体指向触发事件的元素，这个元素有可能是子组件，也有可能是父组件，主要取决于执行动作的区域currentTarget当前事件所绑定的组件的一些属性值的集合，即事件绑定所在的组件无论点击的是子元素还是父元素，其始终指向绑定了该事件的组件mark事件标记数据detail自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入等示例：事件对象首页页面结构（pages/index/index.wxml）： 首页页面逻辑（pages/index/index.js）：Page({ input(e) { console.log(e) } })示例效果：data-* 自定义属性微信小程序事件处理函数在执行时，可以通过自定义属性来进行传参。data- 是一个自定义属性，data- 自定义属性实际上是由 data- 前缀加上一个自定义的属性名组成的，属性名中如果有多个单词，用连字符“-”连接，属性值表示要传参的数据。在事件处理函数中通过 target 或 currentTarget 对象的 dataset 属性可以获取 data-* 自定义属性的数据。示例：data-* 自定义属性首页页面结构（pages/index/index.wxml）： 点我获取信息 首页页面逻辑（pages/index/index.js）：Page({ showInfo(e) { console.log("id：" + e.target.dataset.id) console.log("nickName：" + e.target.dataset.nickName) } })示例效果：this 关键字在微信小程序开发过程中，有时需要在函数中访问页面中定义的一些数据，或者调用页面中定义的一些函数，此时可以通过 this 关键字来实现，this 关键字代表当前页面对象。示例：this 关键字首页页面结构（pages/index/index.wxml）： 点我获取信息 首页页面逻辑（pages/index/index.js）：Page({ data: { nickName: "多仔" }, hello() { console.log("欢迎访问我的小程序") }, showInfo() { this.hello() console.log("我的昵称是：" + this.data.nickName) } })示例效果：setData 函数为了实现在数据变化时使页面同步更新，微信小程序提供了 setData 函数，可以立即改变 data 中的数据，并通过异步的方式将数据渲染到页面上。直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。setData 函数的基本用法：this.setData({数据键: 数据值}, [页面更新渲染完毕后的回调函数])示例：setData 函数首页页面结构（pages/index/index.wxml）： <text>以上输入框输入的内容是：{{content1}}</text> <text>\n\n</text> <text>以上输入框输入的内容是：{{content2}}</text>首页页面逻辑（pages/index/index.js）：Page({ data: { content1: "", content2: "" }, input1(e) { this.data.content1 = e.detail.value }, input2(e) { this.setData({ content2: e.detail.value }) } })示例效果：模块化在微信小程序中，为了提高代码的可复用性，通常会将一些公共的代码抽离成单独的 JS 文件，作为模块使用，每一个 JS 文件均为一个模块。创建模块的基本用法：module.exports = { ... }引入模块的基本用法：var 模块名称 = require("模块文件路径")示例：模块化日志模块（utils/log.js）：module.exports = { debug(message) { console.log("[调试日志]", message) }, warning(message) { console.log("[警告日志]", message) } }首页页面逻辑（pages/index/index.js）：var log = require("../../utils/log") Page({ onLoad() { log.debug("debug message") log.warning("warning message") } })示例效果：WXML 语法基础双向数据绑定在 WXML 中，普通的属性的绑定是单向的。在表单处理中，使用表单事件 + setData 函数，可以立即改变 data 中的数据，并通过异步的方式将数据渲染到页面上以实现双向数据绑定，但该方法较为复杂。微信小程序提供了简易双向绑定机制，可以快速实现双向数据绑定，简易双向绑定机制的属性值只能是一个单一字段的绑定，不能写 data 路径，不支持数组和对象的写法。简单双向绑定的基本用法： 示例：双向数据绑定首页页面结构（pages/index/index.wxml）： <text>以上输入框输入的内容是：{{content}}</text>首页页面逻辑（pages/index/index.js）：Page({ data: { content: "" } })示例效果：条件渲染在微信小程序开发过程中，如果需要根据不同的判断结果显示不同组件，可以使用条件渲染来实现，条件渲染通过标签的 wx:if 控制属性来完成。wx:if 属性的基本用法：<view wx:if="{{ 判断条件 }}">...</view> <view wx:elseif="{{ 判断条件 }}">...</view> <view wx:else>...</view>block 标签当使用一个判断条件决定是否显示或隐藏多个组件时，可以使用 block 标签将多个组件包裹起来。block 标签可以创建一个容器，该标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接收控制属性，提高渲染性能。block 标签的基本用法：<block wx:if="{{ 判断条件 }}"> <view>...</view> <view>...</view> </block>示例：block 标签首页页面结构（pages/index/index.wxml）：<block wx:if="{{isShow}}"> <text>hello，微信小程序</text> </block> 点我显示/隐藏 首页页面逻辑（pages/index/index.js）：Page({ data: { isShow: false }, show() { this.setData({ isShow: !this.data.isShow }) }, })示例效果：hidden 属性hidden 属性也可以控制组件的显示与隐藏。hidden 属性的基本用法：<view hidden="{{ 判断条件 }}">...</view>hidden 与 wx:if 的区别：wx:if 控制属性的初始渲染条件为 false，只有条件第一次变为 true 的时候才开始渲染，hidden 属性所在的组件始终会被渲染，只是简单的控制显示与隐藏。wx:if 控制属性有更大的切换开销而 hidden 属性有更高的初次渲染开销。在需要频繁切换显示和隐藏的情境下用 hidden 更好，而如果运行时条件不太可能会改变则用 wx:if 控制属性更好。列表渲染列表渲染通过 wx:for 控制属性来实现。wx:for 属性的基本用法：<view wx:for="{{要遍历的数组}}" wx:for-item="遍历元素别名，默认为item" wx:for-index="遍历元素下标变量名，默认为index" wx:key="唯一标识符"></view>wx:key 属性用于为每一项设置唯一标识，提高列表渲染的效率。item 本身是一个具有唯一性的字符串或数字，唯一标识符可以是 *this 表示 item 本身。item 本身是一个对象，唯一标识符可以是对象中的一个值具有唯一性的属性的名称。示例：列表渲染首页页面结构（pages/index/index.wxml）：<view wx:for="{{userList}}" wx:key="id"> {{item.id}} -> {{item.userName}} </view>首页页面逻辑（pages/index/index.js）：Page({ data: { userList: [ { id: 1, userName: "唐僧" }, { id: 2, userName: "孙悟空" }, { id: 3, userName: "猪悟能" }, { id: 4, userName: "沙悟净" } ] } })示例效果：include 标签include 标签用于引用其他文件的 WXML 代码，相当于把引用的代码复制到 include 标签的位置。include 标签的基本用法：<include src="WXML文件路径" />示例：include 标签首页头部结构（pages/index/header.wxml）：<swiper> <swiper-item> <view style="background-color: blue; height: 200px;">0</view> </swiper-item> <swiper-item> <view style="background-color: green; height: 200px;">1</view> </swiper-item> <swiper-item> <view style="background-color: red; height: 200px;">2</view> </swiper-item> </swiper>首页底部结构（pages/index/footer.wxml）：<view style="margin-top: 120rpx; text-align: center;"> ©️ 版权所有 </view>首页页面结构（pages/index/index.wxml）：<include src="header.wxml"/> <view> 欢迎访问我的小程序 </view> <include src="footer.wxml" />示例效果：WXSWXS 概述WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 主要用于在视图层（WXML）中运行类 JavaScript 脚本，以实现对数据的处理和变换，避免了跨线程通信的开销。WXS 的特点：WXS 在设计时借鉴了 JavaScript 的语法，但是 WXS 和 JavaScript 本质上是完全不同的两种语言。WXS 有 8 种数据类型，包括 number 数值、string 字符串、boolean 布尔、object 对象、function 函数、array 数组、date 日期、regexp 正则。WXS 不支持 let、const、解构赋值、展开运算符、尖头函数、对象属性简写等语法，WXS 支持 var 定义变量、普通 function 函数等语法。WXS 遵循 CommonJS 规范。WXS 经常与 Mustache 语法配合使用，但是在 WXS 中定义的函数不能作为组件的事件回调函数。WXS 代码运行的环境和其他 JavaScript 代码运行的环境是隔离的，在 WXS 代码中不能调用页面的 JS 文件定义的函数，不能调用微信小程序提供的 API。WXS 代码在 iOS 设备上的执行速度比 JavaScript 快 2-20 倍，在 Android 设备上的执行速度和 JavaScript 无差异。WXS 使用WXS 代码可以写在页面的 WXML 文件的 wxs 标签内（即内嵌 WXS 脚本），也可以写在以 .wxs 为后缀名的文件中（外联 WXS 脚本）。每一个 wxs 标签和 .wxs 文件均视为一个单独的模块，有自己独立的作用域。内嵌 WXS 脚本的基本用法：<wxs module="模块名称"> module.exports = { ... } <wxs>外联 WXS 脚本的基本用法：<wxs module="模块名称" src="WXS文件路径"></wxs>示例：WXS字符串工具脚本（utils/strutil.wxs）：module.exports = { toUpperCase: function(str) { return str.toUpperCase() } }首页页面结构（pages/index/index.wxml）：<wxs module="strutil1" src="../../utils/strutil.wxs"></wxs> <wxs module="strutil2"> module.exports = { toLowerCase: function(str) { return str.toLowerCase() } } </wxs> <view>{{strutil1.toUpperCase("weixin")}}</view> <view>{{strutil2.toLowerCase("WEIXIN")}}</view>示例效果：
微信小程序开发实战之 02-微信小程序页面制作
AI 摘要 本文系统梳理微信小程序页面制作全流程：先以 WXML 搭建结构，对比 HTML 差异；再用 WXSS 设定样式，详解 rpx、vw/vh 适配与样式导入；接着配置 app.json 管理页面路径、导航栏、标签栏；最后逐一演示 view、scroll-view、swiper、image、video、form 及 input、button 等核心组件的用法与属性，并介绍 WebView 与 Skyline 双渲染引擎的选择策略，为高效开发提供完整指南。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结页面制作概述WXML 概述在制作微信小程序页面时，页面的结构可以用 WXML 来实现。WXML 是微信团队为微信小程序开发而设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。WXML 与 HTML 的区别：HTML 和 WXML 使用的标签不同。HTML 经常使用 div 标签搭建页面结构，而 WXML 则使用 view 标签搭建页面结构。HTML 经常使用 span 标签定义行内文本 ，而 WXML 则使用 text 标签定义行内文本 。WXML 提供了和 Vue.js 中模板语法类似的模板语法，如数据绑定、列表渲染、条件渲染等。HTML 页面可以在浏览器中预览，而 WXML 页面仅能在微信客户端和微信开发者工具中预览。WXML 中的单标签必须在结尾 > 前面加上 /，否则微信开发者工具会报语法错误，而 HTML 中允许省略单标签 > 前面的 /。WXML 中所使用的标签是微信小程序定义的标签，应避免使用 HTML 标签，这样才能保证页面被正确转译。WXSS 概述微信小程序提供了一套类似 CSS 的语言 WXSS，通过 WXSS 可以美化页面样式。WXSS 与 CSS 的区别：不同的手机屏幕分辨率不同，如果用 CSS 中的 px 单位，会遇到屏幕适配的问题，需要手动进行像素单位换算，而微信小程序提供了一个新的单位 rpx，使用 rpx 单位可以很轻松地适配各种手机屏幕。在微信小程序中，项目根目录中的 app.wxss 作为全局样式，会作用于当前微信小程序的所有页面，而局部页面的 WXSS 样式仅对当前页面生效，CSS 则没有这样的功能。在 WXSS 中设置背景图片的时候，可以使用网络图片或者以 Base64 格式编码的图片，不能使用本地图片。rpx 单位rpx（Responsive Pixel，自适应像素）是微信小程序独有的、用来解决屏幕适配问题的尺寸单位。rpx 单位的设计思想是把所有设备的屏幕在宽度上等分为 750 份，即屏幕的总宽度为 750rpx，微信小程序在不同设备上运行的时候，会自动把 rpx 单位换算成对应的像素单位来渲染，从而实现屏幕适配。vw/vh 单位在使用 CSS 编写移动端的页面样式时，由于不同手机的屏幕宽高不同，屏幕适配会比较麻烦，针对这类型问题，通过视口单位可以有效解决。视口表示可视区域的大小，视口单位主要包括 vw（Viewport Width）和 vh（Viewport Height），vw、vh 是相对长度单位，永远以视口作为参考。在微信小程序中也可以使用 vw 和 vh 单位，使用视口单位时，系统会将视口的宽度和高度分为 100 份，1vw 占用视口宽度的百分之一，1vh 占用视口高度的百分之一。样式导入为了避免样式代码冗余，可以将相同的样式代码抽为公共样式，放到一个单独的文件中，通过只修改公共样式实现对所有相关页面样式的修改，从而节约时间、方便管理。导入公共样式的基本用法：@import "公共的wxss路径";页面路径配置在微信小程序中可以通过全局配置文件（app.json）中的 pages 配置项来配置微信小程序的页面路径。pages 配置项是一个数组，该数组用于指定微信小程序由哪些页面组成，数组中的每一个元素都对应一个页面的路径信息。pages 数组中的第一项为微信小程序的初始页面，开发者可以手动调整数组中元素的顺序以更换初始页面。示例：页面路径配置全局配置文件（app.json）：{ "pages": [ "pages/index/index" ] }新建微信小程序页面的方法：通过 pages 数组中新增一项来新增页面。通过项目资源管理器新增页面。删除微信小程序页面的方法：对页面文件直接进行删除操作，不会触发代码的自动更新效果。删除页面需要手动修改全局配置文件（app.json）中的 pages 配置项。微信小程序页面组件页面组件概述微信小程序页面和普通网页都是通过标签来定义页面结构的，但是在微信小程序开发中，更习惯将这些标签称为组件，这些组件自带微信风格的 UI 样式和特定功能效果。微信小程序提供了丰富的组件，通过组合这些组件可以进行高效开发。view 组件view 组件即视图容器，用于定义文档中的分区或节，实现页面的布局效果。view 组件的基本用法：<view>...</view>view 组件的基本属性：名称描述hover-class指定手指按下去的样式类当该属性值为 none 时，没有点击态hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态hover-start-time手指按住后多久出现点击态，单位为毫秒hover-stay-time手指松开后点击态保留时间，单位为毫秒示例：view 组件首页页面结构（pages/index/index.wxml）：<view class="container"> <view hover-class="font">按下我后会改变颜色</view> <view hover-class="font" hover-start-time="2000">按下我后会改变颜色(2s后)</view> </view>首页页面样式（pages/index/index.wxss）：.font { color: red; }示例效果：scroll-view 组件scroll-view 组件用于实现滚动效果，支持横向滚动和纵向滚动。scroll-view 组件的基本用法：<scroll-view>...</scroll-view>scroll-view 组件的基本属性：名称描述scroll-x允许横向滚动，默认值为 falsescroll-y允许纵向滚动，默认值为 falsebindscrolltoupper滚动到顶部/左边时触发的事件bindscrolltoower滚动到底部/右边时触发的事件bindscroll滚动时触发的事件当允许横向滚动、纵向滚动后，还需要使 scroll-view 组件中内容的宽度和高度大于 scroll-view 组件本身的宽度和高度，这样才能滚动。示例：scroll-view 组件首页页面结构（pages/index/index.wxml）：<scroll-view scroll-x> <view style="width: 200%; height: 100px; background-image: linear-gradient(to bottom right, red, yellow);"></view> </scroll-view>示例效果：image 组件image 组件用于显示图片。image 组件的基本用法：<image src="..."></image>image 组件的基本属性：名称描述src图片资源地址，可以是本地路径或 URL 地址mode图片剪裁、缩放的模式可选：scaleToFill（默认）：拉伸图片以充满整个 image 组件aspectFit：保持宽高比缩放图片，使图片的长边能完全显示出来aspectFill：保持宽高比缩放图片，只保证图片的短边能完全显示出来，另一个方向将会发生截取top/bottom/center/left/right：不缩放图片，只显示图片顶/底/中/左/右区域的部分show-menu-by-longpress是否显示长按图片显示菜单菜单提供发送给朋友、收藏、保存图片、搜一搜等功能binderror当错误发生时触发的函数bindload当图片载入完毕时触发示例：image 组件首页页面结构（pages/index/index.wxml）：<view class="container"> <image src="/images/avatar.jpg"></image> <image src="/images/avatar.jpg" mode="aspectFit"></image> </view>示例效果：swiper 组件swiper 组件用于实现滑块视图容器。swiper 组件一般与 swiper-item 组件搭配使用。swiper 组件表示滑块视图容器，用于创建一块可以滑动的区域。swiper 组件内部需要嵌套 swiper-item 组件，swiper-item 组件表示滑块视图内容。swiper-item 组件可以嵌套 image 组件、view 组件或其他组件。swiper 组件的基本用法：<swiper> <swiper-item> ... </swiper-item> ... </swiper>swiper 组件的基本属性：名称描述indicator-dots是否显示面板指示点indicator-color指示点颜色indicator-active-color当前选中的指示点颜色autoplay是否自动切换current当前所在滑块的下标索引interval自动切换时间间隔，单位为毫秒circular是否采用衔接滑动示例：swiper 组件首页页面结构（pages/index/index.wxml）：<swiper> <swiper-item> <view style="background-color: blue; height: 200px;">0</view> </swiper-item> <swiper-item> <view style="background-color: green; height: 200px;">1</view> </swiper-item> <swiper-item> <view style="background-color: red; height: 200px;">2</view> </swiper-item> </swiper>示例效果：text 组件text 组件用于定义行内文本。text 组件的基本用法：<text>...</text>text 组件的基本属性：名称描述user-select文本是否可选，默认值为 false示例：text 组件首页页面结构（pages/index/index.wxml）：<text user-select="true" style="font-size: 80rpx;">床前明月光</text> <text>\n</text> <text style="font-size: 80rpx;">疑似地上霜</text>示例效果：video 组件video 组件用于播放视频。video 组件的基本用法： video 组件的基本属性：名称描述src视频的资源地址，必须是远程视频路径duration指定视频时长controls是否显示默认播放控件autoplay是否自动播放loop是否循环播放muted是否静音播放poster视频封面的图片网络资源地址bindplay当开始/继续播放时触发 play 事件bindpause当暂停播放时触发 pause 事件object-fit当视频大小与 video 组件大小不一致时，调整视频的表现形式可选 contain 包含/fill 填充/cover 覆盖initial-time指定视频初始播放位置示例：video 组件首页页面结构（pages/index/index.wxml）： 示例效果：form 组件form 组件表示表单容器，没有任何样式，需要配合其他表单组件一起使用，用于提交用户输入的信息和选择的选项。form 组件的基本用法： ... form 组件的基本属性：名称描述bindsubmit表单提交时触发事件bindreset表单重置时触发事件button 组件button 组件表示按钮。button 组件的基本用法： ... button 组件的基本属性：名称描述size按钮的大小，可选 default/minitype按钮的样式类型，可选 primary/default/warnplain按钮是否镂空disabled按钮是否禁用form-type按钮类型，可选 submit/resethover-class指定按钮点击态效果示例：button 组件首页页面结构（pages/index/index.wxml）： 按钮 按钮 按钮 示例效果：input 组件input 组件表示输入框。input 组件的基本用法： input 组件的基本属性：名称描述value输入框的初始内容type输入框的类型可选 text/number/idcard/safe-password 等不同的类型会弹出不同的屏幕键盘password是否是密码类型placeholder输入框为空时的占位符placeholder-style指定 placeholder 的样式示例：input 组件首页页面结构（pages/index/index.wxml）： 示例效果：checkbox 组件checkbox 组件表示复选框。checkbox 组件一般与 checkbox-group 组件搭配使用。checkbox-group 组件表示多项选择器。checkbox-group 组件内部由多个 checkbox 组件组成，checkbox 组件表示一项选择器。建议将不同组的 checkbox 组件嵌套在不同的 checkbox-group 组件中，从而方便管理和区分。checkbox 组件的基本用法：<checkbox-group> <checkbox value="...">...</checkbox> ... </checkbox-group>checkbox 组件的基本属性：名称描述valuecheckbox 组件标识checked当前是否选中disabled当前是否禁止选中示例：checkbox 组件首页页面结构（pages/index/index.wxml）：<checkbox-group> <checkbox value="1">苹果</checkbox> <checkbox value="2">西瓜</checkbox> <checkbox value="3">芒果</checkbox> </checkbox-group>示例效果：radio 组件radio 组件表示单选框。radio 组件一般与 radio-group 组件搭配使用。radio-group 组件表示单项选择器。radio-group 组件内部由多个 radio 组件组成，radio 组件表示一项选择器。建议将不同组的 radio 组件嵌套在不同的 radio-group 组件中，从而方便管理和区分。radio 组件的基本用法：<radio-group> <radio value="...">...</radio> ... </radio-group>radio 组件的基本属性：名称描述valuecheckbox 组件标识checked当前是否选中disabled当前是否禁止选中示例：radio 组件首页页面结构（pages/index/index.wxml）：<radio-group> <radio value="1">苹果</radio> <radio value="2">西瓜</radio> <radio value="3">芒果</radio> </radio-group>示例效果：slider 组件slider 组件表示滑动选择器。slider 组件的基本用法：<slider/>slider 组件的基本属性：名称描述min最小值，默认值为 0max最大值，默认值为 100step步长，默认值为 1value当前取值，默认值为 0bindchange完成一次拖拽后触发的事件示例：slider 组件首页页面结构（pages/index/index.wxml）：<slider min="0" max="100" step="2" />示例效果：微信小程序页面配置Webview小程序一直以来采用的都是 AppService 和 WebView 的双线程模型的架构方式，WebView 主要负责页面的显示和一些基础的交互功能，而 AppService 则承担了更多的逻辑处理和数据运算等任务。当小程序基于 WebView 环境时，WebView 中的 DOM 树创建、JS 逻辑、CSS 解析、Layout、样式计算等内容都发生在同一个线程中。AppService + WebView 双线程模型架构可能存在问题：由于 JS 引擎限制，内存使用有要求且 JS 解释速度不一。渲染使用 WebView，对性能和功耗有一定要求，开销较大，无法提供媲美原生的流畅体验。在一些硬件配置较低的设备中运行小程序时可能出现无法运行或运行后卡顿的情况。Skyline为了进一步优化小程序性能，提供更为接近原生的用户体验，微信团队在 WebView 渲染之外新增了一个渲染引擎 Skyline，其使用更精简高效的渲染管线，并带来诸多增强特性，让 Skyline 拥有更接近原生渲染的性能体验。Skyline 渲染引擎的特点：界面更不容易被逻辑阻塞，进一步减少卡顿。无需为每个页面新建一个 JS 引擎实例（Webview），减少了内存、时间开销。框架可以在页面之间共享更多的资源，进一步减少运行时内存、时间开销。框架的代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销。借助其特点提供了新的页面组件，释放更多高级能力。一般情况下，微信开发者工具新建的微信小程序项目默认是 Skyline 模式，但如果遇到 Skyline 模式下的渲染兼容问题，可以尝试切换到 Webview 模式。Skyline 支持按页面粒度开启，也可以在全局配置文件（app.json）中开启。"renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel"微信开发者工具提供了对齐移动端的 Skyline 渲染引擎，支持 WXML 调试、 WXSS 样式错误提示、新增的特性等，可以在本地设置中开启 Skyline 渲染渲染调试。在选择渲染模式时，需根据实际场景需要进行权衡，追求性能选 Skyline，追求兼容性选 Webview，无论选择 Skyline 还是 Webview，均需要关注组件或 API 对于这两种模式的兼容和适配。由于目前 Skyline 存在的问题较多，兼容性并不是很好，故后续均采用 Webview 模式。{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }页面导航栏在微信小程序中，有时为了页面美观，需要更改导航栏的样式，可以通过页面配置文件（xx.json）或全局配置文件（app.json）对导航栏的样式进行配置。页面导航栏全局配置的基本用法："window": { "navigationBarTextStyle": "...", "navigationStyle": "default", "navigationBarBackgroundColor": "...", "navigationBarTitleText": "..." }页面导航栏局部配置的基本用法：{ "navigationBarTextStyle": "...", "navigationBarBackgroundColor": "...", "navigationBarTitleText": "..." }页面导航栏的基本配置项：名称描述navigationBarTitleText导航栏标题文字内容navigationBarBackgroundColor导航栏背景颜色navigationBarTextStyle导航栏标题颜色，只支持 black/whitenavigationStyle导航栏样式，只支持 default/custom示例：页面导航栏全局配置文件（app.json）："window": { "navigationBarTextStyle": "black", "navigationStyle": "default", "navigationBarBackgroundColor": "#ffffff", "navigationBarTitleText": "WeChat" }示例效果：首页页面配置文件（pages/index/index.json）：{ "navigationBarTitleText": "首页" }示例效果：navigation-bar 组件navigation-bar 组件是页面导航条配置节点，用于指定导航栏的一些属性，需要配合 page-meta 组件一起使用。page-meta 组件是页面属性配置节点，用于指定页面的一些属性、监听页面事件，page-meta 组件只能是页面内的第一个节点。navigation-bar 组件只能是 page-meta 组件内的第一个节点。navigation-bar 组件的基本用法：<page-meta> <navigation title="..." front-color="..." background-color="..."></navigation> </page-meta>navigation-bar 组件的基本属性：名称描述title导航栏标题文字内容background-color导航栏背景颜色front-color导航栏标题颜色，只支持 #ffffff 和 #000000示例：navigation-bar 组件首页页面结构（pages/index/index.wxml）：<page-meta> <navigation-bar title="欢迎页面" front-color="#000000" background-color="#FFFFFF"></navigation-bar> </page-meta>示例效果：页面标签栏通过标签栏可以很方便地在多个页面之间进行切换，在微信小程序的全局配置文件（app.json）中添加配置项即可实现标签栏配置。页面标签栏配置的基本用法："tabBar": { "color": "...", "selectedColor": "...", "borderStyle": "...", "backgroundColor": "...", "list": [{ "pagePath": "...", "text": "...", "iconPath": "...", "selectedIconPath": "..." }, ... ] }页面标签栏的基本配置项：名称描述color标签栏上的文字默认颜色selectedColor标签栏上的文字选中时的颜色backgroundColor标签栏的背景色borderStyle标签栏上边框的颜色，只支持 black/whitelist标签栏的列表数组中的每个元素都是一个代表标签按钮的对象数组中最少需要配置 2 个标签按钮，最多只能配置 5 个标签按钮position标签栏的位置，只支持 bottom 底部/top 顶部custom是否启用自定义标签栏页面标签栏标签按钮的基本属性：名称描述pagePath页面路径，页面必须在 pages 数组中预先定义text标签按钮上的文字iconPath未选中时的图标路径当 position 属性值为 top 时，不显示图标selectedIconPath选中时的图标路径当 position 属性值为 top 时，不显示图标示例：页面标签栏全局配置文件（app.json）："pages": [ "pages/index/index", "pages/about/about" ], "tabBar": { "color": "#000000", "selectedColor": "#FF0000", "borderStyle": "black", "backgroundColor": "#FFFFFF", "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/about/about", "text": "联系我们" }] }示例效果：
微信小程序开发实战之 01-微信小程序入门
AI 摘要 本文系统梳理微信小程序入门要点：先厘清“无需安装、用完即走”的产品定位及与原生 APP、HTML5 的优劣差异；继而介绍账号注册、AppID 获取、开发者工具安装与项目创建流程；剖析 pages 四文件结构、全局配置、组件与 API 能力；阐释渲染层、逻辑层、Native 层与 HTTPS、WebSocket 通信模型；最后覆盖成员权限、开发-体验-审核-线上四版本管理及发布上线三步骤，为初学者搭建完整知识框架。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结初识微信小程序微信小程序概述与传统的原生应用相比，微信小程序是一种全新的连接用户与服务的应用，它可以在微信内被便捷地获取和传播，同时具有良好的用户体验。微信小程序是运行在微信中的应用，是一种不需要下载即可使用的应用，用户通过微信扫一扫或者搜一搜即可打开，且每个微信小程序的体积非常小。微信小程序特点微信小程序是继原生 APP 和 HTML5 应用之后出现的一种新的应用形态。无需安装，触手可及：用户在使用微信小程序时无需安装，直接使用，不占用存储空间。用完即走，无需卸载：在使用微信小程序后，可以用完即走，无需卸载。名称唯一：某一个名称被注册后，另一个微信小程序将不能使用相同的名称。入口丰富：用户可以通过多种途径打开微信小程序。传播能力强：微信小程序入口丰富，再加上基于微信生态，使得微信小程序的传播能力强。微信小程序与原生 APP 相比：对比项微信小程序原生 APP下载安装无需下载安装需要从应用商店中下载安装体积大小体积小体积大跨平台可以不可以开发成本较低较高推广成本较低较高微信小程序与 HTML5 应用相比：对比项微信小程序HTML5 应用运行环境运行在微信上运行在浏览器上用户体验流畅度较好流畅度略差接口应用大量 API少量 API微信小程序发展前景微信自从出现以来，受到广大用户的喜爱，目前已成为人们必不可少的通信工具，对于用户而言，使用依托于微信的小程序的频率也越来越高。微信小程序的发展前景：生态体系：微信小程序已经形成了自己的生态体系，它连接了开发者、运营者、投资者等各领域的企业，并且接入了多个第三方服务的平台。微信小程序已经进入到了一个快速发展的阶段，未来的发展空间也越来越大。开放能力：在发展过程中，微信小程序不断自我完善， 为开发者开放了越来越多的接口，它可以适用于大多数的用户和场景，还可以方便开发者进行深度挖掘。同时，微信为小程序提供了越来越多的开放功能，例如微信扫码、微信支付、地理定位等，这对微信小程序的发展也会起到推动作用。用户黏性：微信小程序已经积累了大量用户，用户黏性高，使其他行业与微信用户有更好的连接，能够更好地与微信结合。微信小程序宿主环境宿主环境（Host Environment）是指程序运行所依赖的环境。微信小程序可以跨平台，因为微信小程序并不是一个直接安装在 Android 系统或 iOS 系统中的应用，而是运行在微信客户端上的应用，微信客户端给微信小程序提供的环境就是微信小程序的宿主环境。微信小程序的宿主环境为微信小程序提供了丰富的组件和 API，可以完成许多普通网页无法完成的功能。组件：用于快速搭建页面的结构，包括视图容器、基础内容、表单、导航、媒体、地图、画布、开放能力等。API：用于让开发者方便地调用微信提供的功能，如获取用户信息、微信登录、微信支付等。微信小程序开发准备注册微信小程序开发账号微信公众平台：https://mp.weixin.qq.com/开发微信小程序时，需要具备开发微信小程序的权限，可以先在微信公众平台上注册一个小程序账号，并根据微信公众号平台指引注册小程序账号，也可以使用小程序测试号。获取微信小程序 AppID在微信小程序中，AppID 又称为小程序 ID，是每个小程序的唯一标识，每个小程序账号只有一个 AppID，因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。下载与安装微信开发者工具微信公众平台为开发者提供了微信开发者工具，帮助开发者快速实现微信小程序的开发。下载微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html创建微信小程序项目在进行微信小程序开发前，需要先使用微信开发者工具创建一个空的小程序项目，创建完成后可以进行微信小程序代码的编写。微信小程序开发基础微信小程序项目结构项目创建完成后，微信开发者工具会自动创建微信小程序的项目工程结构。微信小程序项目的基本结构：名称描述components存放微信小程序的所有组件pages存放微信小程序的所有页面.eslintrc.js用于格式化代码，使代码风格保持一致app.js微信小程序的入口文件，用于描述微信小程序的整体逻辑app.json微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等app.wxss微信小程序的全局样式文件，文件可以为空project.config.json在微信开发者工具上做的任何配置都会写入这个文件中project.private.config.json用于保存微信开发者工具的私人配置，配置的优先级高于 project.config.jsonsitemap.json用于配置微信小程序及其页面是否允许被微信索引微信小程序页面组成一个微信小程序是由一个或多个页面组成的，这些页面被存放在 pages 目录中。一个页面由 4 个文件组成：xx.js、xx.json、xx.wxml 和 xx.wxss。JS：类似 JavaScript 语言，用于实现页面逻辑和交互。微信小程序中的 JS 不含 DOM 和 BOM，但它提供了丰富的 API，可以实现许多特殊的功能，如微信登录、音频播放、文件上传等。JSON：用于利用 JSON 语法对页面进行配置。WXML（WeiXin Markup Language，微信标记语言）：类似 HTML 语言，用于构建页面结构。WXSS（WeiXin Style Sheets，微信样式表）：类似 CSS 语言，用于设置页面样式。微信小程序通信模型微信小程序实现了渲染层、逻辑层和第三方服务器的通信。微信小程序的通信模型分为两个部分：第 1 部分是渲染层与逻辑层之间的通信，即将逻辑层的数据渲染到页面中。第 2 部分是逻辑层和第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据。微信小程序的架构层：渲染层（Webview）：负责小程序的页面展示，也就是用户实际看到的界面。Webview 是网页渲染引擎，小程序的每个页面通常对应一个独立的 Webview，用于解析 HTML、CSS 等前端资源，将界面元素渲染到屏幕上。逻辑层（JsCore）：负责小程序的业务逻辑处理，是小程序的“大脑”。JsCore 是 JavaScript 的运行环境，用于执行小程序的 JS 代码。渲染层与逻辑层之间通过微信客户端提供的特定通道通信，实现数据同步。Native 层：是微信客户端的原生层，属于底层支撑。Native 为渲染层和逻辑层提供基础能力，如设备硬件调用、本地存储、界面组件原生渲染等，小程序的许多核心 API（如 wx.getSystemInfo）本质上是通过调用 Native 层能力实现的。微信客户端：是整个小程序的运行载体，整合了 Webview、JsCore、Native 等模块，为小程序提供了统一、安全的运行环境，避免了直接暴露手机系统底层，保障了运行稳定性和安全性。HTTPS Request：小程序通过 HTTPS 协议向第三方服务器发送请求，获取或提交数据，这是小程序与后端服务交互的主要方式，且强制要求 HTTPS 以保障数据传输安全。Web Socket：用于实现小程序与第三方服务器的实时双向通信，适用于需要实时更新的场景。微信开发者工具使用认识微信开发者工具在完成微信小程序项目的创建后，可以使用微信开发者工具进行微信小程序的开发和调试。IntelliJ IDEA 也可以用于微信小程序的开发，IntelliJ IDEA 插件市场有微信小程序开发专用的插件，但仅限于在 IntelliJ IDEA 中编写微信小程序代码，微信小程序项目创建、预览、调试、发布均需要在微信开发者工具中进行操作。微信小程序项目设置在微信开发者工具中，可以对微信小程序的项目进行相关设置。微信小程序项目成员项目成员和体验成员的管理微信小程序的成员管理包括：项目成员：参与微信小程序开发、运行的成员，可登录微信小程序管理后台，包括运营者、开发者及和数据分析者。体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。项目成员的权限在一个微信小程序中，每个项目成员的权限各有不同，只有为每个项目成员分配了各自的权限，才能保证项目的正常进行。添加项目成员和体验成员在微信公众号平台后台，可以为微信小程序添加项目成员和体验成员。微信小程序的发布上线微信小程序版本微信小程序开发的流程一般是开发者编写代码并自测，直到微信小程序达到一个稳定可体验的状态，然后开发者把这个体验版本交给产品组和设计组的相关人员进行体验，并交给测试组的相关人员进行测试，修复程序的 Bug，最后发布微信小程序，供外部用户正式使用。根据开发流程，可将微信小程序划分为不同的版本。开发版本：使用微信开发者工具可将代码上传到开发版本中。体验版本：可以选择某个开发版本作为体验版本，只能存在一个体验版本。审核版本：只能有一份代码处于审核中。审核通过后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。线上版本：线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。微信小程序上线流程一个微信小程序从开发完到发布上线，一般分为 3 个步骤：上传代码、提交审核、发布。