开始

官方文档

https://uniapp.dcloud.net.cn/tutorial/

创建

下载 Hbuilder 开发工具 https://www.dcloud.io/hbuilderx.html
创建项目
1. 文件-新建-项目
  1. 普通项目：H5
  2. uni-app：移动端
创建文件

目录结构

https://uniapp.dcloud.net.cn/tutorial/project.html

预览项目

运行

运行到浏览器
1. 配置浏览器 xx.exe 路径
运行到内置浏览器
运行到小程序模拟器
1. 配置小程序开发工具 xx.exe 路径
2. 配置小程序开发工具
  1. 设置
  2. 安全设置
  3. 开启服务端口

配置文件

官方资料：https://uniapp.dcloud.net.cn/collocation/pages.html

pages.json

官方文档：https://uniapp.dcloud.net.cn/collocation/pages.html

对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

项目首页，默认显示 page 数组第一个元素
page 数组元素中的样式优先级高于 globalStyle 的全局样式
tabBar 配置项可以设置 ttf 图形文字官方文档：https://uniapp.dcloud.net.cn/api/ui/tabbar.html#settabbaritem 或 pages.json 配置文件图片

打包

H5

manifest.json
1. h5配置
菜单栏
1. 发行
  1. 网站-PC Web或手机H5(仅适用于uni-app)
打包文件的位置
1. 目录：unpackage
2. 终端会提示打包位置

微信小程序

微信小程序开发者平台
1. 开发
  1. 开发管理
    1. 开发设置
      1. 开发者ID
        
        AppID(小程序ID)
      2. 服务器域名
        
        配置request合法域名（小程序中请求数据的域名地址，不配置的话无法请求）
        
        https://www.baidu.com;https://www.google.com
HbuilderX
1. manifest.json
  1. 微信小程序配置
  2. 配置微信小程序AppID
2. 菜单栏
  1. 发行
    1. 小程序-微信
微信开发者工具
1. 上传
微信小程序开发者平台
1. 管理
  1. 版本管理
    1. 开发版本
      1. 体验版
      2. 提交审核

APP

manifest.json
1. 基础配置
2. APP图标配置
发行
1. 原生App-云打包
打包文件的位置
1. 目录：unpackage
2. 终端会提示打包位置

组件

官方资料：https://uniapp.dcloud.net.cn/component/

作用

直接使用 HTML 标签，如果是 H5 项目，运行在浏览器则不会有任何影响。如果是小程序或APP，不同小程序平台对不同标签的样式渲染有不同定义，因此样式会不一样，比如 h1 在微信小程序并没有加粗。因此需要使用 uni-app 中定义的组件。在打包时 uni-app 会将内置组件根据不同平台进行转换。

view

官方资料：https://uniapp.dcloud.net.cn/component/view.html

强化的 div 标签，适用于所有平台的 div 标签

text

官方资料：https://uniapp.dcloud.net.cn/component/text.html

强化的 span 标签，适用于所有平台的 span 标签

属性：

是否可选
是否显示连续空格
是否解码 html 转义字符

scroll-view

官方资料：https://uniapp.dcloud.net.cn/component/scroll-view.html

可以滚动的强化 div 标签

swiper

官方资料：https://uniapp.dcloud.net.cn/component/swiper.html

内置的轮播组件

icon

官方资料：https://uniapp.dcloud.net.cn/component/icon.html

设置图标，可引用外部图标库

image

官方资料：https://uniapp.dcloud.net.cn/component/image.html

添加图片

video

官方资料：https://uniapp.dcloud.net.cn/component/video.html

添加视频

（H5移动端默认不可以进行自动播放，只有在静音情况下可以实现自动播放）

audio

官方资料：https://uniapp.dcloud.net.cn/component/audio.html

添加音频

camera

官方资料：https://uniapp.dcloud.net.cn/component/camera.html

相机功能

表单组件

官方资料：https://uniapp.dcloud.net.cn/component/button.html#

都是使用 uView 组件，uni-app 默认组件用的少 https://www.uviewui.com/

提交表单按钮：<form> 标签 中定义 <button> 标签 ，<button> 标签 的 form-type 属性 值为 submit
提交表单处理：<form> 标签 定义 submit 事件 ，点击表单按钮将触发此事件
- 实参：对象 包含表单数据和事件相关数据
  1. 表单数据-位置：obj.detail.value
  2. 表单数据-格式：每个表单标签 name 属性值作为获取数据( obj.detail.value )的属性，其值为用户表单输入的内容

navigator

官方资料：https://uniapp.dcloud.net.cn/component/navigator.html#

用于页面跳转的标签相当于 <a> 标签，可以嵌套图片或文本
设置 open-type 属性值 navigate 和 redirect 只能跳转没有在 tabBar 中定义的页面
- open-type 属性用于定义打开页面的方式。其不同值的效果对应 api：https://uniapp.dcloud.net.cn/api/router.html#
传参
1. params
  1. 通过 params 方式进行传参 ?name=xxx&age=yyy
  2. 通过 this.$router.query 获取 parmas 方式传递的参数【小程序中不能通过 this.$router 获取参数，必须使用需要添加相应插件】
  3. 小程序通过 onLoad 生命周期获取 params 形式参数

tabBar导航菜单

官方资料：https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

app或小程序底部的导航栏

打开 pages.json 文件
对象中添加 tabBar 属性

自定义组件

定义和引入

uniapp 对组件的引入进行了封装，简化了vue中组件引入和注册步骤

根目录下创建 components 目录，用于存放自定义组件（注册规范：https://uniapp.dcloud.net.cn/tutorial/vue-components.html#%E6%B3%A8%E5%86%8C）
创建组件与创建页面方式相同，创建统计目录-创建vue文件
在使用页面直接使用 components 目录 中的组件标签即可

传参

父->子

props

父组件调用子组件标签 <zizujian></zizujian>

子组件标签添加自定义属性 <zizujian sx="555"></zizujian>

vue v-bind 单向数据绑定可以传递复杂数据类型

<zizujian :sx="sj"></zizujian>
export default{
   data(){
      return {
         sj:{name:"小明"}
      }
   }
}

子组件实例中通过 props 接收数据，props 可以控制接收的数据类型和设置默认值等（官方文档：https://v2.cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%B1%BB%E5%9E%8B）
1
2
3
export default{ props:["sx"] // 简单接收任意类型 }
子组件中可以直接使用 props 接收的数据 sx

子->父

自定义事件

父组件调用子组件标签 <zizujian></zizujian>

子组件标签添加自定义事件，并绑定父组件实例中定义的事件处理函数

<zizujian @shijian="fn"></zizujian>
export default{
   methods:{
      fn(e,d1,d2){
         console.log(e,d1,d2) // 接收子组件传递的数据
      }
   }
}

子组件实例中在需要执行父组件定义的事件处理函数时，执行 this.$emit("shijian",{...},{...}) 用于触发自定义事件
1. 形参1：自定义事件名
2. 形参2…形参x：传递给父组件定义的事件处理函数的数据

自定义事件修饰符

native：自定义组件无法使用原生事件，会被认为是自定义事件。添加事件修饰符 <zizujian @click.native="fn"></zizujian> 就可以触发原生事件

sync：给通过props传递数据的自定义属性添加的修饰符，简化父子组件相互传递数据

<!--父组件-->

<zizujian :sx.sync="sj"></zizujian>

export default{
   data(){
      return {
         sj:{...}
      }
   }
}

等同于

<!--父组件-->

<zizujian :sx="sj" @update:sx="sx"></zizujian>

export default{
   data(){
      return {
         sj:{...}
      }
   },
   methods:{
      sx(e){   // 事件处理函数，与自定义属性同名
         this.sj = e
      }
   }
}

子组件实例通过 props 接收数据，并通过 this.$emit("update:sx",...) 改变父组件中数据，自定义事件 update: 为固定写法（官方资料：https://uniapp.dcloud.net.cn/tutorial/vue-components.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6 ）

<!--子组件-->

<button @click="ff">子组件中按钮</button>

export default{
   props:["sx"],
   methods:{
      ff(){
         this.$emit("update:sx",666)   // 自定义事件 : 前面是固定写法，: 后面是自定义属性名
      }
   }
}