uni-app开发入门

uni-app主要使用vue的语法+小程序的标签和API

uni-app官方网站

开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

已实现的功能

• 支持npm
• 引入vant组件
• 支持scss语法
• 背景图片小于40kb的自动转base64格式
• 请求接口的封装
• 自定义vue组件
• 统一登录逻辑处理
• 日历选择组件
• 自定义底部导航

目录结构

一个uni-app工程，默认包含如下目录及文件：

┌─public H5项目的根html页面
├─src 项目目录
├─babel.config.js babel的配置文件
└─package.json 依赖包配置文件

src目录结构：

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

CSS相关

统一使用scss语法，*.vue文件中，这样使用，详见

<style lang="scss">
$color: red;
</style>

单位统一用rpx

背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：

• 支持 base64 格式图片。

• 支持网络路径图片。

• 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。

• 使用本地路径背景图片需注意：

  1. 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；

  2. 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。

  3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

     .test2 {
         background-image: url('~@/static/logo.png');
     }

注意

• 微信小程序不支持相对路径（真机不支持，开发工具支持）

vue组件开发

1. 能用小程序原生组件的，尽量用原生组件，只有原生组件满足不了的需求，才去用第三方的组件开发

2. 传统vue的库，只是for web的，不能跨多端。

   而微信小程序的库，虽然也可以用于app和h5，但不能跨到百度支付宝等其他小程序。
   比如element-ui、mint-ui只能用于h5；比如vant ui、iview ui则分h5版和小程序版，h5版只能用于h5，而小程序版（vant weapp）只能用于微信和App（HBuilderX 2.4.7起，小程序组件可运行于h5）。另外注意，这些ui库的小程序版的功能一般都不如h5版。

内置组件

首先要强调下内置组件的重要性。uni-app内置组件是最常用的，与微信内置组件相同。https://uniapp.dcloud.io/component/README。
请不要把简单的button都使用三方组件库来做，那样会降低性能。

最后，请开发者务必牢记基础组件的作用，基础组件的性能是高于扩展组件的。
这和web开发不一样，web开发基本上不用基础组件，都是找一个ui库，全部组件都包含。因为html的基础组件在手机上是没法看的。
但uni-app体系不是这样，内置组件就是为手机优化的，uni-ui库全部都是扩展组件，不含基础组件。

我们的建议是：开发时首先用基础组件，基础组件不满足的地方，再引用扩展组件补充。

关于uni-app的ui库、ui框架、ui组件

开发与调试

初始化安装项目

执行

npm install

开发时

执行命令行

npm run dev:mp-weixin

发布时

执行命令行

npm run build:mp-weixin