微信小程序开发的一点心得

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
<image
    mode="widthFix"
    class="info--head"
    src="{{src}}"></image>
// 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 wx.getImageInfo 获取图片信息

该API用来获取图片的width， height， path， orientation，type 等信息，可以看到不仅能获取图片的宽度和高度，还能将 网络图片的地址换成本地图片的地址，当然了，网络图片需先配置download域名才能生效。

4.2 FileSystemManager.readFile 读取本地文件内容

通过指定 encoding 就可以得到类似于 html5 FileReader 的效果，比如将文件读取为 base64。小程序支持的 encoding 还是比较多的，可以自己看看官方文档的。

4.3 FileSystemManager.getFileInfo 获取该小程序下的本地临时文件或本地缓存文件信息

这个API主要是用来获取文件的大小，也就是size属性。如果还需要文件摘要，可以使用下面的API。

4.4 wx.getFileInfo 获取文件信息

这个API主要是用来获取文件的size和digest信息，目前支持 md5 和 sha1 两种。

4.5 wx.pageScrollTo 将页面滚动到目标位置

在做即时通讯的时候，如果收到新消息，在增加内容以后也要滚动页面至底部；下拉刷新也得回到顶部。这个时候该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。