1. 样式问题
主要说一下微信小程序和之前的web开发中表现不一致的元素。
1.1 button 按钮
有时候,我们需要实现自定义转发的功能,但是重新设置button元素的样式,这个时候你可能会发现不管怎么设置button的样式,它的边框都去不掉。后来才知道原来是after伪元素的原因(如果是浏览器的话,如果有伪元素在开发者工具能直接看到,小程序就不行,这点我觉得还是有点坑的)。
解决方案:
.btn::after{ border:none;}复制代码
顺便列一下微信小程序button的默认样式:
button { position: relative; display: block; margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; box-sizing: border-box; font-size: 18px; text-align: center; text-decoration: none; line-height: 2.55555556; border-radius: 5px; -webkit-tap-highlight-color: transparent; overflow: hidden; color: #000000; background-color: #F8F8F8;}复制代码
默认行高,padding,margin这几个属性还是要注意一下的。
1.2 image 图片
小程序的image元素有一个mode属性来设置图片裁剪、缩放的模式,而且image组件默认宽度300px、高度225px。 也就是说,如果不设置mode属性,只设置width的值,图片肯定是会变形的,因为该图片的高度现在是225px而不是自适应的。
提供两种解决方案:
- 设置mode属性
// mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。// 我常用的模式是:// widthFix 宽度不变,高度自动变化,保持原图宽高比不变// 也就是说设置mode="widthFix"后只设置width属性,图片也可以自适应// wxml// wxss.info--head { width: 750rpx;}复制代码
- 不设置mode属性,设置width和height将图片的宽高固定,也不至于变形的太厉害,我觉得主要适用于轮播图还有列表页的缩略图之类的。
1.3 fixed定位
设置position: fixed;
的元素不能存在于 scroll-view 元素内,最好是在最外层,否则在ios系统上就会出现各种问题的。
2. 生命周期
2.1 进入主页面 -> 进入子页面 -> 返回主页面
生命周期依次为: 主页面onLoad -> 主页面onShow -> 主页面onReady -> 子页面onLoad -> 子页面onShow -> 子页面onReady -> 子页面onUnload -> 主页面onShow。
可以看到在这个过程中子页面的onHide并不会触发。
2.2 tab页之间进行切换
上一个tab页onHide -> 当前tab页onShow。
可以看到在 1 和 2 的过程中,tab页都不会触发 onUnload 事件。
2.3 onHide触发时机
页面隐藏/切入后台时触发。 如 navigateTo 或 底部 tab 切换到其他页面,小程序切入后台等。
2.4 onUnload触发时机
页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。
2.5 chooseImage
这个可是个我遇到的一个大坑,当调用 wx.chooseImage 这个API的时候,居然会触发 该页面的onHide 和 onShow 事件,可能是因为我对 切入后台时触发onHide理解的不够深刻???之前做的那个项目和 即时通讯IM 有关,我说为什么选择图片之后聊天记录怎么就乱了呢,当时真的坑了我不少时间,真的是一个萝卜一个坑。
2.6 遇到的问题
主要是想在退出页面的时候清除定时器,但是由于对 onHide 和 onUnload 触发时机理解的不够深刻,还专门开了 debug 具体调试了一下生命周期,这下算是大致上明白了。
还有一点,很重要,如果是在 webview 内有定时器,在退出小程序页面的时候一定要将 webview 的 src 属性设置为 空, 不然webview好像并不会销毁?反正我的定时器还在,设置src为空即可解决。
3. npm支持
官方的介绍只有4步:
- 在小程序中执行命令安装 npm 包:
npm install
; - 点击开发者工具中的菜单栏:工具 --> 构建 npm;
- 勾选“使用 npm 模块”选项;
- 构建完成后即可使用 npm 包。
照做一遍之后,嗯,很好。
what???我的操作有误吗?总共也才4步,难道这我都能出错?后来查了一下,发现还少了很重要的一步: package.json文件。对呀,平时做项目的时候这个文件都是最不可或缺的,怎么到了微信小程序就给忘了呢,看来还是读书太少了。解决办法:
- 先使用
npm init
在项目根目录下新建package.json文件。 - 之后跟着官方文档照做吧,我就不写了。
4. 新增的API
我上次写小程序都是一年以前了,所以我觉得新增的API可能大家都很熟悉了,不喜轻喷哈。
4.1 获取图片信息
该API用来获取图片的width, height, path, orientation,type 等信息,可以看到不仅能获取图片的宽度和高度,还能将 网络图片的地址换成本地图片的地址,当然了,网络图片需先配置download域名才能生效。
4.2 读取本地文件内容
通过指定 encoding 就可以得到类似于 html5 FileReader 的效果,比如将文件读取为 base64。小程序支持的 encoding 还是比较多的,可以自己看看官方文档的。
4.3 获取该小程序下的 本地临时文件 或 本地缓存文件 信息
这个API主要是用来获取文件的大小,也就是size属性。如果还需要文件摘要,可以使用下面的API。
4.4 获取文件信息
这个API主要是用来获取文件的size和digest信息,目前支持 md5 和 sha1 两种。
4.5 将页面滚动到目标位置
在做即时通讯的时候,如果收到新消息,在增加内容以后也要滚动页面至底部;下拉刷新也得回到顶部。这个时候该API就很有用了,要不然很无奈呀,我记得一年以前好像是没有这个功能的。
4.6 总结
其实列举的都是我在做 小程序 和 腾讯云IM 即时通讯的时候需要使用的API,腾讯云IM官方文档只有web端的,小程序的直接让你参考web端的,因为API的差异,基本上所有功能都需要自己封装,一般的还好,IM上传图片这个可就坑了,IM只能发送base64编码的文件,要不是看到小程序支持了base64编码,我都差点放弃了。
在不考虑压缩图片的情况,从选择图片到发送IM图片消息,光是小程序这边我就得调用4个API,小程序就不能简化一下吗?
5. 获取用户信息getUserInfo
这简直就是一个巨坑,做项目之前我去社区看了一下,发现这个API现在不能弹窗提醒了,必须用户点击按钮才能获取,就是说没有按钮,连弹窗都弹不出来的。针对这个问题,我直接给后台说了,那边居然说是别人家的就不用点击按钮就能获取,到你这怎么还得点击按钮?我跟你说,让用户点击按钮肯定是不现实的,那多影响用户体验,你自己想办法去。
what???官方都说的那么明确了,只有3种解决办法,每一种都绕不开按钮,我能怎么办?最后费了半天口舌,再加上我把别人家的小程序也都放到他们跟前,让他们一个个看清有没有按钮,总算是搞定了。
6.总结
说实话,作为一个开发者,我还是更喜欢web这种开发的平台,微信小程序真的是一步一个坑,如果可以,真的不想做微信小程序呀! 可惜没有如果o(╥﹏╥)o。