mpvue开发小程序教程(三)

【注意事项】由于mpvue也在不断的开发演进,大家在不同时间段使用的时候,可能会遇到和文中的做法不一样的地方。请关注文章的评论区中大家的讨论,寻找解决方案,或者及时查阅官方文档,避免陷入版本更新的坑里哦。

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

为了清楚起见,我们将要对vue-cli生成的代码做一个清理工作,具体如下:

  • 删掉 src/componentssrc/pagessrc/utils三个目录下的所有代码文件
  • src/App.vue文件中的内容重置成:
<script>export default {}</script>
<style></style>
  • src/main.js文件中的内容重置成:
import Vue from 'vue'import App from './App'
Vue.config.productionTip = falseApp.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'    }  }}

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

app.js

app.js中包含了小程序的各种原生生命周期方法,如 onLaunchonShow等等。而在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标签来写,比如 divspan等,它们会在编译的时候被自动转换成小程序的原生组件 viewtext之类;而那些小程序特有的组件如 swiperrich-text等,可以直接在模板中使用。

在原生小程序的页面(Page)中包含了很多页面的生命周期方法,如 onLoadonUnloadonShowonHideonPullDownRefresh等等,mpvue中推荐使用Vue组件生命周期方法,而像 onPullDownRefreshonReachBottom这类特殊功能的生命周期则需直接使用原生的。

回头再来看,当我们实现了这个 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!

本文分享自微信公众号 - 爱编码(ilovecode)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏授客的专栏

Python 强制停止多线程运行

"""raises the exception, performs cleanup if needed"""

21110
来自专栏Java工程师成长之路

vue散碎知识点学习

为了解决方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

6920
来自专栏Java工程师成长之路

vue前端实战注意事项

9730
来自专栏奔跑的人生

根据大小写字母单列拆分

  昨天同事遇到了这个问题,就帮忙看了一下,顺便温习一下好些时候因为LINQ而没用的SQL函数,喜新厌旧,这样不对呀~

9530
来自专栏Java工程师成长之路

zuul进阶学习(二)

7810
来自专栏Java工程师成长之路

websocket+rabbitmq实战

  接到的需求是后台定向给指定web登录用户推送消息,且可能同一账号会登录多个客户端都要接收到消息

10310
来自专栏Java工程师成长之路

十次方中的前端知识点随记

node8 不支持import,可以用require,不用import,或者用babel的命令行工具来执行

9110
来自专栏授客的专栏

JQuery 获取元素到浏览器可视窗口边缘的距离

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

21220
来自专栏授客的专栏

自动化测试 Appium之Python运行环境搭建 Part1

https://pypi.org/project/Appium-Python-Client/#files

9210
来自专栏授客的专栏

Easyui 去除jquery-easui tab页div自带滚动条

打开tab页面时,自动载入一个iframe页面,除了iframe页面本身会出现一个滚动条,tab标签页也出现一个滚动条,如下图所示,需求就是去掉tab页面的滚动...

14120

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励