原生小程序转mpvue踩坑总结

原生小程序转mpvue踩坑总结

坑一：mpvue开发小程序时候，要添加静态本地图片

• 报错：

VM14878:2 Failed to load local image resource /images/bg.png 
the server responded with a status of 404 (HTTP/1.1 404 Not Found)

*解决方法：将放图片的文件夹放在static文件夹里，static是专门用来放静态文件的

坑二：data中每个键值对，:后面要有空格；

• 报错：

✘  Missing space before value for key 'tabs'
srcpagestestindex.vue:22:12

坑三：字符串必须以单引号包括;

• 报错：

✘  Strings must use singlequote
srcpagestestindex.vue:23:9

坑三：定义函数时，(括号)前（后）都要有空格

• 报错：
  ✘  Missing space before function parentheses

srcpagestestindex.vue:31:23

坑四：函数中各语句间不用加分号

坑五：button按钮获取用户信息，weui里好像不对；

直接为button添加点击事件，设置其open-type和lang，在函数回调里即可获得用户信息

代码如下：

<template><div><button v-on:click="click" open-type="getUserInfo" lang="zh_CN">按钮</button></div>
</template><script>export default {methods: {click: function (e) {console.log('userInfo', e)}}
}
</script>

表单事件的提交与重置

在form上绑定@submit（@reset）="dddd",在button上设置其form-type="submit/reset"执行相关操作

数据结构看console打印的结果

如果form或button忘记上述设置，其回调函数中返回的是鼠标的点击事件
若form绑定的不是@submit，而是@click，则点击表单内任一元素均会提交表单

在使用sublime时，不要使用tab，这会使其缩进出现问题!!!

Trailing spaces not allowed

*表示你在该行有多余的空格

分享功能不能写在components中，要写在父组件里

否则报错：

Cannot read property 'apply' of null;at pages/commit-done/index page onShareAppMessage function
TypeError: Cannot read property 'apply' of null

使用第三方框架，坑较多，在允许的情况下，可使用原生组件

书写规范问题

报错

✘    Infix operators must be spacedsrcpageshzw_textindex.vue:34:23for (var i = 1; i <4; i++) {

意思是4前面需要一个空格

使用mpvue自定义左边胶囊按钮时，由于单位不充一问题，自定义胶囊和系统胶囊在不同型号手机上不同对齐

原因分析：系统胶囊使用pt为单位，但mpvue转小程序时，px单位转为rpx，会自适应变化；
解决方法： 使用绝对单位 pt