微信小程序（十二）uni-app框架开发及组件库

uni-app

uni-app官网

uni-app 简介

• uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uni-app 诞生的背景

• 多端泛滥
• 体验不好
• 生态不丰富
  

uni-app 优势

• 跨平台更多：一套代码多端使用，能优雅的在一个项目里调用不同平台的特色功能。
• 运行体验更好：组件、api 与微信小程序一致，兼容weex 原生渲染。
• 通用技术栈，学习成本低：vue 的语法，微信小程序的api，内嵌mpvue
• 开放生态，组件更丰富：支持npm 安装第三方包、支持微信小程序自定义组件及SDK，兼容mpvue - 组件及项目，APP端可以和原生混合编码，Dcloud 新发布了插件市场
• 开发成本低：即便只开发一个平台，也可以提高研发效率

开发

开发工具

• HBuilderX
• 微信开发者工具

需要HBuilder关联微信开发者工具

项目目录简介

┌─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放 于此
├─wxcomponents 存放小程序组件的目录
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss uni-app内置的常用样式变量

UI组件库

colorUI

• colorUI组件样式新颖，色彩绚丽，引用方便等。
• colorUI文档
• uni-app项目引入colorUI

uView

• uView官网
• 这玩意儿本人目前还没使用过，但是组件样式挺个性化的。