使用mpvue开发小程序教程（三）

在上一篇文章中，咱们熟悉了一下经过vue-cli生成的mpvue工程代码骨架的基本结构，大体了解了每个部分的代码到底要放到何处。从本文起咱们就开始涉及真正的编码部分，学习使用Vue的语法去编写小程序。

为了清楚起见，咱们将要对vue-cli生成的代码作一个清理工做，具体以下：

• 删掉src/components、src/pages、src/utils三个目录下的全部代码文件

• 将src/App.vue文件中的内容重置成：

<script>
export default {}
</script>

<style>
</style>

• 将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: [],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '第一个小程序',
      navigationBarTextStyle: 'black'
    }
  }
}

至此，咱们的代码就成了一个小程序页面都没有的初始状态。

程序入口

学习过使用小程序原生框架开发的朋友都知道，一个小程序的入口应该包含这三个最重要的部分：
1）app.json
2）app.js
3）首页

有了这三个部分，才能成功运行起一个最简单的小程序。

app.json

app.json是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。app.json的配置详情咱们能够查阅参考小程序的官方文档来做进一步了解。那么，在mpvue中咱们如何来作与之等价的配置呢？

其实在src/main.js中，咱们就能够完整的进行这些信息的配置，具体能够查看该文件的最底部代码：

export default {
  // 这部分至关于原生小程序的 app.json
  config: {
    pages: [],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: '第一个小程序',
      navigationBarTextStyle: 'black'
    }
  }
}

在该代码中经过export default导出的对象的config属性下的值，就是这些小程序的配置信息了。

app.js

app.js中包含了小程序的各类原生生命周期方法，如onLaunch、onShow等等。而在mpvue中，它使用了一个简单的Vue组件App.vue来实现等价的功能。咱们在这个App.vue组件中能够编写小程序的生命周期方法（一般使用Vue的生命周期方法，但也兼容原生的生命周期方法），也能够在其中加入小程序的全局样式（等价于原生方式下的app.wxss）：

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

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

接着，这个 App.vue组件被 src/main.js引入并被设置了一个 mpType的属性值，其值为 app。这个值是为了与后面要讲的小程序页面组件所区分开来，由于小程序页面组件和这个 App.vue组件的写法和引入方式是一致的，为了区分二者，须要设置 mpType值。引入这个 App.vue组件后，会用它做为参数来建立一个 Vue的实例，并调用 $mount()方法加载。下面是这个过程的关键代码行：

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

首页、以及其余页面

每一个小程序都须要至少有一个页面，第一个展现的页面被叫作首页。由于前面已经把全部的页面代码都删完了，因此咱们如今要新建一个首页。在src/pages目录下，咱们新建一个名为index的子目录（请遵循每一个页面放入一个子目录的良好习惯），而后在该子目录下，新建2个文件：一个用于实现页面主体功能的index.vue组件，另外一个则用于将这个页面组件生成Vue实例并加载的main.js。之后的每个mpvue页面组件都会拥有这样的结构。

而后在 main.js中编写以下代码，很是简单的一段代码，它的功能是引入 index.vue并建立Vue实例：

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

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

固然了，你也能够像在src/main.js中同样去导出一个页面级别的配置，由于小程序的每一个页面均可以有一些单独的配置：

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

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

export default {
  config: {
    // 注意，页面级可配置属性至关于只是`src/main.js`中配置里的`window`部分
    "navigationBarTitleText": "文章列表页面"
  }
}

接着，咱们须要实现index.vue页面组件，它的写法是最典型的Vue组件写法。

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello'
    }
  },

  methods: {
    clickHandle () {
      this.msg = 'Clicked!!!!!!'
    }
  }
}
</script>

<style scoped>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>

能够看到，这个组件彻底看不到小程序写法的影子，而是所有由Vue开发Web应用的写法来完成：数据绑定、事件处理、scoped局部样式、以及使用HTML标签来构建界面。这样最大化的保持和网页应用开发一致，减小了前端人员切换到小程序的学习理解成本，也为原先使用Vue开发的网页应用移植到小程序平台提供了下降迁移成本的可能。

模板部分咱们一般能够用HTML标签来写，好比div、span等，它们会在编译的时候被自动转换成小程序的原生组件view、text之类；而那些小程序特有的组件如swiper、rich-text等，能够直接在模板中使用。

在原生小程序的页面（Page）中包含了不少页面的生命周期方法，如onLoad、onUnload、onShow、onHide、onPullDownRefresh等等，mpvue中推荐使用Vue组件生命周期方法，而像onPullDownRefresh、onReachBottom这类特殊功能的生命周期则需直接使用原生的。

回头再来看，当咱们实现了这个index.vue页面组件后，其实还缺最后一个步骤，就是须要将这个页面组件指定为首页。若是咱们的小程序只有一个页面的话，其实也能够省略这一步，由于mpvue会自动将src/pages目录下的页面组件路径添加到最终编译出来的小程序配置文件中去（能够打开dist/app.json文件观察一下）：

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "第一个小程序",
    "navigationBarTextStyle": "black"
  }
}

可是，大多数状况下咱们的小程序会由不少个页面组成，在src/pages目录下编写多个页面组件后，mpvue也会自动把它们都添加进配置文件，可是因为小程序有一个机制：配置文件中pages数组里的第一个page路径会被当作是首页

若是你指望的首页组件并无被mpvue添加到第一个路径的话，就不会被当作首页显示。好比有多个页面，并在dist/app.json里生成的是下面的序列，则第一个pages/articles/main页面会被当作首页：

"pages": [
  "pages/articles/main",
  "pages/authors/main",
  "pages/index/main",
  "pages/kickstart/main"
]

为了解决这种状况，咱们须要显式的去指定首页。能够在src/main.js的配置里，加入这样一行配置信息：

pages: [
  '^pages/index/main'
]

注意：以上配置中指定为首页的路径前面有个^符号。

加入这行配置以后，pages/index/main老是会在最终生成的dist/app.json中排在第一个位置，成为首页。

小结

今天主要了解了做为一个最简单的能够运行的mpvue小程序所应该包含的各个代码部分，但愿你能够动手实践一下，理解和掌握这些内容。Good Luck！

 

使用mpvue开发小程序教程（四）