现在我们来分析一下我们刚刚建立好的工程,他主要由以下几个部分组成
1. 项目配置文件
2. src目录
3. static目录
现在我们逐个看下
1. 项目配置文件 顾名思义,项目配置文件主要用来配置项目的基本信息,项目的依赖等等,这些文件有
1)project.config.json 用于管理微信开发者工具的小程序项目的配置文件,当我们通过微信web开发者工具打开一个项目的时候,读取的项目配置就是从这个文件开始的
2)package.json 这个文件对于vue来说非常常见了,它描述了项目的基本信息,包括你在新建项目的时候输入的基本信息,项目的依赖等等,在这个文件里面,我们需要注意两个命令的使用
npm run dev npm run build
首先这两个脚本的作用都是编译运行我们的程序,但是他们的使用还是有些许区别的
npm run dev 在8080端口运行我们的程序,通过会由elec或者其他壳子启动,当运行这个程序之后,项目后台会监测文件的变化,当文件发生变化的时候,会重新进行编译,做到即刻改动即刻显现,但是这个命令的缺点是不能打包压缩我们的代码,对于微信小程序只能上传2M以内的代码来说,npm run dev一般用于开发,但是不用于上传代码到微信
npm run build 这个命令的优点就是以最小化的方方式打包压缩我们的代码,其缺点就是后台不是一直检测,如果文件发生了变化,你需要重新执行该命令
3)config/dev.env.js 和 config/prod.env.js 一个项目的上线过程必然是会从测试环境切换到生产环境,所以我们可以通过配置dev.env.js和prod.env.js来无缝切换我们的地址
dev.env.js 是用来配置测试环境的配置文件 假设测试环境的地址是"http://119.0.0.0:8080/test",那么我们就可以修改这个文件如下
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
BASE_URL: 'http://119.0.0.0:8080/test'
})
prod.env.js 是从来配置生产环境的配置文件
假设测试环境的地址是"http://119.0.0.0:8081/test",那么我们就可以修改这个文件如下
module.exports = {
NODE_ENV: '"production"',
BASE_URL: 'http://119.0.0.0:8081/test'
}
那么在后续的代码编写中,我们只要引用BASE_URL即可;
const URL = process.env.BASE_URL
那么当我们执行npm run dev命令运行程序的时候,他执行的就是测试环境的地址,而当执行npm run build命令运行程序的时候,他执行的就是生产环境的地址
2. src目录
这个目录主要由以下几个部分组成
2.1 components 主要用来放置一些可以共用的组件
2.2 pages 主要用来放置小程序的每一个页面
2.3 入口文件main.js和App.vue 和vue的项目一样,这两个文件也是通过模板创建项目的时候生成的,作为项目的入口文件
3. static目录 这个文件夹主要用来存放一些静态的资源文件,如图片, 音频,视频,不过这里你应该知道这个文件夹也会编译打包到dist目录,即其大小也是计算在2M以内的,所以音视频文件最好不要放
上面主要分析了项目的文件结构,下面我们主要分析下这个模板项目的基础代码,看看是如何展示出微信小程序首页的
main.js,他的代码比较少,如下
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
第1行,引入vue 第2行,引入App组件 第4行,阻止 vue 在启动时生成生产提示,如何不设置为false,则会在生产环境提示一些无必要的信息 第7,8行,创建Vue实例,并挂载实例
App.vue,这个组件的代码也比较少,关键代码如下
<script>
export default {
created() {
// 调用API从本地缓存中获取数据
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
console.log('app created and cache logs by setStorageSync')
}
}
</script>
第3~7行行,created方法为vue组件的生命周期方法,这个阶段主要就是通过微信api去获取并设置以logs为key的日志
app.json
{
"pages": [
"pages/index/main",
"pages/logs/main",
"pages/counter/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
pages字段主要用来描述微信小程序的页面信息,默认第一个页面为首页 window字段主要用来描述微信小程序首页的配置信息,如导航栏背景,标题等等
那为什么会生成这三个文件, 这三个文件和微信小程序有什么关系
在微信小程序里面,其入口文件为 1)app.json,用于描述小程序的配置文件,如由哪些页面组成,导航栏属性设置 2)app.js,用于描述小程序的页面的生命周期 2)首页
在转换到mpvue之后,app.json保持不变,app.js约等于App.vue,而首页则是通过app.json文件中的pages字段的首行来指定的,顾默认的mpvue模板展示的首页为pages/index/main,我们来看下这个文件
pages/index/main分为三个部分,分别是template,script和css,我们逐一看下
<template>
<div class="container" @click="clickHandle('test click', $event)">
<div class="userinfo" @click="bindViewTap">
<img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
<div class="userinfo-nickname">
<card :text="userInfo.nickName"></card>
</div>
</div>
<div class="usermotto">
<div class="user-motto">
<card :text="motto"></card>
</div>
</div>
<form class="form-container">
<input type="text" class="form-control" v-model="motto" placeholder="v-model" />
<input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
</form>
<a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>
</div>
</template>
第2行,通过@click方式来对container这个div绑定一个点击方法clickHandle('test click', $event),@click为v-on:click的缩写,其中test click为传递的参数,event表示默认事件,这个参数可以不传 第7行,使用card组件,组件位置位于src/components/card.vue, :text这样的写法是通过 Prop 向子组件传递数据,你可以在card.vue中发现他定义了一个props: ['text'] 第18行, v-model为vue中的数据双向绑定,这样input的内容就和motto变量进行了关联 第19行,v-model.lazy,当双向数据绑定添加lazy修饰符的时候,改变input框中的内容并不会使得motto中的内容发生变化,此时当输入框失去焦点后触发change事件之后,才会改变motto的值 第21行,通过a标签进行页面跳转
template部分就是这样,下面在看下script 部分
<script>
import card from '@/components/card'
export default {
data () {
return {
motto: 'Hello World',
userInfo: {}
}
},
components: {
card
},
methods: {
bindViewTap () {
const url = '../logs/main'
wx.navigateTo({ url })
},
getUserInfo () {
// 调用登录接口
wx.login({
success: () => {
wx.getUserInfo({
success: (res) => {
this.userInfo = res.userInfo
}
})
}
})
},
clickHandle (msg, ev) {
console.log('clickHandle:', msg, ev)
}
},
created () {
// 调用应用实例的方法获取全局数据
this.getUserInfo()
}
}
</script>
第2行,引入card组件 第17行,通过微信API:navigateTo完成页面跳转 第21行,通过wx.login获取用户信息并保存至userInfo对象中 第38行,vue的生命周期方法
至此,一个简单的App就这么完成了,细心的同学会在pages/logs/目录发下一个main.json,对这个文件就是用来对某个页面进行配置用的,所以我们来个总结
1: 如何添加一个页面 在pages目录下,新建一个页面文件夹,里面添加index.vue,main.js和main.json 其中index.vue作用为绘制页面,main.js用来挂载该组件,main.json用来控制微信导航栏等属性
2: mpvue的入口文件main.js和app.json相当于微信小程序入口文件app.js,app.json
后面我们将通过一个项目来实际演练下,技术包括vue,mpvue,mpvue使用echats等等