一套代码小程序&Web&Native运行的探索07——mpvue简单调研

接上文：【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

最近工作比较忙，加之上个月生了小孩，小情人是各种折腾他爸妈，我们可以使用的独立时间片不多，虽然这块研究进展缓慢，但是一直做下去，肯定还是会有一些收获的

之前我们这个课题研究一直是做独立的研究，没有去看已有的解决方案，这个是为了保证一个自己独立的思维，无论独立的思维还是人格都是很重要的东西，然独学而无友则孤陋而寡闻，稍微有点自己的东西后，还是应该看看外面已有的东西了，今天的目标是mpvue，我们来看看其官方描述：

mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

彻底的组件化开发能力：提高代码复用性
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力

其它特性正在等着你去探索，详细文档，github地址：https://github.com/Meituan-Dianping/mpvue

似乎，mpvue已经完成了我们想要做的工作，如果他真的好用，我们去学习吸收他也不失为一个好的方式，于是我们便去试试他的5分钟上手教程，简单编译后便形成了小程序代码，运行之：

一套代码小程序&Web&Native运行的探索07——mpvue简单调研

这里最终生成的代码已经可以完全适配小程序了，我们这里主要来看看其app.json的配置：

{
  "pages": [
    "pages/index/main",
    "pages/logs/main",
    "pages/counter/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

这里设置了起始页面，每个目录下都是main作为入口，我们简单看一下main的写法

<import src="/pages/index/index.vue.wxml" /><template is="b26bd43a" data="{{ ...$root['0'], $root }}"/>

都很一致，其中奇怪的template id就是真实的模板，然后我们看看源文件src：

<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>

<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>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>

index.vue