【注意事项】由于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 = 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'
}
}
}在该代码中通过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>
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
