寫在前面：分享技術，共同進步，有不足請見諒，相關意見可評論告知 ~

有道無術，術尚可求；
有術無道，終止於術!

多端執行，架式簡化；
程式設計路漫，學無止盡！

• 資料快取
• 位置
  • uni.getLocation
  • uni.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> 元件。

平臺差異說明

videoContext 物件的方法列表

danmu-list 物件屬性

• 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 觸發，回撥函式會接收所有傳入事件觸發函式的額外引數。

		onLoad(e) {
			uni.$on("method2", () => {
				console.log("事件被呼叫了")
			})
		},