小程序开发框架:mpvue(二)项目代码分析

1,400 阅读5分钟

小程序开发框架:mpvue(一)初篇

   现在我们来分析一下我们刚刚建立好的工程,他主要由以下几个部分组成

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.jsprod.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等等