1 uni-app简介

1.1 简介

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

1.2 环境搭建

（1）安装编辑器Hbuilder，地址：https://www.dcloud.io/hbuilderx.html ，推荐下载版本为App开发版
（2）微信开发者工具下载，地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。需在输入框输入微信开发者工具的安装路径。如果提示工具的服务端口已关闭。要使用命令行调用工具，请打开工具 -> 设置 -> 安全设置，将服务端口开启

1.3 开发规范

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

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

1.4 目录结构

pages：业务页面文件存放的目录
components：组件存放目录
static：静态资源存放目录，如图片等
unpackage：打包目录，在这里有各个平台的打包文件
App.vue：应用配置，用来配置App全局样式以及监听应用生命周期
main.js：Vue初始化入口文件
manifest.json：配置应用名称、appid、logo、版本等打包信息
pages.json：用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
uni.scss：方便总体控制应用风格。比如按钮颜色，边框风格。内置了常用样式变量

1.4 配置

1.1 pages.json

1：globalStyle
2：pages

pages节点的第一项为应用入口页（即首页）
应用中新增/减少页面，都需要对 pages 数组进行修改
文件名不需要写后缀，框架会自动寻找路径下的页面资源

3：tabBar

当设置 position 为 top 时，将不会显示 icon(top 值仅微信小程序支持)
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

2 组件简介

1.1 view

1.2 text

1.3 button

1.4 image

3 uniapp中的样式

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

px 即屏幕像素
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。定义在 App.vue 中的样式为全局样式

选择器

支持.class、#id、element选择器等

4 uniapp中的数据绑定

在页面中需要定义数据，和之前vue中一样，直接在data中定义数据即可

    export default {
        data() {
            return {
                msg: 'hello',
                flag: true,
                imgUrl: 'http://destiny001.gitee.io/image/monkey_02.jpg',
                arr: [
                    {
                        id:1,
                        name:'张三',
                        age: 20
                    },
                    {
                        id:2,
                        name:'李三',
                        age: 30
                    },
                    {
                        id:3,
                        name:'德三',
                        age: 40
                    }
                ]
            }
        }
    }

4.1插值表达式的使用

利用插值表达式渲染基本数据

    <view>{{msg}}</view>

基本运算

    <view>{{1+1}}</view>

插值表达式中使用三元运算

    <view>{{flag?'真的':'假的'}}</view>

4.2v-bind

    <image :src="imgUrl"></image>

4.2v-for

    <view v-for="(item,index) in arr" :key="item.id">
        序号：{{index}},姓名：{{item.name}},年龄：{{item.age}}
    </view>

5 uniapp中的事件

5.1事件绑定和传参

和vue中是一样的，使用v-on进行绑定

<button type="primary" @click="clickHandle">按钮</button>
      methods: {
        clickHandle(num,e) {
            console.log(num, e)
        }
    }

默认如果没有传递参数，事件函数第一个形参为事件对象。如果有参数还想获取事件对象可以在参数后加入$event

<button type="primary" @click="clickHandle(10,$event)">按钮</button>
        methods: {
            clickHandle(num,e) {
                console.log(num, e)
            }
        }