第一次使用mpvue重构原生小程序遇到的一些问题

第一次使用mpvue重构原生小程序遇到的一些问题

1. 每个微信小程序id只能对应一个后端，不然会返回500

当时我是重新创建了一个id，所以发生了这样的问题，出师不利，哈哈

---

2.新增页面需要npm run build

因为 webpack 编译的文件是由配置的 entry 决定的，新增的页面并没有添加进 entry。其实还有很多时候npm run build也能解决很多问题。

---

3.webstorm里面的自动对齐(ctrl+alt+L)会把小程序像素单位rpx与数值隔开造成设置失败

这个问题我当时找了好久，希望大家能注意一下，因为我写的时候rpx这个单位会一直显示是报错的状态，但是不影响运行，所以找了很久。

---

4.使用了quickstar命令创建的mpvue项目的pages文件夹里面没有main.js文件

一些老的文章里面会说要在那个页面的main.js文件里面干嘛干嘛，然后你发现你没有这个文件，其实你用了quickstar来创建项目的话直接写在那个.vue文件里面写就行了

---

5.在组件里面data要用return获取，还有data里面的数据不需要this.data.xxx获取，直接this.xxx就行了。

这个是重构的时候发现的问题，原生小程序里面获取data里面的数据通过this.data.xxx，但是mpvue不用

---

6.在html标签里面绑定数据要使用后台传来的数据在微信小程序中是

          image="{{item.avatarUrl}}"

在mpvue里面是

		 :image="item.avatarUrl" 

冒号一定要加，是vue的语法

---

7.使用form表单的时候要拿表单里面的数据的时候name定义不需要加 : ,并且在methods表单里面取数据的格式是：

小程序格式是：res.detail.value.xxx （xxx是name）

mpvue格式是：res.mp.detail.value.xxx

---

8.如果要页面跳转之后刷新此页面，需要用wx.reLaunch({url: ‘…/pages/home’ })

---

9.bindtap要改成@click，所有带bind的都要把bind改为@

---

10.小程序的if和for跟mpvue的区别

微信小程序：

<view wx:for="{{dataArray}}" 
	wx:key="index" 
	wx:for-item="item"
	wx:if="{{index<5}}">
 </view>

---

mpvue、vue：

<div 
	v-for="(item, index) in dataArray" 
	:key="index" 
	v-if="index<5">
</div>

---

11.小程序里面的自定义属性是通过命名为data-xxx=’{{变量名}}'来命名来获取后台数据，mpvue则可以通过点击事件@click传参数来实现获取后台数据

例如：
我这里要获取问题的id

	@click='clickLike(item.questionId)'

---

我是一个前端新人，虽然我懂得不多，但是程序员那种“从怀疑智商，到好像能跑，到恍然大悟，到叹服精巧，最后习得新技术”的心路历程，真的很有意思，希望我这次的mpvue经历能给大家节约一些时间吧

这里是我重构的小程序项目
链接: 征辩小程序(功能还未完善).