原生开发小程序 和 wepy 、 mpvue 对比

1.三者的开发文档以及介绍:

原生开发小程序文档:点此进入 
wepy 开发文档:点此进入 
mpvue 开发文档:点此进入

2.三者的简单对比:

以下用一张图来简单概括三者的区别:

小程序支持的是 WXML + WXSS + JS 这样的组合,所以,wepy 和 mpvue 都是将文件构建到 dist 目录,转换为小程序支持的文件类型,然后将微信开发者工具指向 dist 目录下,进行调试开发,并且两者都提供了热更新。

3.开发中,该选择哪种开发方式:

1.开发方式上:

原生开发: 
开发者需要全新学习小程序的抒写格式,目前版本模板中支持 slot,但是不支持 npm 包。原生不支持 css 预处理器,但是 vsCode 中 Easy WXLESS 插件可以将 less 文件自动转换为 wxss 文件; 
wepy: 
开发者需要熟悉 vue 和 wepy 两种语法,支持 slot 组件内容分发插槽,支持 npm 包,支持 css 预处理器; 
mpvue: 
开发者需要熟悉 vue ,目前版本(v1.0.5)不支持 slot ,支持 npm 包,支持 css 预处理器;

2.应用状态管理上:

原生开发: 
没有提供原生的应用状态管理方式,但是可以将 Redux or Mobx 引入到项目中。 
小程序原生提供了一种声明使用全局变量,写法为:

app.js 中配置变量


1

2

3

4

5

6

7

8

9

10

11

12

13

//App.js

App({

  BASE_URL: http://www.1m85.com/api‘,

  onLaunch: function () {

    console.log(‘App Launch‘)

  },

  onShow: function () {

    console.log(‘App Show‘)

  },

  onHide: function () {

    console.log(‘App Hide‘)

  }

})

通过全局函数 getApp() 可以获取全局的应用实例,然后调用配置常量 
/pages/index/index index.js测试


1

2

3

4

5

6

7

Page({

  onLoad:function(options){

     var app = getApp();        // Get the app instance.

     console.log(app.BASE_URL);

  }

})

wepy: 

可以将 Redux or Mobx 引入到项目中。

mpvue: 
可以直接使用 vuex 做应用状态管理

3.开发便利上:

原生开发: 
不支持 computed 计算属性和 watcher 监听器;模板语法中只支持简单的 js 表达式。需要写小程序的 view 标签等;

wepy: 
支持 computed 计算属性和 watcher 监听器;模板语法中只支持简单的 js 表达式。需要写小程序的 view 标签等; 
computed 的写法:


1

2

3

4

5

computed = {

  aPlus () {

    return this.a + 1

  }

}

watcher 监听器的写法:

// 监听器函数名必须跟需要被监听的data对象中的属性num同名, // 其参数中的newValue为属性改变后的新值,oldValue为改变前的旧值


1

2

3

4

5

watch = {

  num (newValue, oldValue) {

    console.log(`num value: ${oldValue} -> ${newValue}`)

  }

}

mpvue: 

支持 computed 计算属性和 watcher 监听器;模板语法中只支持简单的 js 表达式。可以直接写 div 、span 等标签 
computed 的写法:


1

2

3

4

5

6

7

8

computed: {

    computedClassStr () {

        return this.isActive ? ‘active‘ ‘‘

    },

    computedClassObject () {

        return { active: this.isActive }

    }

}

watcher 监听器的写法:


1

2

3

4

5

watch: {

  num (newValue, oldValue) {

    console.log(`num value: ${oldValue} -> ${newValue}`)

  }

}

4.组件化

mpvue

详细的不支持列表:

  • 暂不支持在组件引用时,在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例:<card class="class-name"> </card> 样式是不会生效的),因为编译到 wxml,小程序不会生成节点,建议写在内部顶级元素上。
  • Slot(scoped 暂时还没做支持)
  • 动态组件
  • 异步组件
  • inline-template
  • X-Templates
  • keep-alive
  • transition
  • class
  • style

mpvue 可以支持小程序的原生组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"

wepy

props 传值

props传值在WePY中属于父子组件之间传值的一种机制,包括静态传值与动态传值。静态传值和VUE类似

动态传值是指父组件向子组件传递动态数据内容,父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果,也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果

支持双向绑定!!而vue是一种自上而下的数据传递方式!!

wepy.component基类提供$broadcast$emit$invoke三个方法用于组件之间的通信和交互


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import wepy from ‘wepy‘

export default class Com extends wepy.component {

    components = {};

    data = {};

    methods = {};

    // events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数

    events = {

        ‘some-event‘: (p1, p2, p3, $event) => {

               console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);

        }

    };

    // Other properties

}

不同的是组件自定义的事件定义在events对象中。

$broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消。

$emit

$emit$broadcast正好相反,事件发起组件的所有祖先组件会依次接收到$emit事件。

$invoke

$invoke是一个页面或组件对另一个组件中的方法的直接调用,通过传入组件路径找到相应的组件,然后再调用其方法。

组件自定义事件处理函数

可以通过使用.user修饰符为自定义组件绑定事件,如:@customEvent.user="myFn"

其中,@表示事件修饰符,customEvent 表示事件名称,.user表示事件后缀。

目前总共有三种事件后缀:

  • .default: 绑定小程序冒泡型事件,如bindtap.default后缀可省略不写;
  • .stop: 绑定小程序捕获型事件,如catchtap
  • .user: 绑定用户自定义组件事件,通过$emit触发。注意,如果用了自定义事件,则events中对应的监听函数不会再执行。

 

5.参数获取

原生开发: 

APP 中

 onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
Page中
onLoad: function(options) {
    // Do some initialize when page load.
  }

mpvue

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取onLoad 时候传递的 options。

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取小程序在 app onLaunch/onShow 时候传递的 options。

6.数据更新

原生开发,mpvue

通过this.setData({});

wepy

WePY使用脏数据检查对setData进行封装,在函数运行周期结束时执行脏数据检查,一来可以不用关心页面多次setData是否会有性能上的问题,二来可以更加简洁去修改数据实现绑定,不用重复去写setData方法。

this.title = ‘this is title‘;

需注意的是,在异步函数中更新数据的时候,必须手动调用$apply方法,才会触发脏数据检查流程的运行。如:


1

2

3

4

setTimeout(() => {

    this.title = ‘this is title‘;

    this.$apply();

}, 3000);

7.事件处理

mpvue

// 事件映射表,左侧为 WEB 事件,右侧为 小程序 对应事件


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

{

    click: ‘tap‘,

    touchstart: ‘touchstart‘,

    touchmove: ‘touchmove‘,

    touchcancel: ‘touchcancel‘,

    touchend: ‘touchend‘,

    tap: ‘tap‘,

    longtap: ‘longtap‘,

    input: ‘input‘,

    change: ‘change‘,

    submit: ‘submit‘,

    blur: ‘blur‘,

    focus: ‘focus‘,

    reset: ‘reset‘,

    confirm: ‘confirm‘,

    columnchange: ‘columnchange‘,

    linechange: ‘linechange‘,

    error: ‘error‘,

    scrolltoupper: ‘scrolltoupper‘,

    scrolltolower: ‘scrolltolower‘,

    scroll: ‘scroll‘

}

在 input 和 textarea 中 change 事件会被转为 blur 事件。

8.其它

mpvue

不支持部分复杂的 JavaScript 渲染表达式

template 中的 {{}} 双花括号的部分,直接编码到 wxml 文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。

不支持过滤器

不支持函数  不支持在 template 内使用 methods 中的函数。

wepy

interceptor 拦截器

可以使用WePY提供的全局拦截器对原生API的请求进行拦截。

具体方法是配置API的config、fail、success、complete回调函数。参考示例:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

import wepy from ‘wepy‘;

export default class extends wepy.app {

    constructor () {

        // this is not allowed before super()

        super();

        // 拦截request请求

        this.intercept(‘request‘, {

            // 发出请求时的回调函数

            config (p) {

                // 对所有request请求中的OBJECT参数对象统一附加时间戳属性

                p.timestamp = +new Date();

                console.log(‘config request: ‘, p);

                // 必须返回OBJECT参数对象,否则无法发送请求到服务端

                return p;

            },

            // 请求成功后的回调函数

            success (p) {

                // 可以在这里对收到的响应数据对象进行加工处理

                console.log(‘request success: ‘, p);

                // 必须返回响应数据对象,否则后续无法对响应数据进行处理

                return p;

            },

            //请求失败后的回调函数

            fail (p) {

                console.log(‘request fail: ‘, p);

                // 必须返回响应数据对象,否则后续无法对响应数据进行处理

                return p;

            },

            // 请求完成时的回调函数(请求成功或失败都会被执行)

            complete (p) {

                console.log(‘request complete: ‘, p);

            }

        });

    }

}

wpy其它优化细节

1. wx.request 接收参数修改


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 原生代码:

wx.request({

    url: ‘xxx‘,

    success: function (data) {

        console.log(data);

    }

});

// WePY 使用方式, 需要开启 Promise 支持,参考开发规范章节

wepy.request(‘xxxx‘).then((d) => console.log(d));

// async/await 的使用方式, 需要开启 Promise 和 async/await 支持,参考 WIKI

async function request () {

   let d = await wepy.request(‘xxxxx‘);

   console.log(d);

}

2. 优化事件参数传递


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 原生的事件传参方式:

<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>

Page({

    tapName: function (event) {

        console.log(event.currentTarget.dataset.id)// output: 1

        console.log(event.currentTarget.dataset.title)// output: wepy

        console.log(event.currentTarget.dataset.other)// output: otherparams

    }

});

// WePY 1.1.8以后的版本,只允许传string。

<view @tap="tapName({{index}}, ‘wepy‘, ‘otherparams‘)"> Click me! </view>

methods: {

    tapName (id, title, other, event) {

        console.log(id, title, other)// output: 1, wepy, otherparams

    }

}

 

3. 改变数据绑定方式

保留setData方法,但不建议使用setData执行绑定,修复传入undefined的bug,并且修改入参支持: this.setData(target, value) this.setData(object)

 

原文地址:https://www.cnblogs.com/cangqinglang/p/9265366.html

时间: 2024-10-16 09:42:30

原生开发小程序 和 wepy 、 mpvue 对比的相关文章

WePy框架开发小程序总结

现如今mvvm框架如此火热,其核心思想即js逻辑层不直接操作DOM,只改变组件状态:而视图层则通过模板template进行渲染. 1.WePy项目的目录结构 ├── dist 小程序运行代码目录 ├── node_modules 依赖 ├── src 代码编写的目录 | ├── components WePY组件目录 | | ├─- com_a.wpy 可复用的WePY组件a | | └── com_b.wpy 可复用的WePY组件b | ├── pages WePY页面目录(属于完整页面) |

使用mpvue开发小程序教程(二)

在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在Visual Studio Code里面打开项目文件夹,我们可以看到类似如下的文件结构: firstapp ├── package.json ├── project.config.json ├── static ├── src │ ├── components │ ├── pages │ ├── ut

使用mpvue开发小程序教程(六)

在上一章节中,我们列举了在Vue中能用但在mpvue中不能用或需要特别注意的特性,在实际开发前了解一下还是很有必要的,可以避免浪费找错误的时间. 如果你使用过原生的小程序框架,你一定经历过或思考过怎么解决以下的问题: 怎么存放可全局访问的变量? 页面跳转的时候,怎么传递参数到下一个页面比较好? 页面返回上一页的时候,怎么传递当前页的数据到上一页? 多个页面间需要同步数据,怎么做比较好? 网上一搜,解决的方法通常也是五花八门的,什么通过app上的globalData啊.通过存取storage啊.通

wepy开发小程序eslint报错error &#39;getApp&#39; is not defined no-undef

wepy开发小程序使用getApp().globalData保存全局数据很方便,但是会在控制台看到很多报错:"error 'getApp' is not defined no-undef",这是eslint报错. 解决办法:在.eslintrc.js文件中加入   globals: { getApp: true } wepy开发小程序eslint报错error 'getApp' is not defined no-undef 原文地址:https://www.cnblogs.com/s

跨端开发小程序

在微信小程序中,每个页面都是由.js..wxss..wxmk和.json四个部分构成,代码结构比较复杂.另外,由于对ES6语法和sass等css预处理支持的不友好,导致开发效率很低,所以早早就有用vue.js来开发小程序的框架,比如webpy和mpvue,但是基本都是单纯的开发微信小程序. 可是,随着微信小程序.网页H5.头条小程序.百度小程序.支付宝小程序.快运用.原生APP的增多,每个都独立开发的话,每个前端估计都要吐血了,所以,就出现了跨端开发的框架.现在基本对多端支持足够好的,就是tar

共享链模式开发小程序商城

微信里头的共享链是一款营销工具,解决实体店现有的营销方案难以刺激消费者.被电商的打压导致实体店的生意越来越难做.外卖成本越来越高等痛点."共享链"基于区块链技术理念而开发,以消费奖励的方式,让消费者重复消费,主动分享,持续关注.达到提升商家销量的目的.共享链模式开发小程序商城:151-1222-4001(微/电) 举例,顾客到某水果店购买商品后通过共享链支付成功后进入共享链小程序,该小程序里面会显示消费者的消费金额,奖励金额和已经到账金额,之后其他消费者也到该水果店消费,那共享链系统会

开发小程序(填坑之路,遇到一点就更新一点)

1.开发小程序发送请求时,报错不在以下合法列表中: 在开发工具详情中设置: 请参考微信官方文档:关于小程序网络相关API说明 2.如果你需要权限验证(如登录后访问),小程序不像浏览器能帮你自动携带cookie信息,那么你需要自己写在将cookie写入请求hedear中,不然每次请求都通不过权限验证. wx.request({ url: `${API_URL}/${type}`, data: Object.assign({}, params), method: 'POST', header: {

原生微信小程序 wepy mpvue对比

小程序支持的是 WXML + WXSS + JS 这样的组合,所以,wepy 和 mpvue 都是将文件构建到 dist 目录,转换为小程序支持的文件类型,然后将微信开发者工具指向 dist 目录下,进行调试开发,并且两者都提供了热更新. 原文地址:https://www.cnblogs.com/ceceliahappycoding/p/10952092.html

使用mpvue开发小程序教程

从vue到mpvue再到微信小程序,这么几天下来感觉被搞晕了.三者之间的很多功能存在差异,项目也快接近尾声了,坑也踩了很多了,现在给后来的你们一点总结性经验: 1. 在模板中,动态插入HTML的v-html指令不可用 这条很好理解,小程序的界面并不是基于浏览器的BOM/DOM的,所以不能动态的在界面模板里直接插入HTML片段来显示. 题外话,如果有在小程序里插入html片段的需求怎么办?可以用<rich-text>组件或者wxParse(https://github.com/icindy/wx