小程序开发笔记

醉逍遥neo

已于 2022-03-16 17:26:17 修改

阅读量462

点赞数

分类专栏：小程序文章标签：小程序前端 tabbar 样式微信

于 2022-03-01 15:55:48 首次发布

本文链接：https://blog.csdn.net/u010059669/article/details/123205890

版权

小程序专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

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)才行。