写在前面：分享技术，共同进步，有不足请见谅，相关意见可评论告知 ~
有道无术，术尚可求；
有术无道，终止于术!多端运行，架式简化；
编程路漫，学无止尽！
目录
数据缓存
官方文档参考
代码编写
<template>
<view>
<button type="default" @click="setData">异步set</button>
<button type="default" @click="setDataSync">同步set</button>
<button type="default" @click="getData">异步get</button>
<button type="default" @click="getDataSync">同步get</button>
<button type="default" @click="removeData">异步remove</button>
<button type="default" @click="removeDataSync">同步remove</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
setData() {
console.log("调用前")
uni.setStorage({
key: "token",
data: "56678484113483212",
success(e) {
console.log("set成功", e)
}
})
console.log("调用后")
},
setDataSync() {
console.log("调用前")
uni.setStorageSync("username", "张三")
console.log("调用后")
},
getData() {
console.log("调用前")
uni.getStorage({
key: "token",
success(e) {
console.log("get成功", e)
}
})
console.log("调用后")
},
getDataSync() {
const data = uni.getStorageSync("username", "")
console.log(data)
},
removeData() {
console.log("调用前")
uni.removeStorage({
key:"username",
success(e) {
console.log("删除成功！", e)
}
})
console.log("调用后")
},
removeDataSync() {
uni.removeStorageSync("token")
}
}
}
</script>
<style>
</style>
位置
uni.getLocation
uni.chooseLocation
视频组件控制
uni.createVideoContext
创建并返回 video 上下文 videoContext 对象。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <video> 组件。
平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | 基础库版本>=1.10.0 | √ | √ | √ |
videoContext 对象的方法列表
| 方法 | 参数 | 说明 | 平台差异说明 |
|---|---|---|---|
| play | 无 | 播放 | |
| pause | 无 | 暂停 | |
| seek | position | 跳转到指定位置，单位 s | |
| stop | 停止视频 | 微信小程序 | |
| sendDanmu | danmu | 发送弹幕，danmu 包含两个属性 text, color | |
| playbackRate | rate | 设置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5。微信基础库2.6.3 起支持 2.0 倍速 | |
| requestFullScreen | 无 | 进入全屏，可传入{direction}参数，详见 video 组件文档 | |
| exitFullScreen | 无 | 退出全屏 | |
| showStatusBar | 无 | 显示状态栏，仅在iOS全屏下有效 | 微信小程序、百度小程序、QQ小程序 |
| hideStatusBar | 无 | 隐藏状态栏，仅在iOS全屏下有效 | 微信小程序、百度小程序、QQ小程序 |
danmu-list 对象属性
| 字段 | 说明 |
|---|---|
| text | 弹幕文本 |
| color | 弹幕颜色 |
| time | 弹幕时间 |
- app-nvue 平台 2.2.5+ 支持 uni.createVideoContext(videoId, this)
- app-nvue 平台 2.2.5以下使用本API，需同时设置组件属性id和ref
<video id="video1" ref="video1"></video>，或者直接使用 ref，例如this.$refs.video1
<template>
<view>
<video class="video" @play="play" id="myVideo" :enable-danmu="true" :danmu-list="danmu" :src="url" controls></video>
<input type="text" v-model="content" placeholder="请输入弹幕内容" />
<button type="default" @click="sendDanmu">点我发送弹幕</button>
</view>
</template>
<script>
export default {
data() {
return {
content: '',
video: null,
danmu: [{
text: "尽志无悔",
color: "#063ea5",
time: 1
},
{
text: "深思慎取",
color: "#FFF",
time: 4
}
],
url: "https://ydsmarkdown.oss-cn-beijing.aliyuncs.com/video/a88711e041b5492ba2d1609723e6c008.mp4"
}
},
methods: {
play() {
this.video = uni.createVideoContext("myVideo")
},
sendDanmu() {
this.video.sendDanmu({
text: this.content,
color: "#FFF"
})
// 清除内容
this.content = ''
console.log(this.danmu)
}
}
}
</script>
<style>
.video {
750rpx;
}
</style>
交互
交互反馈
代码实操
<template>
<view>
<button type="default" @click="showToast">消息提示框</button>
<button type="default" @click="showLoad">显示加载框</button>
<button type="default" @click="showModal">显示模态框</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
showToast() {
uni.showToast({
title:"操作成功"
})
},
showLoad() {
uni.showLoading({
title:"加载中..."
})
setTimeout(()=>{
uni.hideLoading()
}, 2000)
},
showModal() {
uni.showModal({
title:"提示",
content:"冲冲冲！！",
success(e) {
if(e.confirm) {
uni.showToast({
title:"操作成功"
})
}
if(e.cancel) {
uni.showToast({
title:"用户已取消"
})
}
}
})
}
}
}
</script>
<style>
</style>
页面通讯
组件交互
注意：nvue中不能同上述操作与vue进行交互
解法：
uni.$on(eventName, callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
| 属性 | 类型 | 描述 |
|---|---|---|
| eventName | String | 事件名 |
| callback | Function | 事件的回调函数 |
onLoad(e) {
uni.$on("method2", () => {
console.log("事件被调用了")
})
},
