1.腾讯WePY

WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions 的引入都是为了能让开发小程序项目变得更加简单,高效。 同时 WePY 也是一款成长中的框架,大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。如果 WePY 有不足地方,或者你有更好的想法,欢迎提交 ISSUE 或者 PR。 特性:

  • 类 Vue 开发风格
  • 支持自定义组件开发
  • 支持引入 NPM 包
  • 支持 Promise
  • 支持 ES2015+ 特性,如 Async Functions
  • 支持多种编译器,Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug
  • 支持多种插件处理,文件压缩,图片压缩,内容替换等
  • 支持 Sourcemap,ESLint 等
  • 小程序细节优化,如请求列队,事件优化等

项目源码

开源地址:https:///Tencent/wepy WePY资源汇总:https:///aben1188/awesome-wepy

2.美团mpvue

mpvue 是一个使用 Vue.js 开发小程序的前端框架,目前支持 微信小程序、百度智能小程序,头条小程序 和 支付宝小程序。框架基于 Vue.js,修改了的运行时框架 runtime 和代码编译器 compiler 实现,使其可运行在小程序环境中,从而为小程序开发引入了 Vue.js 开发体验。

名称由来

  • mp:mini program 的缩写
  • mpvue:Vue.js in mini program

主要特性

  • 使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
  • 彻底的组件化开发能力:提高代码复用性
  • 完整的 Vue.js 开发体验
  • 方便的 Vuex 数据管理方案:方便构建复杂应用
  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  • H5 代码转换编译成小程序目标代码的能力
  • 其它特性正在等着你去探索。

配套设施

mpvue 作为小程序版本的 Vue.js,在框架 SDK 之外,完整的技术体系还包括如下设施。

  • mpvue-loader 提供 webpack 版本的加载器
  • mpvue-webpack-target webpack 构建目标
  • postcss-mpvue-wxss 样式代码转换预处理工具
  • px2rpx-loader 样式转化插件
  • mpvue-quickstart mpvue-quickstart
  • mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具

项目地址

github地址:https:///Meituan-Dianping/mpvue

3.滴滴Chameleon

Chameleon/kəˈmiːlɪən/,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案。支持平台:web、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用、持续更新中 一端所见即多端所见——多端高度一致,无需关注各端文档。 设计理念

软件架构设计里面最基础的概念“拆分”和“合并”,拆分的意义是“分而治之”,将复杂问题拆分成单一问题解决,比如后端业务系统的”微服务化“设计;“合并”的意义是将同样的业务需求抽象收敛到一块,达成高效率高质量的目的,例如后端业务系统中的“中台服务”设计。 而 Chameleon 属于后者,通过定义统一的语言框架+统一多态协议,从多端(对应多个独立服务)业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。

多端高度一致

深入到编程语言维度保障一致性,包括框架、生命周期、内置组件、事件通信、路由、界面布局、界面单位、组件作用域、组件通信等高度统一

丰富的组件

在用 CML 写页面时,chameleon 提供了丰富的组件供开发者使用,内置的有button switch radio checkbox等组件,扩展的有c-picker c-dialog c-loading等等,覆盖了开发工作中常用的组件。

丰富的 API

为了方便开发者的高效开发,chameleon 提供了丰富的 API 库,发布为 npm 包chameleon-api,里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。

自由定制 API 和组件

基于强大的多态协议,可自由扩展任意 API 和组件,不强依赖框架的更新。各端原始项目中已积累大量组件,也能直接引入到跨端项目中使用。 基于强大的多态协议,充分隔离各端差异化实现,轻松维护一套代码实现跨多端

智能规范校验

代码规范校验,当出现不符合规范要求的代码时,编辑器会展示智能提示,不用挨个调试各端代码,同时命令行启动窗口也会提示代码的错误位置。

渐进式跨端

既想一套代码运行多端,又不用大刀阔斧的重构项目?不仅可以用 cml 开发页面,也可以将多端重用组件用 cml 开发,直接在原有项目里面调用。

先进前端开发体验

Chameleon 不仅仅是跨端解决方案。基于优秀的前端打包工具 Webpack,吸收了业内多年来积累的最有用的工程化设计,提供了前端基础开发脚手架命令工具,帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。 项目地址:

github地址:https:///didi/chameleon

4.京东Taro

Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼。Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

React/Nerv 支持

在 Taro 3 中可以使用完整的 React/Nerv 开发体验,具体请参考基础教程——React 代码示例

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World!'
  }
  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

Vue 支持

在 Taro 3 中可以使用完整的 Vue 开发体验,具体请参考基础教程——Vue 代码示例

<template>
  <view class="index">
    <text>{{msg}}</text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  },
  created () {},
  onShow () {},
  onHide () {}
}
</script>

多端转换支持

Taro 方案的初心就是为了打造一个多端开发的解决方案。 目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端。

项目地址

github地址:https:///NervJS/taro