一、UI 框架
UI 框架主要提供的是不同样式的组件,可以方便开发者使用一些现成的样式,完成自己产品、应用的开发。
名称 | git地址 | 说明 |
---|---|---|
WeUI | https://github.com/Tencent/weui-wxss | 由微信官方团队推出的 |
iView Weapp | https://github.com/TalkingData/iview-weapp | 一套高质量的微信小程序 UI 组件库 |
Vant Weapp | https://github.com/youzan/vant-weapp | 是有赞前端团队开源的移动端组件库,于 2017 年开源,组件大多与电商相关 |
二、基础框架
基础框架的主要能力是提供小程序的打包、编译、组件化等能力,让开发者可以更加简单,方便的使用自己熟悉的方案,完成应用的开发。
1、MINA
官网地址:https://developers.weixin.qq.com/miniprogram/dev/reference/
是微信团队为小程序提供的框架命名为MINA的应用框架
2、wepy
文档地址:https://wepyjs.github.io/wepy-docs/1.x/#/
是腾讯团队推出的小程序组件化开发框架
3、mpvue
官网地址:http://mpvue.com/
mpvue 2018年3月份在美团点评上开源, 至今好像已停止维护
mpvue(Vue.js in mini program) 是一个使用 Vue.js 开发小程序的前端框架。
框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
1.彻底的组件化开发能力:提高代码复用性
2.完整的 Vue.js 开发体验
3.方便的 Vuex 数据管理方案:方便构建复杂应用
4.快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
5.支持使用 npm 外部依赖
6.使用 Vue.js 命令行工具 vue-cli 快速初始化项目
7、H5 代码转换编译成小程序目标代码的能力
初始化项目
# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0
$ npm -v
5.6.0
# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的,注意vue脚手架版本必须是2.9
$ npm install --global vue-cli@2.9
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
注意事项:新增的页面需要重新 npm run dev 来进行编译
4、taro
官方文档:http://taro-docs.jd.com/taro/docs/README/index.html
Taro 是京东 - 凹凸实验室打造的一个开放式跨端跨框架,2018年6月7日正式开源
1.x、 2.x都是使用react来开发小程序, 3.x支持使用 React/Vue/Nerv 等框架来开发
支持平台:
H5
reactNative
微信小程序
京东小程序
百度小程序
支付宝小程序
字节跳动小程序
QQ 小程序
钉钉小程序
企业微信小程序
支付宝 IOT 小程序
飞书小程序
安装及使用
安装cli工具
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
值得一提的是,如果安装过程出现sass相关的安装错误,请在安装 mirror-config-china 后重试。
$ npm install -g mirror-config-china
查看 Taro 全部版本信息
npm info @tarojs/cli
项目初始化:
$ taro init my-taro-App
5、uni-app
官网地址:https://uniapp.dcloud.io/
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。
需要使用HBuilderX IDE工具