小程序开发笔记

微信小程序开发的经验和笔记记录，整理一下分享出来。

1、配置合法域名

配了合法域名的地址才能正常通信。

• 接口请求，只考虑使用wx.request、wx.uploadFile、wx.downloadFile、wx.connectSocket方法的接口地址需要配置。
• webview，只考虑h5网址域名需要配置（包括iframe的），而h5里的接口请求不需要考虑。
• 每一种类型最多配置200个域名，每个月最多配置50次。

2、设备id

• 小程序没有设备id（官方没有提供相关API）。
• 由于一个设备可能登录多个微信号，每个微信号对应一个openId，所以openId不能作为设备号。
• 但openId可以作为uv统计，用户未登录也能获取到openId。

3、分包

小程序主包大小限制最高2m，超出后就无法上传代码，也就无法发布上线。所以需要配置分包。

• 由于分包化一定会改变小程序页面路径地址，所以分包需要在项目初始搭建时就规划配置好，否则在后期修改的成本和风险比较大。
• 图片等资源最好都上传到图片服务器后使用，不要放在本地占用空间。
• 主包的资源在分包里可以使用，但分包的资源不要在主包或其他分包使用。

4、更新机制

小程序的启动分为热启动和冷启动。

• 热启动：直接使用本地代码包，不会检查代码更新。
• 冷启动：后台运行超过五分钟后再次启动就会变成冷启动。

更新流程：

• 第一次冷启动，继续使用本地包，同时异步检查更新，下载最新包；第二次冷启动时才会使用最新包。
• 为优化流程，尽早让用户使用最新包，可以在代码里配置更新提示，可在第一次冷启动时提示更新（仅引导提示用户，无法强制使用最新包）。

// 在app的onLaunch里执行以下方法，可在第一次冷启动时提示更新。
checkUpdate() {
    if (!wx.getUpdateManager()) return
    const updateManager = wx.getUpdateManager()
    updateManager.onUpdateReady(() => {
        wx.showModal({
            title: '更新提示',
            content: '新版本已经准备好，是否重启小程序？',
            success(res) {
                if (res.confirm) {
                    updateManager.applyUpdate()
                }
            }
        })
    })
}

5、分享

• 小程序分享时使用的什么版本，打开分享出去的卡片进入的就是什么版本，无法控制，例如开发版分享打开的也是开发版。
• 小程序只能分享小程序卡片，无法分享网页，如有需求，可以用webview替代，分享时指定路径，携带网页的url参数，打开后接收url传入webview展示。

6、特殊场景的生命周期

分享的卡片、扫小程序码：

• 触发：app onShow — page onLoad — page onShow

• 服务通知-模板消息：

触发：app onLoad — app onShow — page onLoad — page onShow

7、滑动穿透

常规情况：

• 给元素添加 catchtouchmove=“true”，阻止该元素上的滑动事件。即通过禁止页面元素滚动来解决滑动穿透问题。

ios下textarea滑动穿透：

• 解决方法：textarea设置fixed=“true”

8、canvas

（1）保存canvas模糊问题:

• 多绘制个三倍的canvas，通过ctx.scale(3, 3)放大三倍即可。
• scale要放在绘制之前，仅用于保存，通过定位到屏幕外的方式来隐藏 (display: none的隐藏方式会导致无法保存)。

（2）canvas网络图片真机不显示：

• 先通过wx.downloadFile下载到本地，再用本地路径绘制。

9、小程序码scene

生成小程序码时可以携带path页面路径和scene参数

• 但scene长度被限制最长32位字符长度。
• path路径也无法拼接参数。
• 对于必须使用长参数生成小程序码的，可以考虑将参数通过接口保存到后端，后端返回一个id来作为scene参数，前端接收后再用id请求接口置换真正的长参数使用。
• 官方文档：https://developers.weixin.qq.com/community/develop/doc/0004c219dd0200c37c46a78355bc00

10、上滑加载更多

上滑加载更多不触发问题：

• 检查page和页面是否设置了height: 100%; overflow: auto;
• 解决方法：page可以设置height:100%; 给页面根元素设置min-height: 100%。

11、tabbar

• 原生tabbar有很多限制，例如：不支持自定义跳转原生页的地址、不支持配置某一项的显示隐藏、不支持tabbar项的顺序。
• 官方自定义tabbar也有很多问题，例如真机显示有时会有两层tabbar、首次切换tabbar会闪烁一下，效果不佳。
• switchTab 会关闭其他非tabbar页，但tabbar页不会关闭，那么tabbar页的webview h5访问地址就不会改变，该tabbar页也不会触发onLoad，如需改变需要换用reLaunch。
• setTabBarItem只能在tabbar页面才能使用，
• reLaunch会重置tabbar数据（图标、标题等）为app.json的默认配置数据。
• 在webview类型的tabbar页设置hideTabBar可能导致底bar留白，解决方式：在给webview的src赋值之前先隐藏tabbar。

更多参考：https://blog.csdn.net/u010059669/article/details/117424859

12、剪贴板

清空剪贴板无效问题：

• 安卓下通过wx.setClipboardData无法设为空字符串。
• 解决方法：可以设成空格代替。

13、image标签

image图片先拉伸后正常的问题：

• image标签使用mode=“widthFix”，是宽度固定，高度自适应，但第一次加载时会有先拉伸又迅速恢复正常的问题。
• 解决方法：给image设置height: auto;

14、真机报找不到组件

现象：

• 开发者工具一切正常，真机下报错，找不到组件，
• 切换使用新的编译模块时还出现预览失败，报文件已存在，
• h5页面未更新到最新效果。

解决方法：

• 关闭开发者工具，删除 C:\Users\你的用户名\AppData\Local\微信开发者工具 目录下的文件，重启开发者工具。

15、swiper

内容较多，祥看：https://blog.csdn.net/u010059669/article/details/107385809

16、组件样式穿透

组件根节点可以通过在父组件中给子组件添加class类名来添加样式，但组件内部节点默认无法作用上，需通过以下方法。

（1）组件样式隔离

父组件设置styleIsolation：

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

查看实际的dom结构，直接通过类名重写来覆盖子组件的样式。

<view class="timeWrap">
    <van-count-down
      time="{{ (partData.end_time - partData.current_time) * 1000 }}"
    />
  view>

.van-count-down {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFF;
}

（2）外部样式类

子组件封装externalClasses：

Component({
  externalClasses: ['my-class']
})

子组件dom节点添加同名类名：

<view class="my-class">这段文本的颜色由组件外的 class 决定view>

父组件添加同名属性：

<child-component my-class="red-text" />

父组件添加对应类名的样式：

.red-text {
  color: red;
}

17、地理位置定位

getLocation：

• 内嵌h5定位在个别机型需要授权，授权弹窗拒绝后会重新加载页面，循环，拒绝授权以及未开启位置服务都无法通过fail检测到，可以通过localStorage设置只定位一次，不管是否成功。

18、全局样式

• 全局样式放在app.wxss里
• 组件如果要使用全局样式需要在组件里添加options里，配置addGlobalClass: true

19、自定义组件

• 推荐所有组件以及页面都使用自定义组件来写，对于页面来说，自定义组件方式比page方式支持的功能更多，组件拆分也更方便。
• 自定义组件需在组件json配置中添加"usingComponents": {}，也可以在全局app.json中全局配置。
• 自定义组件里通过wx.createSelectorQuery()无法选取到组件内的dom节点，需要使用wx.createSelectorQuery().in(this)才行。

20、输入框

输入框聚焦时文字样式改变的问题：

• 文字往上顶或出现抖动：给input设置固定高度。
• 文字字体等样式改变，官方bug，祥见：https://developers.weixin.qq.com/community/develop/doc/31610b268fab524253b74f47e1f0fec0

ios输入框崩溃的问题：

• input type 在text和number来回切换时有问题，建议只用一种type，通过正则匹配校验内容。

21、二维码

无法长按识别二维码：

• 检查页面地址是否存在非法字符参数，url地址参数都需要通过encodeURIComponent()进行转码处理。