微信小程序知识总结及案例集锦
微信小程序的发展会和微信公众号一样,在某个时间点爆发
学习路径
- 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档
- 认真跟着文档看一遍,相信有 vue 前端经验的看下应该就能上手了,然后安装 微信小程序开发者工具
- 新建一个 quick start 项目,了解代码结构,这里附上整个 quick start 代码。
- 然后就拿个顺手的 api 练练手,这里附上 cnode 代码,跟着做完差不多就算入门了。
- 入门之后就是看其他项目的实现了,这里会附上案例集锦,一些 github 的案例。
知识总结
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
- 好友坑过的开发者社区已解决问题
- 小程序页面空白
- CSS 兼容性问 webkit 内核
- lineShopId 长度太长,字符转数字 Number
- post 请求参数加上 encodeURIComponent 解析字符串
- header 要设置正确
- get "content-type":'application/json'
- post "content-type":'application/x-www-form-urlencoded'
- content-Type:application/x-www-form-urlencoded,application/json
- bind 事件绑定不会阻止冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡
- image 背景图片地址必须是 url 或者 base64 / 本地资源无法通过 css 获取 可以使用网络图片,或者 base64,或者使用标签
- 使用竖向滚动时,需要给 scroll-view 一个固定高度,通过 WXSS 设置 height。如果 scroll-view 高度设置为 100%, 则不能触发上拉刷新和下拉加载事件......
- App() 小程序注册入口,全局唯一。App() 用来注册一个小程序,全局只有一个,全局的数据也可以放到这里面来操作。
- // 注册微信小程序,全局只有一个
- let appConfig = {
- // 小程序生命周期的各个阶段
- onLaunch: function(){},
- onShow: function(){},
- onHide: function(){},
- onError: function(){},
- // 自定义函数或者属性
- ...
- };
- App(appConfig);
- // 在别的地方可以获取这个全局唯一的小程序实例
- const app = getApp();
小程序并没有提供销毁的方式,所以只有当小程序进入后台一定时间、或者系统资源占用过高的时候,才会被真正的销毁。
- Page() 页面注册入口。Page() 用来注册一个页面,维护该页面的生命周期以及数据。
- // 注册微信小程序,全局只有一个
- let pageConfig = {
- data: {},
- // 页面生命周期的各个阶段
- onLoad: function(){},
- onShow: function(){},
- onReady: function(){},
- onHide: function(){},
- onUnload: function(){},
- onPullDownRefresh: function(){},
- onReachBottom: function(){},
- onShareAppMessage: function(){},
- // 自定义函数或者属性
- ...
- };
- Page(pageConfig);
- // 获取页面堆栈,表示历史访问过的页面,最后一个元素为当前页面
- const page = getCurrentPages();
- {{}} 不能执行方法,只能处理简单的运算如 "+ - * /",比如遇到遍历 list,每个 item 的金额需要格式化,只能在 js 里预先格式化好再 setData 一遍 (╯□╰)
- 数字键盘用 type="digit"
- 禁止页面下拉需要设置 "disableScroll": true
案例集锦
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
- v2ex ★★★
https://github.com/liuyugang123/V2EX
- 精简版百思不得姐 ★★★
https://github.com/shuncaigao/BS
- 电影推荐 ★★★
https://github.com/liuyugang123/movie
- 计算器 ★★★
https://github.com/dunizb/wxapp-sCalc
- 豆瓣图书 ★★★
http://www.jianshu.com/p/c35084200470
- 天气 ★★★
http://swiftcafe.io/2016/10/03/wx-weather-app/
- 空气质量查询 ★★★
http://blog.csdn.net/yulianlin/article/details/52692066
- github 客户端 ★★★
https://blog.zhengxiaowai.cc/post/weapp-demo.html
- 知乎日报 ★★★
https://github.com/liuyugang123/zhihuAPP
更多
持续踩坑中...
后续会进行不断更新,订阅请点 watch,收藏请点 star,欢迎开 issues 来提问
来源: http://www.cnblogs.com/junhey/p/7120174.html