更新内容请点击访问我的博客
概述
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
- wx (生成的wx小程序代码)
全局页面
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