为了清楚起见,我们将要对vue-cli生成的代码做一个清理工作,具体如下:
删掉src/components、src/pages、src/utils三个目录下的所有代码文件
将src/App.vue文件中的内容重置成:
export default {}
</script>
<style>
</style>
- 将`src/main.js`文件中的内容重置成:
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`的配置详情我们可以[查阅参考小程序的官方文档来作进一步了解](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)。那么,在mpvue中我们如何来做与之等价的配置呢?
其实在`src/main.js`中,我们就可以完整的进行这些信息的配置,具体可以查看该文件的最底部代码:
// 这部分相当于原生小程序的 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`):
/ 这部分相当于原生小程序的 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的实例](https://cn.vuejs.org/v2/guide/instance.html),并调用`$mount()`方法加载。下面是这个过程的关键代码行:
const app = new Vue(App)
app.$mount()
######首页、以及其他页面
每个小程序都需要至少有一个页面,第一个展示的页面被叫做*首页*。因为前面已经把所有的页面代码都删完了,所以我们现在要新建一个首页。在`src/pages`目录下,我们新建一个名为`index`的子目录(请遵循每个页面放入一个子目录的良好习惯),然后在该子目录下,新建2个文件:一个用于实现页面主体功能的`index.vue`组件,另一个则用于将这个页面组件生成Vue实例并加载的`main.js`。以后的每一个mpvue页面组件都会拥有这样的结构。
![](https://upload-images.jianshu.io/upload_images/3407939-db653d8b653c1824.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
然后在`main.js`中编写如下代码,非常简单的一段代码,它的功能是引入`index.vue`并创建Vue实例:
import App from './index'
const app = new Vue(App)
app.$mount()
接着,我们需要实现`index.vue`页面组件,它的写法是最典型的Vue组件写法。
<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/articles/main",
"pages/authors/main",
"pages/index/main",
"pages/kickstart/main"
]
为了解决这种情况,我们需要显式的去指定首页。可以在`src/main.js`的配置里,加入这样一行配置信息:
'^pages/index/main'
]
注意:以上配置中指定为首页的路径前面有个`^`符号。
加入这行配置之后,`pages/index/main`总是会在最终生成的`dist/app.json`中排在第一个位置,成为首页。
####小结
今天主要了解了作为一个最简单的可以运行的mpvue小程序所应该包含的各个代码部分,希望你可以动手实践一下,理解和掌握这些内容。Good Luck!
相关推荐
使用mpvue开发小程序简单的小教程,mpvue介绍、mpvue环境搭建 、mpvue项目转换成小程序项目导入运行,mpvue 源码分析 创建页面 绑定事件 循环数据 页面路由跳转 生命周期函数---
【标题】"mpvue快速搭建美团外卖第三方微信小程序"涉及的核心技术主要集中在微信小程序的开发框架mpvue以及如何利用该框架构建与美团外卖接口对接的应用。mpvue是基于Vue.js的微信小程序开发框架,旨在提高开发效率...
本教程将围绕如何使用mpVue来高仿美团小程序进行详细讲解,让你在实践中掌握mpVue的核心技术和微信小程序的开发技巧。 首先,我们需要了解mpVue的基础架构。mpVue的核心思想是将Vue.js的组件化思想与微信小程序的...
这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了 mpvue ,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里整理分享下我开发时...
使用 mpvue 开发小程序,首先需要了解小程序本身的功能限制以及 Vue.js 的特性。然后,利用 mpvue 提供的 CLI 工具创建项目,通过 `vue init mpvue/mpvue-quickstart my-project` 初始化项目,并安装依赖。开发过程...
8. 在实际使用mpvue开发小程序时,需要特别注意定时器时间与动画过渡时间的匹配。确保动画每300毫秒旋转360度,动画的持续时间和动画过渡时间应当保持一致。 以上就是mpvue小程序实现循环动画开启暂停功能的详细...
### mpvue开发框架和最佳实践 #### mpvue框架概述 mpvue是一款专为微信小程序定制的开发框架,其核心设计理念是让开发者能够充分利用Vue.js的组件化开发模式,从而达到提高开发效率的目的。该框架支持Vue.js的所有...
在这个主题中,我们将深入探讨如何在开发微信小程序时实现标签属性的智能补全功能,以及如何支持原生小程序、mpvue和wepy这三种不同的框架。 1. **原生微信小程序**:原生小程序是微信官方提供的开发环境,使用WXML...
mpvue 提供了更接近原生开发的体验,同时也保留了 Vue.js 的灵活性和便利性,使得开发者能够利用现有的 Vue 技术栈快速开发小程序。 3. **小程序开发流程**:小程序开发主要包括以下几个步骤:注册微信开发者账号、...
- mpvue是滴滴出行开发的一个基于Vue.js的小程序开发框架,它允许开发者使用Vue.js的开发方式来编写微信小程序。 - mpvue的核心优势在于其与Vue.js的兼容性,使得前端开发者可以快速上手,利用Vue的生态系统进行小...
【描述】:“这个教程是针对基于mpvue框架的微信小程序开发的全面指导,旨在帮助学生和开发者从零基础到精通,完成毕业设计、课程设计、项目实践以及技能实训。” 【内容详解】: 1. **微信小程序基础**:微信小...
【基于mpvue搭建微信小程序项目框架的教程详解】 MPVue 是一个基于 Vue.js 的小程序开发框架,它在底层全面支持 Vue.js 的语法和构建工具体系,使得开发者能够以更熟悉的方式来编写微信小程序,大大提高了开发效率...
小程序的全栈开发还有mpvue小程序的全栈开发, 配套视频教程请移步https://www.bilibili.com/video/av83423939/mpvue-shop 文件是该小程序的前端项目,使用mpvue,mpvue-shop-node 文件是该小程序的后端项目,使用koa...
mpvue是一款使用Vue.js开发小程序的前端框架,它将Vue.js的核心库与微信小程序的开发能力结合起来,允许开发者利用Vue.js的开发体验来构建小程序,同时保留了原生小程序的性能和API。mpvue的一个显著优势是能够使用...
第三:mpvue小程序,小程序主要是用 mpvue 框架开发 mpvue 小程序运行步骤: 1、安装node环境 node 是8版本,这边开发版本是8.12.0,由于mpvue属于老牌小程序框架了,目前这边验证的只是这个node版本, 当然新的小...
第三:mpvue小程序,小程序主要是用 mpvue 框架开发 mpvue 小程序运行步骤: 1、安装node环境 node 是8版本,这边开发版本是8.12.0,由于mpvue属于老牌小程序框架了,目前这边验证的只是这个node版本, 当然新的小...
mpvue是一个使用Vue.js开发小程序的前端框架,目前支持微信小程序、,和。基于框架,修改了框架的运行时运行时和代码编译器编译器实现,设置可运行在小程序环境中,从而为小百度智能小程序程序开发引入了开发体验。...