写在前面：分享技术，共同进步，有不足请见谅，相关意见可评论告知 ~

有道无术，术尚可求； 有术无道，终止于术!

多端运行，架式简化； 编程路漫，学无止尽！

文章目录

数据缓存位置uni.getLocationuni.chooseLocation 视频组件控制uni.createVideoContext 交互交互反馈页面通讯uni.$on(eventName, callback)

数据缓存

官方文档参考 代码编写

<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> 组件。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序字节跳动小程序QQ小程序√√√基础库版本>=1.10.0√√√

videoContext 对象的方法列表

方法参数说明平台差异说明play无播放pause无暂停seekposition跳转到指定位置，单位 sstop停止视频微信小程序sendDanmudanmu发送弹幕，danmu 包含两个属性 text, colorplaybackRaterate设置倍速播放，支持的倍率有 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 { width: 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 触发，回调函数会接收所有传入事件触发函数的额外参数。

属性类型描述eventNameString事件名callbackFunction事件的回调函数 onLoad(e) { uni.$on("method2", () => { console.log("事件被调用了") }) },