微信小程序开发心得：样式、image 图片、fixed定位

1. 样式问题

主要说一下微信小程序和之前的web开发中表现不一致的元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

1.1 button 按钮

有时候，我们需要实现自定义转发的功能，但是重新设置button元素的样式，这个时候你可能会发现不管怎么设置button的样式，它的边框都去不掉。后来才知道原来是after伪元素的原因（如果是浏览器的话，如果有伪元素在开发者工具能直接看到，小程序就不行，这点我觉得还是有点坑的）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

解决方案:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

.btn::after{
  border:none;
}
复制代码

顺便列一下微信小程序button的默认样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

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这几个属性还是要注意一下的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

1.2 image 图片

小程序的image元素有一个mode属性来设置图片裁剪、缩放的模式，而且image组件默认宽度300px、高度225px。 也就是说，如果不设置mode属性，只设置width的值，图片肯定是会变形的，因为该图片的高度现在是225px而不是自适应的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

提供两种解决方案:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

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系统上就会出现各种问题的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

2. 生命周期

2.1 进入主页面 -> 进入子页面 -> 返回主页面

生命周期依次为: 主页面onLoad -> 主页面onShow -> 主页面onReady -> 子页面onLoad -> 子页面onShow -> 子页面onReady -> 子页面onUnload -> 主页面onShow。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

可以看到在这个过程中子页面的onHide并不会触发。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

2.2 tab页之间进行切换

上一个tab页onHide -> 当前tab页onShow。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

可以看到在 1 和 2 的过程中，tab页都不会触发 onUnload 事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

2.3 onHide触发时机

页面隐藏/切入后台时触发。 如 navigateTo 或 底部 tab 切换到其他页面，小程序切入后台等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

2.4 onUnload触发时机

页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

2.5 chooseImage

这个可是个我遇到的一个大坑，当调用 wx.chooseImage 这个API的时候，居然会触发 该页面的onHide 和 onShow 事件，可能是因为我对 切入后台时触发onHide理解的不够深刻？？？之前做的那个项目和 即时通讯IM 有关，我说为什么选择图片之后聊天记录怎么就乱了呢，当时真的坑了我不少时间，真的是一个萝卜一个坑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

2.6 遇到的问题

主要是想在退出页面的时候清除定时器，但是由于对 onHide 和 onUnload 触发时机理解的不够深刻，还专门开了 debug 具体调试了一下生命周期，这下算是大致上明白了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

还有一点，很重要，如果是在 webview 内有定时器，在退出小程序页面的时候一定要将 webview 的 src 属性设置为 空， 不然webview好像并不会销毁？反正我的定时器还在，设置src为空即可解决。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

3. npm支持

官方的介绍只有4步：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

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

照做一遍之后，嗯，很好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

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

解决办法:

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

4. 新增的API

我上次写小程序都是一年以前了，所以我觉得新增的API可能大家都很熟悉了，不喜轻喷哈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

4.1 wx.getImageInfo 获取图片信息

该API用来获取图片的width， height， path， orientation，type 等信息，可以看到不仅能获取图片的宽度和高度，还能将 网络图片的地址换成本地图片的地址，当然了，网络图片需先配置download域名才能生效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

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

通过指定 encoding 就可以得到类似于 html5 FileReader 的效果，比如将文件读取为 base64。小程序支持的 encoding 还是比较多的，可以自己看看官方文档的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

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

这个API主要是用来获取文件的大小，也就是size属性。如果还需要文件摘要，可以使用下面的API。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

4.4 wx.getFileInfo 获取文件信息

这个API主要是用来获取文件的size和digest信息，目前支持 md5 和 sha1 两种。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

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

在做即时通讯的时候，如果收到新消息，在增加内容以后也要滚动页面至底部；下拉刷新也得回到顶部。这个时候该API就很有用了，要不然很无奈呀，我记得一年以前好像是没有这个功能的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

4.6 总结

其实列举的都是我在做 小程序 和 腾讯云IM 即时通讯的时候需要使用的API，腾讯云IM官方文档只有web端的，小程序的直接让你参考web端的，因为API的差异，基本上所有功能都需要自己封装，一般的还好，IM上传图片这个可就坑了，IM只能发送base64编码的文件，要不是看到小程序支持了base64编码，我都差点放弃了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

在不考虑压缩图片的情况，从选择图片到发送IM图片消息，光是小程序这边我就得调用4个API，小程序就不能简化一下吗？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

5. 获取用户信息getUserInfo

这简直就是一个巨坑，做项目之前我去社区看了一下，发现这个API现在不能弹窗提醒了，必须用户点击按钮才能获取，就是说没有按钮，连弹窗都弹不出来的。针对这个问题，我直接给后台说了，那边居然说是别人家的就不用点击按钮就能获取，到你这怎么还得点击按钮？我跟你说，让用户点击按钮肯定是不现实的，那多影响用户体验，你自己想办法去。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

what？？？官方都说的那么明确了，只有3种解决办法，每一种都绕不开按钮，我能怎么办？最后费了半天口舌，再加上我把别人家的小程序也都放到他们跟前，让他们一个个看清有没有按钮，总算是搞定了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html

6.总结

说实话，作为一个开发者，我还是更喜欢web这种开发的平台，微信小程序真的是一步一个坑，如果可以，真的不想做微信小程序呀! 可惜没有如果o(╥﹏╥)o。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/9311.html