1. 安装vue脚手架

npm install -g vue-cli

2. 创建项目

vue init mpvue/mpvue-quickstart truth_hold

输入appid 一路回车

3. 安装依赖

npm install
npm run dev

最后将项目导入到微信开发者工具中。

4. 当出现的时候需要安装依赖

出现

npm install sass-loader node-sass --save-dev

然后报错，在package.json中修改node-sass的版本为7.3.1

然后重新安装node-sass，之后还是报错

Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

找到教程之后就好了

//卸载 node-sass
npm uninstall node-sass
//然后安装最新版本（5.0之前）
npm install node-sass@4.14.1

5. 箭头函数

function(a,b){
    return a+b;
}
(a,b)=>{
    return a+b;
}

6. 同步异步函数

	methods:{
      addMark(add){
        this.mark += add;
        console.log("this.mark",this.mark);
      },
      promiseTest(num){
        var result = new Promise(function(resolve,reject){
          if(num>2){
            resolve("我执行成功了，状态变成resolved");
            console.log(`num的值为${num}`);
          }
          else{
            reject("我执行失败了，状态变成了rejected");
            console.log(`num的值为${num}`);
          }
        })
        return result;
      },
      setTime(num){
        return new Promise(function(resolve,reject){
          setTimeout(function(){
            resolve(`第${num}个延时器`);
          },2000);
        });
      },
      async test(){
        // console.log("测试方法运行成功");
        // console.log(host);
        // let res = this.promiseTest(3);
        // console.log(res);
        let result = await this.setTime(1);
        console.log(result);
      }
    },
    mounted(){
      this.test();
    }

​ ES6参考文档:https://www.runoob.com/w3cnote/es6-concise-tutorial.html

7. 创建新页面

在pages下新建文件夹 然后新建me.vue 再新建main.js 将index中main.js中的代码复制给me文件夹下的main.js，然后将me.vue中加上

在app.json中新添加"/pages/me/main", 然后保存重新启动项目

8.后端环境搭建

下载服务端源码https://console.cloud.tencent.com/lav2/dev 解压将server文件夹复制到项目目录下

然后进行配置：

	serverHost: 'localhost',
    tunnelServerUrl: '',
    tunnelSignatureKey: '',

    qcloudAppId:'',
    qCloudSecretId:'',
    qCloudSecretKey:'',
    wxMessageToken: 'weixinmsgtoken',

    networkTimeout: 30000,

运行出错。我滴乖乖，大小写不认识了，以下为正确的

	serverHost: 'localhost',
    tunnelServerUrl: '',
    tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',

    qcloudAppId:'1305448955',
    qcloudSecretId:'AKIDcJn26C9yZv1sc6wuTFk23pmYVMqLqdPa',
    qcloudSecretKey:'KRqOjqhJfOuAPQESRdCUY9ZsNmnlZ9Vc',
    wxMessageToken: 'weixinmsgtoken',

    networkTimeout: 30000,

生成数据库后进行数据库的配置 ，修改账号密码和数据库的名称

完成之后 控制台进入server文件夹进行

npm install

然后再运行

sudo npm install -g nodemon

等待安装完成

然后初始化数据库，

node tools/initdb.js

可能遇到的错误

9. 获取用户的登录信息

首先安装sdk插件，这个插件可以帮助我们获得用户的openid等敏感信息，openid是微信中用户的唯一标识，利用腾讯云提供的插件可以是开发易如反掌。

npm install --save wafer2-client-sdk

然后可以点击详情-> 本地 不校验合法域名那一项 取消选择即可

如果报错XX is not a function,则使用箭头函数对成功和失败的函数进行修改。

	login(){
        qcloud.setLoginUrl(config.loginUrl);
        qcloud.login({
          success: userInfo => {
            console.log('登录成功', userInfo);
            this.loginSuccess(userInfo);
          },
          fail: err => {
            console.log('登录失败', err);
          }
        });
      },
      loginSuccess(userInfo){
        wx.setStorageSync('userinfo',userInfo);
      }

10.添加组件

//子组件
export default {
  name: 'LoginWindow.vue',
  methods:{
    login(){
      qcloud.setLoginUrl(config.loginUrl);
      qcloud.login({
        success: userInfo => {
          console.log('登录成功', userInfo);
          this.loginSuccess(userInfo);
          this.$emit("changeShow",false,userInfo)
          wx.showTabBar()
        },
        fail: err => {
          console.log('登录失败', err);
        }
      });
    },
    loginSuccess(userInfo){
      wx.setStorageSync('userinfo',userInfo);
    }
  }
}
</script>

//父组件
 <div v-if="showLogin">
      <LoginWindow @changeShow="getModel(arguments)"></LoginWindow>
</div>
<script>
  import LoginWindow from '../../components/LoginWindow'
  export default {
    data(){
      return{
        mark: 0,
        userinfo: {},
        showLogin: false
      }
    },
    components:{
      LoginWindow
    },
    methods: {
      addMark(add) {
        this.mark += add;
        console.log("this.mark", this.mark);
      },
      getModel(val){
        this.showLogin = val[0];
        this.userinfo = val[1];
      }
    },
    mounted(){//将用户信息存入缓存然后看缓存中是否有openid 有的话就认为用户登录将用户信息进行赋值，否则就弹出授权登录页面
      const userinfo = wx.getStorageSync('userinfo');
      if(userinfo.openId){
        this.userinfo = userinfo;
        console.log("用户信息:",this.userinfo);
      }
      else{
        wx.hideTabBar();
        this.showLogin = true;
      }
    },
  }
</script>

里面设置父组件和子组件的多参数传递问题，值得一看。