app小程序开发 Uniapp 进军微信小程序之路

描述：使用uniapp开发h5应用微信小程序遇到的问题总结

总结：使用uniapp开发h5应用微信小程序现在是主流，但是uniapp还是有很多坑的，无论是框架的坑还是小程序使用vue语法的坑。所以开发的时候少用语法糖和浏览器专属的方法对象。尽量使用三大组件，尽量简单app小程序开发，这样其他兼容性就不会出现太多问题。

目录

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

有两种可能：1、开发者工具路径错误；2、开发者工具没有登录，服务端口没有打开

2.微信小程序报错：无法读取未定义的属性“forceUpdate”

原因很简单，小程序的appID没有配置为uniapp，去获取一个appID（自己申请的也可以，测试的也可以），然后在hbx项目的根目录下有一个manifest.json文件，在里面配置一下就可以了。

3.微信小程序报错：属性或方法“toJSON”未在实例上定义，但在render过程中被引用

在百度上搜了一下，说是开发者工具版本问题，升级到最新版本就可以解决，但是我升级之后还是一样的问题，最后干脆在他报错缺少函数的文件里加上toJSON(){}就解决了。

这个问题主要是工具本身的bug，不是我们开发程序的问题。社区问到：Converting looping structure to JSON，官方也在2020年9月15日的1.03.2009140 Stable版本中做了优化修复：版本更新说明。不过看起来问题还是有的app小程序开发，而且每次更新都越来越严重。

警告⚠：添加它可以解决这个问题，但你会遇到其他更神秘的问题，比如问题9

4.微信小程序警告：组件wxss中有些选择器不允许使用，包括标签名选择器、ID选择器、属性选择器

此警告可忽略，不影响小程序运行，原因是微信小程序组件及引用组件的页面不能使用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="" usage is not present support

原因从字面上理解就是只能用props来接受父组件传递过来的参数，然后一个一个的传进去。包括父组件的内联样式，反正不能偷懒。

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

uniapp项目编译成微信小程序后，不再支持npm构建，不知道具体是什么原因，试了几个小时都失败了，用开发者工具新建小程序，秒建npm，好烦啊，浪费我宝贵的青春啊！！！