使用mpvue搭建微信小程序

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)
      })
    })
  }
}