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