澳门777娱乐官方 通讯企业 是一款让小程序支持组件化开发的框架,从而为小程序开发引入了整套 Vue.js

是一款让小程序支持组件化开发的框架,从而为小程序开发引入了整套 Vue.js



摘要微信官方团队近期在腾讯官方Github上正式对外开源了小程序组件化开发框架wepy。1、框架简介WePY
是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async
Functions的引入都是为了能让开发小程序项目变得更加简单,高效。同时WePY也是一款成长中的框架,大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。2、框架特性类Vue开发风格支持自定义组件开发支持引入NPM包支持Promise支持ES2015+特性,如Async
Functions支持多种编译器,Less/Sass/Styus、Babel/Typescript、Pug支持多种插件处理,文件压缩,图片压缩,内容替换等支持
Sourcemap,ESLint等小程序细节优化,如请求列队,事件优化等3、演示Demo<style
lang=”less”> @color: #4D926F; .userinfo { color: @color;
}</style><template lang=”pug”> view(class=’container’)
view(class=’userinfo’ @tap=’tap’) mycom(:prop.sync=’myprop’
@fn.user=’myevent’) text {{now}}4、安装使用4.1 安装(更新) wepy
命令行工具。npm install wepy-cli -g4.2 生成开发示例wepy new myproject4.3
开发实时编译wepy build –watch5、为什么要选择WePY?哪些小程序是用 WePY
开发的(案例)阅邻二手书、深大的树洞、 手机充值+、 爱羽客羽毛球、
小小羽球、 七弦琴大数据、 七弦琴小助手、 培恩医学、 公务员朝夕刷题、
独角兽公司、 逛人备忘、 英语助手君、 农资优选、 花花百科、 斑马小店、
鲜花说小店、趣店招聘、满🐻阅读+
代码简例wepy-demo-bookmall、平行进口报价内参、求知微阅读(完全开源)、坚橙…资源地址官方网站:

自从2016年9月我发布第一套小程序视频教程后,很多同学都开始利用这套视频教程走上了小程序开发的道路,同时建立了几个小程序交流QQ群,到目前也都是人满为患,已经不能为大家在群里解答小程序的相关问题了。

1. weapp-boilerplate 微信小程序骨架

时间: 2018-09-05阅读: 893标签: 小程序

摘要: 对比小程序框架。

但是有时候又想分享点干货,怎么办呢?我想了想,还是通过 [微信公众号]
吧。

特点


  • 开发阶段与生产阶段分离。

  • 自动化生成新页面所需文件并添加到配置中。

  • 以Standard Code Style校验全部的js和json文件。

  • 开发阶段json配置文件可以有注释,方便备注。

  • 代码中集成部分文档内容,减少查文档的时间。

  • 开发阶段可以使用less完成样式编码,原因你懂得~
    (如果你了解这些,当然可以支持sass等其他预处理样式)。

  • 借助babel自动进行ES2015特性转换,放心使用新特性。

  • 开发阶段用xml文件后缀取代wxml后缀,避免在开发工具中配置代码高亮。

  • Source Map

  • Travis CI

小程序到底有多火,看看目前推出的开源框架以及组件库就知道了。由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。

  • 原文:小程序第三方框架对比 ( wepy / mpvue / taro )
  • 公众号:前端小苑

小程序发展到了今天,已经开放出了太多的利好消息,API
也已经非常丰富和完善了。

创建步骤


1、 mpvue

Fundebug经授权转载,版权归原作者所有。

但是开发小程序,很多时候非常繁琐,这个原因是小程序的架构,编写一个页面需要4个文件:

将项目克隆到本地

定位到任意目录
$ cd path/to/root

克隆仓库到指定的文件夹
$ git clone
https://github.com/zce/weapp-boilerplate.git
[project-name] –depth 1

进入指定的文件夹
$ cd [project-name]

mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于
Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler
实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js
开发体验。使用 mpvue
开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:

图片 1

page.wxml

page.wxss

page.js

page.json

安装项目NPM依赖

$ npm install

彻底的组件化开发能力:提高代码复用性

众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序,
支付宝小程序,
快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望大家指正。

同时还有很多问题、不完善的ES6/7语法支持、很差劲的代码编写体验。

使用


完整的 Vue.js 开发体验

小程序开发有哪些痛点?

  • 频繁调用 setData及 setData过程中页面跳闪
  • 组件化支持能力太弱
  • 不能使用 less、scss 等预编译器
  • request 并发次数限制

有好的解决方案吗?

开发阶段

启动监视
$ npm run watch

通过微信Web开放者工具打开项目根目录下dist文件夹,预览~
可以通过任意开发工具完成src下的编码,gulp会监视项目根目录下src文件夹,当文件变化自动编译

方便的 Vuex 数据管理方案:方便构建复杂应用

为什么使用第三方框架?

  • 只要熟悉vue或react即可快速上手,学习成本低
  • 一套代码可在多端编译运行(微信,支付宝,h5,RN) 支付宝小程序暂不完善
  • 组件化开发,完美解决组件隔离,组件嵌套,组件通信等问题
  • 支持使用第三方 npm 资源
  • 使小程序可支持 Promise,解决回调烦恼
  • 可使用 Generator Function / Class / Async Function
    等特性,提升开发效率
  • 对小程序本身的优化,如生命周期的补充,性能的优化等等
  • 支持样式编译器:
    Scss/Less,模板编译器,代码编译器:Babel/Typescript。

答案是:WePY!

创建新页面

执行如下命令

启动生成器
$ npm run generate
完成每一个问题
自动生成…

快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload

小程序框架对比:WePY / mpvue / Taro

在这里我通过对目前已开源的三种常用小程序框架做一个综合对比,
还有一个叫nanchi的基于react的小程序转译框架,由于没来的及研究暂不做比较。

腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed计算属性、wathcer监听器、props传值、slot槽分发,Mixin混入等。WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本,
最新版本为1.7.2;

美团团队开源的一款使用 Vue.js
开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js
开发体验,同时为 H5
和小程序提供了代码复用的能力。mpvue在发布后的几天间获得2.7k的star,上升速度飞起,截至目前为止已经有13.7k的star;

京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与
React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX
语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React
一致的开发体验,同时因为使用了react的原因所以除了能编译h5,
小程序外还可以编译为ReactNative;

图片 2图片 3

WePY是腾讯开源的一个小程序开发框架,注意,是腾讯开源的。WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本。

生产阶段

执行如下命令

启动编译
$ npm run build

生产阶段的代码会经过压缩处理,最终输出到dist下。
同样可以通过微信Web开放者工具测试

支持使用 npm 外部依赖

生命周期

同为vue规范的mpvue和wepy的生命周期和各种方法不尽相同。

wepy生命周期基本与原生小程序相同,再此基础上糅合了一些vue的特性;
对于WePY中的methods属性,因为与Vue中的使用习惯不一致,非常容易造成误解,这里需要特别强调一下:WePY中的methods属性只能声明页面wxml标签的bind、catch事件,不能声明自定义方法,这与Vue中的用法是不一致的。

图片 4图片 5图片 6

在WePY的GitHub官方网站是这么描述的:

2. labrador 微信小程序组件化开发框架

使用 Vue.js 命令行工具 vue-cli 快速初始化项目

列表渲染

在列表渲染上三者也分别有不同的应用方法

wepy当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签),必须使用wepy定义的辅助标签。

图片 7

mpvue使用v-for与vue一致,只是需要注意一点,嵌套列表渲染,必须指定不同的索引!

图片 8

taro的列表循环用法基本与react相同,有一点需要注意,在 React 中,JSX
是会编译成普通的 JS 的执行,每一个 JSX 元素,其实会通过 createElement
函数创建成一个 JavaScript 对象(React
Element),因此实际上你可以这样写代码 React 也是完全能渲染的:

图片 9

但是 Taro 中,JSX 会编译成微信小程序模板字符串,因此你不能把 map
函数生成的模板当做一个数组来处理。当你需要这么做时,应该先处理需要循环的数组,再用处理好的数组来调用
map 函数。例如上例应该写成:

图片 10

“ WePY
是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async
Functions的引入都是为了能让开发小程序项目变得更加简单,高效。”

特点


  • 使用Labrador框架可以使微信开发者工具支持加载海量NPM包
  • 支持ES6/7标准代码,使用async/await能够有效避免回调地狱
  • 组件重用,对微信小程序框架进行了二次封装,实现了组件重用和嵌套
  • 可集成Redux,使用Redux数据流控制,让项目逻辑清晰可维护
  • 自动持久化数据,支持redux-persist自动将运行数据保存
  • 自动化测试,非常容易编写单元测试脚本,不经任何额外配置即可自动化测试
  • Flow.js强类型检查,编写更加安全稳定的代码
  • 使用Editor Config及ESLint标准化代码风格,方便团队协作
  • 强力压缩代码,尽可能减小程序体积,让你在1M的限制内做更多的事

H5 代码转换编译成小程序目标代码的能力

事件处理

mpvue目前全支持小程序的事件处理器,引入了 Vue.js 的虚拟 DOM
,在前文模版中绑定的事件会被挂在到 vnode 上,同时 compiler 在 wxml
上绑定了小程序的事件,并做了相应的映射,所以在真实点击的时候通过 runtime
中 handleProxy 事件类型分发到 vnode 的事件上,同 Vue 在 WEB
的机制一样,可以做到无损支持。同时还顺便支持了自定义事件和 $emit 机制。

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

图片 11

踩坑注意:

  • 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom
    上将bind改为@ @regionchange,同时这个事件也非常特殊,它的 event type
    有 begin 和 end 两个,导致我们无法在handleProxy
    中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既
    <map @regionchange=”functionName” @end=”functionName”
    @begin=”functionName”>
  • 小程序能力所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch
    不会被触发,要避免踩坑
  • 事件修饰符 .stop
    的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的
    catchEventName 失效! .prevent
    可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面
    .capture 支持 1.0.9 .self 没有可以判断的标识
    .once也不能做,因为小程序没有 removeEventListener, 虽然可以直接在
    handleProxy 中处理,但非常的不优雅,违背了原意,暂不考虑
  • 其他 键值修饰符 等在小程序中压根没键盘,所以……

wepy事件绑定区别于vue,根据原生小程序事件提供了语法优化

图片 12

Taro 元素的事件处理和 DOM 元素的很相似。但是有一点语法上的不同:

Taro 事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX
的语法你需要传入一个函数作为事件处理函数,而不是一个字符串 (DOM
元素的写法)。

例如,传统的微信****小程序模板:

图片 13

Taro 中稍稍有点不同:

图片 14

在 Taro 中另一个不同是你不能使用 catchEvent
的方式阻止事件冒泡。你必须明确的使用
stopPropagation。例如,阻止事件冒泡你可以这样写:

图片 15

同时,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性。支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等等等等。

安装脚手架


首先您的系统中安装Node.js和npm v3
下载Node.js,然后运行下面的命令将全局安装Labrador命令行工具。

npm install -g labrador-cli

Github:-Dianping/mpvue官网:2、Tina.js

request请求

wepy对wx.request做了接受参数的修改,值得一提的是它提供了针对全局的intercapter拦截器。

图片 16

拦截器

图片 17

taro对request进行了二次封装,可以使用Taro.request发起网络请求,支持
Promise 化使用。

图片 18图片 19图片 20

mpvue没有对request做特殊优化,与原生相同,可以自己根据需要进行封装

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图