基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

异化情况

  • 生命周期

支持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日 - 5月10日),一共有300个issue,处理了250个,获得8900star,社区比较活跃。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java架构

教你理清SpringBoot与SpringMVC的关系

spring boot就是一个大框架里面包含了许许多多的东西,其中spring就是最核心的内容之一,当然就包含spring mvc。spring mvc 是只是...

223
来自专栏大内老A

在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的...

42910
来自专栏小筱月

java 开发 websocket 网页端聊天室

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

1672
来自专栏逍遥剑客的游戏开发

Nebula3学习笔记(5): IO系统

1694
来自专栏青枫的专栏

java基础学习_概述_day01总结

============================================================================= ==...

651
来自专栏Android常用基础

Tinker-使用教程与原理分析(上)

前面我们讲解了AndFix的使用,这篇我们来讲解下微信的Tinker热修复,相比AndFix,Tinker的功能更加全面,更主要的是他支持gradle。他不仅做...

1161
来自专栏企鹅号快讯

高并发分布式——主节点选举

1. 概述 本文主要分享 Elastic-Job-Lite 主节点选举。 涉及到主要类的类图如下: ? . 2. 为什么需要选举主节点 首先我们来看一段官方对 ...

1959
来自专栏JetpropelledSnake

ELK学习笔记之Logstash详解

官方介绍:Logstash is an open source data collection engine with real-time pipelining...

1294
来自专栏玩转JavaEE

初识Spring Boot框架

按:最近公众号文章主要是整理一些老文章,主要是个人CSDN上的博客,也会穿插一些新的技术点。 ---- 前面的铺垫文章已经连着写了六篇了,主要是介绍了Sprin...

3615
来自专栏游戏杂谈

使用node-webkit实现打包工具的小结

之前一直使用的hta在开发工具,最近转到node-webkit上了,对比一下二者的优劣势。hta单个文件,体积较小,但有兼容性的问题(兼容ie6、7、8就行了...

702

扫码关注云+社区