使用mpvue开发小程序教程(三)
【原文地址】mpvue入门系列教程:
- 如何在mpvue中正确的引用小程序的原生自定义组件
- 使用mpvue开发小程序教程(六)
- 使用mpvue开发小程序教程(五)
- 使用mpvue开发小程序教程(四)
- 使用mpvue开发小程序教程(三)
- 使用mpvue开发小程序教程(二)
- 使用mpvue开发小程序教程(一)
【注意事项】由于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'}}
}
至此,我们的代码就成了一个小程序页面都没有的初始状态。
程序入口
学习过使用小程序原生框架开发的朋友都知道,一个小程序的入口应该包含这三个最重要的部分:
- app.json
- app.js
- 首页
有了这三个部分,才能成功运行起一个最简单的小程序。
app.json
app.json
是小程序的全局配置文件,其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置,以及一些小程序网络超时的配置等等。app.json
的配置详情我们可以查阅参考小程序的官方文档来作进一步了解。那么,在mpvue中我们如何来做与之等价的配置呢?
其实在src/main.js
中,我们就可以完整的进行这些信息的配置,具体可以查看该文件的最底部代码:
export default {// 这部分相当于原生小程序的 app.jsonconfig: {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开发小程序教程(三)相关推荐
- 使用mpvue开发小程序教程(一)
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- 使用mpvue开发小程序教程(五)
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- 使用mpvue开发小程序教程(二)
在上一篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在 ...
- mpvue开发小程序所遇问题及h5转化方案
项目结构 |---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex储存|---utils|---请 ...
- 微信小程序开发之——mpvue开发小程序
一 概述 mpvue:Vue.js in mini program,即mini vue.js编程框架 mpvue是把vue.js核心代码经过二次开发的框架,增加了vue.js开发小程序的能力 mpvu ...
- mpvue开发小程序前端框架
mpvue是一个使用 Vue.js 开发小程序的前端框架. 一.主要特性: 彻底的组件化开发能力:提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案:方便构建复杂应用 快捷 ...
- 使用mpvue开发小程序
一.安装node.js 1.在官网中安装nodejs最新版本.地址:https://nodejs.org/en/download/,根据自己环境,进行下载安装. 2.安装完成后,进行nodejs版本及 ...
- mpvue开发小程序分享朋友圈无法自定义标题解决方法
在node_modules里面找到mpvue,手动修改一下mpvue这个包下的index.js文件 // 用户点击右上角分享 到朋友圈 onShareTimeline: rootVueVM.$opti ...
- mpvue v-html解决方案,mpvue开发小程序所遇问题及h5转化方案
wx这个对象我们可以结合router和vux封装一下其中的navigateTo,redirectTo等路由及模态框和toast,并在webpack.base.conf配置wx指向该文件,这样我们就能直 ...
最新文章
- 【Qt】通过QtCreator源码学习Qt(七):插件管理类简介
- 用S60操作系统SDK开发NOKIA手机应用程序(4)- 界面层框架及一些特性
- 报名 | 刘鹰教授:草根创新力:中国经济快速发展的秘诀
- servlet返回数据_JavaEE の Servlet - Http/Servlet - Day14 - 190507
- 炸裂!谷歌这波操作,预警了什么?
- 【Java基础篇】try catch finally语句包含return语句时的执行过程
- ssh源码编译安装mysql_总结源码编译安装mysql
- Ubuntu Mysql安装配置
- Linux内核dev_set_drvdata()和dev_get_drvdata()存储自定义结构体用法
- PCA算法原理及实现
- (有图)仿QQ侧滑菜单:RecyclerView侧滑菜单,长按拖拽,滑动删除
- 最好的git教程,没有之一
- linux打开九针串口,RS232 9针串口定义
- 打包或者编译python程序
- 【我的C/C++语言学习进阶之旅】NDK开发之Native层使用fopen打开Android设备上的文件
- 2022-2028全球全盘加密软件行业调研及趋势分析报告
- 计算机主板供电故障,电脑主板内部电池供电出现问题,会出现哪些故障问题
- PPT中如何插入带圈的11
- 谷歌Android 9 Pie介绍及新功能
- 计算机怎么设置搜索桌面,桌面百度:电脑上的直接搜索框,想搜就搜