mpvue搭建小程序框架

男娘i 2021-09-29 13:06 438阅读 0赞

[http://mpvue.com/mpvue/][http_mpvue.com_mpvue]

美团开源了[mpvue][]

由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler）  
运行时框架 runtime 和代码编译器 compiler 实现

mp：mini program 的缩写  
mpvue：Vue.js in mini program

![image.png][]

*  [mpvue-loader][] 提供 webpack 版本的加载器
 *  [mpvue-webpack-target][] webpack 构建目标
 *  [postcss-mpvue-wxss][] 样式代码转换预处理工具
 *  [px2rpx-loader][] 样式转化插件
 *  [mpvue-quickstart][] mpvue-quickstart
 *  [mpvue-simple][] 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具

![image.png][image.png 1]

npm set registry https://registry.npm.taobao.org/

npm install vue-cli -g

![image.png][image.png 2]

开始创建项目

vue init mpvue/mpvue-quickstart mpvueTest

![image.png][image.png 3]

![image.png][image.png 4]

![image.png][image.png 5]

![image.png][image.png 6]

## 引入一些项目需要的基本第三方库 ##

package.json，加入一下内容

"dependencies": {
        "mpvue": "^2.0.0",
        "vuex": "^3.0.1",
        "weapp-qrcode": "^0.9.0",
        "flyio": "^0.5.9",
        "install": "^0.12.2",
        "mp-weui": "^1.0.3",
        "mpvue-zanui": "^1.0.2",
        "common-mpvue": "^0.4.6",
        "mpvue-config-loader": "^0.1.3"
      },

![image.png][image.png 7]

第三方库

import Vue from 'vue'
    import App from './App'
    import store from '@/store';
    import WeUI from 'mp-weui/packages';
    
    Vue.use(WeUI);
    Vue.config.productionTip = false
    App.mpType = 'app'
    
    const app = new Vue({
        store,
        ...App
    });
    app.$mount();

main.json

{
        "navigationBarTitleText": "页面标题",
        "enablePullDownRefresh": true
    }

utils目录下index.js常用方法：

// /**
    //  * 获取storage
    //  */
    export function getCache(key) {
      var value = wx.getStorageSync(key)
      if (value) {
        return value
      }
      return ""
    }
    
    // /**
    //  * 删除storage
    //  */
    export function removeCache(key) {
      wx.removeStorage(key);
    }
    
    /**
     * 存储storage
     */
    export function setCache(key, value) {
      try {
        wx.setStorageSync(key, value)
      } catch (e) { }
    }
    
    /**
      获取url参数
     */
    export function getUrlParam(path) {
      var result = {},
        param = /([^?=&]+)=([^&]+)/gi,
        match;
      while ((match = param.exec(path)) != null) {
        result[match[1]] = match[2];
      }
      return result;
    }
    
    /**
      数组是否包含某个字符串
     */
    export const carrContainStr = (a, obj) => {
      for (var i = 0; i < a.length; i++) {
        if (a[i] == obj) {
          return i;
        }
      }
      return -1;
    }
    
    
    /**
       克隆
     */
    export const clone = (obj) => {
      // Handle the 3 simple types, and null or undefined
      if (null == obj || "object" != typeof obj) return obj;
    
      // Handle Date
      if (obj instanceof Date) {
        var copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
      }
    
      // Handle Array
      if (obj instanceof Array) {
        var copy = [];
        for (var i = 0, len = obj.length; i < len; ++i) {
          copy[i] = clone(obj[i]);
        }
        return copy;
      }
    
      // Handle Object
      if (obj instanceof Object) {
        var copy = {};
        for (var attr in obj) {
          if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
      }
    
      throw new Error("Unable to copy obj! Its type isn't supported.");
    }
    
    
    /**
       判断机型
     */
    export const isiOS = () => {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        return true
      }
      return false;
    }

[https://vuex.vuejs.org/zh/guide/][https_vuex.vuejs.org_zh_guide]

flyio封装网络请求

![image.png][image.png 8]  
flyio请求，封装代码

新建utils/api.js文件

export const baseUrlApi = 'http://:8080'//---开发调试环境
    //export const baseUrlApi = 'https://test.mini.com'//---测试环境https
    //export const baseUrlApi = 'https://product.mini.com'//---生产环境https

src下新建service文件夹  
login-service.js，order-service.js

import { baseUrlApi } from '../utils/api'
    import request from '../utils/request'
    
    export default {
     // 登录
        wxLogin: (data) =>
            request.post(`/store-miniApp-web/external/interface/wechat/wxLogin`, data, { baseURL: baseUrlApi }),
    
     // 收藏
      addCollect: (goodId, status) =>
        request.get(`/store-miniApp-web/store/member/addCollect?goodId=${goodId}&status=${status}`,
          null, {
            baseURL: baseUrlApi
          }),
    
    }

接口请求的使用

import loginApi from "@/service/login-service";
    
      methods: {
    //-登录
        clickLoginBtn() {
          var data = {
            phone: '',
            password: "",
          };
          console.log("登录参数==", data);
          loginApi.wxLogin(data).then(
            data => {
              if (!data) {
                this.$toast(data.msg);
                return;
              }
              if (data.code==0) {
                console.log("登录成功", data);   
              }
            },
            err => {
    
            }
          );
        },
        //-收藏
        collect() {
          let isCollect = "1"; //1收藏 0取消
          let goodId = "";
          loginApi.addCollect(goodsId, isCollect).then(data => {
            if (data.code != 0) {
              console.log("收藏失败", data);
              return;
            }
            if (isCollect == 1) {
              this.$toast("取消成功");
            } else {
              this.$toast("收藏成功");
            }
          });
        }
      }

mapGetters  
mapMutations

const store new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment(state,n){
                state.count += n
            }
        }
    })
    
    new Vue({
        el:"#app",
        store,
        computed: {
            count() {
               return store.state.count
            }
        },
        methods: {
            add() {
               //传参
               store.commit('increment',10) 
            }
        }
    })

mapMutations辅助函数的传参

//store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    //定义state，并将listName设置为一个空对象
    const state = {
        listName: {}
    }
    //定义mutations，可以传参，用于设置state里的listName
    const mutations = {
        set_listname: (state,value) => {
            state.listName=value
        }
    }
    //定义getters，用于获取出state里的对象
    const getters = {
        get_listname: state => {
            return state.listName
        }
    }
    
    export default new Vuex.Store({
        getters,
        state,
        mutations
    })

在vue实例中注册store

//main.js
    import Vue from 'vue'
    import App from './App'
    import store from './store'
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }
    })

![image.png][image.png 9]  
![image.png][image.png 10]

Fly.js

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

![image.png][image.png 11]

![image.png][image.png 12]

![image.png][image.png 13]

![image.png][image.png 14]

[https://wendux.github.io/dist/\#/doc/flyio/readme][https_wendux.github.io_dist_doc_flyio_readme]

vuex的定义

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式

集中存储和管理应用的所有组件的状态

store（仓库），new Vue.store(\{…\})

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[http_mpvue.com_mpvue]: http://mpvue.com/mpvue/
[mpvue]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2Fmpvue%2F
[image.png]: /images/20210724/eb8e2ff48df248479594fb39d5b85fb6.png
[mpvue-loader]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2Fbuild%2Fmpvue-loader
[mpvue-webpack-target]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2Fbuild%2Fmpvue-webpack-target
[postcss-mpvue-wxss]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2Fbuild%2Fpostcss-mpvue-wxss
[px2rpx-loader]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2Fbuild%2Fpx2rpx-loader
[mpvue-quickstart]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2Fmpvue%2Fquickstart
[mpvue-simple]: https://links.jianshu.com/go?to=http%3A%2F%2Fmpvue.com%2Fmpvue%2Fsimple
[image.png 1]: /images/20210724/6aa6abc203254fe59a93be4ffeabc16b.png
[image.png 2]: /images/20210724/4f67817c11e943cbae687756a7aa041d.png
[image.png 3]: /images/20210724/e2e9a4ceddb74ad3af7c8cb7c1fa3892.png
[image.png 4]: /images/20210724/9a9b54230269463aac0e0250df73cac0.png
[image.png 5]: /images/20210724/24398578d14c4655986aff1fcea4a63e.png
[image.png 6]: /images/20210724/4fee222a72bb4b019436ff79d4de9216.png
[image.png 7]: /images/20210724/df6a5f7fde5944279ec1b3bdd73fc404.png
[https_vuex.vuejs.org_zh_guide]: https://vuex.vuejs.org/zh/guide/
[image.png 8]: /images/20210724/021cae74bad9441398558494cf8f6726.png
[image.png 9]: /images/20210724/31312cf325304908a28e58bce67630f5.png
[image.png 10]: /images/20210724/e27afcbcf0f44d909d82e5c05312bc99.png
[image.png 11]: /images/20210724/dec7d4799900423ab814ee07e044c824.png
[image.png 12]: /images/20210724/8b788348ed2140d0910e3a88401b4195.png
[image.png 13]: /images/20210724/4d6d4c71c033448dbfab8a4cd46e256c.png
[image.png 14]: /images/20210724/b9c7fc5911794e878bb209b3fa9b8e4d.png
[https_wendux.github.io_dist_doc_flyio_readme]: https://wendux.github.io/dist/#/doc/flyio/readme
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/c9aecf7e6f604d57b59fd0c21469edaf.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/32c72e7c77c04dab87828b66eedc2ff7.png