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

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

学习路径

  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来提问

Hoyt · 7月5日

最重要的你没有说明,就是在需要用到判断用户没有登陆后跳转的问题,在onLoad 和 onReday 后才会注册页面所以必须加延时才能实现跳转。

回复

0

判断用户登录时需要你自己处理操作的。

疯狂的迈步 作者 · 7月5日
Hoyt · 7月5日

看下来你着不是总结是官方文档拷贝版。

回复

Huooo · 7月6日

你对页面生命周期这种大方向的总结还是很有用的,加油!

回复

载入中...
疯狂的迈步 疯狂的迈步

24 声望