uniapp开发微信小程序的踩坑之旅

说明： 使用uniapp开发h5 app 微信小程序时遇到的问题总结
总结： 使用uniapp开发h5 app 微信小程序是现在得主流，但是uniapp还是存在不少得坑，不管是框架的坑还是vue语法在小程序上使用的坑都不少，所以开发的时候少用语法糖，少用浏览器特定方法对象，能用三大件的尽量用三大件做，尽可能地简单，这样其他在兼容上不会有太大问题。

1. hbuildex无法启动微信开发者工具

两种可能：1. 开发者工具路径错误；2. 开发者工具未登录，未开启服务端口

2. 微信小程序报错：Cannot read property ‘forceUpdate‘ of undefined

原因很简单，没有给uniapp配置小程序的appID，去获取一个appID（无论是你申请的还是测试号的都可以），然后在hbx项目的根目录下有一个manifest.json的文件，在里面配置下就ok了

3. 微信小程序报错：Property or method “toJSON” is not defined on the instance but referenced during render

我百度后有说开发者工具版本问题的，升级到最新版就可以了，但是我升级了还是一样。最后我在他报函数缺失的文件里加上toJSON() {} 就可以简单解决了。
这个问题主要是工具的bug，并不是我们开发程序有问题，社区提问：Converting circular structure to JSON，并且官方还做了优化修复在2020.09.15的1.03.2009140 Stable版本中：版本更新说明。不过好像问题还在，越更新越烂

警告⚠：加了是可以解决这个问题，但是会遇到其他更神奇得问题，比如问题9

4. 微信小程序警告：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors

这是个警告是可以忽略的，不影响小程序运行。原因是微信小程序组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

详细的可以查看微信官方文档-组件模板和样式

5. 微信小程序动态样式不生效

给一个动态属性对象labelStyle，在app或者web上经常这么使用，都没问题，但是到了小程序就不行了

<label
	:for="labelFor"
		v-if="label"
		:style="labelStyle"
		style="font-weight: 600;"
		:class="['label-style', { 'label-required': isRequired }]"
	>
		{{ label }}
</label>

// labelStyle是个计算属性
labelStyle() {
	const ret = {};
	const labelWidth = this.labelWidth || this.form.labelWidth;
	if (labelWidth) {
		ret.width = labelWidth;
	}
	console.log(ret)
	return ret;
}

这样编译成微信小程序是样式不生效，还是对象的形式。原因找到了，解决办法就是对象拆开（那不就单身了吗？😭）。直接给width的值，问题已解决

6. uniapp转微信小程序失败：Error: 暂不支持 v-bind="" 用法

原因就是字面意思，只能老老实实使用props接受父组件传参，一个个再传进去。包括父组件得行内样式style，反正就是不能偷懒。

7. uniapp转微信小程序后构建npm（不支持构建）

uniapp项目编译成微信小程序后就不支持构建npm了。具体为啥我也不知道，反正我试了几个小时没做出来，用开发者工具新建了一个新的小程序构建npm秒过，很烦，白瞎我这点宝贵的青春呀！！！
如果各位有啥好的方法可是实现的话欢迎评论区留言分享！！

8. uniapp转微信小程序使用jsencrypt数据加密

因为小程序浏览器没有window对象，自然也不会有对象方法和成员对象document等，所以直接使用肯定会报错。

报错1：TypeError: Cannot read property ‘appName’ of undefined

这段代码的作用是判断浏览器，可以直接注释，想下面这样

  // if (j_lm && navigator.appName == "Microsoft Internet Explorer") {
  //   BigInteger.prototype.am = am2;
  //   dbits = 30;
  // } else
  // if (j_lm && navigator.appName != "Netscape") {
  //   BigInteger.prototype.am = am1;
  //   dbits = 26;
  // } else
  {// Mozilla/Netscape seems to prefer am3
    BigInteger.prototype.am = am3;
    dbits = 28;
  }

报错2：TypeError: Cannot read property ‘crypto’ of undefined

全局搜索下‘crypto’，就会找到问题出处。因为小程序浏览器没有window对象，所以window.crypto肯定是没有的导致了报错。

if (rng_pool == null) {
    rng_pool = [];
    rng_pptr = 0;
    var t = void 0;
    if (window.crypto && window.crypto.getRandomValues) {
      // Extract entropy (2048 bits) from RNG if available
      var z = new Uint32Array(256);
      window.crypto.getRandomValues(z);
      for (t = 0; t < z.length; ++t) {
        rng_pool[rng_pptr++] = z[t] & 255;
      }
    }
    ...
   }

因为是uniapp开发的小程序所以不支持构建npm，那就只能自己下载jsencrypt.js对里面的源码进行修改然后自己压缩，使用本地的jsencrypt进行加密了。
修改方法：应该是前几行，在}(this, (function (exports) {代码下面添加下方代码

var navigator = {
  appName: 'Netscape',
  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46     (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1'
};
var window = {
  ASN1: null,
  Base64: null,
  Hex: null,
  crypto: null,
  href: null
}
// 使用时引入本地文件
import { JSEncrypt } from '../../utils/jsencrypt.js';

9. uniapp开发微信小程序 input组件数据回显失败

前提：当前页面有**toJSON(){}**方法，具体由来可以看下问题3
复现：在页面使用input组件，然后编译成小程序会发现数据没有回填，即使用了v-model也一样
找原因：新建一个页面发现回填正常，那就说明就是这个页面哪里的问题了，一块一块得注释发现当我把toJSON(){}方法注释掉后数据回填正常了（一口老血吐了出来），蜜汁bug。更神奇的是注释后这个页面不会报toJSON is undefined得错误！！！
问题原理：在微信开放社区逛了逛发现有一个提问就是关于这个的：Property or method “toJSON” is not defined on th？并且官方还做了优化修复在2020.09.15的1.03.2009140 Stable版本中：版本更新说明。但是好像并没有解决这个问题，我看提问里还有不少人再说，所以这个问题还是得等开发者工具修复了。

那么如果你注释toJSON完会报错的话呢！那我就不知道怎么解决，自己在看看有没有大佬给出新的解决办法。记得解决了来评论其留言分享哦！ 我给你点赞👍

暂时我就发现这些问题，后面不断补充