小程序开发 wepy/mpvue/uni-app/taro

2019-08-06  本文已影响0人  单只蝴蝶_569d

框架简介:

wepy:

接近于 Vue.js,类Vue开发,支持组件 Props 传值,自定义事件、组件分布式复用Mixin、计算属性函数computed、模板内容分发slot等等
组件化开发。wepy是由腾讯由外向内开源的。个人维护,demo和文档较少。

import wepy from 'wepy';
//通过继承自wepy.page的类创建页面逻辑
export default class Index extends wepy.page {
    data = {
        motto: 'Hello World',
        userInfo: {}
    };
    methods = {
        bindViewTap () {
            console.log('button clicked');
        }
    };
    onLoad() {
        console.log('onLoad');
    };
}
// index.wpy
<template>
    <view>
        <component id="pannel" path="pannel"></component>
        <component id="counter1" path="counter"></component>
        <component id="counter2" path="counter"></component>
        <component id="list" path="list"></component>
    </view>
</template>
<script>
//引入List、Panel和Counter组件
import wepy from 'wepy';
import List from '../components/list';
import Panel from '../components/panel';
import Counter from '../components/counter';
export default class Index extends wepy.page {
  //页面配置
    config = {
        "navigationBarTitleText": "test"
    };
    //声明页面中将要使用到的组件
    components = {
        panel: Panel,
        counter1: Counter,
        counter2: Counter,
        list: List
    };
}
</script>

mpvue:(美团)

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

uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS、Android、H5、以及各种小程序等多个平台。

taro

Taro 是一套遵循 React 语法规范的 多端开发 解决方案

兼容性:

目前经常用的小程序框架


image.png

性能:

点赞组件响应速度

长列表中的某个组件,比如点赞组件,点击时是否能及时的修改未赞和已赞状态?是这项测试的评测点。

测试方式:

在红米手机(Redmi 6 Pro)上进行多次测试,求其平均值,结果如下:


image.png

<figcaption></figcaption>

说明:也就是在列表数量为400时,微信原生开发的应用,点赞按钮从点击到状态变化需要111毫秒。

测试结果数据说明:

组件数据更新性能测评:微信原生开发,uni-app,taro > wepy > mpvue

综上,本性能测试做了2个测试,长列表加载和组件状态更新,综合2个实验,结论如下:

微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

上一篇下一篇

猜你喜欢

热点阅读