使用mpvue搭建微信小程序

偏执的太偏执、 2023-07-04 11:15 1阅读 0赞

vue版本 3.0.4  
node 12.15.0  
npm 6.13.4

## 1. 脚手架工具搭建 ##

vue init mpvue/mpvue-quickstart my-project

my-project 是自己项目的名称（里面不能有大写字母）

## 2.配置相对应的参数 ##

Project name (mpvue-love) mpvue-love
    ? Project name mpvue-love
    ? wxmp appid (touristappid) wx12312312344
    ? wxmp appid wx12312312344
    ? Project description (A Mpvue project)
    ? Project description A Mpvue project
    ? Author (author <myemail@qq.com>)
    ? Author author <myemail@qq.com>
    ? Vue build (Use arrow keys)
    ? Vue build runtime
    ? Use Vuex? (Y/n) y
    ? Use Vuex? Yes
    ? Use ESLint to lint your code? (Y/n) y
    ? Use ESLint to lint your code? Yes

appid 是小程序的唯一标识， 在微信公众平台里面可以找到  
使用 ESLint ，可以规范代码，但是在编写代码的要注意，如果代码不符合规范的地方，微信小程序是不会进行编译的（至少我是这样的，所以有点浪费的感觉）

## 3，安装依赖 ##

npm install

## 4，打开编辑器，删除不必要的文件 ##

###### app.json ######

{ 
      "pages": [
        "pages/index/main"
      ],
      "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "weichat",
        "navigationBarTextStyle": "black"
      }
    }

删除 components 里面的组件， page 里面的组件， 保留 index 文件夹，修改index.vue，只保留最基本的骨架

###### index.vue（保留结果如下） ######

<template>
      <div>
        hello world
      </div>
    </template>
    
    <script>
    export default { 
    }
    </script>
    
    <style scoped>
    </style>

删除 main.js 里面的东西，只保留以下部分

import Vue from 'vue'
    import App from './index'
    
    const app = new Vue(App)
    app.$mount()

## 5 安装scss ,安装 7.3.1 版本的 ,8.1.0 版本太高了，会导致编译失败 ##

npm install node-sass sass-loader@7.3.1

## 6. 安装 vant-weapp 组件库 [vant-weapp][] ##

npm i vant-weapp -S --production

在 app.json 里面配置相对应的路径

###### app.json ######

"usingComponents": { 
        "van-button": "vant-weapp/dist/button/index"
      }

会出现报错，需要在webpack.base.config.js 里面添加修改代码

const PLATFORM = process.env.PLATFORM
    if (/^(swan)|(tt)$/.test(PLATFORM)) { 
      baseWebpackConfig = merge(baseWebpackConfig, { 
        plugins: [
          new CopyWebpackPlugin([{ 
            from: path.resolve(__dirname, projectConfigMap[PLATFORM]),
            to: path.resolve(config.build.assetsRoot)
          }])
        ]
      })
    }
    
    if (/^wx$/.test(PLATFORM)) { 
      baseWebpackConfig = merge(baseWebpackConfig, { 
        plugins: [
          new CopyWebpackPlugin([{ 
            from: resolve('node_modules/vant-weapp/dist'),
            to: resolve('dist/wx/vant-weapp/dist'),
            ignore: ['.*']
          }])
        ]
      })
    }

## 7， 安装 mpvue-router-patch插件 （将微信小程序的路由跳转方法，变成vue的方法） ##

npm i -S mpvue-router-patch

使用方法

###### main.js ######

import MpvueRouterPatch from 'mpvue-router-patch'
    Vue.use(MpvueRouterPatch)

使用的方式

this.$router.push('/pages/categoryList/main')

## 8. 使用 flyio 进行数据请求 ##

npm i -S flyio

在 util 文件夹里面新建一个requset.js 文件

function createFly () { 
      // mpvue框架提供的全局变量，判断当前运行的平台
      if (mpvuePlatform === 'wx') { 
        const Fly = require('flyio/dist/npm/wx')
        return new Fly()
      } else { 
        return null
      }
    }
    
    function handleError (err) { 
      console.log(err)
    }
    
    // get请求
    export function get (url, params = { }) { 
      const fly = createFly()
      if (fly) { 
        return new Promise((resolve, reject) => { 
          fly.get(url, params).then(response => { 
            console.log(response)
            resolve(response)
          }).catch(err => { 
            handleError(err)
            reject(err)
          })
        })
      }
    }
    
    // post 请求
    export function post (url, params = { }) { 
      const fly = createFly()
      if (fly) { 
        return new Promise((resolve, reject) => { 
          fly.post(url, params).then(response => { 
            console.log(response)
            resolve(response)
          }).catch(err => { 
            console.log(err)
            handleError(err)
            reject(err)
          })
        })
      }
    }

[vant-weapp]: https://youzan.github.io/vant-weapp/#/intro