微信小程序-AppService

2016-11-04 16:11:27   0  举报





仅支持查看

AI智能生成

微信小程序-AppService

微信小程序

模版推荐

作者其他创作

大纲/内容

页面栈

<table style="font-size: inherit; box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; border-collapse: collapse; border-spacing: 0px; break-inside: avoid; margin-top: 1em; margin-bottom: 3em; width: 805px; overflow: auto; border-bottom: 1px solid rgb(231, 231, 235); font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", 黑体, Arial, sans-serif; letter-spacing: 0.2px;"><thead style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;"><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; break-inside: avoid; background-color: rgb(246, 248, 249); border: none;"><th style="padding: 6px 20px; border-width: initial; border-style: none; border-color: initial; box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; font-weight: 400; color: rgb(141, 141, 141); height: 40px;">路由方式</th><th style="padding: 6px 20px; border-width: initial; border-style: none; border-color: initial; box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; font-weight: 400; color: rgb(141, 141, 141); height: 40px;">页面栈表现</th></tr></thead><tbody style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;"><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; break-inside: avoid; border: none;"><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">初始化</td><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">新页面入栈</td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; break-inside: avoid; border-top: 1px solid rgb(231, 231, 235);"><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">打开新页面</td><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">新页面入栈</td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; break-inside: avoid; border-top: 1px solid rgb(231, 231, 235);"><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">页面重定向</td><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">当前页面出栈，新页面入栈</td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; break-inside: avoid; border-top: 1px solid rgb(231, 231, 235);"><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">页面返回</td><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">页面不断出栈，直到目标返回页，新页面入栈</td></tr><tr style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; break-inside: avoid; border-top: 1px solid rgb(231, 231, 235);"><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">Tab 切换</td><td style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; padding: 12px 20px; border: none; height: 60px;">当前页面出栈，新页面入栈</td></tr></tbody></table>

Page()

<pre style="font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; white-space: pre-wrap; break-inside: avoid; direction: ltr; margin-top: 0px; margin-bottom: 1.275em; padding: 0.85em 1em; border: none; color: rgb(51, 51, 51); overflow: auto; word-wrap: normal; background: rgb(247, 247, 247); letter-spacing: 0.2px;"><code class="lang-javascript" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.85em; break-inside: avoid; direction: ltr; margin: 0px; padding: 0px; border: none; color: inherit; background: 0px 0px; display: inline; max-width: initial; overflow: initial; line-height: inherit; white-space: pre;"><span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">//index.js Page({ data: { text: "This is page data." }, onLoad: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function(options) { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do some initialize when page load. }, onReady: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when page ready. }, onShow: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when page show. }, onHide: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when page hide. }, onUnload: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when page close. }, onPullDownRefresh: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when pull down. }, onReachBottom: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when page reach bottom. }, <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Event handler. viewTap: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">this.setData({ text: 'Set some data for updating view.' }) }, customData: { hi: 'MINA' } })</code></pre>

Summary（在JS基础上...）

<ul style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: 14px; padding: 0px 0px 0px 2em; margin-right: 0px; margin-left: 0px; color: rgb(51, 51, 51); font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", 黑体, Arial, sans-serif; letter-spacing: 0.2px; margin-bottom: 0px !important;"><li style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">增加 <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html?t=20161102" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; text-decoration: none; font-size: inherit; color: rgb(65, 131, 196); background: 0px 0px;">App</a> 和 <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161102" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; text-decoration: none; font-size: inherit; color: rgb(65, 131, 196); background: 0px 0px;">Page</a> 方法，进行程序和页面的注册。</li><li style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。</li><li style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">提供丰富的 <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=20161102" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; text-decoration: none; font-size: inherit; color: rgb(65, 131, 196); background: 0px 0px;">API</a>，如微信用户数据，扫一扫，支付等微信特有能力。</li><li style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">每个页面有独立的<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html?t=20161102#文件作用域" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; text-decoration: none; font-size: inherit; color: rgb(65, 131, 196); background: 0px 0px;">作用域</a>，并提供<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html?t=20161102#模块化" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; text-decoration: none; font-size: inherit; color: rgb(65, 131, 196); background: 0px 0px;">模块化</a>能力。</li><li style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。</li><li style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit;">开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。</li></ul>

App()

<pre style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 14px; white-space: pre-wrap; break-inside: avoid; direction: ltr; margin-top: 0px; margin-bottom: 1.275em; padding: 0.85em 1em; border: none; color: rgb(51, 51, 51); overflow: auto; word-wrap: normal; background: rgb(247, 247, 247); letter-spacing: 0.2px;"><code class="lang-js" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.85em; break-inside: avoid; direction: ltr; margin: 0px; padding: 0px; border: none; color: inherit; background: 0px 0px; display: inline; max-width: initial; overflow: initial; line-height: inherit; white-space: pre;">App({ onLaunch: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something initial when launch. }, onShow: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when show. }, onHide: <span class="hljs-function" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(66, 113, 174);"><span class="hljs-keyword" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(137, 89, 168);">function() { <span class="hljs-comment" style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-size: inherit; color: rgb(142, 144, 140);">// Do something when hide. }, globalData: 'I am global data' })</code></pre>

getApp()