mpvue的入门

添加小程序，兑换各种视频教程/数据资源。

（一）：搭建mpvue项目。

0定义： mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验

1. 创建mpvue项目步骤：

      1.1 npm install -g @vue/cli-init：下载vue-init。

      1.2 vue init mpvue/mpvue-quickstart my-project：在打算存放mpvue项目的文件夹下创建一个my-project的mpvue项目文件。wxmp appid这里输入微信小程序开发者ID号，注意前后别空格。

      1.3 cd my-project：进入my-project项目命令行。

      1.4 npm install：初始化my-project配置。

      1.5 npm run dev：启动mpvue项目，新增页面都需要npm run dev重新启动。

      1.6 微信开发者工具打开my-project项目：即可预览，打开其他编译器my-project项目即可编译。

2. mpvue项目的目录结构：

3. mpvue项目下src/页面/main.js配置：

import Vue from 'vue'
import App from './index'   //当前页面下的index.vue文件

const app = new Vue(App)
app.$mount()

4. 拓展：

在package.json下的'srcipts'下修改  "lint": "eslint --ext .js,.vue src"为  "lint": "eslint --fix --ext .js,.vue src"。然后在命令行运行npm run link 在重启项目npm run dev就可以eslint自动修改代码规范了，不会总是提醒代码不规范。

 

（二）遇到问题记录：

1. static文件夹下存放如img等静态资源文件。
2. 如果没设置配置，没次修改和页面相关的代码，报错：未找到 app.json 中的定义的 pages "pages/me/main" 对应的 WXML 文件，都需要npm run dev重新项目。
3. 报错：VM1615:1 pages/comments/main.js 出现脚本错误或者未正确调用 Page()，可能在微信开发者工具'预览'上，无法显示一些页面，但是在微信开发者工具的'真机调试'上，没有任何报错.

4. 可以通过xammp-control+node+sql搭建本地数据库：

5. 借用微信请求api，封装自己的请求函数：

  import config from './config'
    export function request_get(url){   //封装get请求
        return new Promise((reslove,reject)=>{
            wx.request({
              url: config.host+url,       //config.host="http://localhost:3000"，即xammp-control+node+sql搭建本地数据库地址。     
              success(res) {
                if(res.data.code==0){
                    reslove(res.data.data)
                }else{
                    reject(res.data)
                }
              }
            })
        })
    }

6. async+await异步发送请求，接收数据：

    async created () {  //async+await异步发送请求，接收数据

        let isLogin=wx.getStorageSync("userInfo")
 		if (!isLogin){   //第一次登陆，需要获取用户信息。
 			qcloud.setLoginUrl('http://localhost:3000/login');  //微信接口获取微信用户的用户信息，如openid，并存放在本地数据库中
	 		qcloud.login({		
			    success: function (userInfo) {
			        console.log('登录成功', userInfo);
			        wx.setStorageSync("userInfo",userInfo);
			        showSucess('成功');   //封装的wx.showToast()
			    },
			    fail: function (err) {
			        console.log('登录失败', err);
			    }
			});	
 		}



          const res=await request_get("/weep")
          console.log(res)        
    }    

7. mpvue中：text标签存放文本，请求用wx.request请求，生命周期是vue的生命周期，用wx的api缓存数据，支持scss,less能预处理css加载。

8. wx小程序获取用户信息，但是wx.getUserInfo获取比较麻烦，所有有一个已经封装好的sdk（wafer2-client-sdk,github上可查询）获取用户信息。
    下载：npm install wafer2-client-sdk --save