- 06-WeChat Mini Program-Registration Procedure
Register applet
Each applet needs app.jsto call Appthe method in to register the applet instance, bind the life cycle callback function, error monitoring and page non-existence monitoring functions, etc.
For detailed parameter meanings and usage, please refer to the App reference document .
Register the applet. Accepts a Objectparameter, which specifies the lifecycle callback of the applet, etc.
App() must be app.jscalled in the , must be called and can only be called once. Otherwise there will be unpredictable consequences.
Parameter Object object
| Attributes | type | Defaults | required | illustrate | minimum version |
|---|---|---|---|---|---|
| onLaunch | function | no | Life cycle callback - monitor the initialization of the applet. | ||
| onShow | function | no | Life cycle callback - monitor the applet to start or switch to the foreground. | ||
| onHide | function | no | Life cycle callback - monitor the applet and switch to the background. | ||
| onError | function | no | Error monitoring function. | ||
| onPageNotFound | function | no | There is no listening function on the page. | 1.9.90 | |
| onUnhandledRejection | function | no | Unhandled Promise rejection event listener function. | 2.10.0 | |
| onThemeChange | function | no | Monitor system theme changes | 2.11.0 | |
| other | any | no | Developers can add any function or data variable to Objectthe parameter, which thiscan be accessed with |
Foreground and background definitions : When the user clicks the upper left corner to close, or presses the Home button of the device to leave WeChat, the applet is not directly destroyed, but enters the background; when re-entering WeChat or opening the applet again, it will enter the foreground from the background . It should be noted that only when the applet enters the background for a certain period of time, or the system resource usage is too high, will it be truly destroyed.
case code
App({
onLaunch(options) {
// Do something initial when launch.
console.log("小程序加载成功");
},
onShow(options) {
// Do something when show.
console.log("小程序显示");
},
onHide() {
// Do something when hide.
console.log("小程序隐藏");
},
onError(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
globalData: {
userInfo: null
}
})
- Effect
When debugging with a real device, press the home button on the mobile phone to display the hidden applet
scene value
Scene value effect
Scene values play an important role in the development of advanced applets, which can help us optimize user experience and improve program performance. By setting scene values reasonably, we can provide customized functional experience in different scenes and achieve smooth interaction effects. At the same time, scene values can also help us collect user behavior data and provide valuable feedback for subsequent development.
list of scene values
For details about the scene value and how to obtain it, please refer to the guide - scene value
| scene value ID | illustrate | legend |
|---|---|---|
| 1000 | other | / |
| 1001 | The "Recently Used" list of applets on the discovery page (the base library version 2.2.4-2.29.0 includes the "My Applet" list, and since version 2.29.1 it is only the "Recently Used" list) | / |
| 1005 | The search results page of the search box at the top of the WeChat homepage | Check |
| 1006 | The search result page of the search box at the main entrance of the discovery bar applet | Check |
| 1007 | Mini-program message cards in a single-person chat session | Check |
| 1008 | Mini-program message cards in group chat sessions | Check |
| 1010 | Favorites | Check |
| 1011 | Scan QR code | Check |
| 1012 | Long press the picture to identify the QR code | Check |
| 1013 | Scan the QR code selected in the mobile phone album | Check |
| 1014 | Applet subscription message (same as 1107) | Check |
| 1017 | Go to the entry page of the mini program trial version | Check |
| 1019 | WeChat wallet (WeChat client version 7.0.0 is changed to payment portal) | Check |
| 1020 | Official account profile page related applet list (deprecated) | Check |
| 1022 | Top chat applet entry (deprecated from version 6.6.1 of WeChat client) | / |
| 1023 | android desktop icon | Check |
| 1024 | Applet profile page | Check |
| 1025 | Scan one-dimensional code | Check |
| 1026 | The main entry of the applet in the discovery bar, the list of "nearby applets" | Check |
| 1027 | "Used Mini Programs" list on the search result page of the search box at the top of the WeChat homepage | Check |
| 1028 | my card pack | Check |
| 1029 | Coupon details page in the Mini Program | Check |
| 1030 | Open the applet under automated testing | / |
| 1031 | Long press the picture to identify the one-dimensional code | Check |
| 1032 | Scan the one-dimensional code selected in the phone album | Check |
| 1034 | WeChat payment completion page | Check |
| 1035 | Official account custom menu | Check |
| 1036 | App share message card | Check |
| 1037 | applet open applet | Check |
| 1038 | return from another applet | Check |
| 1039 | shake the tv | Check |
| 1042 | Added friend search box to the search results page | Check |
| 1043 | Official account template message | Check |
| 1044 | Mini program message card details with shareTicket | Check |
| 1045 | circle of friends advertisement | Check |
| 1046 | Circle of friends advertising details page | Check |
| 1047 | Scan the applet code | Check |
| 1048 | Long press the picture to identify the applet code | Check |
| 1049 | 扫描手机相册中选取的小程序码 | 查看 |
| 1052 | 卡券的适用门店列表 | 查看 |
| 1053 | 搜一搜的结果页 | 查看 |
| 1054 | 顶部搜索框小程序快捷入口（微信客户端版本6.7.4起废弃） | / |
| 1056 | 聊天顶部音乐播放器右上角菜单 | 查看 |
| 1057 | 钱包中的银行卡详情页 | 查看 |
| 1058 | 公众号文章 | 查看 |
| 1059 | 体验版小程序绑定邀请页 | / |
| 1060 | 微信支付完成页（与1034相同） | / |
| 1064 | 微信首页连Wi-Fi状态栏 | 查看 |
| 1065 | URL scheme 详情 | / |
| 1067 | 公众号文章广告 | 查看 |
| 1068 | 附近小程序列表广告（已废弃） | / |
| 1069 | 移动应用通过openSDK进入微信，打开小程序 | 查看 |
| 1071 | 钱包中的银行卡列表页 | 查看 |
| 1072 | 二维码收款页面 | 查看 |
| 1073 | 客服消息列表下发的小程序消息卡片 | 查看 |
| 1074 | 公众号会话下发的小程序消息卡片 | 查看 |
| 1077 | 摇周边 | 查看 |
| 1078 | 微信连Wi-Fi成功提示页 | 查看 |
| 1079 | 微信游戏中心 | 查看 |
| 1081 | 客服消息下发的文字链 | 查看 |
| 1082 | 公众号会话下发的文字链 | 查看 |
| 1084 | 朋友圈广告原生页 | 查看 |
| 1088 | 会话中查看系统消息，打开小程序 | / |
| 1089 | 微信聊天主界面下拉，「最近使用」栏（基础库2.2.4-2.29.0版本包含「我的小程序」栏，2.29.1版本起仅为「最近使用」栏 | 查看 |
| 1090 | 长按小程序右上角菜单唤出最近使用历史 | 查看 |
| 1091 | 公众号文章商品卡片 | 查看 |
| 1092 | 城市服务入口 | 查看 |
| 1095 | 小程序广告组件 | 查看 |
| 1096 | 聊天记录，打开小程序 | 查看 |
| 1097 | 微信支付签约原生页，打开小程序 | 查看 |
| 1099 | 页面内嵌插件 | / |
| 1100 | 红包封面详情页打开小程序 | 查看 |
| 1101 | 远程调试热更新（开发者工具中，预览 -> 自动预览 -> 编译并预览） | 查看 |
| 1102 | 公众号 profile 页服务预览 | 查看 |
| 1103 | 发现页小程序「我的小程序」列表（基础库2.2.4-2.29.0版本废弃，2.29.1版本起生效） | / |
| 1104 | 微信聊天主界面下拉，「我的小程序」栏（基础库2.2.4-2.29.0版本废弃，2.29.1版本起生效） | / |
| 1106 | 聊天主界面下拉，从顶部搜索结果页，打开小程序 | / |
| 1107 | 订阅消息，打开小程序 | / |
| 1113 | 安卓手机负一屏，打开小程序（三星） | / |
| 1114 | 安卓手机侧边栏，打开小程序（三星） | / |
| 1119 | 【企业微信】工作台内打开小程序 | 查看 |
| 1120 | 【企业微信】个人资料页内打开小程序 | 查看 |
| 1121 | 【企业微信】聊天加号附件框内打开小程序 | 查看 |
| 1124 | 扫“一物一码”打开小程序 | / |
| 1125 | 长按图片识别“一物一码” | / |
| 1126 | 扫描手机相册中选取的“一物一码” | / |
| 1129 | 微信爬虫访问 详情 | / |
| 1131 | 浮窗（8.0版本起仅包含被动浮窗） | / |
| 1133 | 硬件设备打开小程序 详情 | / |
| 1135 | 小程序profile页相关小程序列表，打开小程序 | 查看 |
| 1144 | 公众号文章 - 视频贴片 | 查看 |
| 1145 | 发现栏 - 发现小程序 | 查看 |
| 1146 | 地理位置信息打开出行类小程序 | 查看 |
| 1148 | 卡包-交通卡，打开小程序 | / |
| 1150 | 扫一扫商品条码结果页打开小程序 | 查看 |
| 1151 | 发现栏 - 我的订单 | 查看 |
| 1152 | 订阅号视频打开小程序 | 查看 |
| 1153 | “识物”结果页打开小程序 | 查看 |
| 1154 | 朋友圈内打开“单页模式” | 查看 |
| 1155 | “单页模式”打开小程序 | 查看 |
| 1157 | 服务号会话页打开小程序 | 查看 |
| 1158 | 群工具打开小程序 | 查看 |
| 1160 | 群待办 | 查看 |
| 1167 | H5 通过开放标签打开小程序 详情 | / |
| 1168 | 移动/网站应用直接运行小程序 | / |
| 1169 | 发现栏小程序主入口，各个生活服务入口（例如快递服务、出行服务等） | 查看 |
| 1171 | 微信运动记录（仅安卓） | 查看 |
| 1173 | 聊天素材用小程序打开 详情 | 查看 |
| 1175 | 视频号主页商店入口 | 查看 |
| 1176 | 视频号直播间主播打开小程序 | 查看 |
| 1177 | 视频号直播商品 | 查看 |
| 1178 | 在电脑打开手机上打开的小程序 | 查看 |
| 1179 | #话题页打开小程序 | 查看 |
| 1181 | 网站应用打开PC小程序 | / |
| 1183 | PC微信 - 小程序面板 - 发现小程序 - 搜索 | 查看 |
| 1184 | 视频号链接打开小程序 | 查看 |
| 1185 | 群公告 | 查看 |
| 1186 | 收藏 - 笔记 | 查看 |
| 1187 | 浮窗（8.0版本起） | 查看 |
| 1189 | 表情雨广告 | 查看 |
| 1191 | 视频号活动 | 查看 |
| 1192 | 企业微信联系人profile页 | 查看 |
| 1193 | 视频号主页服务菜单打开小程序 | 查看 |
| 1194 | URL Link 详情 | / |
| 1195 | 视频号主页商品tab | 查看 |
| 1196 | Personal status open applet | Check |
| 1197 | The anchor of the video account returns to the mini game from the live broadcast room | Check |
| 1198 | Open the video account broadcasting interface to open the mini game | Check |
| 1200 | Open the applet for the video account advertisement | Check |
| 1201 | Open the mini program on the video account advertisement details page | Check |
| 1202 | Qiwei customer service account session opens mini program card | Check |
| 1203 | Request for WeChat Mini Program Stress Test Tool | / |
| 1206 | Open the mini game in the video account mini game live broadcast room | Check |
| 1207 | Qiwei customer service account session opens the text link of the applet | Check |
| 1208 | Chat to open the product card | Check |
| 1212 | Youth mode application page to open the applet | Check |
| 1215 | Advertisement appointment open applet | / |
| 1216 | Open the applet in the video number order center | Check |
| 1223 | Android Desktop Widget opens the applet | Check |
| 1228 | Video number native ad component opens applet | Check |
| 1230 | Subscription number H5 advertisement enters the applet | Check |
| 1231 | Dynamic message reminds the entrance to open the applet | Check |
| 1242 | Mini Program Discovery Page Store Express Delivery Module Channel Page Enter Mini Program | Check |
| 1245 | The mini program discovers the page and the store quickly sends the search result page to enter the mini program | Check |
| 1248 | Enter the Mini Program through Migration of the Mini Program account | / |
| 1252 | Search the Mini Program search page "Mini Function" module to enter the Mini Program | Check |
case code
App({
onLaunch(options) {
// Do something initial when launch.
console.log("小程序加载成功,场景->"+options.scene);
},
onShow(options) {
// Do something when show.
console.log("小程序显示");
},
onHide() {
// Do something when hide.
console.log("小程序隐藏");
},
onError(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
- simulator
- Real Device Debugging
Next Chapter WeChat Mini Program-Registration Page-Modularization