用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

像VUE一样写微信小程序-深入研究wepy框架

Rolan 2017-8-25 00:38

微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发。 小程序于M页比相比,有以下优势:1、小程序拥有更多的能力,包括定位、录音、文件、媒体、各种硬件能力等,想 ...

微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发。 小程序于M页比相比,有以下优势: 

1、小程序拥有更多的能力,包括定位、录音、文件、媒体、各种硬件能力等,想象空间更大 

2、运行在微信内部,体验更接近APP

3、在过度竞争的互联网行业中,获取一个有效APP用户的成本已经非常高了,小程序相比APP更加轻量、即用即走, 更容易获取用户

开发对比

从开发角度来讲,小程序官方封装了很多常用组件给开发带来很多便利性,但同时也带来很多不便: 

1、小程序重新定义了DOM结构,没有window、document、div、span等,小程序只有view、text、image等 封装好的组件,页面布局只能通过这些基础组件来实现,对开发人员来讲需要一定的习惯转换成本 

2、小程序不推荐直接操作DOM(仅仅从2017年7月开始才可以获取DOM和部分属性),如果不熟悉MVVM模式的开发者, 需要很高的学习成本

3、小程序没有cookie,只能通过storage来模拟各项cookie操作(包括http中的setCookie也需要自行处理)

wepy

笔者团队最近开发了多个微信小程序,为了弥补小程序各项不足和延续开发者VUE的开发习惯,团队在开发初期 就选用了wepy框架,该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风 格上80%以上接近VUE,开发者可以以很小的成本从VUE开发切换成小程序开发,相比于小程序,主要优点如下:

1、开发模式容易转换 wepy在原有的小程序的开发模式下进行再次封装,更贴近于现有MVVM框架开发模式。框架在开发过程中参考了 一些现在框架的一些特性,并且融入其中,以下是使用wepy前后的代码对比图。

官方DEMO代码:

  1. /index.js

  2. //获取应用实例

  3. var app = getApp()

  4. Page({

  5.    data: {

  6.        motto: 'Hello World',

  7.        userInfo: {}

  8.    },

  9.    //事件处理函数

  10.    bindViewTap: function() {

  11.        console.log('button clicked')

  12.    },

  13.    onLoad: function () {

  14.        console.log('onLoad')

  15.    }

  16. })

基于wepy的实现:

  1. import wepy from 'wepy';

  2. export default class Index extends wepy.page {

  3.    data = {

  4.        motto: 'Hello World',

  5.        userInfo: {}

  6.    };

  7.    methods = {

  8.        bindViewTap () {

  9.            console.log('button clicked');

  10.        }

  11.    };

  12.    onLoad() {

  13.        console.log('onLoad');

  14.    };

  15. }

2.真正的组件化开发 小程序虽然有 标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。

wepy组件示例

  1. // index.wpy

  2. <template>

  3.    <view>

  4.        <panel>

  5.            <h1 slot="title"></h1>

  6.        </panel>

  7.        <counter1 :num="myNum"></counter1>

  8.        <counter2 :num.sync="syncNum"></counter2>

  9.        <list :item="items"></list>

  10.    </view>

  11. </template>

  12. <script>

  13. import wepy from 'wepy';

  14. import List from '../components/list';

  15. import Panel from '../components/panel';

  16. import Counter from '../components/counter';

  17. export default class Index extends wepy.page {

  18.    config = {

  19.        "navigationBarTitleText": "test"

  20.    };

  21.    components = {

  22.        panel: Panel,

  23.        counter1: Counter,

  24.        counter2: Counter,

  25.        list: List

  26.    };

  27.    data = {

  28.        myNum: 50,

  29.        syncNum: 100,

  30.        items: [1, 2, 3, 4]

  31.    }

  32. }

  33. </script>

3.支持加载外部NPM包 小程序较大的缺陷是不支持NPM包,导致无法直接使用大量优秀的开源内容,wepy在编译过程当中,会递归 遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来,并且修改require为相对路径, 从而实现对外部NPM包的支持。如下图:

4.单文件模式,使得目录结构更加清晰 小程序官方目录结构要求app必须有三个文件app.json,app.js,app.wxss,页面有4个文件 index.json,index.js,index.wxml,index.wxss。而且文 件必须同名。 所以使用wepy开发前后开发目录对比如下:

官方DEMO:

  1. project

  2. ├── pages

  3. |   ├── index

  4. |   |   ├── index.json  index 页面配置

  5. |   |   ├── index.js    index 页面逻辑

  6. |   |   ├── index.wxml  index 页面结构

  7. |   |   └── index.wxss  index 页面样式表

  8. |   └── log

  9. |       ├── log.json    log 页面配置

  10. |       ├── log.wxml    log

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 张所勇 来自: 大转转FE

相关阅读