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

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而不是自适应的。

提供两种解决方案:

1. 设置mode属性

// mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
// 我经常使用的模式是：
// widthFix 宽度不变，高度自动变化，保持原图宽高比不变
// 也就是说设置mode="widthFix"后只设置width属性，图片也能够自适应

// wxml
<image
    mode="widthFix"
    class="info--head"
    src="{{src}}"></image>
// wxss
.info--head {
    width: 750rpx;
}
复制代码

2. 不设置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步：

1. 在小程序中执行命令安装 npm 包：npm install；
2. 点击开发者工具中的菜单栏：工具 --> 构建 npm；
3. 勾选“使用 npm 模块”选项；
4. 构建完成后便可使用 npm 包。

照作一遍以后，嗯，很好。

what???个人操做有误吗？总共也才4步，难道这我都能出错？后来查了一下，发现还少了很重要的一步: package.json文件。对呀，平时作项目的时候这个文件都是最不可或缺的，怎么到了微信小程序就给忘了呢，看来仍是读书太少了。

解决办法:

1. 先使用 npm init在项目根目录下新建package.json文件。
2. 以后跟着官方文档照作吧，我就不写了。

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。