开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 微信小程序开发注意点 -> 正文阅读

[移动开发]微信小程序开发注意点

一、开发小程序时，每个页面一定要在app.json文件中注册，页面文件夹和其包含的四个文件的名字要保持一致。

二、.五层页面栈限制

小程序最多只能打开5个页面，当打开页面的个数达到5个以后，wx.navigateTo不能正常打开新的页面，请避免层级过多的交互方式，或使用wx.redirectTo重定向

三、text允许复制用的是css控制的, 也就是:

user-select: none;
-webkit-user-select: none;

四、this作用域分析

1.在Page({})里面，this关键字指代Page({})整个对象
2.因此可以通过this关键字访问或者重新设置Page({})里data的变量
3.然而在loadData函数中使用了wx.request({})API这个方法导致在wx.request({})里没办法使用this来获取Page({})对象
4.虽然在wx.request({})里没法使用this获取Page({})对象，但是可以在wx.request({})外面先把this存在某个变量中，所以就有了var that =this?这个声明。此时that指代Page({})整个对象，这样子就可以在wx.request({})里使用that访问或者重新设置Page({})里data的变量

?五、js中，字符串转Date对象，应同时考虑安卓和苹果

错误：let startTime = new Date('2021-10-18 23:00:00').getTime();

正确：

let startTime = new Date('2021/10/18 23:00:00').getTime();

或者
let startTime = new Date('2021-10-18 23:00:00'.replace(/-/g, '/')).getTime();

六、阻止事件冒泡。

小程序里也存在事件的冒泡，具体的冒泡事件可以参考官方文档，如果希望事件向上冒泡，则使用bind来绑定事件，若希望阻止事件冒泡，就使用catch来进行事件绑定。

bindtap: 元素绑定事件，父节点绑定事件会冒泡
catchtap: 不会冒泡，仅在当前元素触发

例：

七、去掉Button的默认边框

button::after{
? border: none;
}或者
button{
? ? position: static;
}

八、tab跳转

在同一个tab里的页面可以跳转，并且允许携带参数。不同tab的页面之间无法跳转，使用wx.navigateTo()接口会报错。同时，tab之间的跳转可以用wx.switchTab()实现，但是路径后不能带参数。

九、在组件标签里，可以通过“data-属性值”的方式绑定我们需要的数据，然后在事件内置event对象里进行获取。

十、分享按钮

目前小程序可以分享给微信好友和微信群，但小程序默认是没有这个功能的，只有在Page里定义了onShareAppMessage事件处理函数，点击小程序右上角才可以看到分享按钮。

有两种方式：

①右上角菜单的「转发」按钮时触发的事件wx.onShareAppMessage(function callback)

②通过给?button?组件设置属性?open-type="share"，可以在用户点击按钮后触发?Page.onShareAppMessage?事件

分享到朋友圈

shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮
显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮

示例代码：

一般写在页面的onLoad

wx.showShareMenu({
? withShareTicket: true,
? menus: ['shareAppMessage', 'shareTimeline']
})这样“分享到朋友圈”按钮就会显示

分享到朋友圈时参数等的绑定：
?//?转发至朋友圈

??onShareTimeline?:?function?(res)?{

????return?{

??????title:?转发标题,

??????query:?'a=1&b=2'

????}

??},

? // 取消绑定分享参数
? wx.offShareTimeline()

隐藏当前页面的转发按扭：

本接口为 Beta 版本，暂只在 Android 平台支持。需要隐藏的转发按钮名称列表，默认['shareAppMessage', 'shareTimeline']。按钮名称合法值包含 "shareAppMessage"、"shareTimeline" 两种

wx.hideShareMenu({
? menus: ['shareAppMessage', 'shareTimeline']
})

十一、去掉滚动条

方式一

::-webkit-scrollbar {
? ? ?width: 0;
? ? ?height: 0;
? ? ?color: transparent;
}

方式二

::-webkit-scrollbar {
? ? ?display: none;
}

十二、给文字加横线

css:

text-decoration:line-through;

十三、打印数据显示[object Object]

直接打印，不做拼接

十四、原生的组件层级

原生的组件层级是最高的，不能设置z-index。比如live-player，live-pusher等，但提供了cover-view、cover-image可覆盖在原生组件之上的文本视图

十五、onUnload

页面退出、返回，会执行onUnload()这个方法，所以在这个方法中我们需要清空资源数据

十六、app生命周期——始终优先于page声明周期

onLaunch：小程序初始化完成就调用，只被触发一次
onShow：小程序启动、从后台进入前台显示，被触发
onHide：小程序从前台进入后台，被触发
onError：小程序出错、api调用失败、被触发
-onPageNotFound：打开的页面不存在，被触发
其他：开发者可以添加任意函数或数据到Object对象中，用this访问

注意：

App() 必须在 app.js 中注册，且不能注册多个
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例
不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成
通过 getApp() 获取实例之后，不要私自调用生命周期函数

十七、page生命周期

onLoad: 页面在加载时，只被触发一次
onReady: 页面初次渲染完成，只被触发一次
onShow: 页面显示时，被触发
onHide: 页面隐藏时，被触发（触发左上角的退出箭头时，仅触发app.onHide
onUnload: 生命周期函数--监听页面卸载，只被触发一次
onPullDownRefresh: 页面相关事件处理函数--监听用户下拉动作
onReachBottom: 页面上拉触底事件的处理函数
onShareAppMessage: 用户点击右上角转发
onPageScroll: 页面滚动触发事件的处理函数
onTabItemTap: 当前是 tab 页时，点击 tab 时触发
其他任何开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

注意：

执行顺序：onLoad => onShow => onReady

一个完整的小程序执行的生命周期如下：

app.onLaunch => app.onShow => page1.onLoad => page1.onShow => page1.onReady
（打开程序，第一个页面page1加载完成）

=> page1.onHide => page2.onLoad => page2.onShow => page2.onReady
（从第一个页面新打开page2）

=> page2.onUnload => page1.onShow => ... => app.onUnload
（关闭page2，返回page1...退出小程序）

十八、网络相关问题

断网或者与正常网络互相切换时问题

如果需要根据网络状态判断是否发送异步请求，可以通过官方文档提供的onNetworkStatusChange和``两个方法来处理

wx.getNetworkType({

success(res) {
? if(res.networkType === 'none') {
? ? globalData.netNotConnected = true;
? }
}
})

wx.onNetworkStatusChange(res => {

if (res.isConnected) {
? globalData.netNotConnected = false;
} else {
? globalData.netNotConnected = true;
? tip.alert("网络已断开，请连接后重试");
}
});

十九、自定义字体

无法使用本地的字体文件，必须使用网络地址

二十、背景图片问题

background-image背景图片不支持本地图片，只能用网络url或者base64；本地图片要用image标签才行

二十一、input长度

value值的默认最大长度是140个字符（不包括空格），如果长度长度超过最大长度，需要设置maxlength=-1即可。

H5中input的value默认没有长度限制

二十二、text组件的`/n`问题

view组件不识别/n，text可以。保存的文本中有换行,如果读取的时候将数据放入view中换行没有效果,放入text中就好了。原则上text标签与其中的内容不能有换行或空格，否则会有大片空白

wx.showModal方法的换行问题：在文本中添加\r\n，但需要在真机上才能生效，开发者工具不行

二十三、多个空格的问题

小程序中通过多个&nbsp是无法正常显示多个空格的，解决方法：用中文全角空格部　　门?（shift+space）

二十四、textarea问题

textarea，map等组件是客户端创建的原生组件，他的层级是最高的。如果遇到定位元素的话，永远在最上面，盖不住。

请勿在scroll-view swiper picker-view movable-view使用textarea
css动画对textarea无效
设置了auto-height="true"不设置maxlength=“-1”，输入长度会遭限制；

页面中只能有一个?<textarea/>或<input/>设置auto-focus属性；
textarea苹果和安卓的显示高度不一致，不给textarea设置宽度，则默认是300px;
设置auto-height时，style.height不生效，并且ios和android高度显示不一致
button的边框是用:after方式实现的，用户如果在button上定义边框会出现两条线，需用:after的方式去覆盖默认值。

二十五、scroll-view

请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
scroll-into-view 的优先级高于 scroll-top
在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
注意：使用竖向滚动时，需要给<scroll-view>一个固定高度height(如100vh)，设置百分数无效
清除黑色滚动条（竖向滚动时）
::-webkit-scrollbar {?
? width: 0;?
? height: 0;?
? color: transparent;?
}

二十六、cover-view
cover-view的内容只有放置在原生组件里才能显示
cover-view的内容不能超过原生组件，否则会被强制截取
微信文档中说只支持最外围的cover-view的fixed，经测试内围absolute也可使用，但有时候会看到用absolute的标签不见了，这时候你就要查看包括这个不见的标签的父元素的高度了，估计是absolute的标签超高了被父元素截取了
cover-image不支持absolute
注意：由于小程序里面video标签的层级是最高的无法覆盖。所以cvoer-view应运而生。它就是用于盖在video标签上面，进行对video标签的周遭加以装饰的利器。?例如在cover-view上面使用相对定位，当video标签大小发生变化的时候，cover-view上面的元素就乱七八糟。又譬如圆角的不起效等等。具体的问题大家可以在开发者社区看看。[cover-view定位问题](https://developers.weixin.qq.com/search?action=list&t=search/index&search_type=1&key=cover-view&token=&lang=zh_CN)?避坑方法：尽量在cover-view上不使用定位，其他的bug只能等官方优化，大家谨慎使用。
二十七、关于live-pusher,live-player

<live-player />’渲染失败，错误原因： insertLivePlayer:fail:access denied

原因：微信的权限里的相机和麦克风没有权限导致的，到手机设置-应用-微信-权限里设置

二十八、键盘与输入框距离

input,textarea 可以通过标签的cursor-spacing属性设置键盘与输入框的距离

二十九、循环渲染

有嵌套关系的组件需要被循环渲染时，一定?要用block或repeat，否则会出现一些奇怪问题，如可能取不到item对象的属性值等

三十、dataset属性问题

属性名必须全部小写，不支持驼峰方式。如data-id必须小写。data-author-name在e.currentTarget.dataset中会自动转换authorName

三十一、视频标签黑边

objectFit去除小程序视频标签的黑边（没试过）

三十二、swiper问题
初次使用swiper的的时候可能遇到当图片自动轮播到最后的时候，跳转到第一页的效果不友好，此时需要添加?circular=“true”?无缝衔接

轮播图显示异常问题：A页面有`swiper`图片轮播，跳转到B页面编辑并删除某张轮播图片，再返回A页面后，轮播图显示空白，添加新图片时没问题；初步猜测：返回A页面后，`swiper`的`current`属性的当前值状态值指向不存在导致。但在A页面`onShow`时重置`current`值也不行，暂没找到原因 

1. 省市县镇级联选择时，当有多个`swiper-item`时，点击第二个及以后的省获取市时显示空白

解决方法：在点击第二个`swiper-item`里的省获取市之前先把`swiper`组件重置，如设置渲染条件先不让他渲染，获取到市数据后再设置条件让`swiper`组件渲染出来

1. `swiper`滑动过一次后，无法再动态的设置`current`的值解决方案


给`swiper`添加`change`监听事件，当滑动`swiper`时通过`e.detail.current`记录`current`，下次再返回时设置`current`为上次保存的值。

参考：[swiper bug, swiper滑动过一次后，无法动态改变current值](https://openclub.alipay.com/read.php?tid=2919&fid=51)

三十三、canvas问题

canvas层级最高，其他元素无论z-index设置多大，都不能盖在canvas上，解决方法：让canvas定位后设置比较大的偏移值，或设置hidden

绘图时的图片必须是已经下载好的图片，不能使用网络图片或base64，可以用微信提供的getImageInfo或downloadFile，示例：
```
  async createPoster() {
    const imgPromise1 = return new Promise((resolve, reject) => {
      wx.getImageInfo({ 
        src, 
        success(res) {
          resolve(res);
        },
        fail(error) {
          reject(error);
        }
      })
    });

    Promise.all([imgPromise1, imgPromise2]).then(res => {
      const [ res1, res2 ] = res;
      ...
      const ctx = wx.createCanvasContext('poster-canvas-id');
      ctx.drawImage(res1.path, x, y, ...);
    })
  }
```
三十四、海报（二维码）

手机扫描分享的海报二维码，只能跳转到小程序线上版本，可以通过抓包获取跳转时的启动参数，放到开发者工具中模拟线下环境跳转
```
如：通过scene值来实现：手机扫码生成海报二维码，抓包这个请求https://activity.12345.com/wxa/town/load?scene=hvORN4dgYy，记下这个scene值，在开发者工具中配置路径'pages/index/index'  参数scene=hvORN4dgYy即可

原理：getAppCode方法中，会把页面加载所需要的参数作为scene值来获取二维码；当扫描二维码时，这个二维码中含有scene值，先进入XX首页时会通过上面那个抓包请求获取这个scene，然后从scene中解析并调整到pagetype，从而先通过跳转首页后再跳转到指定的页面
```
三十五、缓存问题

缓存最大支持 10M，可以写入多种类型数据number、boolean、array、string、object 等
调用同步方法写缓存时，经常会报错(如下图提示)，官方建议尽量使用异步方式写入缓存，编码同步方式；可以添加 try catch finally 处理
```
在开发小程序过程中，是否遇到，自己已经删除了体验版小程序，但是缓存依然存在？

那是因为，同一个小程序的开发版、体验版、线上版的缓存是共用的，你需要同时删除这三个版本的小程序，缓存才会被删除。
```
三十六、组件传值问题

只能传递字符串类型，可以传object,array等，但需要先序列号；注意：如果传递是object，内部不能再有嵌套的复合数据类型了，负责子组件无法正确渲染（手机），array类型的可以
不要再在子组件中修改props中属性的数据类型，否则当该属性需要频繁获取时，页面会出现抖动，体验极差（如省市县镇的级联选择时，当前显示的areaData都是通过props中的areaData获取时，不能在子组件中修改其数据类型）
...
props = {
? areaData: {
? ? type: String,
? ? default: ""
? }
}
computed = {
? this.areaData = JSON.parse(areaData); ? // 不可以，页面抖动
? this.$apply(); ?
}
...
三十七、页面滚动到顶部
基础库1.4.0支持
wx.pageScrollTo({
? scrollTop: 0 ? //滚动到页面的目标位置（单位px）
})
三十八、window配置

navigationBarTextStyle导航栏标题颜色仅支持black/white状态栏，导航条，标题，窗口背景色仅支持纯色，不支持渐变色

三十九、设置网络请求的超时时间
"networkTimeout": {
? "request": 10000 // 10秒
}

四十、Image

image默认width：300px，height：225px，lazy-load懒加载只对page与scroll-view下的image有效

四十一、微信号，QQ号，手机号的正则验证

某些活动需要填真实姓名，联系方式等信息，为了防护用户随意填写的信息，需要对信息进行校验
var wxReg=new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$") //微信号正则验证
var qqReg=new RegExp("[1-9][0-9]{4,}") ?//QQ号正则验证

var phReg=new /^1[345678]\d{9}$/ ?//手机号正则验证

var nameReg=new RegExp（"^[\u4e00-\u9fa5]{2,4}$"） ?//2-4位中文姓名正则验证