258资源分享网

微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力，越来越多企业加入小程序开发。 小程序于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代码：

/index.js

//获取应用实例

var app = getApp()

Page({

   data: {

       motto: 'Hello World',

       userInfo: {}

   },

   //事件处理函数

   bindViewTap: function() {

       console.log('button clicked')

   },

   onLoad: function () {

       console.log('onLoad')

   }

})

基于wepy的实现：

import wepy from 'wepy';

export default class Index extends wepy.page {

   data = {

       motto: 'Hello World',

       userInfo: {}

   };

   methods = {

       bindViewTap () {

           console.log('button clicked');

       }

   };

   onLoad() {

       console.log('onLoad');

   };

}

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

wepy组件示例

// index.wpy

<template>

   <view>

       <panel>

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

       </panel>

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

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

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

   </view>

</template>

<script>

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

   };

   data = {

       myNum: 50,

       syncNum: 100,

       items: [1, 2, 3, 4]

   }

}

</script>