微信小程序出来也有一段时间了,之前也陆续做过 demo 练练手,毕竟自己的 demo 还是比较简单的,如今参与公司的项目也是一路踩坑而来。
首先,小程序类 web,但不同于我所认识的 html,他有属于自己的开发语言及工具:
小程序主要包含以下三个入口文件:
调用(注:页面中调用 app.js 中的方法时不需要通过
- getApp()
或者
- require
引入)
- import
本次项目只负责了首页、授权和一些公共模块的开发,接下来就着重从这些模块展开。
当然,微信小程序和其他前端框架类似也是有生命周期的:
- Page({
- /**
- * 页面的初始数据
- */
- data: {},
- /**
- * 生命周期函数--监听页面加载(像首页数据请求可以放在这里)
- */
- onLoad: function(options) {},
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady: function() {},
- /**
- * 生命周期函数--监听页面显示
- */
- onShow: function() {},
- /**
- * 生命周期函数--监听页面隐藏
- */
- onHide: function() {},
- /**
- * 生命周期函数--监听页面卸载
- */
- onUnload: function() {},
- /**
- * 页面相关事件处理函数--监听用户下拉动作(这里添加了下拉刷新的功能)
- */
- onPullDownRefresh: function() {},
- /**
- * 页面上拉触底事件的处理函数
- */
- onReachBottom: function() {},
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function() {}
- })
当我们在
中初始化的值需要修改时,可在各生命周期及方法中通过
- data
修改。由于小程序的入口页面就是首页,在首页添加了用户登陆和网络状态的检测在
- setData()
中。
- onLoad
tabBar 即小程序的底部导航栏,由于微信的限制,最少 2 个最多 5 个导航栏,只可设置文案、图标。
小程序样式采用 WXSS 语言(具有 CSS 大部分特性)。他也提供了一种新的单位 rpx(可根据屏幕宽度自行适应)。官方规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素,既然这样我们也推荐了我们设计师采用 iPhone6 作为设计标准,即 750px 宽度。
但是在实际的开发过程中如果字体大小也使用 rpx 做单位的话,在 iPhone6 Puls 上显示文字过大,影响美观。后经过测试采用了 px 做单位,即原设计稿尺寸的一半 + px,这样可以保证文字大小在各设备中保持一致。
在官方文档上有明确规定,本地资源是无法通过 CSS 获取的,图片的话只能使用网络资源或 base64 方式。首页有个需要判断网络状态的需求,由于断网情况下无法获取网络资源,最后就使用了 base64 的方式。
官方获取网络状态的 API 是
为异步接口,通过它的返回结果再进行下一步(是显示无网络还是调用数据列表接口),说到这里大家都知该怎么办了——
- getNetworkType
,具体封装如下
- Promise
- new Promise((resolve, reject) = >{
- let req = wx.getNetworkType({
- success: function(res) {
- var networkType = res.networkType;
- if (networkType === 'none') {
- resolve(false)
- } else {
- resolve(true)
- }
- },
- fail() {
- reject(false)
- }
- });
- })
调试的时候最大的问题呢是:无论是开发者工具上还是手机上,记得先把缓存删干净再测。特别是开发者工具每次切换 host 都要清理缓存,再重新打开,而且出现 bug 的时候尽量多测几次,进行反复确定。不然的话,你可能会发现,本来测好的功能又出现问题了,或者是本来有问题的部分又没有问题了。
开发者工具调试界面和 Chorem 浏览的开发者工具类似,调试工具分为 7 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace。
在开发环境下手机调试需要满足以下条件:
来源: https://juejin.im/post/5a3398a2518825772c42c0f6