### [mpvue如何开发微信小程序？基础知识介绍](https://www.prosaas.cn/article/16956)

**Published:** 2019-11-25T07:10:16

**Author:** 5201314

**Excerpt:** mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 …

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。

![](https://img.php.cn/upload/article/000/000/024/5ddb7cb080ccd561.jpg)

## mpvue快速入门

① 通过脚手架引入mpvue模板

> vue 3.0已经**不支持vue init命令**了，所以需要单独安装**@vue/cli-init**，安装好之后，就可以按以下操作步骤引入mpvue模板了

npm install -g @vue/cli-init

vue init mpvue/mpvue-quickstart my-project

cd my-project

npm install

npm run dev

> npm run dev命令会在项目根目录下生成一个dist目录，其就是**将vue的项目转换为微信小程序项目**

② 搭建小程序的开发环境

> 微信提供了一个专门**微信开发者工具**用于开发小程序，需要下载安装微信开发者工具，同时还需要申请一个小程序ID，即**AppID**，因为**通过微信开发者工具创建小程序项目需要填入AppID**，可以在微信公众平台申请得到。

③ 调试项目

> 通过微信开发者工具启动微信小程序项目，选择的项目目录**是mpvue项目的根目录，而不是生成的dist目录**，由于**微信开发者工具不支持.vue文件的查看**，所以我们还是要用自己的开发工具调试源码。

## mpvue的一些使用细节

① mpvue的src目录下和vue一样，**也有一个App.vue根组件**，**App.vue根组件只是一个结构**，**无具体内容**，根组件有对应的**main.js**文件用于渲染App.vue根组件，即**引入App.vue并作为Vue构造函数创建Vue实例，然后mount**，还有一个**app.json**文件，即**页面全局配置文件**，用于**页面的注册**、**tabBar的注册**、**全局window样式设置**，如:

// App.vue

<script>

export default {
 
}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}
</style>

// main.js

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'

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

// app.json

{
  "pages": \[
    "pages/index/main"
  \],
  "tabBar": {
    ......
  },
  "window": {
    "backgroundColor":"#00BFFF",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "测试",
    "navigationBarTextStyle": "black"
  }
}

② mpvue中定义的页面都放在src目录下的**pages目录**里面，**一个页面对应一个文件夹**，每个页面文件夹内需要有一个**.vue文件**和**main.js文件**，main.js主要做的就是，**引入当前页面对应的.vue，然后作为Vue构造函数的参数创建Vue实例并mount**，并且**main.js的名称不能改变**，**只能是main**.

// main.js

import Vue from 'vue'
import App from './index'

// add this to handle exception
Vue.config.errorHandler = function (err) {
  if (console && console.error) {
    console.error(err)
  }
}

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

> 在mpvue中，一个页面中的.vue文件的名字虽然可以任意，但是**.js和.json文件名字是固定为main的**，通常我们.vue文件也是固定使用index.vue，所有**一个页面中通常固定包含index.vue、main.js、main.json**，**通过外层的文件夹来区分不同的页面**，而原生小程序中，也是通过外层文件夹来区分不同的页面，但是**文件夹中的四个页面的名称可以和外层文件夹相同，也可以不同，但四个文件必须统一**。

③ **每次新增了页面，需要重新启动项目**，即重新执行npm run dev.

## 微信小程序基础与常用API

① **点击按钮提示用户是否授权并获取用户信息**

> 微信小程序给我们的按钮提供了一些**微信开发的能力**，其通过给标签添加一个**open-type**属性，表示**要给按钮开放的能力类型**，比如**getUserInfo**，即点击按钮获取用户信息的能力，我们需要在上通过监听**getuserinfo**事件，mpvue在小程序的基础上进行了封装，需要通过**e.mp.detail.userInfo**才能获取到用户信息，

<button open-type="getUserInfo" @getuserinfo="getUserInfo">点击开始</button>
<script>
export default {
    getUserInfo(e) {
      console.log(e.mp.detail.userInfo); // 获取用户信息
    }
}
</script>

② **wx全局对象**  
就像网页运行在浏览器环境一样，浏览器环境会提供一个全局的window对象，同样小程序是运行在小程序环境中，**小程序环境也会提供一个全局的wx对象**，wx会提供很多api，比如访问网络(**wx.request({})**)、页面跳转(**wx.redirectTo({})**)、显示loading(**wx.showLoading({})**)、显示提示(**wx.showToast({})**)等

③ **微信小程序中发起网络请求**  
在小程序环境中不能像浏览器环境一个直接提供ajax，而是提供了一个全局的网络请求api，即wx.request(),在小程序环境中只能使用wx.request()发起网络请求，**不能使用axios**等常用的请求类库，并且wx.request()并**不存在跨域问题**。使用wx.request()的时候，**需要传递一个请求参数配置对象**，**request()方法返回结果并不是一个Promise对象**，所以不能通过.then()的方式去处理请求结果，而是**在请求配置对象中添加了success、fail、complete等回调函数**，在回调函数中可以获取到请求的结果，如:

wx.request({
    url: "http://www.baidu.com", // 请求url地址必填
    data: {
        user: "even li"
    },
    method: "get", // 请求方法
    header: {
        "content-type": "application/json" // 默认值
    },
    success(res) {
        console.log(res.data); // 获取响应数据
    },
    fail(error) {
        console.log(error); // 请求失败
    }
    complete(res) { // 接口调用结束，请求成功或失败都会执行
        console.log(res); // 如果请求成功则res为响应结果res，如果请求失败则res为错误信息error
    }
});

> 需要注意的是，**返回状态码为404也算请求成功**，**一般只有网络异常的时候才算请求失败**。

④ **跳转页面非tabBar页面**  
如果想要跳转到某个非tabBar页面，那么可以使用一个全局的api，即**wx.redirectTo({})**，其作用就是**关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面**。需要传递一个配置对象，主要属性为**url**，即**要跳转页面的路径，可带参数**，然后就是success、fail、complete三个回调函数，请**处理跳转结果**，如:

wx.redirectTo({
    url: "../question/main", // 在某个页面内../相当于pages/
    success() {
    },
    fail() {
    },
    complete() {
    }
});

⑤ **跳转到tabBar页面**  
在微信小程序中，tabBar页面是需要特殊的方式跳转的，即使用**wx.switchTab({})**的方式，其**会跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面**，其用法同wx.redirectTo({});

wx.switchTab({
   url: "../learn/main", // 在某个页面内../相当于pages/
success() {
    },
    fail() {
    },
    complete() {
    }
});

⑥ **页面配置文件**  
小程序的页面配置文件分为**全局配置文件**app.json与即**页面配置**main.json. 全局配置文件可配置项比较多，整个配置文件内容要用花括号括起来，也就是说**是一个JSON对象**，如:

-   **pages**属性，是一个**数组**，用于**定义小程序用到的页面**，数组中每一项对应一个页面，即**路径+文件名**信息，不需要写后缀，在mpvue中所有页面固定使用main，即每个页面下都会有一个main.js，所以在配置pages时，通常为"**pages/页面名/main**"，位于**pages数组第一项**表示小程序的初始页面，即**小程序运行时显示的页面**。
-   **window**属性，即对小程序的**窗口样式**进行配置，其属性值为一个对象，主要包括**backgroundColor**(窗口背景颜色，即**页面下拉后漏出的背景窗口颜色**)、backgroundTextStyle(设置下拉背景字体、loading图的样式，**目前只支持dark和light**)、**navigationBarBackgroundColor**(导航栏背景颜色)、navigationBarTextStyle(导航栏标题颜色，**目前只支持black和white**)、navigationBarTitleText(导航栏标题文字内容)、navigationStyle(**值为custom自定义导航栏**)

> 微信小程序设置颜色的时候，**只支持十六进制颜色**，不支持RGB格式和颜色英文。

-   **tarBar**属性，用于配置窗口底部的tabBar，其属性值为一个**对象**，主要有color(设置tab未激活状态文字的颜色)、selectedColor(设置tab激活状态的文字颜色)、borderStyle(设置tabBar上边框的颜色，目前只支持black和white)、backgroundColor(设置tab的背景颜色)、list(用于配置tab项，**最多可配置5项**)，**list属性值为一个数组**，主要包括**text**(tab上显示的文字内容)、**iconPath**(tab处于未激活状态时显示的图标路径)、**selectedPath**(tab处于激活状态时显示的图标路径)、**pagePath**(tab被点击时要跳转的页面路径，**其属性值为pages中配置的路径**)

> 页面配置配置相对于全局主配置文件来说要简单得多，在**页面配置文件中只能配置窗口的样式属性**，即只能配置全局配置文件中的window属性中的内容，**页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置**，以决定当前页面的窗口表现，**无需使用window属性，直接将window配置放到花括号中即可**。

⑦ **小程序页面**与**Vue**生命周期

> 小程序给页面提供了**onLoad**(页面加载)、**onShow**(页面显示，**但还未渲染完成**)、onReady(页面渲染完成)、**onHide**(页面隐藏)、**onUnload**(页面卸载)，**mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起**，也就是说使用mpvue开发小程序，可以同时使用小程序的生命周期和vue的生命周期，其顺序为: **beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted**。即**Vue首先实例化然后页面开始加载、显示、渲染，页面渲染完成后Vue实例开始挂载**。

⑧ **导航到某个页面**  
所谓导航到某个页面，就是跳转到某个页面，但是其会**保留当前页面**，跳转的目的页面**导航栏左侧中自带一个返回按钮**，点击可以回到之前的页面，但是**这个跳转的目的页面不能是tabbar中的页面**，其使用的是wx.navigateTo({})

wx.navigateTo({
    url: "../myLesson/main" // 导航到我的课程页面，目标页面自带返回按钮，点击可返回之前的页面
});

⑨ **动态设置页面导航栏标题**  
当我们点击列表中的某个具体项时，通常需要在其对应页面动态显示出当前点击项的具体导航栏标题，微信小程序提供了**wx.setNavigationBarTitle({})**用于**动态设置导航栏栏标题**，同样有success、fail、complete三个回调函数，如:

wx.setNavigationBarTitle({
     title: "动态标题内容",
     success() {
     },
     fail() {
     },
     complete() {
     }
});

⑩ **本地缓存数据**  
微信小程序提供了**setStorage({})**方法，可以将数据存储在本地缓存中指定的 key 中，**除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用**。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。如:

wx.setStorage({
    key:"key",
    data:"value"
});

同样，微信小程序也提供了getStorage({})方法，用于获取对应key中存储的数据，其还有success、fail、complete三个回调函数，如:

wx.getStorage({
    key: "key",
    success (res) { // 成功获取到对应key中的数据
    },
    fail() { // 未成功获取到对应key中的数据
    },
    complete() { // 获取对应key数据结束，不管成功还是失败都会执行
    }
});

> getStorage()和setStorage()方法本身是**异步的**，但是微信小程序提供了对应的同步方法，即**getStorageSync("key")**和**setStorageSync("key", "value")**;

⑪ **轮播图组件**  
微信小程序提供了一个轮播图组件，其中只可放置**swiper-item组件**，swiper有一些常用的属性，如:

-   indicator-dots: 是否显示面板指示点;
-   autoplay: 是否自动切换;
-   interval: 设置自动切换时间间隔;
-   duration: 滑动动画时长;
-   circular: 是否循环播放;
-   indicator-active-color: 设置当前选中的指示点颜色;

<swiper :indicator-dots="indicatorDots" 
        :autoplay="autoPlay" 
        :interval="interval" 
        :duration="duration" 
        :circular="circular" 
        indicator-active-color="rgba(255,255,255, 0.6)">
        <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item>
                <img :src="item" class="slide-item"/>
            </swiper-item>
        </block>
</swiper>

> 当然，组件不仅仅能实现图片的轮播，还可以实现其他轮播，比如**列表内容的轮播(导航和内容的联动)**，我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性，而是**通过手进行滑动**，swiper组件还有一个**current**属性，**属性值为滑动块的索引值**，用于显示对应的滑动item，从而实现导航和内容的联动，即**点击导航，自动切换到对应内容**。swiper组件也提供了change事件，当我们手动滑动滑动item的时候，就会触发change事件，可以在事件对象中拿到对应滑块的索引，从而更新导航位置，实现**滑动内容，自动高亮导航位置**。

⑫ **可滚动区域组件**  
微信提供了一个可滚动区域组件，用于设置该区域中的内容是可以滚动的，通常用于实现**可滚动的导航标签栏**，其常用属性为:

-   scroll-x: 是否允许横向滚动;
-   scroll-y: 是否允许纵向滚动;
-   scroll-into-view: 属性值为对应滚动item的id，表示自动滚动到对应id元素位置;
-   scroll-with-animation: 在设置滚动条位置时使用动画过渡;

> 要实现点击某个滚动item后，自动滚动到对应滚动item位置，那么需要给每个滚动item添加一个id，然后动态改变scroll-into-view的值为对应的滚动item的id即可。

<scroll-view class="btns\_wrap" 
             scroll-x :scroll-into-view="toChildView" 
             scroll-with-animation>
    <span :class="{active: currentIndex === index}" 
          class="btn\_scroll" 
          v-for="(item, index) in allLessons" 
          :key="index" 
          :id="item.id" 
          @click="switchItem(index)">
          {{item.name}}
    </span>
</scroll-view>

本文来自 小程序开发 栏目，欢迎学习！

以上就是mpvue如何开发微信小程序？基础知识介绍的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---