微信小程序开发文档 第34页 页面路由 在小程序中所有页面的路由全部由框架进行管理。 页面栈 框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下: 路由方式 页面栈表现 初始化 新页面入栈 打开新页面 新页面入栈 页面重定向 当前页面出栈,新页面入栈 页面返回 页面不断出栈,直到目标返回页,新页面入栈 Tab 切换 页面全部出栈,只留下新的 Tab 页面 重加载 页面全部出栈,只留下新的页面 getCurrentPages() getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。 Tip:不要尝试修改页面栈,会导致路由以及页面状态错误。 路由方式 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面 onLoad, onSHow 打开新页面 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/> onHide onLoad, onShow 页面重定向 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/> onUnload onLoad, onShow 页面返回 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮 onUnload onShow Tab 切换 调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab 各种情况请参考下表 重启动 调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/> onUnload onLoad, onShow Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A 页面打开的页面,D 页面是从 C 页面打开的页面为例): 当前页面 路由后页面 触发的生命周期(按顺序) A A Nothing happend A B A.onHide(), B.onLoad(), B.onShow() A B(再次打开) A.onHide(), B.onShow() C A C.onUnload(), A.onShow() C B C.onUnload(),...
2024-04-02
Page Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。 object 参数说明: 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数–监听页面加载 onReady Function 生命周期函数–监听页面初次渲染完成 onShow Function 生命周期函数–监听页面显示 onHide Function 生命周期函数–监听页面隐藏 onUnload Function 生命周期函数–监听页面卸载 onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作 onReachBottom Function 页面上拉触底事件的处理函数 onShareAppMessage Function 用户点击右上角转发 onPageScroll Function 页面滚动触发事件的处理函数 其他 Any 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问 示例代码: //index.js Page({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onReady: function() { // Do something when page ready. }, onShow: function() { // Do something when page show. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page close. }, onPullDownRefresh: function() { // Do something when pull down. }, onReachBottom:...
2024-04-02
场景值列表 关于场景值的详细说明和获取方式请参考 指南-场景值 场景值ID 说明 图例 1000 其他 / 1001 发现栏小程序主入口,「最近使用」列表(基础库2.2.4版本起包含「我的小程序」列表) / 1005 微信首页顶部搜索框的搜索结果页 查看 1006 发现栏小程序主入口搜索框的搜索结果页 查看 1007 单人聊天会话中的小程序消息卡片 查看 1008 群聊会话中的小程序消息卡片 查看 1010 收藏夹 查看 1011 扫描二维码 查看 1012 长按图片识别二维码 查看 1013 扫描手机相册中选取的二维码 查看 1014 小程序模板消息 查看 1017 前往小程序体验版的入口页 查看 1019 微信钱包(微信客户端7.0.0版本改为支付入口) 查看 1020 公众号 profile 页相关小程序列表(已废弃) 查看 1022 聊天顶部置顶小程序入口(微信客户端6.6.1版本起废弃) / 1023 安卓系统桌面图标 查看 1024 小程序 profile 页 查看 1025 扫描一维码 查看 1026 发现栏小程序主入口,「附近的小程序」列表 查看 1027 微信首页顶部搜索框搜索结果页「使用过的小程序」列表 查看 1028 我的卡包 查看 1029 小程序中的卡券详情页 查看 1030 自动化测试下打开小程序 / 1031 长按图片识别一维码 查看 1032 扫描手机相册中选取的一维码 查看 1034 微信支付完成页 查看 1035 公众号自定义菜单 查看 1036 App 分享消息卡片 查看 1037 小程序打开小程序 查看 1038 从另一个小程序返回 查看 1039 摇电视 查看 1042 添加好友搜索框的搜索结果页 查看 1043 公众号模板消息 查看 1044 带 shareTicket 的小程序消息卡片 详情 查看 1045 朋友圈广告 查看 1046 朋友圈广告详情页 查看...
2024-04-02
App App() App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。 object参数说明: 属性 类型 描述 触发时机 onLaunch Function 生命周期函数–监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow Function 生命周期函数–监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow onHide Function 生命周期函数–监听小程序隐藏 当小程序从前台进入后台,会触发 onHide onError Function 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息 onPageNotFound Function 页面不存在监听函数 当小程序出现要打开的页面不存在的情况,会带上页面信息回调该函数,详见下文 其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问 前台、后台定义:当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。 关闭小程序(基础库版本1.1.0开始支持):当用户从扫一扫、转发等入口(场景值为1007, 1008, 1011, 1025)进入小程序,且没有置顶小程序的情况下退出,小程序会被销毁。小程序运行机制在基础库版本 1.4.0 有所改变:上一条关闭逻辑在新版本已不适用, 详情 示例代码: App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, onError: function(msg) { console.log(msg) }, globalData: 'I am global data' }) onLaunch, onShow 参数 字段 类型 说明 path String 打开小程序的路径 query Object 打开小程序的query scene Number 打开小程序的场景值 shareTicket String shareTicket,详见 获取更多转发信息 referrerInfo Object 当场景为由另一个小程序打开时,返回此字段 referrerInfo.appId String 来源小程序的 appId referrerInfo.extraData Object 来源小程序传过来的数据 场景值 详见。 以下场景支持返回...
2024-04-02
any require(string path) 引入模块。返回模块通过 module.exports 或 exports 暴露的接口。 参数 名称 类型 说明 path string 需要引入模块文件相对于当前文件的相对路径,或npm模块名,或npm模块路径。不支持绝对路径 示例代码 // common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } }) Object module 当前模块对象 属性 属性 类型 说明 exports Object 模块向外暴露的对象,使用require引用该模块时可以获取 示例代码 // common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye Object exports module.exports 的引用 示例代码 // common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye
2024-04-02
Component(Object object) 创建自定义组件,接受一个 Object 类型的参数。 参数 Object object 定义段 类型 是否必填 描述 最低版本 properties Object Map 否 组件的对外属性,是属性名到属性设置的映射表 data Object 否 组件的内部数据,和 properties 一同用于组件的模板渲染 observers Object 否 组件数据字段监听器,用于监听 properties 和 data 的变化,参见 数据监听器 2.6.1 methods Object 否 组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见 组件间通信与事件 behaviors String Array 否 类似于mixins和traits的组件间代码复用机制,参见 behaviors created Function 否 组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用 setData ) attached Function 否 组件生命周期函数-在组件实例进入页面节点树时执行) ready Function 否 组件生命周期函数-在组件布局完成后执行) moved Function 否 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行) detached Function 否 组件生命周期函数-在组件实例被从页面节点树移除时执行) relations Object 否 组件间关系定义,参见 组件间关系 externalClasses String Array 否 组件接受的外部样式类,参见 外部样式类 options Object Map 否 一些选项(文档中介绍相关特性时会涉及具体的选项设置,这里暂不列举) lifetimes Object 否 组件生命周期声明对象,参见 组件生命周期 2.2.3 pageLifetimes Object 否 组件所在页面的生命周期声明对象,参见 组件生命周期 2.2.3 definitionFilter Function 否 定义段过滤器,用于自定义组件扩展,参见 自定义组件扩展 2.2.3 生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。 属性名 类型 描述 is String 组件的文件路径 id String 节点id dataset String 节点dataset data Object 组件数据,包括内部数据和属性值 properties Object 组件数据,包括内部数据和属性值(与 data 一致) 方法名 参数 描述 最低版本 setData Object newData 设置data并执行视图层渲染 hasBehavior Object behavior 检查组件是否具有 behavior (检查时会递归检查被直接或间接引入的所有behavior) triggerEvent String name, Object detail, Object options...
2024-04-02
Page(Object object) 注册小程序中的一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。 参数 Object object 属性 类型 默认值 必填 说明 data Object 页面的初始数据 onLoad function 生命周期回调—监听页面加载 onShow function 生命周期回调—监听页面显示 onReady function 生命周期回调—监听页面初次渲染完成 onHide function 生命周期回调—监听页面隐藏 onUnload function 生命周期回调—监听页面卸载 onPullDownRefresh function 监听用户下拉动作 onReachBottom function 页面上拉触底事件的处理函数 onShareAppMessage function 用户点击右上角转发 onShareTimeline function 用户点击右上角转发到朋友圈 onAddToFavorites function 用户点击右上角收藏 onPageScroll function 页面滚动触发事件的处理函数 onResize function 页面尺寸改变时触发,详见 响应显示区域变化 onTabItemTap function 当前是 tab 页时,点击 tab 时触发 其他 any 开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问 示例代码 //index.js Page({ data: { text: "This is page data." }, onLoad: function(options) { // Do some initialize when page load. }, onShow: function() { // Do something when page show. }, onReady: function() { // Do something when page ready. }, onHide: function() { // Do something when page hide. }, onUnload: function() { // Do something when page...
2024-04-02
App(Object object) 注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。 App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。 参数 Object object 属性 类型 默认值 必填 说明 最低版本 onLaunch function 否 生命周期回调——监听小程序初始化。 onShow function 否 生命周期回调——监听小程序启动或切前台。 onHide function 否 生命周期回调——监听小程序切后台。 onError function 否 错误监听函数。 onPageNotFound function 否 页面不存在监听函数。 1.9.90 onUnhandledRejection function 否 未处理的 Promise 拒绝事件监听函数。 2.10.0 onThemeChange function 否 监听系统主题变化 2.11.0 其他 any 否 开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问 关于小程序前后台的定义和小程序的运行机制,请参考运行机制章节。 示例代码 App({ onLaunch (options) { // Do something initial when launch. }, onShow (options) { // Do something when show. }, onHide () { // Do something when hide. }, onError (msg) { console.log(msg) }, globalData: 'I am global data' }) onLaunch(Object object) 小程序初始化完成时触发,全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。 参数:与 wx.getLaunchOptionsSync 一致 onShow(Object object) 小程序启动,或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。 参数:与 wx.onAppShow 一致 onHide() 小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。 onError(String error) 小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。 参数:与 wx.onError 一致 onPageNotFound(Object object) 基础库 1.9.90 开始支持,低版本需做兼容处理。 小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。 参数:与 wx.onPageNotFound 一致 示例代码: App({ onPageNotFound(res) {...
2024-04-02
微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中。 sitemap 配置 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;sitemap.json 有以下属性: 配置项 属性 类型 必填 描述 rules Object[] 是 索引规则列表 rules rules 配置项指定了索引规则,每项规则为一个JSON对象,属性如下所示: 属性 类型 必填 默认值 取值 取值说明 action string 否 “allow” “allow”、”disallow” 命中该规则的页面是否能被索引 page string 是 “*”、页面的路径 * 表示所有页面,不能作为通配符使用 params string[] 否 [] 当 page 字段指定的页面在被本规则匹配时可能使用的页面参数名称的列表(不含参数值) matching string 否 “inclusive” 参考 matching 取值说明 当 page 字段指定的页面在被本规则匹配时,此参数说明 params 匹配方式 priority Number 否 优先级,值越大则规则越早被匹配,否则默认从上到下匹配 matching 取值说明 值 说明 exact 当小程序页面的参数列表等于 params 时,规则命中 inclusive 当小程序页面的参数列表包含 params 时,规则命中 exclusive 当小程序页面的参数列表与 params 交集为空时,规则命中 partial 当小程序页面的参数列表与 params 交集不为空时,规则命中 配置示例 示例1 { "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching": "exact" }, { "action": "disallow", "page": "path/to/page" }] } path/to/page?a=1&b=2 => 优先索引 path/to/page => 不被索引 path/to/page?a=1 => 不被索引 path/to/page?a=1&b=2&c=3 => 不被索引 其他页面都会被索引 示例2 { "rules":[{ "action": "allow", "page": "path/to/page", "params": ["a", "b"], "matching":...
2024-04-02
页面配置 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性: 配置项 属性 类型 默认值 描述 最低版本 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000 navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white navigationBarTitleText string 导航栏标题文字内容 navigationStyle string default 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮 微信客户端 7.0.0 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16 backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持 微信客户端 6.5.16 enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 2.4.0 (auto) / 2.5.0 (landscape) disableScroll boolean false 设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置 usingComponents Object 否 页面自定义组件配置 1.6.3 style string default 启用新版的组件样式 2.10.2 singlePage Object 否 单页模式相关配置 2.12.0 页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性。 singlePage 基础库 2.11.3 及以上版本支持,目前分享到朋友圈 (Beta) 后打开会进入单页模式 单页模式相关配置 属性 类型 必填 默认值 描述 navigationBarFit String 否 默认自动调整,若原页面是自定义导航栏,则为 float,否则为 squeezed 导航栏与页面的相交状态,值为 float 时表示导航栏浮在页面上,与页面相交;值为 squeezed 时表示页面被导航栏挤压,与页面不相交 配置示例 { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle":...
2024-04-02