微信小程序采坑记录

坑一:wx:for循环,2层数据可以循环出来,但数组对象的属性循环不出来;
错误代码:

<block  wx:for="{{arr}}" wx:key="{{index}}">
  <view>{{item.attributes.name}}</view>
</block>

坑二:电脑调试时的滚动条在手机上不会显示;
备注:如果想让滚动条不再tabBar上显示(电脑上),可以设置page{padding-bottom:tabBar的高度};

坑三:wx:if和wx:for不能同时在一个组件上使用

自己坑: 小程序下拉刷新接口调用后, 要调用wx.stopPullDownRefresh(),不然会一直刷新,有留白

---------------------------------------------------------------------------------------------------------------

受boss要求,现在要从原生小程序转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/82740847