方法名稱

引數

說明

setSrc

value:string型別，音訊檔案Url

設定要播放的音訊檔案

setPoster

value: string型別，海報圖片Url

setName

value: string型別，作品名

設定作品名

setSinger

value: string型別，歌手名

設定歌手名

stop

無

停止播放

seek

t：number型別，進度（秒）

跳轉到第t秒播放

play

無

播放

pause

無

暫停播放

playbackRate

value：number型別，倍速

設定播放倍速，具體可選值請參考Uni-App文件裡uni.createVideoContext的playbackRate方法。

需要特別注意：playbackRate方法不能在play/setSrc之前或者之後立即呼叫，否則只有很少機率會成功。如果需要在play/setSrc後呼叫，最好延時呼叫playbackRate。

屬性名

型別

預設值

說明

isButton1Visible

boolean

false

button1Text

string

isButton2Visible

boolean

false

button2Text

string

isButton3Visible

boolean

false

button3Text

string

例子程式碼：

isButton1Visible="true" isButton2Visible="true" isButton3Visible="true" @Button1Click="btn1Click">

</yz-audio>

如果這三個文字無法滿足要求，也可以使用名字為extraCtrls的插槽來自定義這塊的UI，如下：

<yz-audio ref="player1">

<template v-slot:extraCtrls>

<uni-icons type="camera"></uni-icons>

<text>youzack.com</text>

</template>

</yz-audio>

事件說明：

注意事項：

1、 只有video元件支援倍速播放，所以這個元件是採用的video來播放音訊，因此支援的音訊檔案格式取決於video元件的支援情況；

2、 由於VideoContext的內部實現的未知原因，不能在play方法之前或者之後立即呼叫playbackRate來修改倍速，否則很可能不會生效。最好由使用者觸發的動作來呼叫playbackRate，如果必須在play方法前後呼叫，建議透過setTimeout設定一個延時來執行playbackRate。

比如如下是不行的：

var player1 = this.$refs.player1;

player1.setSrc("https://www.test.com/test.mp3");

player1.playbackRate(0.5);

可以如下修改：

var player1 = this.$refs.player1;

player1.setSrc("https://www.test.com/test.mp3");

setTimeout(function(){player1.playbackRate(0.5);},500);

3、 由於元件是使用video來播放音訊，因此具有video的所有缺點，比如不能實現後臺播放。我曾經想換用getBackgroundAudioManager()來替換video，但是發現BackgroundAudioManager響應速度很慢，無法實現精細、及時的進度控制。

4、 如果需要音訊的鎖屏播放，可以在需要後臺播放的時候（需要使用者操作觸發），暫停yz-audio的播放，然後再呼叫getBackgroundAudioManager實現後臺播放。

5、 如果仔細觀察播放器，你可能會發現右上角有一個小黑點，那個其實就是一個尺寸非常小的video元件。但是這個video元件不能完全隱藏，否則在ios下將會無法播放。

6、 由於播放器屬於個性化需求非常強的元件，眾口難調，因此這個元件很難完全滿足所有人的要求，因此這個元件我只是開放原始碼，各位可以根據自己的需要修改，我將不會進行後續維護、新需求增加等。

二、網路請求重試zackRetrier

在網路訊號不強等情況下，網路請求可能會失敗，因此我開發了一個能自動對失敗的請求進行重試的元件zackRetrier，如果N次重試都失敗了，還會彈出對話方塊問使用者“是否再次重試”。在請求處理期間會自動顯示loading提示。

外掛地址：https://ext.dcloud.net.cn/plugin?id=4247

用法：

首先引入元件import {zRetrier} from "@/js_sdk/yz-zackRetrier/zackRetrier/index.js";

呼叫傳送網路請求：zRetrier({url:"https://api.youzack.com/test"})，zRetrier函式返回的是Promise物件，所以既可以用await的方式獲取呼叫結果，也可以使用then()方式。返回值是一個長度為2的陣列，陣列的第一個元素是錯誤物件，如果呼叫成功了，則第一個元素是null，陣列的第二個元素是伺服器端返回的響應。

示例程式碼1

zRetrier({url:"https://api.youzack.com/test",manualRetryContent:"登入失敗，是否重試"})

.then(res=>{

let err = res[0];

let resp = res[1];

if(err)

{

uni.showModal({

content:"呼叫失敗"+err.errMsg

});

return;

}

uni.showModal({

content:"呼叫成功"+resp

});

});

示例程式碼2：

let err1,resp1;

[err1,resp1] = await zRetrier({url:"https://api.youzack.com/test",manualRetryContent:"登入失敗，是否重試"});

if(err1)

{

uni.showModal({

content:"呼叫失敗"+err1.errMsg

});

return;

}

uni.showModal({

content:"呼叫成功"+resp1

});

zRetrier函式只有一個引數，這個引數會完整的傳遞給內部封裝的uni.request方法，所以如果想設定method、headers等，用法和uni.request一樣。除此之外，zRetrier的引數還有其他屬性。

引數：

1) retryTimes：整數型別。代表一次失敗之後，最多自動重試retryTimes次，預設值是3。

2) retryWaitTime：整數型別，代表每次自動重試之前等待的毫秒數。預設值是200。

3) autoLoading：boolean型別，代表請求期間是否自動顯示loading，預設值是true。

4) manualRetryContent：string型別。如果設定了manualRetryContent的值，則在retryTimes次自動重試都失敗後，會顯示重試對話方塊，然後對話方塊中顯示manualRetryContent的內容。對話方塊中有【取消】、【重試】兩個按鈕，如果使用者點選了【重試】按鈕之後，會再自動最大重試retryTimes次。

感謝C#中發明了await、async關鍵字極大的簡化了非同步程式設計，並且讓JavaScript從C#中把這兩個關鍵字借鑑了過來，最終能讓我實現這個元件起來太簡單了。

注意事項：由於這個元件可能多次重試後端介面，所有後端的介面需要是冪等的，也就是呼叫一次和呼叫N次的效果應該是一樣的。

三、允許自定義選擇選單的“分詞大爆炸”yz-text

為了方便使用者直接查詢例句中某個單詞或者片語的中文翻譯，youzack小程式中需要允許使用者對於介面中的英文選中進行查詢。微信小程式中，可以對於<text>設定user-select=”true”來允許使用者自由選擇其中的文字，在Android手機中，選中文字會彈出一個只帶【複製】一個選單項的選單，在蘋果手機中，選中文字會彈出一個帶【查詢】等選單項的選單。但是這個選單中是無法自定義選單項的。

我想監聽剪下板中內容的變化，來實現“使用者複製單詞後自動查詢單詞”的功能。但是微信小程式中沒有提供監聽剪下板內容變化的API，所以只能用定時器監聽剪下板中的內容。釋出後，有使用者反映，在小米的某些手機上，手機系統會頻繁的提示“應用正在讀取剪下板中的內容”，非常影響使用。這個可以理解，為了保護使用者隱私，避免很多應用透過監聽剪下板來偷窺使用者的內容，因此新版的IOS和Android中都會做出類似的提示。

外掛地址：https://ext.dcloud.net.cn/plugin?id=4249

元件用法：

<yz-text text="I love you, I've get set !"></yz-text>

屬性說明：

事件說明：

示例程式碼：

<yz-text text="I love you, I've get set !"></yz-text>

tips="選中文字進行搜尋" button1Text="搜尋"></yz-text>

split:function(e)

{

e.words=e.value.split("");

},

search:function(s)

{

uni.showToast({

title:s

});

},

示例中的中文分詞用的是簡單的一元分詞，你可以用更智慧的其他分詞演算法。