admin 发表于 2016-9-28 11:07:13

微信小程序(应用号)示例教程(豆瓣电影),awesome wechat...

<h1 style="box-sizing: border-box; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">神技!微信小程序(应用号)DEMO 抢先入门教程(豆瓣电影)持续更新</h1><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注</p><blockquote style="box-sizing: border-box; margin-bottom: 16px; padding-right: 1em; padding-left: 1em; color: rgb(119, 119, 119); border-left-width: 0.25em; border-left-style: solid; border-left-color: rgb(221, 221, 221); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><p style="box-sizing: border-box; margin-bottom: 16px;">官方文档:<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;">https://mp.weixin.qq.com/debug/wxadoc/dev/</a></p><p style="box-sizing: border-box; margin-bottom: 16px;">豆瓣API官方文档:<a href="https://developers.douban.com/wiki/?title=movie_v2" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;">https://developers.douban.com/wiki/?title=movie_v2</a></p><p style="box-sizing: border-box; margin-bottom: 16px;">重要申明:<span style="box-sizing: border-box; font-weight: 600;">官方已经对没有资格的开发者开放了<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">微信Web开发者工具</code>的使用</span></p><p style="box-sizing: border-box; margin-bottom: 16px;">不需要再用之前的办法破解,破解了有问题!破解了有问题!破解了有问题!</p><p style="box-sizing: border-box;">解决办法就是完全卸载之前的版本,安装<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">2300</code>版本,下载地址下面有说明</p></blockquote><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-demo-预览" class="anchor" href="https://github.com/zce/weapp-demo#demo-预览" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Demo 预览</h2><p align="center" style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><a href="https://github.com/zce/weapp-demo/blob/master/files/preview.gif" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://github.com/zce/weapp-demo/raw/master/files/preview.gif" alt="豆瓣电影演示" width="100%" style="box-sizing: content-box; max-width: 100%;"></a></p><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><a href="https://github.com/zce/weapp-demo/blob/master/files/preview.mp4" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;">演示视频(流量预警 2.64MB)</a></p><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-可能有刚入门的同学" class="anchor" href="https://github.com/zce/weapp-demo#可能有刚入门的同学" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>可能有刚入门的同学</h2><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">可以从提交历史记录中找之前提交的版本</p><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">当前版本中的代码比较绕,用到挺多的新特性</p><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">使用步骤</h2><ol style="box-sizing: border-box; padding-left: 2em; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><li style="box-sizing: border-box;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">将仓库克隆到本地:</p><div class="highlight highlight-source-shell" style="box-sizing: border-box; margin-bottom: 16px;"><pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; word-wrap: normal; padding: 16px; overflow: auto; border-radius: 3px; word-break: normal; background-color: rgb(247, 247, 247);">$ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1
$ <span class="pl-c1" style="box-sizing: border-box; color: rgb(0, 134, 179);">cd</span> weapp-douban</pre></div></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">打开<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">微信Web开放者工具</code>(注意:必须是<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">0.9.092300</code>版本)</p><ul style="box-sizing: border-box; padding-left: 2em;"><li style="box-sizing: border-box;">必须是<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">0.9.092300</code>版本,之前的版本不能保证正常运行</li><li style="box-sizing: border-box; margin-top: 0.25em;">不需要所谓的破解,网上所谓的破解只是针对之前的<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">0.9.092100</code>版本,新的官方版本不需要破解,不需要破解,不需要破解!</li><li style="box-sizing: border-box; margin-top: 0.25em;">下载链接(官方版本,放心下载):<a href="https://pan.baidu.com/s/1qYld6Vi" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;">https://pan.baidu.com/s/1qYld6Vi</a><ul style="box-sizing: border-box; padding-left: 2em;"><li style="box-sizing: border-box;"><code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">wechat_web_devtools_0.9.092300_x64.exe</code>(Windows 64位)</li><li style="box-sizing: border-box; margin-top: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">wechat_web_devtools_0.9.092300_ia32.exe</code>(Windows 32位)</li><li style="box-sizing: border-box; margin-top: 0.25em;"><code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">wechat_web_devtools_0.9.092300.dmg</code>(macOS)</li></ul></li></ul></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">选择<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">添加项目</code>,填写或选择相应信息</p><ul style="box-sizing: border-box; padding-left: 2em;"><li style="box-sizing: border-box;">AppID:点击右下角<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">无AppID</code>(我也没有资格,据说这次200个名额是小龙钦点的)</li><li style="box-sizing: border-box; margin-top: 0.25em;">项目名称:随便填写,因为不涉及到部署,所以无所谓</li><li style="box-sizing: border-box; margin-top: 0.25em;">项目目录:选择刚刚克隆的文件夹</li><li style="box-sizing: border-box; margin-top: 0.25em;">点击<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">添加项目</code></li></ul><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;"><a href="https://github.com/zce/weapp-demo/blob/master/files/add-proj.png" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://github.com/zce/weapp-demo/raw/master/files/add-proj.png" alt="添加项目" style="box-sizing: content-box; max-width: 100%;"></a></p></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">新年快乐,恭喜发财</p><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;"><a href="https://github.com/zce/weapp-demo/blob/master/files/main-view.png" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://github.com/zce/weapp-demo/raw/master/files/main-view.png" alt="项目预览" style="box-sizing: content-box; max-width: 100%;"></a></p></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">你可以选择在<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">微信Web开放者工具</code>中编码(也可选择你喜欢的编辑器)</p><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;"><a href="https://github.com/zce/weapp-demo/blob/master/files/coding.png" target="_blank" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; background-color: transparent;"><img src="https://github.com/zce/weapp-demo/raw/master/files/coding.png" alt="编码功能" style="box-sizing: content-box; max-width: 100%;"></a></p></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">通过左下角重启按钮,刷新编码过后的预览</p></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">可以通过在项目目录下执行以下命令快速创建新页面组件所需文件:</p><div class="highlight highlight-source-shell" style="box-sizing: border-box; margin-bottom: 16px;"><pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; word-wrap: normal; padding: 16px; overflow: auto; border-radius: 3px; word-break: normal; background-color: rgb(247, 247, 247);"><span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);"># `Bash`用户</span>
$ ./generate <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">&lt;</span>new-page-name<span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">&gt;</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);"># `Cmd`用户</span>
$ .<span class="pl-cce" style="box-sizing: border-box;">\g</span>enerate <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">&lt;</span>new-page-name<span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">&gt;</span></pre></div></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">剩下的可以自由发挥了</p></li></ol><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-微信小程序基本教程持续更新" class="anchor" href="https://github.com/zce/weapp-demo#微信小程序基本教程持续更新" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>微信小程序基本教程(持续更新)</h2><h3 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 1.25em; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-创建一个项目文件夹创建基本所需文件" class="anchor" href="https://github.com/zce/weapp-demo#创建一个项目文件夹创建基本所需文件" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>创建一个项目文件夹,创建基本所需文件</h3><h4 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 16px; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-appjs" class="anchor" href="https://github.com/zce/weapp-demo#appjs" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>app.js</h4><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">项目主入口文件(用于创建应用程序对象)</p><div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; word-wrap: normal; padding: 16px; overflow: auto; border-radius: 3px; word-break: normal; background-color: rgb(247, 247, 247);"><span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// App函数是一个全局函数,用于创建应用程序对象</span>
<span class="pl-en" style="box-sizing: border-box; color: rgb(121, 93, 163);">App</span>({
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// ========== 全局数据对象(整个应用程序共享) ==========</span>
globalData<span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">:</span> { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> },

<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// ========== 应用程序全局方法 ==========</span>
<span class="pl-en" style="box-sizing: border-box; color: rgb(121, 93, 163);">method1</span> (<span class="pl-smi" style="box-sizing: border-box;">p1</span>, <span class="pl-smi" style="box-sizing: border-box;">p2</span>) { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> },
<span class="pl-en" style="box-sizing: border-box; color: rgb(121, 93, 163);">method2</span> (<span class="pl-smi" style="box-sizing: border-box;">p1</span>, <span class="pl-smi" style="box-sizing: border-box;">p2</span>) { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> },

<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// ========== 生命周期方法 ==========</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 应用程序启动时触发一次</span>
<span class="pl-en" style="box-sizing: border-box; color: rgb(121, 93, 163);">onLaunch</span> () { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> },

<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 当应用程序进入前台显示状态时触发</span>
<span class="pl-en" style="box-sizing: border-box; color: rgb(121, 93, 163);">onShow</span> () { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> },

<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 当应用程序进入后台状态时触发</span>
<span class="pl-en" style="box-sizing: border-box; color: rgb(121, 93, 163);">onHide</span> () { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> }
})
</pre></div><h4 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 16px; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-appjson" class="anchor" href="https://github.com/zce/weapp-demo#appjson" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>app.json</h4><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)</p><div class="highlight highlight-source-js" style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; word-wrap: normal; padding: 16px; overflow: auto; border-radius: 3px; word-break: normal; background-color: rgb(247, 247, 247);">{
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 当前程序是由哪些页面组成的(第一项默认为初始页面)</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 所有使用到的组件或页面都必须在此体现</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages</span>
<span class="pl-s" style="box-sizing: border-box; color: rgb(24, 54, 145);"><span class="pl-pds" style="box-sizing: border-box;">"</span>pages<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">:</span> [ <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> ],
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 应用程序窗口设置</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window</span>
<span class="pl-s" style="box-sizing: border-box; color: rgb(24, 54, 145);"><span class="pl-pds" style="box-sizing: border-box;">"</span>window<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">:</span> { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> },
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 应用导航栏设置</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar</span>
<span class="pl-s" style="box-sizing: border-box; color: rgb(24, 54, 145);"><span class="pl-pds" style="box-sizing: border-box;">"</span>tabBar<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">:</span> { <span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">...</span> },
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 网络超时设置</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout</span>
<span class="pl-s" style="box-sizing: border-box; color: rgb(24, 54, 145);"><span class="pl-pds" style="box-sizing: border-box;">"</span>networkTimeout<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">:</span> {},
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// 是否在控制台输出调试信息</span>
<span class="pl-c" style="box-sizing: border-box; color: rgb(150, 152, 150);">// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug</span>
<span class="pl-s" style="box-sizing: border-box; color: rgb(24, 54, 145);"><span class="pl-pds" style="box-sizing: border-box;">"</span>debug<span class="pl-pds" style="box-sizing: border-box;">"</span></span><span class="pl-k" style="box-sizing: border-box; color: rgb(167, 29, 93);">:</span> <span class="pl-c1" style="box-sizing: border-box; color: rgb(0, 134, 179);">true</span>
}</pre></div><h4 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 16px; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-appwxss" class="anchor" href="https://github.com/zce/weapp-demo#appwxss" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>app.wxss</h4><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">[!可选!]项目全局的样式文件,内容遵循CSS标准语法</p><h3 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 1.25em; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-创建页面组件" class="anchor" href="https://github.com/zce/weapp-demo#创建页面组件" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>创建页面组件</h3><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">每个页面组件也分为四个文件组成:</p><ul style="box-sizing: border-box; padding-left: 2em; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><li style="box-sizing: border-box;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">page-name.js</p><ul style="box-sizing: border-box; padding-left: 2em;"><li style="box-sizing: border-box;">页面逻辑文件,用于处理页面生命周期控制和数据处理</li><li style="box-sizing: border-box; margin-top: 0.25em;">未完待续...</li></ul></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">page-name.json</p><ul style="box-sizing: border-box; padding-left: 2em;"><li style="box-sizing: border-box;">设置当前页面工作时的一些配置</li><li style="box-sizing: border-box; margin-top: 0.25em;">此处可以覆盖app.json中的window设置</li><li style="box-sizing: border-box; margin-top: 0.25em;">也就是说只可以设置window中设置的熟悉</li><li style="box-sizing: border-box; margin-top: 0.25em;">未完待续...</li></ul></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">page-name.wxml</p><ul style="box-sizing: border-box; padding-left: 2em;"><li style="box-sizing: border-box;">wxml指的是<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">Wei Xin Markup Language</code></li><li style="box-sizing: border-box; margin-top: 0.25em;">用于定义页面中元素结构的</li><li style="box-sizing: border-box; margin-top: 0.25em;">语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法</li><li style="box-sizing: border-box; margin-top: 0.25em;">未完待续...</li></ul></li><li style="box-sizing: border-box; margin-top: 0.25em;"><p style="box-sizing: border-box; margin-top: 16px; margin-bottom: 16px;">page-name.wxss</p><ul style="box-sizing: border-box; padding-left: 2em;"><li style="box-sizing: border-box;">wxml指的是<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; padding-top: 0.2em; padding-bottom: 0.2em; border-radius: 3px; background-color: rgba(0, 0, 0, 0.0392157);">Wei Xin Style Sheet</code></li><li style="box-sizing: border-box; margin-top: 0.25em;">用于定义页面样式的</li><li style="box-sizing: border-box; margin-top: 0.25em;">语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)</li><li style="box-sizing: border-box; margin-top: 0.25em;">未完待续...</li></ul></li></ul><h3 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; font-size: 1.25em; line-height: 1.25; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-未完待续" class="anchor" href="https://github.com/zce/weapp-demo#未完待续" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>未完待续...</h3><h2 style="box-sizing: border-box; margin-top: 24px; margin-bottom: 16px; line-height: 1.25; padding-bottom: 0.3em; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(238, 238, 238); color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';"><a id="user-content-恶心的地方" class="anchor" href="https://github.com/zce/weapp-demo#恶心的地方" aria-hidden="true" style="box-sizing: border-box; color: rgb(64, 120, 192); text-decoration: none; float: left; padding-right: 4px; margin-left: -20px; line-height: 1; background-color: transparent;"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>恶心的地方</h2><ol style="box-sizing: border-box; padding-left: 2em; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><li style="box-sizing: border-box;">好像没有自定义组件的机制~~</li><li style="box-sizing: border-box; margin-top: 0.25em;">没有热更新</li><li style="box-sizing: border-box; margin-top: 0.25em;">修改代码即时同步问题</li></ol><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">源码地址:</p><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;"><br></p><p style="box-sizing: border-box; margin-bottom: 16px; color: rgb(51, 51, 51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 16px; line-height: 24px;">**** Hidden Message *****</p><p></p>


微信小程序(应用号)示例教程(豆瓣电影),awesome wechat...
http://bbs.jiandaima.com/thread-631-1-1.html

慢慢同学 发表于 2017-12-8 12:22:56

顶顶顶顶顶顶顶顶顶顶
页: [1]
查看完整版本: 微信小程序(应用号)示例教程(豆瓣电影),awesome wechat...