mpvue开发小程序踩坑

1.项目运行

npm run dev // 可以实现热更新

npm run build:wx  // 不会热更新，更改需要再次执行

新增加页面，需要重新运行npm run dev

坑点：

• 重新运行npm run dev，仍然无法看到新页面，此时需要先运行npm run build:wx，然后再试
• 项目文件大时需要分包，分包配置和原生开发小程序一样，npm run dev运行项目，第一次真机测试没问题，第二次需要重新运行npm run dev

2.页面中的变量不能使用方法

一般在vue中会使用方法的返回值来插值等操作，在mpvue中没有效果，想要成功需要在data中增加键，把方法返回值赋值给这个键

3.图片地址中存在变量会报错

使用v-if判断变量是否有值，再显示图片

4.不能在页面中绑定HTML代码

使用mpvue-wxparse包解决，注意转化后的与实际html差异，比如：a链接转化后不能跳转等

5.使用navigateTo跳转页面失败

失败原因是页面栈层级过多，使用redirectTo、reLaunch，可以解决，项目中要注意页面跳转，不要所有的都是用navigateTo,对于不可返回页面使用redirectTo、reLaunch，reLaunch会清空页面栈，也就是说无法使用navigateBack

6.获取输入框中光标位置

绑定表单的input等方法中会有curso，就是当前光标位置，可以用于搜索触发限制次数

7.带有中文的get请求

目前发现有问题的手机是安卓版本比较低的6.0，无论前端是否进行编码，需要改成post请求，不在url中带有中文

8.隐藏input做短信验证码功能

使用一个隐藏的input作为输入，视觉中有验证码位数对应的几个框，每个框显示input里面的一位数字，隐藏input宽高为0，在编辑器中无法获取焦点，真机测试可以

9.scrollview需要给固定高度

scrollview（y方向滚动）在flex布局伸缩高度，不会滚动，百分比高度可以

10.页面缓存状态

组件状态会被缓存，需要注意在生命周期里面初始化状态