mpvue小程序前端框架初尝试

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

概述

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

框架原理

• mpvue 保留了 vue.runtime 核心方法&＃xff0c;无缝继承了 Vue.js 的基础能力
• mpvue-template-compiler 提供了&＃43;&＃43;将 vue 的模板语法转换到小程序的 wxml 语法&＃43;&＃43;的能力
  修改了 vue 的建构配置&＃xff0c;使之构建出符合小程序项目结构的代码格式&＃xff1a; 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

main.js

import Vue from &＃39;vue&＃39;
import App from &＃39;./app.vue&＃39;// 设置vue的提示功能关闭
Vue.config.productionTip &＃61; false;// 声明当前组件的类型
App.mpType &＃61; &＃39;app&＃39; // 应用// 生成应用的实例
const app &＃61; new Vue(App)// 挂载整个应用
app.$mount()

当前页面

index.vue

main.js

/*
* &＃64;Author: yujian95
* &＃64;Date: 2019-06-07 11:45:40
* &＃64;Last Modified by: admin
* &＃64;Last Modified time: 2019-06-07 20:04:52
*/import Vue from &＃39;vue&＃39;
import Index from &＃39;./index.vue&＃39;const index &＃61; new Vue(Index)// 挂载当前的页面
index.$mount()

实践

一个简单的登陆页面

start.vue

main.js

/*
* &＃64;Author: yujian95
* &＃64;Date: 2019-06-07 21:18:50
* &＃64;Last Modified by: admin
* &＃64;Last Modified time: 2019-06-07 21:37:26
*/import Vue from &＃39;vue&＃39;
import Start from &＃39;./start.vue&＃39;const start &＃61; new Vue(Start)// 挂载当前的页面
start.$mount()

main.json

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

tip:

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

参见

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