开发中遇到的坑与小程序开发技巧，你知道吗？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

开发中遇到的坑与小程序开发技巧，你知道吗？

首先我想抱怨一下mpvue。

由于之前做的小程序都是原生开发，所以*近的一个项目*初选择的是使用mpvue。 我也想自己尝试一下，但是完成了基础准备后，第三天就开始开发。 我在写带输入框的组件时遇到了一个严重的bug，导致所有组件形式的输入框都无法使用。

我上网查看了mpvue dev分支上的提交记录。 *近一次是半个月前。 我提交了一些代码并添加了几个用户。 幸运的是，我们果断放弃了mpvue，转而采用原生开发，才使得项目能够按时上线。

写这篇文章的时候，我再次查看了mpvue的提交记录。 *近一次提交是在18天前，提交的内容仅为添加的用户。 在合着的这一个月里，mpvue正真的代码只提交了一次。 感觉美团造了mpvue这个轮子之后，并没有太重视它的更新和修复。 看看wepy，差距确实很大。

建议大家使用原生开发进行小程序开发。 *好不要使用mpvue和wepy。 虽然 wepy 得到了维护，但它还是有很多 bug。 原生开发是*稳定​​的选择。 一旦这些小程序框架有任何更新，但可能没有足够的时间进行调整。

开发过程中遇到的问题：

1. *高级别的错误。 由于它使用原生组件，级别*高，会产生很多奇怪的bug。 有关详细信息，请参阅此处和此处的*后几行。

2、微信小程序码仅供在线使用。 开发版和试用版扫码会提示小程序尚未发布。

如何测试小程序代码：

A。 设置编译模式参数测试小程序代码

例如配置url：pages/index/index?scene=-，scene为小程序代码B接口的参数（多个参数可以用自定义符号分隔，长度不能超过32个字符）

onLoad (options) {
  // 这里就可以拿到小程序码中的参数6430277129069593265
  console.log('二维码进入', decodeURIComponent(options.scene)
}   

b. 通过开发工具的‘二维码编译’直接解析生成的二维码（虽然这种方式是*好的选择，但是我自己解析不了，全部跳转到首页了）

因此，不建议您在开发小程序的**个版本中就启动小程序代码功能。 您可以在首个版本中预留一个页面，提前编写测试代码，供后续版本调试小程序代码，确保小程序代码下次上线成功。

3、iOS端，如果页面开启下拉刷新，并使用toast /，下拉刷新时页面会有较大的反弹动作。 解决办法是去掉微信吐司/或者自己写弹框。

4.组件中使用时不生效的问题

问题代码如下：

@-webkit-keyframes __spinner-loading {
 from,
 to,
 40% {
  background-color: #888;
 }
 33.333% {
  background-color: red;
 }
}

原因：33.333%可以改为33%

5. 有*小尺寸。

6. wxss不支持某些css3选择器。

7. 不支持:,

8. 两者叠加在所有东西上，并且对于后续的所有绘制，dom级别中*后绘制的东西将始终位于*前面。

解决办法：把要放在下层的wxml写在前面。

9、必须设置高度开发中遇到的坑与小程序开发技巧，你知道吗？，否则无法监听到相关事件。

10. 不能通过绝对定位、上、下、左、右0来设置全屏覆盖，需要调用wx. 方法获取屏幕高度并设置style=":{{ }}px;"

补充：可以在css中将高度设置为vh（例如：100vh），无需js获取高度即可正常使用。

11.使用“wx”。 在标签页中获取屏幕高度。 真机得到的高度比开发工具得到的高度小48。 这个48就是高度。

12.小程序无法执行某些操作，例如：{{ [index]..(lab) > -1 ? '' : '' }}

13、小程序不易打开太多页面。 目前页面路径*多只能打开十级。

14、小程序需要扫描生成的二维码，并将后台金额单位设置为分（int），否则会报“漏付”错误。

15.

16、小程序无法直接绘制网络图（开发工具有效，真机无效）

需要使用API​​下载图片然后进行绘制商城小程序制作，并且图片地址必须配置在后台的‘合法域名’中。

无效
const cardBg = 'https://image.shanglishi.com/share-BJ.png'
ctx.drawImage(cardBg, 0, 0, 250, 200) 
ctx.draw()
有效
wx.downloadFile({
   url: cardBg ,
   success: function (res) {
     ctx.drawImage(res.tempFilePath, 0, 0, 250, 200)
     ctx.draw()
   }
})

17、绘制圆形图时，开发工具和真机有差异。

18.输入获得焦点并弹出软键盘。 光标与键盘之间的默认距离为0。键盘会遮挡一些元素。 可以设置-(int)来设置键盘和光标之间的距离，以显示完整的元素。

19、小程序视图中英文数字不换行的问题可以通过添加word-break:break-all解决；

小程序开发技巧：

1、小程序调用子组件方法

onReady() {
    this.countdown = this.selectComponent('#countdown')
    this.countdown.start()
}

2、直接更改上一页数据。

const pages = getCurrentPages(); // 当前页面
const prevPage = pages[pages.length - 2]; // 上一页
prevPage.setData({ // 直接给上一页面赋值
  selectCity: info,
});

3、微信群中只显示**个字母

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等