微信小程序知识总结及案例集锦（小程序知识点总结）

微信小程序知识总结及案例集锦（小程序知识点总结）

微信小程序知识总结及案例集锦

微信小程序的发展会和微信公众号一样，在某个时间点爆发

学习路径

知识总结

tip：看到了另一份W3CSchool整理的文档，可以结合官方文档一起看

目录结构介绍

app.js — 对本页面的窗口表现进行配置。app.json — 对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。app.wxss — 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。

页面生命周期

小程序注册完成后，加载页面，触发onLoad方法。页面载入后触发onShow方法，显示页面。首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。当小程序后台运行或跳转到其他页面时，触发onHide方法。当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

常规页面A：onLoad()-->onShow()-->onReady()-->onHide()-->onUnload() 释义：

onLoad()：监听页面加载，一个页面只会调用一次onShow()：监听页面显示，每次打开页面都会调用一次onReady()：监听页面初次渲染完成，一个页面只会调用一次，代表页面加载完毕，视图层和逻辑层可进行交互onHide()：监听页面隐藏，当页面被覆盖或进入后台执行onUnload()：监听页面卸载，当页面被关闭或内存不足主动销毁页面

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

进入A页面：A执行onLoad()-->onShow()-->onReady()；A页面navigateTo B页面：A执行onHide()，B执行onLoad()-->onShow()-->onReady()；B页面返回A页面：B执行onUnload()，A执行onReady()；退出A页面：A执行onUnload()。

Page({ data:{}, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})

组件

基本：view,text表单：button,input,radio,slider媒体：image,video,audio,canvas模态：action-sheet,modal,toast,loading容器：swiper,scroller导航：navigator,tabbar

小程序开发踩坑记录

基本的防踩坑Q&A 最佳防踩坑的方式就是看这个微信小程序常见FAQ 好友坑过的开发者社区已解决问题 小程序出问题的终极解决办法腾讯客服-小程序

案例集锦

tip：从案例里可以看到很多其他小程序实现的方式，多多看代码

官方demo★★★★★ 官方demo可以看看布局啥的，实现啥的 https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html 官方quick start★★★★★ 官方的小程序，可以自己改动看看效果 https://github.com/junhey/wxapp/tree/master/quickStart cnodejs ★★★★ 自己做的第一款小程序，基本上覆盖小程序的基本操作，推荐通过cnodejs的api来实践开发小程序 https://github.com/junhey/wxapp-cnode 石头剪刀布★★★★ 腾讯云团队出品，里面有websocket的使用 https://github.com/CFETeam/weapp-demo-websocket 五洲到家★★★★ 比较完整的一个小程序实战 https://github.com/xiaobinwu/dj v2ex ★★★ https://github.com/liuyugang123/V2EX 精简版百思不得姐 ★★★ https://github.com/shuncaigao/BS 电影推荐 ★★★ https://github.com/liuyugang123/movie 计算器 ★★★ https://github.com/dunizb/wxapp-sCalc 豆瓣图书 ★★★ http://jianshu.com/p/c35084200470 天气 ★★★ http://swiftcafe.io/2016/10/03/wx-weather-app/ 空气质量查询 ★★★ http://blog.csdn-/yulianlin/article/details/52692066 github客户端 ★★★ https://blog.zhengxiaowai.cc/post/weapp-demo.html 知乎日报 ★★★ https://github.com/liuyugang123/zhihuAPP 区块链小程序 ★★★ https://github.com/ghostjzf/xiaolian 时间管理小程序 ★★★ https://github.com/FatDong1/time-record

更多

2017-07-27更新 小程序的文档在不断的变化，我也会时常更新 发现一个小程序出问题的终极解决办法腾讯客服-小程序

持续踩坑中...

后续会进行不断更新，订阅请点watch，收藏请点star，欢迎开issues来提问

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。