用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%就好了。

本文章会持续跟新，发现问题请多多指正