小程序框架

一、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工具

原文地址:https://www.cnblogs.com/sgs123/p/15402299.html