微信小顺序学问总结及案例集锦
微信小顺序的发展会和微信民众号一样,在某个时刻点迸发
进修途径
微信小顺序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档
仔细随着文档看一遍,置信有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,或许运用 <image/> 标签
运用竖向转动时,须要给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/debu…官方quick start★★★★★ 官方的小顺序,能够本身修改看看结果
https://github.com/junhey/wxa…cnodejs ★★★★ 本身做的第一款小顺序,基础上掩盖小顺序的基础操纵,引荐经由过程cnodejs的api来实践开辟小顺序
https://github.com/junhey/wxa…石头铰剪布★★★★ 腾讯云团队出品,内里有websocket的运用
https://github.com/CFETeam/we…v2ex ★★★
https://github.com/liuyugang1…精简版百思不得姐 ★★★
https://github.com/shuncaigao/BS影戏引荐 ★★★
https://github.com/liuyugang1…豆瓣图书 ★★★
http://www.jianshu.com/p/c350…空气质量查询 ★★★
http://blog.csdn.net/yulianli…github客户端 ★★★
https://blog.zhengxiaowai.cc/…知乎日报 ★★★
https://github.com/liuyugang1…
更多
延续踩坑中…
后续会举行不断更新,定阅请点watch,珍藏请点star,迎接开issues来发问