使用mpvue框架开发微信小程序的完整流程

mpvue框架概述

一、mpvue框架概述

mpvue是一款基于Vue.js构建的小程序前端框架。该框架修改了Vue.js的runtime和compiler，使其能够在小程序环境中运行，从而为小程序开发引入了完整的Vue.js开发体验。建议开发者在熟练掌握Vue.js后再使用mpvue，否则建议使用原生框架进行小程序开发。

开发环境准备

二、开发环境准备

1. 熟练掌握Vue.js：若未使用过Vue框架，建议先学习Vue官方文档（https://cn.vuejs.org/v2/guide/）。

2. 微信开发者工具：这是开发、调试和模拟运行微信小程序的核心工具，下载地址为：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。

3. Visual Studio Code：一款轻量级代码编辑器，拥有丰富的辅助开发插件，下载地址为：https://code.visualstudio.com。

4. Node.js：前端工具链基本都依赖Node.js，下载地址为：https://nodejs.org/en/download/。

5. vue-cli：Vue专用的项目脚手架工具，打开cmd，输入命令：npm install --global vue-cli。

项目初始化

三、项目初始化

1. 打开cmd，使用快捷键win+R。

2. 检查Node.js是否安装成功，输入命令：

node -v

出现版本号即为安装成功。

3. 检查vue-cli是否安装成功，输入命令：

vue -V

出现版本号即为安装成功。

4. 执行以下命令，将npm的下载源切换到国内淘宝镜像，以提高下载速度和成功率：

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

5. 进入目标文件夹（如d盘，先输入命令d:），创建一个基于mpvue-quickstart模板的新项目：

vue init mpvue/mpvue-quickstart wxvueshop

接着选择或填写项目的配置信息，若不确定可直接回车（依次是项目名称、小程序appid、项目介绍、作者，以及是否安装vuex等，如需安装则写yes，否则no）。

此时可在d盘看到名为wxvueshop的项目文件。

6. 进入该文件夹，输入命令：

cd wxvueshop

7. 进行依赖库的安装，输入命令：

npm install

8. 安装完成后，运行项目，输入命令：

npm run dev

运行成功后，本地wxvueshop目录下会多出一个dist目录，其中包含生成的小程序相关代码，此时项目初始化成功并已运行。

运行与查看项目

四、运行与查看项目

打开微信web开发者工具，选择新增项目，打开刚刚创建的项目，如图：

点击“确定”按钮，进入小程序开发主界面，在左侧的小程序模拟器中即可看到wxvueshop小程序的执行结果：

代码编写

五、代码编写

如上图所示，新创建的项目包含默认页面，现在将其全部删除，具体操作如下：

1. 删除src/components、src/pages、src/utils三个目录下的所有代码文件；

2. 将src/App.vue文件中的内容重置为：

<script>
/* 这部分相当于原生小程序的 app.js */
export default {
 created () {
  console.log('miniapp created!!!')
 }
}
</script>

<style>
/* 这部分相当于原生小程序的 app.wxss */
.container {
 background-color: #cccccc;
}
</style>

3. 将src/main.js文件中的内容重置为：

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
export default {
 config: {
  pages: [
    '^pages/login/main'
  ],
  window: {
   backgroundTextStyle: 'light',
   navigationBarBackgroundColor: '#fff',
   navigationBarTitleText: '我的小程序',
   navigationBarTextStyle: 'black'
  }
 }
}

此时，代码已处于没有小程序页面的初始状态。

4. 新建页面，以后的每一个mpvue页面组件都将拥有如下图片所示的结构。

页面写法如下：

login.vue：

<template>
 <div class="container" @click="clickHandle">
  <div class="message">{{msg}}</div>
 </div>
</template>
<script>
export default {
 data () {
  return {
   msg: 'login'
  }
 },
 methods: {
  clickHandle () {
   this.msg = 'yes!!!!!!'
  }
 }
}
</script>
<style scoped>
.message {
 color: red;
 padding: 10px;
 text-align: center;
}
</style>

main.js：

import Vue from 'vue'
import App from './login'
const app = new Vue(App)
app.$mount()
export default {
  config: {
   // 注意，页面级可配置属性相当于只是`src/main.js`中配置里的`window`部分
   "navigationBarBackgroundColor": "#3dc1c7",
   "navigationBarTitleText": "登录",
   "navigationBarTextStyle": "white"
  }
 }

5. 在src中使用Vue写法创建页面时，小程序的页面会自动创建和代码转化，文件夹为dist，图片如下：

至此，我们已初步了解mpvue框架，后续如有时间将编写进阶版内容。若上述内容有错误，欢迎指正，谢谢！

总结

以上所述是小编给大家介绍的微信小程序的mpvue框架快速上手指南，希望对大家有所帮助。如果大家有任何疑问，欢迎留言，小编会及时回复大家！