码迷,mamicode.com
首页 > 微信 > 详细

MPVUE - 应用vue.js开辟微信小法式榜样

时间:2018-04-17 18:06:03      浏览:13028      评论:0      收藏:0      [点我收藏+]

标签:途径   eof   生成   uri   首页   assets   close   https   timeout   

MPVUE - 应用vue.js开辟微信小法式榜样

甚么是mpvue?

mpvue 是美团点评前端团队开源的一款应用 Vue.js 开辟微信小法式榜样的前端框架。框架供给了完全的 Vue.js 开辟体验,开辟者编写 Vue.js 代码,mpvue 将其解析转换为小法式榜样并确保其精确运转。

简单上手mpvue

官方供给了一套quickstart模板。

 vue init mpvue/mpvue-quickstart my-project

装置好依附以后,履行npm run dev,将会将小法式榜样文件打包进dist文件夹,以后应用微信开辟者对象将目次指向dist文件夹便可。

差别化情况

  • 生命周期

支撑vue.js的生命周期部分,并且兼容了小法式榜样的生命周期。

new Vue({
  data: {
    a: 1
  },
  created () {
    // `this` 指向 vm 实例
    console.log(‘a is: ‘ + this.a)
  },
  onShow () {
    // `this` 指向 vm 实例
    console.log(‘a is: ‘ + this.a, ‘小法式榜样触发的 onshow‘)
  }
})
// => "a is: 1"
  • 模板语法

不支撑 v-html,由于小法式榜样里没有dom和bom的概念。

  • 不支撑部分复杂的 JavaScript 衬着表达式

mpvue会把 template 中的 {{}} 双花括号的部分,直接编码到 wxml 文件中,由于微信小法式榜样的才能限制(数据绑定),所以没法支撑复杂的 JavaScript 表达式

今朝可以应用的有+ - * % ?: ! == === > < [] .

以下这几种情况都不支撑:

// 根本类型的办法调用
<p>{{ message.split(‘‘).reverse().join(‘‘) }}</p>
// 实例办法调用
<p>{{ strDecode(message) }}</p>
// 类型断定
<p>{{ typeof message }}</p>
// 过滤器
<p>{{ message | strDecode }}</p>

第一种可以应用计算属性来处理,第二种和第四种都是常常应用的,可以数据初始化的时辰用js处理,只不过遍历的时辰会稍微有点繁琐。也可让后端支撑,直接前往处理过的数据。

支撑短路和断路:

<p>{{ false || ‘默许值‘ }}</p>
<p>{{ true && ‘默许值‘ }}</p>
  • Class 与 Style 绑定

根本全支撑,不支撑classObj和styleObj情势,例如:

<p :class="classObj"></p>

data () {
    return {
        classObj: {
            active: true
        }
    }
}

mpvue会解析成:

<p class="object Object"></p>

styleObj 类似,别的,暂不支撑在组件上应用 Class 与 Style 绑定。

  • 条件衬着、列表衬着、计算属性全支撑

  • 组件

不支撑列表:

  1. 暂不支撑在组件援用时,在组件上定义 click 等原肇事宜、v-show(可用 v-if 代替)和 class style 等款式属性(例:<card class="class-name"> </card> 款式是不会失效的)
  2. ==Slot==(scoped 临时还没做支撑)
  3. 静态组件
  4. 异步组件
  5. inline-template
  6. X-Templates
  7. keep-alive
  8. ==transition==

不支撑复杂的slot,组件化会受限,不支撑transition,过渡动画能够要用css3手写。

支撑小法式榜样原生组件,原生组件上的事宜绑定,须要以 vue 的事宜绑定语法来绑定,如 bindchange="eventName" 事宜,须要写成 @change="eventName",例如:

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      以后选择: {{date}}
    </view>
</picker>

留意事项及踩坑

  • 模板中的img标签url指向相对途径时不克不及精确解析例如:

<img src="~assets/images/home/header.png" />
<img src="./assets/images/home/header.png" />

在以后mpvue版本(1.0.8)中,图片相对url不克不及精确解析,官方已列入待修复bug(27 days ago),https://github.com/Meituan-Dianping/mpvue/issues/152,临时的处理办法是可以将静态资本放入static文件夹中,然后img标签用相对途径引入:

<img src="/static/images/home/header.png" />

带来的副感化是不克不及享用url-loader的处理(小图片转base64)。

别的,css中倒是可以经过过程相对途径引入图片的,例如:

.icon {
    background-image: url(‘./assets/images/home/header.png‘);
}

.icon1 {
    background-image: url(‘~assets/images/home/header.png‘);
}

url-loader 会将小于limit数值的图片转成base64,然则小法式榜样中仿佛规定了css中不克不及引入本地静态资本,可以经过过程设备url-laoder、nginx别号、host处理:

host设备:

127.0.0.1 sns-mp.guahao-inc.com

nginx设备:

server {
    listen 80;
    server_name sns-mp.guahao-inc.com;
    location /static/src/assets/ {
        alias /Users/lavyun/Code/FE/vue/vue-mp-demo/src/assets/;
    }
}

url-loader设备:

const imageRule = {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: ‘url-loader‘,
    options: {
        limit: 10 * 1024,
        publicPath: ‘http://sns-mp.guahao-inc.com/‘,
        name: utils.assetsPath(‘[path][name].[ext]‘)
    }
}

// 临盆情况下指向静态资本办事器
if (isProd) {
    imageRule.options.publicPath = ‘http://static.gauhao-inc.com‘
}

module.export = {
    ...,
    module: {
        rules: [
            imageRule,
            ...
        ]
    }
}

组件和小法式榜样体系组件重名时的BUG

比如:

<loading></loading>

小法式榜样文档里没有提到有loading这个组件,之前直接应用loading做组件名,产生了很多莫明其妙的bug,框架层面也没做缺点提示。所以大年夜家开辟时最好防止下定名抵触。

slot的各类成绩

之前mpvue版本1.0.6时,应用slot生成的小法式榜样代码少了import敕令。
https://github.com/Meituan-Dianping/mpvue/issues/217

组件的代码:

<template>
    <div class="scroll-wrapper">
        <slot></slot>
        <loading v-if="loading"></loading>
    </div>
</template>

应用组件时的代码:

<scroll-wrapper :loading="loading">
    <top-entries></top-entries>
</scroll-wrapper>

生成的wxml:

<template name="data-v-7d8efa60-default-1">
    <template data="{{...$root[$kk+‘0‘], $root}}" is="home$69cf8ee0"></template>
</template>

少了一行:<import src="home$69cf8ee0" />

现版本 1.0.8 应用slot时:

<scroll-wrapper :loading="loading">
    <circle-list v-if="circleList.length" :list="circleList"></circle-list>
</scroll-wrapper>

circleList状况被更新时不克不及精确的触发视图更新,官方的仓库中也有大年夜部分issue也是关于slot的。

应用vuex管理状况

固然小法式榜样是多页的,但小法式榜样的多页主如果指 视图层 是多个 webview,相互自力,然则 js 都是在同一个履行情况中的,所以在mpvue中可以直接应用vuex来管理状况。

初始化一个vuex实例,然后在须要应用的组件里引入。

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import actions from ‘./actions‘
import mutations from ‘./mutations‘
import getters from ‘./getters‘
import state from ‘./state‘

Vue.use(Vuex)

const store = new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})

export default store

在组件里应用:

import store from ‘../../store‘
import * as types from ‘../../store/types‘

export default {
    data () {
        return {
            animate: false
        }
    },
    computed: {
        popup () {
            return store.getters.postEntryPopup
        }
    },
    methods: {
        close () {
            this.animate = false
            setTimeout(() => {
                store.commit(types.POST_ENTRY_POPUP)
            }, this.popup.animateTime)
        }
    }
}

app.json 和 page.json

框架规定在 src/main.js 中导出app.json设备,

import Vue from ‘vue‘
import App from ‘./App‘

Vue.config.productionTip = false
App.mpType = ‘app‘

const app = new Vue(App)
app.$mount()

export default {
    // 这个字段走 app.json
    config: {
        // 页眼前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会主动把 webpack entry 外面的出口页面加出来
        pages: [‘^pages/home/main‘],
        window: {
            onReachBottomDistance: 10
        }
    }
}

在 src/pages/**/main.js 中导出page.json设备:

import Vue from ‘vue‘
import App from ‘./index‘

const app = new Vue(App)
app.$mount()

export default {
    config: {
        navigationBarBackgroundColor: ‘#3f86ff‘,
        navigationBarTitleText: ‘首页‘,
        backgroundTextStyle: ‘light‘,
        navigationBarTextStyle: ‘light‘,
        enablePullDownRefresh: true,
        backgroundColor: ‘#3f86ff‘
    }
}

应用总结

应用mpvue可以很好降低开辟人员的进修小法式榜样语法的本钱,可以很大年夜程度上的完成h5和小法式榜样代码复用(应用vuejs框架),在迁徙一些vue组件到小法式榜样时,能够都不须要修改代码或许修改大批代码便可以直接应用。官方对待框架的立场是很不错的,开源一个多月(3月9日 - 4月16日),一共有300个issue,处理了250个,取得7800star,社区比较活泼。

文章推荐

Mpvue一个基于Vue的微信小法式榜样前端框架

MPVUE - 应用vue.js开辟微信小法式榜样

标签:途径   eof   生成   uri   首页   assets   close   https   timeout   

原文地址:https://www.cnblogs.com/smartXiang/p/8868145.html

(3)
(1)
   
告发
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权一切 京ICP备13008772号-2
迷上了代码!