用mpvue開發微信小程序

1、搭建項目

官網教程：http://mpvue.com/mpvue/#_2
用vue-cli構建項目後，在微信開發者工具中項目目錄選擇構建的dist目錄，不是src目錄

2、新建頁面

每個頁面都是新建文件夾，而後包含由下面三個文件
srcpagesindexindex.vue
srcpagesindexmain.js
srcpagesindexmain.json(非必須)
推薦將每一個文件夾中的index.vue文件名改成模塊文件名例如login.vue，在main.js中修改引入文件名便可。
文件建立好之後要到srcapp.json中進行註冊。

3、mpvue引入sass

安裝sass-loader:npm i sass-loader node-sass --save-dev便可
在style標籤加上scss標籤便可 <style scoped lang=scss>

那麼如何在mpvue中引入全局sass樣式呢

在src/main.js中
import './assets/css/global.scss';

4、表單控件

h5的select、checkbox、radio都要用微信原生組件來代替（官方文檔也有寫：http://mpvue.com/mpvue/#_14）
須要注意的是：一些組件不支持v-model綁定，如checkbox-group，能夠經過綁定change事件來更新數據

5、組件通信

一、子組件向父組件傳遞數據
子組件在方法中觸發：

<button @onclik="subClick">
subClick () {
    this.$emit('postResult', {result: value});
}

父組件監聽事件：

<subComponent @postResult="父組件處理方法"></subComponent>

二、父組件調用子組件的方法
父組件向子組件傳遞參數: mpvue使用的是vue的父子組件通信，經過輸入參數props便可。
父組件調用子組件方法:
在child標籤加入ref屬性<child ref="child"></child>，
父組件經過this.$refs.child.childMethod()來調用子組件方法。
須要注意的是,只有在子組件渲染完之後才能調用
三、經過vuex來通信
新建store.js，而後分別在父子組件中import

四、設置全局參數
若是我要在全部頁面共享數據呢
srcmain.js中

import store from './utils/store';
Vue.prototype.$store = store;

而後在各個頁面中直接this.$store.data便可
五、兄弟組件之間，經過event bus傳參
新建messenger.js,而後分別在兩個組件中import

發送事件組件：

messenger.$emit('msg', params);

接收事件組件：

create(){
    messenger.$on('msg', params => {});
}

5、http請求

mpvue的請求要使用微信小程序的原生請求，content-type 會被默認爲 application/json,在使用post請求的時候，若是後端須要的是form-data格式，須要修改content-type爲application/x-www-form-urlencoded。

對於初次開發的朋友，第一次發請求會報一個錯誤
http://xxxx.xxxx.xxx不在如下 request 合法域名列表中，請參考文檔：不在如下 request 合法域名列表中

解決方法：
微信小程序左上角菜單欄-設置

微信小程序request官方文檔:https://developers.weixin.qq....

6、引入ui框架

mpvue開發微信小程序引入ui框架，微信有原生的WeUI：https://weui.io/很簡潔，知足更多需求仍是選擇第三方的ui框架。
如今github start比較多的是iview的和zanui的微信ui組件，iview有2000+的start,zanui有6000+的start，用下來比較確實是iview好用一些。
https://github.com/TalkingDat...
https://github.com/youzan/zan...（好用的是這個）
引入的時候注意，將代碼必定粘貼到根目錄下的static目錄，否則會報錯。

同時第三方組件有使用es6，須要在項目設置上

7、其它坑

一、微信開發者工具,win10點擊不到input，獲取不到焦點。點擊錯位，才能獲取焦點。

問題緣由：由於高分屏，win10的ui作了縮放，默認150%

解決辦法：將桌面縮放改爲100%就好了。

本文章會持續跟新，發現問題請多多指正