使用mpvue开发小程序教程(三)

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

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

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

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

  • 删掉src/componentssrc/pagessrc/utils三个目录下的所有代码文件

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

<script>
export default {}
</script>

<style>
</style>
AI 代码解读
  • 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'
    }
  }
}
AI 代码解读

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

程序入口

学习过使用小程序原生框架开发的朋友都知道,一个小程序的入口应该包含这三个最重要的部分:
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'
    }
  }
}
AI 代码解读

在该代码中通过export default导出的对象的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>
AI 代码解读

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

App.mpType = 'app'
const app = new Vue(App)
app.$mount()
AI 代码解读
首页、以及其他页面

每个小程序都需要至少有一个页面,第一个展示的页面被叫做首页。因为前面已经把所有的页面代码都删完了,所以我们现在要新建一个首页。在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()
AI 代码解读

当然了,你也可以像在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": "文章列表页面"
  }
}
AI 代码解读

接着,我们需要实现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>
AI 代码解读

可以看到,这个组件完全看不到小程序写法的影子,而是全部由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"
  }
}
AI 代码解读

但是,大多数情况下我们的小程序会由很多个页面组成,在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"
]
AI 代码解读

为了解决这种情况,我们需要显式的去指定首页。可以在src/main.js的配置里,加入这样一行配置信息:

pages: [
  '^pages/index/main'
]
AI 代码解读

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

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

小结

今天主要了解了作为一个最简单的可以运行的mpvue小程序所应该包含的各个代码部分,希望你可以动手实践一下,理解和掌握这些内容。Good Luck!

还想继续阅读?那就读下一篇吧!

目录
打赏
0
0
0
0
2
分享
相关文章
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
525 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
239 12
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
178 0
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
163 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1247 3
|
9月前
|
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
202 0
微信小程序更新提醒uniapp
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
233 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问