uniapp

59 阅读 0 评论 39 点赞

我是靠谱客的博主不安故事，最近开发中收集的这篇文章主要介绍uniapp，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

基础知识

目录结构

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

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcbuniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

页面样式和布局

尺寸单位

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

px 即屏幕像素
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue）端和 H5（vue2）端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置。

样式导入

外联样式导入

//使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用`;`表示语句结束。
<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

内联样式

//1.style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view :style="{color:color}" />

//2.class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
下面根据class进行css样式设置

css选择器

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class=“intro” 的组件
#id	#firstname	选择拥有 id=“firstname” 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容，仅 vue 页面生效
::before	view::before	在 view 组件前边插入内容，仅 vue 页面生效

<style>
	.intro {
		display: flex;
	}

	#firstname {
		height: 200rpx;
	}
	
	view {
	   height: 200rpx;
	}
</style>

pages.json

{
	"pages": [
 		//pages数组中第一项表示应用启动页
		{
            //页面位置
			"path": "pages/index/index",
			"style": {
				//页面顶部标题 优先级高于navigationBarTitleText
				"navigationBarTitleText": "uni-app"
			}
		},{
            "path" : "pages/home/home",
            "style" : {
                "navigationBarTitleText": ""   
            }
            
        }
	],
    //用于设置应用的状态栏、导航条、标题、窗口背景色
	"globalStyle": {
        //导航栏标题颜色及状态栏前景颜色，仅支持 black/white
		"navigationBarTextStyle": "black",
        //导航栏标题文字内容
		"navigationBarTitleText": "uni-app",
        //导航栏背景颜色（同状态栏背景色）
		"navigationBarBackgroundColor": "#F8F8F8",
        //下拉显示出来的窗口的背景色
		"backgroundColor": "#F8F8F8"
	},
    "tabBar": {
        //tab 上的文字默认颜色
        "color": "#7A7E83",
        //tab 上的文字选中时的颜色
        "selectedColor": "#3cc51f",
        //tabbar 上边框的颜色，可选值 black/white
        "borderStyle": "black",
        //tab 的背景色
        "backgroundColor": "#ffffff",
        "list": [
            {
            //页面路径，必须在 pages 中先定义 看上面页面路径
            "pagePath": "pages/index/index",
            //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
            "iconPath": "static/image/icon_component.png",
             //选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
            "selectedIconPath": "static/image/icon_component_HL.png",
            //tab 上按钮文字
            "text": "组件"
            },{
            "pagePath": "pages/home/home",
            "iconPath": "static/image/icon_API.png",
            "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }]
	},
    "condition": { //模式配置，仅开发期间生效 用于套娃的页面测试使用
        //当前激活的模式（list 的索引项）
        "current": 0, 
        "list": [{
           		 //模式名称
                "name": "swiper", 
            	//启动页面，必选  
                "path": "pages/index/index", 
            	//启动参数，在页面的onLoad函数里面得到。
                "query": "interval=4000&autoplay=false" 
            },
            {   //可设置多个
                "name": "test",
                "path": "pages/component/switch/switch"
            }
        ]
	}
}

uni-app的生命周期

应用生命周期

uni-app 支持如下应用生命周期函数：

函数名	说明
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次）
onShow	当 `uni-app` 启动，或从后台进入前台显示
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

注意

应用生命周期仅可在App.vue中监听，在其它页面监听无效。
onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942
onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）
只能在App.vue里监听应用的生命周期

页面生命周期

uni-app 支持如下页面生命周期函数：

函数名	说明
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

模板语法 - 插值

插值表达式 -> {}
v-text
v-html插入html代码

    <template>
        <view>
            <view>Message: {{ msg }}</view>
            <view v-text="msg"></view>
            <view v-html="rawHtml"></view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    msg: 'Hello Vue!'
                    rawHtml: '<div >我是内容</div></div>'
                }
            }
        }
    </script>

样式绑定 - v-bind

v-bind指令将html中元素与viewModel中数据绑定 html的属性都可以通过v-bind与数据模板进行绑定

    <template>
        <view>
        	//将class的"mycls"与data里的mycls:"test"绑定
            <view v-bind:class="mycls">hello uni-app</view>
            //style的"mystyle"与data里的mystyle绑定
            <view v-bind:style="mystyle">hello uni-app</view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    mycls:"test",
                    mystyle:"color: #DD524D;"
                }
            }
        }
    </script>
    <style>
    .test{
        background-color: lightcoral;
        width: 100%;
        height: 100%;
    }
    </style>

同时因为class属性是允许多值的比较特殊所以在class属性的绑定上还提供了额外的方式

	<template>
		<view id="base">
            <!-- 一定有的class属性 可以单写class属性赋值（cls3） 
            需要动态控制的class属性 可以通过bol值决定是否生效 并且可以配置多个（cls1 cls2） -->
			<view class="cls3" v-bind:class="{'cls1':cls1use,'cls2':cls2use}">
				123
			</view>
		</view>
	
    </template>
		
	<script>
        export default {
            data() {
                return {
                    cls1use:true,
                    cls2use:true
                }
            }
        }
    </script>
		
	<style>
       .cls1{
            width: 100px;
            height: 100px;
        }
        .cls2{
            background-color: #F08080;
        }
        .cls3{
            color: aliceblue;
        }
	</style>

注意：v-bind指令比较常用所有在使用v-bind指令时通常可以简写为 :属性

<view class="cls3" :class="{'cls1':cls1use,'cls2':cls2use}">

事件绑定 - v-on指令

在开发过程中页面中的效果通常会通过浏览器对事件的监听来触发自定义的函数对事件进行处理

在vue中在元素中通过v-on绑定事件，再在vue对象的methods中定义处理的函数

vue主要关注绑定的数据，所以在vue的methods中定义的函数主要用来改变viewmodel（data）中的数据，

获取时通常可以使用this 此时this表示myvue这个对象

	<template>
		<view >
			<input type="text" :value="test" />
            <input type="button" value="点击触发修改绑定数据" v-on:click="myMethod" />
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    test:"123"
                }
            },
			methods:{
					myMethod:function(){
					this.test='abc';
                    }
			}
        }
    </script>

绑定事件也很常用也有省略写法

<input type="button" value="点击触发修改绑定数据" @click="myMethod" />

条件渲染 - v-if

v-if指令绑定bol值控制页面元素是否可见

	<template>
		<view >
			<view v-if="showStatus">test</view>
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    showStatus:false
                }
            }
        }
    </script>
    
    ---------------------------------------------------------------------------
        
    <!--  通常配合使用还有 v-else-if v-else  可以在标签属性上直接使用表达式 或绑定data中的数据  -->
    <template>
		<view >
			<view v-if="showStatus==1">test1</view>
			<view v-else-if="showStatus==2">test2</view>
			<view v-else>test3</view>
		</view>
	
    </template>
		
	<script>
        export default {
            data() {
                return {
                    showStatus:false
                }
            }
        }
    </script>

列表渲染 - v-for

v-for 循环结构 vue中如果需要迭代在页面中生成的元素可以使用v-for进行遍历遍历的数据需要在data中定义好

	<template>
		<view >
          	<ul>
            <!-- lis为数组 li是数组中遍历到的数据 
            	 在遍历过程中 可以通过li读取数组中的json元素的值 -->
				<li v-for="li in lis">{{li.content}}</li>
			</ul>
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    lis:[{content:'主页'},{content:'相关新闻'},{content:'关于我们'}]
                }
            }
        }
    </script>

v-for还经常用在table和select上来动态加载table数据或者select的下拉列表数据

	<template>
		<view >
          	<table border="1">
				<caption>测试table</caption>
				<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
				<tr v-for="tr in trs">
					<td>{{tr.name}}</td>
                    <td>{{tr.age}}</td>
                    <td>{{tr.gender}}</td>
				</tr>
			</table>
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    trs:[{name:"jack",age:16,gender:"男性"},
						{name:"rose",age:17,gender:"女性"},
                        {name:"小明",age:20,gender:"女性"}
                        ]
                }
            }
        }
    </script>

	<template>
		<view >
          	<select v-model="area" @change="getVal">
				<option disabled value="">------请选择------</option>
            <!--遍历过程中 需要显示在页面中的数据 通常用插值 { { option.text } }
            如果是给属性赋值 需要使用绑定数据的语法 给属性做绑定 
            并通过遍历到的数据给其赋值  : value = "option.val" -->
			    <option v-for="option in options" :value="option.val">	
                      {{option.text}}
                </option> 
			</select>
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    options:[{val:"1001",text:"北京"},
						{val:"2001",text:"上海"},
						{val:"3001",text:"深圳"}]
                }
            }        }
    </script>

v-model的使用

表单元素是页面中非常常用的一类元素通常用来与用户交互接收用户的输入点击等动作

在获取用户输入时 vue提供了v-model 并且可以通过v-model进行双向绑定

双向绑定（可以通过输入改变viewmodel中的数据也可以改变viewmodel中的数据直接显示在绑定的元素上）

	<template>
		<view >
            <!-- 文本框1为双向绑定 用户的输入可以改变viewmodel中的test的值
                此时与test值绑定的其他位置的数据可以直接改变
                点击按钮时 通过事件触发test值的改变 被双向绑定的第一个文本框 也会接受到test值的	   改变而改变 此为双向绑定-->
            <input type="text" v-model="test"/>    //获取数据                  
            <input type="text" :value="test"/>     //把获取的数据设置给它
                {{test}}
            <input type="button" value="点击触发修改绑定数据" @click="myMethod" />
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    test:"123"
                }
            },
			methods:{
					myMethod(){
						this.test='abc';
					}
                }
        }
    </script>

双向绑定在表单元素中应用较多除了文本框外在其他元素上有不同的用法

单选框：v-model可以用来对单选框分组不需要再加name属性同时可以通过v-model 获取或改变单选按钮中选中的值

	<template>
		<view >
           <input type="radio" id="male" value="male" v-model="gender"/>
			<label for="male">男</label>
			<input type="radio" id="fmale" value="fmale" v-model="gender"/>
			<label for="fmale">女</label>
			{{gender}}
		</view >
    </template>
		
	<script>
        export default {
            data() {
                return {
                    gender:"fmale"
                }
            }
        }
    </script>

复选框：v-model可以用来对复选框分组不需要再加name属性同时可以通过v-model 获取或改变复选按钮中选中的值复选按钮的数据格式为数组

	<template>
		<view >
             <input id="java" type="checkbox" value="1" v-model="hobby" />
            <label for="java">java</label>
            <input id="c#" type="checkbox" value="2" v-model="hobby" />
            <label for="c#">c#</label>
            <input id="python" type="checkbox" value="3" v-model="hobby" />
            <label for="python">python</label>
            {{hobby}}
		</view >
    </template>
		
	<script>
        export default {
            data() {
                return {
                     hobby:[1,2]
                }
            }
        }
    </script>

下拉菜单：v-model需要定义在select框上用来获取或者设置选中的option的value

	<template>
          	<select v-model="area" @change="getVal">
				<option disabled value="">------请选择------</option>
				<option value="100">北京</option>
				<option value="110">上海</option>
				<option value="120">深圳</option>
			</select>
    </template>
		
	<script>
        export default {
            data() {
                return {
                     //设置area的值 可以让对应的option选中
                    area:""
                }
            },
			methods:{
                    getVal(){
                        console.log(this.area);
                    }
           }
        }
    </script>

注意：v-model在不同的元素上使用方法略有差别用法上实际上还是与viewmodel中的数据绑定

vue实例的生命周期

钩子函数

vue的数据绑定渲染是通过vue对象自动实现的，这个过程我们无法主动参与，vue为了让程序员可以在进行这些步骤时，加一些程序员自己的处理，加入了钩子函数钩子函数实际上就是在vue对象创建过程中，提供了几个执行的时机，在这些时机发生时可以同时执行程序员自己的代码类似javaEE中的监听器

vue中提供了一些钩子函数

beforeCreate

created —> vue对象创建 create

beforeMount

mounted —> vue挂载 mount

beforeUpdate

updated —> vue属性改变 update

beforeDestroy

destroyed ---->vue销毁 destory

	<script>
        export default {
            data() {
                return {
               
                }
            },
			methods:{
                    getVal(){
                        console.log("");
                    }
           },
			created() {
				//创建出vue对象后执行
			},
			mounted(){
				//vue对象挂载到#base后执行
			}
        }
    </script>

计算属性/方法/监听

计算属性是在计算属性里的改变页面的值只会局部重新加载改变的值

方法是在方法里改变页面的值会让该页面需要加载的所有方法重新加载

监听与计算属性类似相较于计算属性冗余如果有100个属性变量改变就要产生100个方法监听

原始案例:	
	<template>
		<view >
    		{{firstText+" "+lastText}}
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    firstText:'hello',
                   	lastText:'word'
                }
            },
			methods:{
           }
        }
    </script>
      
        
计算属性:
	<template>
		<view >
    		{{fullText}}
			<button type="primary" @click="click">change</button>
		</view>
    </template>
		
	<script>
        export default {
            data() {
                return {
                    firstText:'hello',
                   	lastText:'word'
                }
            },
			methods:{
                click(){
                    this.firstText='tt'
                }
           },
            computed:{
                fullText(){
                    console.log("计算属性");
                    return this.firstText+" "+this.lastText
                }
            }
        }
    </script>

父子组件传值

父组件页面（parent.vue）

<template>
	<view>
    	//子组件使用标签形式
    	//:backGround=backGround :backGround-定义往子组件传递的对象的名称 backGround赋予对象的值
		<child @out=out :backGround=backGround></child>
	</view>
</template>
<script>
    //父组件 使用子组件需要这里导入 
    //模板 import 名字 from "路径";  如果名字中有大写 比如chiLd 标签要变成<chi-ld/>
	import child from "../../components/child.vue";
	export default{
		components:{
            //components声明child 就可以使用子组件了
			child
		},
		data() {
			return {
                //定义父组件往子组件传递的对象
				backGround:"red"
			}
		},
		methods: {
            //子传父对应的事件方法
			out(e){
				console.log("接收到的值==>>"+e) //接收方法
			}
		}
	}
</script>
<style>
</style>

子组件页面（child.vue）

<template>
	<view class="content" :style="[{background:backGround}]">
		<button @tap="miss">点击传值</button> //子组件点击事件
	</view>
</template>
 
<script>
	export default {
        //props接收父组件传递的值 
		props:{
			backGround:{ //参数名
                //可以约束传值
				type:String, //参数名
				default:"#fff" //参数默认
			}
		},
		methods:{
			miss(){
                //子传父 子传父触发的事件名称-out 传递的值-"hahaha"
				this.$emit("out","hahaha") 
			}
		}
	}
</script>
 
<style>
	.content{
		width: 400upx;
		height: 400upx;
	}
</style>

视图容器

view —它类似于传统html中的div，用于包裹各种元素内容。

scroll-view—可滚动视图区域。用于区域滚动。

swiper—滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。

//view案列
<view class="text">
  Hello World
</view>

//scroll-view案列
<!-- 设置样式时外面的样式要大于里面的模块才有显示效果 -->
<scroll-view class="srcoll-view" scroll-x="true" scroll-y="true" scroll-left="120"> 
	<view id="left" class="scroll-view-left">
		111
	</view>
	<view id="right" class="scroll-view-right">
		222
	</view>
</scroll-view>

//swiper案列
<template>
	<view>
		<swiper autoplay="true" indicator-dots="true" >
			<swiper-item>
				1
			</swiper-item>
			<swiper-item>
				2
			</swiper-item>
			<swiper-item>
				3
			</swiper-item>
		</swiper>
	</view>
</template>

表单组件

button— 按钮

checkbox– 多选项目。

editor— 富文本编辑器，可以对图片、文字格式进行编辑和混排。

form— 表单

input— 输入框

label— 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件

picker— 从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器

picker-view— 嵌入页面的滚动选择器

radio-group– 单项选择器

slider— 滑动选择器

switch— 开关选择器

textarea– 多行输入框

导航与页面传参(组件跳转)

navigator— 页面跳转

值	说明	平台差异说明
navigate	保留当前页面，跳转到应用内的某个页面
redirect	关闭当前页面，跳转到应用内的某个页面
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面(tab页面只能用该方法跳转,无法进行页面传参)
reLaunch	关闭所有页面，打开到应用内的某个页面	字节跳动小程序与飞书小程序不支持
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 `getCurrentPages()` 获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

//navigate跳转方法
<navigator url="/pages/detail/detail">跳转到非tabbar界面</navigator>
//此方法可以跳转到非Tabbar界面
<navigator url="/pages/index/index" open-type="switchTab">跳转到Tabbar界面</navigator>
//如果需要跳转到tabbar界面，则需要增加open-type属性

//页面传递参数
1、在url后面加参数，例如：
<navigator url="/pages/detail/detail?id=80&age=19"></navigator>
接收的页面需要在界面加载的onload函数里来接收参数
onload(option){
   console.log(option)//option是一个对象，包含上一个页面传递过来的参数
}
2、props接收
export default {
    props:["id"]
}
//就可以直接正常使用接受的值了

媒体组件

audio— 音频

camera— 页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机

image— 图片

video— 视频播放组件

live-player— 实时音视频播放，也称直播拉流

live-pusher— 实时音视频录制，也称直播推流

//一.audio音频
<view>
	<audio :src="audioSrc" controls></audio>
</view>

data:function() {
	return {
		audioSrc:"https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3"
	}
}

//二.image图片
<view>
	<image src="/static/img/shuijiao.jpg" style="width:50%;" mode="widthFix"></image>
</view>
    
    
    
//三.video视频
<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/6.mp4" @error="videoErrorCallback" controls></video>

基础api讲解

console

向控制台打印日志信息。

debug---向控制台打印 debug 日志
log---向控制台打印 log 日志
info---向控制台打印 info 日志
warn---向控制台打印 warn 日志
error---向控制台打印 error 日志

//示例
console.log("打印到控制台内容");

定时器

setTimeout— 设定一个定时器。在定时到期以后执行注册的回调函数

clearTimeout— 取消由 setTimeout 设置的定时器。

setInterval— 设定一个定时器。按照指定的周期（以毫秒计）来执行注册的回调函数

clearInterval— 取消由 setInterval 设置的定时器。
```
//示例

methods:{
    myMethod(){
        console.log(this.text);
        
        var time=setTimeout(()=>{
            //因为用到了this  随意上面要加()=>  
          console.log(this.text);
        },2000)
    }
}
```
uni.base64ToArrayBuffer(base64)

将 Base64 字符串转成 ArrayBuffer 对象
```
const base64 = 'test'
const arrayBuffer = uni.base64ToArrayBuffer(base64)
```

uni.arrayBufferToBase64(arrayBuffer)

将 ArrayBuffer 对象转成 Base64 字符串

const arrayBuffer = new Uint8Array([55, 55, 55])
const base64 = uni.arrayBufferToBase64(arrayBuffer)

网络

网络请求

uni.request— 发起网络请求

methods:{
    myMethod(){
          uni.request({
            url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
            data: {
                text: 'uni.request'
            },
            header: {
                'custom-header': 'hello' //自定义请求头信息
            },
            success: (res) => {
                console.log(res.data);
                this.text = 'request success';
            }
        });
	}
}

路由与页面跳转(api跳转)

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

uni.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面

uni.reLaunch(OBJECT)

关闭所有页面，打开到应用内的某个页面

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

uni.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快

methods:{
    myMethod(){
          //在起始页面跳转到test.vue页面并传递参数
          uni.navigateTo({
          	url: 'test?id=1&name=uniapp'
          });
	}
}

数据缓存

数据存储
- uni.setStorage(OBJECT)
  
  将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口
- uni.setStorageSync(KEY,DATA)
  
  将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
数据获取
- uni.getStorage(OBJECT)
  
  从本地缓存中异步获取指定 key 对应的内容
- uni.getStorageSync(KEY)
  
  从本地缓存中同步获取指定 key 对应的内容
storage 的相关信息获取
- uni.getStorageInfo(OBJECT)
  
  异步获取当前 storage 的相关信息
- uni.getStorageInfoSync()
  
  同步获取当前 storage 的相关信息
数据移除
- uni.removeStorage(OBJECT)
  
  从本地缓存中异步移除指定 key
- uni.removeStorageSync(KEY)
  
  从本地缓存中同步移除指定 key
清除本地缓存
- uni.clearStorage()
  
  清理本地数据缓存
- uni.clearStorageSync()
  
  同步清理本地数据缓存

methods:{
    myMethod(){
          uni.setStorage({
              key: 'storage_key',
              data: 'hello',
              success: function () {
                  console.log('success');
              }
          });
	}
}

媒体

图片

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera

文件

uni.chooseFile(OBJECT)

从本地选择文件。

本API主要用于选择非媒体文件，如果选择的文件是媒体文件，另有3个专用API：

图片选择
视频选择
多媒体文件选择(含图片视频)

录音管理

uni.getRecorderManager()

获取全局唯一的录音管理器 recorderManager

背景音频播放管理

uni.getBackgroundAudioManager()

获取全局唯一的背景音频管理器 backgroundAudioManager。

背景音频，不是游戏的背景音乐，而是类似QQ音乐那样，App在后台时，仍然在播放音乐。如果你不需要在App切后台时继续播放，那么不应该使用本API，而应该使用普通音频APIuni.createInnerAudioContext。

音频组件控制

uni.createInnerAudioContext()

创建并返回内部 audio 上下文 innerAudioContext 对象

视频

uni.chooseVideo(OBJECT)

拍摄视频或从手机相册中选视频，返回视频的临时文件路径。

若选择和上传非图像、视频文件，另行参考：https://uniapp.dcloud.io/api/media/file

视频组件控制

uni.createVideoContext(videoId, this)

创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内组件

相机组件控制

uni.createCameraContext()

创建并返回 camera 组件的上下文 cameraContext 对象

直播组件控制

uni.createLivePlayerContext(livePlayerId, this)

创建 live-player 上下文 livePlayerContext 对象。注意是直播的播放而不是推流

音视频合成

uni.createMediaContainer()

创建音视频处理容器，最终可将容器中的轨道合成一个视频，返回 MediaContainer 对象

富文本

editorContext

editor 组件对应的 editorContext 实例，可通过 uni.createSelectorQuery 获取

设备

系统信息
内存
网络状态
系统主题
加速度计
罗盘
陀螺仪
拨打电话
扫码
剪贴板
屏幕
用户截屏事件
振动
手机联系人
蓝牙
低功耗蓝牙
iBeacon
WI-FI
电量
NFC
设备方向
生物认证

[界面](交互反馈 - uni-app官网 (dcloud.io))

交互反馈
设置导航条
设置TaBar
背景
动画
滚动
宽窗适配
字体
下拉刷新
节点信息
节点布局相交状态
媒体查询
自定义组件
菜单
语言

页面与窗口

页面

getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意： getCurrentPages()仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
$getAppWebview()

uni-app 在 getCurrentPages()获得的页面里内置了一个方法 $getAppWebview() 可以得到当前webview的对象实例，从而实现对 webview 更强大的控制。在 html5Plus 中，plus.webview具有强大的控制能力，可参考：WebviewObject。

但uni-app框架有自己的窗口管理机制，请不要自己创建和销毁webview，如有需求覆盖子窗体上去，请使用原生子窗体subNvue。

[页面通讯](页面通讯 - uni-app官网 (dcloud.io))

uni.$emit(eventName,OBJECT)

触发全局的自定义事件，附加参数都会传给监听器回调函数。
uni.$on(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，回调函数会接收事件触发函数的传入参数。
uni.$once(eventName,callback)

监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。
uni.$off([eventName, callback])

移除全局自定义事件监听器

示例
    <template>
        <view class="content">
            <view class="data">
                <text>{{val}}</text>
            </view>
            <button type="primary" @click="comunicationOff">结束监听</button>
        </view>
    </template>

    <script>
        export default {
            data() {
                return {
                    val: 0
                }
            },
            onLoad() {
                setInterval(()=>{
                	//将事件发送到了全局
                    uni.$emit('add', {
                        data: 2
                    })
                },1000)
                //从全局取出事件
                uni.$on('add', this.add)
            },
            methods: {
                comunicationOff() {
                    //取消全局中放入的事件
                    uni.$off('add', this.add)
                },
                add(e) {
                    this.val += e.data
                }
            }
        }
    </script>

[subNvue原生子窗口](subNVue原生子窗体 - uni-app官网 (dcloud.io))

subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体。

它的设计背景和用途详见：subNVue 原生子窗体开发指南

uni.getSubNVueById(subNvueId)

通过 ID 获取 subNVues 原生子窗体的实例。 subNVues 配置
uni.getCurrentSubNVue()

在一个subnvue窗体的nvue页面代码中，获取当前 subNVues 原生子窗体的实例。
subNVue.show (aniShow,duration,showedCB)

显示原生子窗体
subNVue.hide (aniShow,duration)

隐藏原生子窗体
subNVue.setStyle (style)

设置原生子窗体的样式

//1.pages.json 配置
{  
    "pages": [{  
        "path": "pages/index/index", //首页  
        "style": {  
            "app-plus": {  
                "subNVues":[{  
                    "id": "concat", // 唯一标识  
                    "path": "pages/index/subnvue/concat", // 页面路径  
                    /*"type": "popup",  这里不需要*/  
                    "style": {  
                        "position": "absolute",  
                        "dock": "right",  
                        "width": "100upx",  
                        "height": "150upx",  
                        "background": "transparent"  
                    }  
                }]  
            }  
        }  
    }]  
}


//2.页面使用

//在页面中打开和关闭 subNVue 子窗体
// 通过 id 获取 nvue 子窗体  
const subNVue = uni.getSubNVueById('map_widget')  
// 打开 nvue 子窗体  
subNVue.show('slide-in-left', 300, function(){  
    // 打开后进行一些操作...  
    //   
});  
// 关闭 nvue 子窗体  
subNVue.hide('fade-out', 300)
    
//动态修改 subNVue 子窗体位置，大小
subNVue.setStyle({  
    top: '100px',  
    left: '20px',  
    width: '100px',  
    height = '50px',  
})
    
//3.通讯实现方式
// 在 subNVue/vue 页面注册事件监听方法  
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    vm.title = data.title;  
    vm.content = data.content;  
})  

// 在 subNVue/vue 页面触发事件  
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是一个title',  
    content: '我是data content'  
});

[第三方服务](获取服务供应商 - uni-app官网 (dcloud.io))

获取服务供应商
登录
分享
支付
推送
语音
一键生成ios通用链接

[跨端兼容](条件编译解决各端差异 - uni-app官网 (dcloud.io))

最后

以上就是不安故事为你收集整理的uniapp的全部内容，希望文章能够帮你解决uniapp所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：uniapp
浏览次数：59 次浏览
发布日期：2024-09-13 20:10:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_14_f5_14__7__6_z.html