1.使用mpvue的计算属性一定要有返回值不然会报错

2.各种错误

1
Cannot assign to read only property 'exports' of object '#<Object>

出现以上错误,将.babelrc文件中的 modules: false 去掉即可

3.mpvue小程序input双向绑定时光标闪烁问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// 第一步
<input v-if="next" type="text" placeholder="请输入消息..." @input="checkText" >
<input v-if="!next" type="text" placeholder="请输入消息..." @input="checkText" >

// 第二步
data () {
return {
next:false, //用来切换下一个input
sendText:"", // 绑定input的内容
}
},

// 第三步,手动封装一个防抖函数
let timers = null
function debounce(fn, delay) {
let context = this
let args = arguments;
clearTimeout(timers);
timers = setTimeout(function () {
fn.apply(context, args)
}, delay)
}

// 第四步,然后在checkText方法里通过防抖函数来更新data里的数据,这里设置的是300ms

checkText(e){`
debounce(()=>{this.sendText=e.mp.detail.value;},300);
}

// 第五步
this.next=!this.next; // 自动渲染另外一个input,销毁原来的input,对应的value值也会清空了

4.使用小程序的伪类元素content要有值才会有效果

1
2
3
4
5
6
7
8
9
10
11
.box{
// 有效
&:after{
content: ' ';
}
// 无效
&:after{
content: '';
}

}

5.遇到 渲染失败多半是小程序后台没有开通实时直播权限

6.在小程序中判断是否是本地环境还是线上环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let host = '';
console.log('version', __wxConfig.envVersion);
let ve = __wxConfig.envVersion;
switch (ve) {
case 'develop':
host = 'https://测试版环境域名';
break;
case 'trial':
host = 'https://体验版环境域名';
break;
case 'release':
host = 'https://线上环境域名';
break;
default:
host = 'https://测试版环境域名';
}
console.log(host)

7.cover-view 带字母的文字最后一段会被挡住半个字

加上 letter-spacing 即可解决

1
letter-spacing: 1rpx

8.小程序webview页面打不开情况

  1. 如果页面有使用到 https://__bridge_loaded__ 跟app交互的代码在小程序里面会提示要配置该域名

    解决方案跳转该路由时在加一层中转路由即可解决

9.小程序webview页面参数失效的问题

1
2
3
跳转之前把src encodeURIComponent 编码

在小程序页面接收时 decodeURIComponent 解码