微信小顺序学问总结及案例集锦

2019年8月25日 192次阅读 来源: 疯狂的迈步

微信小顺序学问总结及案例集锦

微信小顺序的发展会和微信民众号一样，在某个时刻点迸发

进修途径

  1. 微信小顺序最好的教程肯定是官方的文档啦，点击这里直达 微信官方文档

  2. 仔细随着文档看一遍，置信有vue前端履历的看下应当就能够上手了，然后装置 微信小顺序开辟者东西

  3. 新建一个quick start项目，相识代码构造，这里附上全部quick start代码。

  4. 然后就拿个随手的api练练手，这里附上cnode代码，随着做完差不多就算入门了。

  5. 入门以后就是看其他项目的完成了，这里会附上案例集锦，一些github的案例。

学问总结

tip：看到了另一份W3CSchool整顿的文档，能够连系官方文档一同看

目次构造引见

  • app.js — 对本页面的窗口表现举行设置。

  • app.json — 对微信小顺序举行全局设置，决议页面文件的途径、窗口表现、设置收集超时时刻、设置多 tab 等。

  • app.wxss — 接收一个数组，每一项都是字符串，来指定小顺序由哪些页面构成。

页面生命周期

  1. 小顺序注册完成后，加载页面，触发onLoad要领。

  2. 页面载入后触发onShow要领，显现页面。

  3. 首次显现页面，会触发onReady要领，衬着页面元素和款式，一个页面只会挪用一次。

  4. 当小顺序背景运转或跳转到其他页面时，触发onHide要领。

  5. 当小顺序有背景进入到前台运转或从新进入页面时，触发onShow要领。

  6. 当运用重定向要领wx.redirectTo(OBJECT)或封闭当前页返回上一页wx.navigateBack()，触发onUnload

通例页面A：onLoad()–>onShow()–>onReady()–>onHide()–>onUnload()
释义：

  • onLoad()：监听页面加载，一个页面只会挪用一次

  • onShow()：监听页面显现，每次翻开页面都邑挪用一次

  • onReady()：监听页面首次衬着完成，一个页面只会挪用一次，代表页面加载终了，视图层和逻辑层可举行交互

  • onHide()：监听页面隐蔽，当页面被掩盖或进入背景实行

  • onUnload()：监听页面卸载，当页面被封闭或内存不足主动烧毁页面

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

  1. 进入A页面：A实行onLoad()–>onShow()–>onReady()；

  2. A页面navigateTo B页面：A实行onHide()，B实行onLoad()–>onShow()–>onReady()；

  3. B页面返回A页面：B实行onUnload()，A实行onReady()；

  4. 退出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

小顺序开辟踩坑纪录

  1. 小顺序页面空缺

    • css兼容性问webkit内核

    • lineShopId长度太长，字符转数字Number

    • post要求参数加上encodeURIComponent剖析字符串

  2. header要设置准确

    • get “content-type”:’application/json’

    • post “content-type”:’application/x-www-form-urlencoded’

    • content-Type:application/x-www-form-urlencoded,application/json

  3. bind事宜绑定不会阻挠冒泡事宜向上冒泡，catch事宜绑定能够阻挠冒泡事宜向上冒泡

  4. image背景图片地点必需是url或许base64/当地资本没法经由过程 css 猎取 能够运用收集图片，或许 base64，或许运用 <image/> 标签

  5. 运用竖向转动时，须要给scroll-view一个牢固高度，经由过程 WXSS 设置 height。假如scroll-view高度设置为100%,则不能触发上拉刷新和下拉加载事宜……

  6. App() 小顺序注册进口，全局唯一。App()用来注册一个小顺序，全局只要一个，全局的数据也能够放到这内里来操纵。

    // 注册微信小顺序，全局只要一个
let appConfig = {
    // 小顺序生命周期的各个阶段
    onLaunch: function(){},
    onShow: function(){},
    onHide: function(){},
    onError: function(){},

    // 自定义函数或许属性
    ...
};
App(appConfig);

// 在别的处所能够猎取这个全局唯一的小顺序实例
const app = getApp();

    小顺序并没有供应烧毁的体式格局，所以只要当小顺序进入背景肯定时刻、或许系统资本占用太高的时刻，才会被真正的烧毁。

  7. 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();

  8. {{}} 不能实行要领，只能处置惩罚简朴的运算如 “+ – * /”，比方碰到遍历list，每一个item的金额须要格式化，只能在js里预先格式化好再setData一遍( ╯□╰ )

  9. 数字键盘用 type=”digit”

  10. 制止页面下拉须要设置 “disableScroll”: true

案例集锦

tip：从案例里能够看到许多其他小顺序完成的体式格局，多多看代码

更多

延续踩坑中…

后续会举行不断更新，定阅请点watch，珍藏请点star，迎接开issues来发问

    原文作者：疯狂的迈步
    原文地址: https://segmentfault.com/a/1190000010058476
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞