原生小程序转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中每个键值对,:后面要有空格;

  • 报错:

✘ http://eslint.org/docs/rules/key-spacing Missing space before value for key 'tabs'
srcpagestestindex.vue:22:12

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

  • 报错:

✘ http://eslint.org/docs/rules/quotes Strings must use singlequote
srcpagestestindex.vue:23:9


坑三:定义函数时,(括号)前(后)都要有空格

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


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

书写规范问题

报错

✘  http://eslint.org/docs/rules/space-infix-ops  Infix operators must be spaced
  src\pages\hzw_text\index.vue:34:23
      for (var i = 1; i <4; i++) {

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_40934679/article/details/84931166