Pre-development environment
node.js, vue-cli, micro-channel developer tools
Create a project
vue init mpvue/mpvue-quickstart firstapp
After installation depends into the directory npm install npm run dev, then open the developer tools introduced micro-channel
File directory structure
1) build directory
buildDirectory for some projects compiled packaged node.js scripts and configuration files webpack. You do not need to modify these files under normal circumstances.
2) config directory
config
Directory contains the different configurations for the next development and production environment
dev.env.js
for development environment
prod.env.js
for the production environment, you can be the development phase and the production phase is not the same information (such as background API url address, etc.) configured into two files to go, and then referenced in the code in the form of variables. For example, these two documents are arranged with different
API_BASE_URL
values:
// dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_BASE_URL: '"http://127.0.0.1:8080/api"'
})
// prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_BASE_URL: '"https://www.my-domain.com/api"'
}
Request code used when the rear end of the write API
= const baseURL process.env.API_BASE_URL
wx.request({
url: '$ {} baseURL / products`
})
3) src directory
src目录是我们主要进行小程序功能编写的地方。默认生成的demo代码为我们创建了几个子目录：
components、
pages和
utils，还有2个文件：
App.vue和
main.js。其实它们都不是必须的，可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构了，比较易于理解，所以我们可以遵循这个结构进行开发。
-
components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录
-
pages：存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式
-
utils：可选（可删）。可以将代码中一些公用工具函数组织成模块放入该目录下
-
可新建其他目录，存放你希望组织起来的代码。比如公用的业务逻辑代码、请求后台API的代码等等
-
main.js + App.vue：这两个是入口文件，相当于原生小程序框架中的
app.json和app.js的复合体。
4）static目录
static目录可以用于存放各种小程序本地静态资源，如图片、文本文件等。代码中可通过相对路径或绝对路径进行访问， 如：
<img src="/static/button.png" /> <img src="../../../static/button.png" />
5）package.json文件
package.json是项目的主配置文件，里面包含了mpvue项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息。
6）project.config.json文件
project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。
小程序页面生命周期
onLoad、
onUnload、
onShow、
onHide、
onPullDownRefresh等等，mpvue中推荐使用Vue组件生命周期方法，而像
onPullDownRefresh、
onReachBottom这类特殊功能的生命周期则需直接使用原生的。
指定首页
默认是第一个
显示指定
pages: [ '^pages/index/main' ]