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

头像
疯狂的迈步
    阅读 4 分钟
    6

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

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

    学习路径

    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(){
    // 页面关闭
  }
})

    Page 实例的生命周期

    组件

    • 基本：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来提问

    javascript微信小程序
    疯狂的迈步
    122 声望1 粉丝

    正在加载中，请稍候...

    « 上一篇
    一道关于javascript数据类型题目的思考

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 24阅读 10.2k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新