mpvue--小程序前端框架初尝试

更新内容请点击访问我的博客

概述

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

框架原理

• mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力
• mpvue-template-compiler 提供了++将 vue 的模板语法转换到小程序的 wxml 语法++的能力
  修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件

生命周期

结构介绍

• src (项目源代码)
  • pages
  • app.json
  • main.js
  • app.vue
• dist (生成的小程序代码)
  • wx (生成的wx小程序代码)
    • common
    • component
    • pages (页面文件代码)
    • static (静态文件代码)
    • app.js
    • app.json
    • app.wxss
    • sitemap.json

全局页面

app.vue

<script>
  export default {

  }
</script>

<style>
/*公共的样式*/
</style>

main.js

import Vue from 'vue'
import App from './app.vue'

// 设置vue的提示功能关闭
Vue.config.productionTip = false;

// 声明当前组件的类型
App.mpType = 'app'  // 应用


// 生成应用的实例
const app = new Vue(App)

// 挂载整个应用
app.$mount()

当前页面

index.vue

<template>
  <div>
    <p>
      index 组件
    </p>
  </div>
</template>


<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<style>

</style>

main.js

/*
* @Author: yujian95
* @Date:   2019-06-07 11:45:40
* @Last Modified by:   admin
* @Last Modified time: 2019-06-07 20:04:52
*/

import Vue from 'vue'
import Index from './index.vue'

const index = new Vue(Index)

// 挂载当前的页面
index.$mount()

实践

一个简单的登陆页面

start.vue

<template>
  <div class="startContainer">
    <img v-if="isShow" class="start_img" :src="userInfo.avatarUrl" alt=""/>
    <Button v-else class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo">解锁新世界</Button>
    <p class="userName">hello {{userInfo.nickName}}</p>
    <div v-if="isShow" class="unlock">
      <p>解锁新世界</p>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        userInfo: {},
        isShow: false
      }
    },
    beforeMount () {
      console.log('--beforemount--')
      this.handleGetUserInfo()
    },
    // 存放所有的回调函数
    methods: {
      // 获取用户登录
      handleGetUserInfo () {
        wx.getUserInfo({
          success: (res) => {
            console.log(res)
            // 更新data中的数据
            this.userInfo = res.userInfo
            this.isShow = true
          },
          fail: () => {
            console.log('获取失败')
          }
        })
      },

      getUserInfo (res) {
        console.log('获取')
        console.log(res)
        if (res.mp.detail.rawData) {
          // 用户授权
          this.handleGetUserInfo()
        }
      }
    }
  }
</script>

<style>
  page {
    background: #0061b0;
  }

  .startContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .start_img{
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
    margin: 100rpx 0;
  }

  .userName{
    font-size: 40rpx;
    font-weight: bold;
    margin: 100rpx 0;
  }

  .unlock {
    width: 220rpx;
    height: 80rpx;
    border: 1rpx solid #eee;
    font-size: 24rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    background: #eee;
  }

  .btn {
    width: 300rpx;
    height: 300rpx;
    border-radius: 150rpx;
    margin: 50rpx 0;
    line-height: 300rpx;
    text-align: center;
  }
</style>

main.js

/*
* @Author: yujian95
* @Date:   2019-06-07 21:18:50
* @Last Modified by:   admin
* @Last Modified time: 2019-06-07 21:37:26
*/

import Vue from 'vue'
import Start from './start.vue'

const start = new Vue(Start)

// 挂载当前的页面
start.$mount()

main.json

{
  "navigationBarBackgroundColor": "#0061b0",
  "navigationBarTitleText": "轮滑猫"
}

tip:

• 尽量不要用小程序的生命周期函数
• 缩进要求高,注意handleGetUserInfo ()括号前后的空格
• console.log(),中要用单引号’,否则会报错
• 连续俩行空行,也会报错.
• 新建的页面要重新运行npm start或npm run dev

参见

• mpvue官方文档
• mpvue教程,b站