小程序框架

Posted by 白的官方网站 on September 25, 2018

微信小程序开发

小程序文档

注册账号、代码构成、小程序上线等请参考官方文档

IDE选择

官方开发工具

VScode + wept

Egret Wing

环境 简述 代码高亮 代码提示 调试 实时预览 软件/插件下载
官方工具 微信小程序官方工具 支持 极其弱 支持 支持 软件
Egret Wing 首款支持微信小程序开发的IDE 支持 支持 支持 支持 软件
VScode + wept 插件作者已不在维护 支持 支持 支持 支持 插件
Sublime Text 3 代码编辑器,需要安装插件 支持 支持 不支持 不支持 插件
WebStorm 重量级IDE 支持 支持 不支持 不支持 插件

IDE对比

小程序组件

Weui

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各式元素。

GitHub 地址:Weui

演示:https://weui.io

wx-charts

微信小程序图表工具,charts for WeChat small app

基于 canvas 绘制,体积小巧

GitHub 地址:wx-charts

饼图环图

wemark

微信小程序 Markdown 渲染库

用于在小程序中渲染 Markdown 文本。

在小程序诞生之前,Markdown 的渲染一般需要解析成HTML,然后渲染解析后的 HTML。然而小程序并没有提供 HTML 渲染的功能,因此在 wemark 诞生之前,几乎所有的 Markdown 渲染库全部无法在小程序下正常工作。

wemark可以实现在小程序下渲染Markdown内容,支持图片、表格在内的大部分Markdown特性。

示例图

WeZRender

微信小程序 Canvas 开发

使用 ZRender 实现

演示图

ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

GitHub 地址:ZRender 实现

使用 ECharts 实现

演示图

ECharts 是使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

GitHub地址:ECharts 实现

WeToast

WeToast 是仿照微信小程序提供的 showToast 功能,提供视觉一致的增强插件,弥补小程序showToast功能上的不足(如只能显示 success、loading 两种 icon ,且 icon 不可去除,持续时间最大10秒等)。

演示图

GitHub 地址:WeToast

wxapp-charts

微信小程序图表charts组件

演示图

WeiXinProject

微信小程序实现–列表的上拉刷新和上拉加载

GitHub 地址:WeiXinProject

citySelect

基于微信小程序的城市选择

演示图

小程序框架

Wepy

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

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

GitHub 地址:Wepy

体验:https://tencent.github.io/wepy/

Labrador

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

GitHub 地址:Labrador

wxapp-devFrame

小程序基本的开发框架抽取

GitHub 地址:wxapp-devFrame

Westore

Omi 框架 的启发,且专门为小程序开发的 JSON Diff 库,所以有了 westore 全局状态管理和跨页通讯框架让一切尽在掌握中,且受高性能 JSON Diff 库的利好,长列表滚动加载显示变得轻松可驾驭。总结下来有如下特性和优势:

  • 和 Omi 同样简洁的 Store API
  • 超小的代码尺寸(包括 json diff 共100多行)
  • 尊重且顺从小程序的设计(其他转译库相当于反其道行)
  • this.update 比原生 setData 的性能更优,更加智能

GitHub地址:westore

wxParse

wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析

GitHub 地址:wxParse

wechat-weapp-redux

微信小程序 Redux 绑定,用于在微信小程序为页面绑定 Redux Store。

代码是基于 react-redux 修改的

GitHub 地址:wechat-weapp-redux

wilddog-weapp

野狗微信小程序客户SDK

野狗是什么?

野狗科技(北京)有限公司(简称:野狗)是安全可靠的实时通信云。野狗为企业和开发者提供了可编程的实时数据、音视频通信能力,以及短信服务,可以安全地构建丰富场景化的实时通信业务。

GitHub 地址:wilddog-weapp

wafer-client-sdk

本项目是 Wafer 的组成部分,为小程序客户端开发提供 SDK 支持会话服务和信道服务。

GitHub 地址:wafer-client-sdk

WxNotificationCenter

微信小程序通知广播模式类,降低小程序之间的耦合度

GitHub 地址:WxNotificationCenter

欢迎关注我的微信公众号

微信公众号:柏战不殆