mpvue開發(fā)音頻類小程序踩坑和建議詳解
這是我第一次開發(fā)小程序,開發(fā)的產(chǎn)品是音頻類的,在大佬的建議下采用了 mpvue ,一周時(shí)間把功能都做出來,由于不太熟悉mpvue和微信小程序,足足用了一周時(shí)間來改bug才出來一個(gè)能用的版本,在這里整理分享下我開發(fā)時(shí)遇到的一些問題和給出一些建議。

在 Linux 上開發(fā)小程序
在公司電腦裝了雙系統(tǒng),日常用的是 Ubuntu 系統(tǒng),Linux或Mac的開發(fā)環(huán)境對前端相對來說會(huì)友好一些。微信小程序官方的開發(fā)者工具只有 Windows 和 Mac 版本,所以這就尷尬了。
不過還好,發(fā)現(xiàn)已經(jīng)有大神在GitHub上做了Linux的支持,推薦給大家: Linux微信web開發(fā)者工具 。 根據(jù)教程安裝使用即可,使用時(shí)就用 ./bin/wxdt 命令打開。不過用了幾天后面覺得不太方便,就索性切回Windows系統(tǒng)用官方最新的版本了。
封裝wx.request為Promise
wx.request 用于發(fā)起http請求,但平時(shí)習(xí)慣了Promise的寫法,所以還是封裝一下這個(gè)方法為Promise的形式。 我看很多小程序會(huì)使用fly 這個(gè)庫。
但個(gè)人覺得發(fā)起請求不需要那么強(qiáng)大的功能,小程序本身就應(yīng)該是一個(gè)輕量級(jí)的東西,引入一個(gè)庫可能會(huì)導(dǎo)致項(xiàng)目打包變大,可能讓小程序更卡,所以本著能自己寫就自己寫吧的心態(tài),索性自己封裝一下算了。
在 src/utils ,新建一個(gè) request.js :
const apiUrl = 'https://your server.com/api/'
const request = (apiName, reqData, isShowLoading = true) => {
// 某些請求可能不需要顯示loading
if (isShowLoading) {
wx.showLoading({
title: '正在努力加載中',
mask: true
})
}
return new Promise(function (resolve, reject) {
wx.request({
url: apiUrl + apiName,
method: 'POST',
data: reqData,
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success (res) {
if (res.data.code === 0) {
// 與后端約定code=0時(shí)才是正常的
resolve(res)
} else {
reject(res)
}
},
fail (err) {
reject(err)
},
complete (res) {
wx.hideLoading()
}
})
})
}
export default request
當(dāng)然這是個(gè)簡化版的,我實(shí)際項(xiàng)目中還會(huì)在初始化時(shí)加入一些 token 之類的參數(shù),大家能看明白是這樣封裝成Promise的就可以啦。
使用vant-weapp
小程序已經(jīng)支持了npm安裝,但不太會(huì)弄。還是按網(wǎng)上方法,將項(xiàng)目clone下來放進(jìn)static目錄下。
git clone https://github.com/youzan/vant-weapp.git
然后將 vant-weapp 的 dist 目錄拷貝到項(xiàng)目的static目錄下(盡可能精簡,刪掉一些奇奇怪怪的如 .github 的東西,所以直接使用dist目錄),改名為 vant (也可以不改名)。全局使用時(shí),可以在 app.json 引入:
"usingComponents": {
"van-button": "/static/vant/button/index",
"van-field": "/static/vant/field/index"
},
注意:需要打開微信開發(fā)者工具中的ES6轉(zhuǎn)ES5功能
一開始以為使用起來和web端的沒啥差別,但沒想到那么麻煩。比如:在vue中是可以使用 v-model 的,但在mpvue中的小程序中不能使用,只能
<van-field :value="password" type="password" @change="pwdChange" input-class="myClass" />
而且不能隨意靈活添加class修改組件的樣式,需要vant組件支持提供外部樣式才可修改,比如上面的 van-field 是通過 input-class 來添加樣式控制的,很不方便。而且某些內(nèi)部樣式由于沒有外部樣式表,根本改不了。
綜上: 在微信小程序使用第三方組件庫不太方便,樣式修改比較麻煩,如果產(chǎn)品是有UI設(shè)計(jì)時(shí), 盡量不使用 ,有時(shí)候自己實(shí)現(xiàn)樣式可能更快,而且項(xiàng)目體積更小。
使用vuex
mpvue官方的快速模板中是將vuex放在 counter 這個(gè)page目錄下,可能習(xí)慣了vue官方寫法的很多同學(xué)(包括我)不太喜歡,所以最好就改為vuex官方的寫法。
在src目錄下建一個(gè) store 的文件夾,分別建以下文件:

項(xiàng)目不太復(fù)雜時(shí)不建議使用modules,使用起來比較麻煩。
貼一下 index.js 的代碼,其他的 actions.js , getters.js 按官方的寫法就好啦。
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
vuex/dist/logger 是vuex在開發(fā)環(huán)境可以自動(dòng)打印日志的工具,debug比較方便,建議使用。 然后在 src/main.js 引入:
import Vue from 'vue'
import App from './App'
import store from '@/store'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$store = store
const app = new Vue({
store
})
app.$mount()
這樣就可以在項(xiàng)目中正常使用啦,完全支持 mapState , mapActions , mapGetters 的寫法,比如在 pages/index/index.vue 中使用:
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['myAudio'])
},
methods: {
...mapActions(['myActions'])
},
created () {
this.myActions() //調(diào)用vuex中的方法
}
}
</script>
踩坑指南
其實(shí)大多數(shù)坑可能是mpvue的,很多情況也是自己不熟悉小程序生命周期導(dǎo)致的一些奇奇怪怪的bug。
mpvue是支持小程序原生組件的
mpvue會(huì)將 div 編譯為小程序中的 view 。一開始我不了解,以為用了mpvue后就不能使用小程序原生支持的組件了,比如 swiper , scroll-view 等,小程序是支持的,可以放心使用哈哈。
npm run build后樣式丟失
本來在開發(fā)環(huán)境正常的,然后準(zhǔn)備發(fā)版 npm run build 后發(fā)現(xiàn)樣式丟失了。然后重新 npm start 排查問題,樣式還是丟失的。內(nèi)心此時(shí)是mmp的:npm run build丟失就算了,我沒改什么東西重新npm start后為什么還是丟失,之前還是正常的呀?
剛開始懷疑是緩存什么的問題,刪掉的dist目錄,重啟開發(fā)者工具,甚至重啟電腦都試了一下,這是我遇到的超級(jí)詭異的問題之一。
冷靜下來想到:之前的版本是正常的,一定是新版本引入了什么導(dǎo)致了打包樣式的丟失。于是回滾版本一個(gè)個(gè)build排查問題,最后找到了原因: 在一個(gè)page中引入了其他page,即在頁面中import另一個(gè)頁面。
在我這里的具體例子是:我在 pages/index/index.vue 中想做底部共用一個(gè)tabbar,頁面根據(jù)tabbar的值來顯示對應(yīng)的子級(jí)頁面: pages/page1/index.vue 和 pages/page2/index.vue 。
所以我將這兩個(gè)頁面當(dāng)做子組件來引入了: import Page1 from '@/pages/page1' ,一開始沒有問題,等重啟項(xiàng)目,或者build后就發(fā)現(xiàn)樣式丟失了。
這可能是mpvue打包機(jī)制的一個(gè)限制,即 頁面不能將另一個(gè)頁面當(dāng)子組件來引用 ,否則會(huì)導(dǎo)致樣式丟失。
背景音頻的src無法讀取
項(xiàng)目中希望用戶退出小程序后依然能播放音頻,所以用到了背景音頻的api: wx.getBackgroundAudioManager()。
this.audio = wx.getBackgroundAudioManager() this.audio.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46' this.audio.title = '此時(shí)此刻' //注意必填 this.audio.epname = '此時(shí)此刻' this.audio.singer = '許巍' this.audio.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
title 和 src 賦值后會(huì)直接播放音頻,后面的幾個(gè)屬性建議也填上,因?yàn)椴シ疟尘耙纛l時(shí)微信是有個(gè)界面需要封面圖和歌手名稱等的。
如果想要獲取當(dāng)前正在播放的音頻src,本來以為通過 this.audio.src 來獲取就可以了但是有bug。
在開發(fā)者工具中是可以正常獲取的,即開發(fā)時(shí)是沒問題的,但在真機(jī)上返回的是 undefined ,因此不能用 this.audio.src 來獲取當(dāng)前播放的音頻url,得用一個(gè)變量來存這個(gè)數(shù)據(jù)。
直接使用音頻的currentTime可能渲染不及時(shí)
currentTime用于顯示當(dāng)前的播放進(jìn)度,但我用在子組件中時(shí)經(jīng)常更新不及時(shí),打印是正常的,但試圖渲染不及時(shí),有時(shí)候需要點(diǎn)擊一下才能重新渲染,這可能是mpvue使用時(shí)才會(huì)遇到。
所以建議還是項(xiàng)目自身維護(hù)一套背景音頻的變量比較好一點(diǎn),比如放在 vuex 中。監(jiān)聽 BackgroundAudioManager.onTimeUpdate() 方法每次賦值到自身維護(hù)的變量中。
音頻的onCanplay方法不一定每個(gè)音頻都會(huì)觸發(fā)
一開始我監(jiān)聽在 onCanplay 方法,將音頻的時(shí)長信息 duration 賦值到vuex中存起來,但發(fā)現(xiàn) onCanplay 有時(shí)候是不會(huì)觸發(fā)的,比如重新賦值src播放下一首時(shí),很尷尬。
所以不要太依賴onCanplay這個(gè)方法,還好目前直接使用 audio.duration 好像不會(huì)出現(xiàn)像上面的 currentTime 渲染不及時(shí)的問題,所以就這樣用著先。
音頻播放結(jié)束,即onStop后,不能再通過audio.play()的方法重新播放,得重新賦值src
正常來說,音頻播放結(jié)束后,音頻的src是不變的,再次 play() 應(yīng)該是可以的。但在小程序中偏偏不行,得重新賦值src才能重新播放,這應(yīng)該是小程序的一個(gè)bug。。。
所以需要判斷一下 暫停 和 停止 的情況,用不同的辦法播放。正常來說,音頻暫停時(shí) currentTime 是不為0的,而結(jié)束時(shí) currentTime 會(huì)為0。
所以可以通過 currentTime (最好是自己維護(hù)的變量)來判斷暫停和停止的情況: 如果currentTime不為0,表示是暫停的情況,可以用 play() ,如果小于等于0,則重新賦值src播放 :
if (currentTime) {
this.audio.play()
} else {
this.audio.src = 'xx.mp3'
}
mpvue不支持直接在template上直接綁定函數(shù)
這個(gè)是mpvue文檔上有寫的,不過一開始并不是很理解,也踩坑了,所以在這里提一下,避免不知道的同學(xué)踩坑找半天。
<template>
<div v-for="(item, index) in list" :key="index">{{ formatItem(item) }}</div>
</template>
<script>
export default {
data () {
return{
list: [1, 2, 3]
}
},
methods: {
formatItem (item) {
return `我是${item}`
}
}
}
</script>
上面的代碼應(yīng)該是日常vue中比較常用的,就是將數(shù)據(jù)傳參給方法做一些處理,這個(gè)在mpvue中是不支持的,會(huì)被編譯成一個(gè)空字符串。
小程序中可放心使用css3的一些特性
比如高斯模糊
filter: blur(50px);
如果要使用動(dòng)畫,盡量用 css 動(dòng)畫代替 wx.createAnimation
在實(shí)際使用時(shí), wx.createAnimation 做動(dòng)畫其實(shí)很卡,性能很差,所以在需要使用動(dòng)畫時(shí),建議盡量使用css做動(dòng)畫。
在小程序中是支持css動(dòng)畫的, transition , animation , @keyframes 這些特性都支持。
比如做一個(gè)div一直旋轉(zhuǎn)的動(dòng)畫,大家可以對比一下兩個(gè)版本:
wx.createAnimation 版本
原理:通過setInterval()不斷更新div的旋轉(zhuǎn)位置
<template>
<div class="cover" :animation="animationData"></div>
</template>
<script>
export default {
data () {
return {
animationData: '',
animation: '',
rotateCount: 0,
timer: ''
}
},
components: {
},
methods: {
startRotate () {
this.timer = setInterval(() => {
this.rotateAni(++this.rotateCount)
}, 100)
},
rotateAni (n) {
if (!this.animation) {
return
}
// 每100毫秒旋轉(zhuǎn)10度
this.animation.rotate(10 * n).step()
this.animationData = this.animation.export()
}
},
onShow () {
// 頁面從隱藏到顯示時(shí)才執(zhí)行
if (!this.animation) {
this.animation = wx.createAnimation()
this.startRotate()
}
},
onReady () {
// 第一次初始化時(shí)會(huì)執(zhí)行
if (!this.animation) {
this.animation = wx.createAnimation()
this.starRotate()
}
},
onHide () {
// 頁面隱藏時(shí)會(huì)執(zhí)行,避免頻繁的setData操作,將定時(shí)器停掉
this.timer && clearInterval(this.timer)
},
beforeDestroy () {
// 頁面卸載,也停掉定時(shí)器
this.timer && clearInterval(this.timer)
}
}
</script>
<style scoped lang="scss">
.cover {
left: 20px;
bottom: 70px;
border-radius: 50%;
background: #fff;
position: absolute;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
z-index: 10000;
}
</style>
使用css的 @keyframes 做旋轉(zhuǎn)動(dòng)畫
<template>
<div class="cover" :style="coverStyle"></div>
</template>
<script>
export default {
}
</script>
<style scoped lang="scss">
// 定義一個(gè)動(dòng)畫名為 rotate
@keyframes rotate {
0%,
100% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.cover {
left: 20px;
bottom: 70px;
border-radius: 50%;
background: #fff;
position: absolute;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
z-index: 10000;
// 使用動(dòng)畫
animation: rotate 4s linear infinite;
}
</style>
用js寫的動(dòng)畫需要控制好setInterval的間隔時(shí)間和旋轉(zhuǎn)角度,比較難調(diào)。而用css寫動(dòng)畫很簡單,性能比js好,代碼量也很少。
使用css動(dòng)畫時(shí)建議開啟硬件加速
為了動(dòng)畫更流暢,想盡辦法做優(yōu)化,雖然不知道有沒效果,反正用了再說[手動(dòng)滑稽]。
可以用will-change和transform: translate3d(0,0,0) 開啟硬件加速。我也不太會(huì)用,具體用法大家自行百度Google。
will-change: auto; transform: translate3d(0, 0, 0);
iPhoneX需要底部導(dǎo)航條預(yù)留34px(68rpx)的高度。
由于小程序中不能設(shè)置 viewport-fit=cover ,所以也就沒有web中的安全區(qū)域說法,目前主流的做法是通過 wx.getSystemInfoSync() 判斷是否是ipx,若是則給頁面底部撐高34px。
const res = wx.getSystemInfoSync()
if (res.model.indexOf('iPhone X') >= 0) {
this.isIpx = true
}
注意是用 res.model.indexOf('iPhone X') ,在開發(fā)者工具的iPhone X中,model是全等于 iPhone X 的,但在真機(jī)中往往拿到的值是 iPhone X GZxxx ,即后面可能會(huì)帶一串東西,所以用 indexOf 才是比較穩(wěn)的,而且對 iPhone XR 等機(jī)型也適用。
由于還有其他安卓機(jī)的全面屏,不太可能一一判斷,而且某些安卓全面屏是沒有用iPhone底部的工具條的(不存在沖突的情況),所以我們只判斷iPhone X的情況就可以了,其他全面屏就不需要給底部預(yù)留了。
至于全面屏布局的適配,需要用 flex 布局或者獲取屏幕寬高來慢慢調(diào)了,建議最好用flex布局自適應(yīng)處理。
for循環(huán)中的子組件click事件無法觸發(fā)
Page -> 父組件 -> 子組件 ,在子組件click后 $emit 一個(gè)事件出來,發(fā)現(xiàn)無法觸發(fā)。
這個(gè)bug一開始沒有出現(xiàn),但偶然 npm run build 出現(xiàn)的,然后排查原因,后面即使回滾所有版本再npm start也還會(huì)出現(xiàn)。好像不觸發(fā)則已,一發(fā)就不可收拾,這又是一個(gè)大坑,搜issue和加群問人,當(dāng)晚下班回家研究到1點(diǎn)多都沒有解決。
第二天繼續(xù)研究,感覺可能是框架的原因,最后嘗試升級(jí)一下mpvue版本,沒想到就正常了。直接使用quick-strat項(xiàng)目的 mpvue 版本是 2.0.0, mpvue 和 mpvue-template-compiler 升級(jí)到最新 2.0.6 就解決了。
事后查看mpvue版本記錄,果然是框架本身原因,并且找到了 issue 。
npm run build后代碼報(bào)錯(cuò),再build一次可能報(bào)另一些錯(cuò)
解決: 沒找到原因,可能是引入vant導(dǎo)致的,打包時(shí)丟失了部分文件。多build幾次,或者重啟下小程序開發(fā)者工具就正常了。
mpvue中created() 鉤子會(huì)在頁面初始化時(shí)全部一起觸發(fā),盡量不要用 小程序生命周期的理解
進(jìn)入已銷毀的page組件時(shí)依次觸發(fā): onLoad,onShow,onReady,beforeMount,mounted
第一次進(jìn)入已銷毀的子組件時(shí)依次觸發(fā): onLoad,onReady,beforeMount,mounted
第二次進(jìn)入已銷毀的子組件時(shí)依次觸發(fā): onLoad,onShow,onReady
再次進(jìn)入 未被銷毀的page組件、子組件時(shí)只觸發(fā): onShow
mpvue文檔中建議盡量不要使用小程序的生命周期,這個(gè)應(yīng)該是為了讓項(xiàng)目更好地適應(yīng)支付寶小程序和頭條小程序等,所以才這樣建議大家盡量不要使用某一個(gè)小程序自身的api。
如果你們的小程序只是微信小程序(不考慮兼容其他平臺(tái)小程序),我建議 直接用小程序的生命周期 ,而不要用mpvue的生命周期,坑太多了。比如mpvue的created周期,初始化時(shí)所有的page都會(huì)執(zhí)行,所以created這個(gè)周期是不能用了。
onUnload不觸發(fā)
小程序中與平常web開發(fā)不同的是,它的頁面會(huì)被緩存。舉個(gè)例子:
- 從
page1跳轉(zhuǎn)到page2,再從page2返回page1,此時(shí)的page1還沒銷毀,不會(huì)觸發(fā)onLoad再重新渲染,而是直接使用之前的數(shù)據(jù)。從性能上來說,單純的返回不應(yīng)該再請求api獲取數(shù)據(jù)重新渲染,這是對的,符合我們的預(yù)期。 - 而有時(shí)候,從
page2返回page1時(shí),我們希望page1是重新獲取數(shù)據(jù)渲染的。比如在page2做了一個(gè)退出登錄的操作,此時(shí)再返回page1時(shí),還是會(huì)看到之前的數(shù)據(jù)。實(shí)際上我們的預(yù)期是:由于已經(jīng)退出登錄了,page1的數(shù)據(jù)應(yīng)該被銷毀了。
在平常的web開發(fā)中,遇到上面的問題,我們可能是不管緩存,每次返回 page1 都再次請求api渲染最新的數(shù)據(jù),犧牲掉部分性能從而保證邏輯的正確性。
在mpvue中我也嘗試這樣干了:想在 page1 的 onUnload() 生命周期中銷毀數(shù)據(jù),但是沒有成功。即使在 page2 退出登錄時(shí),采用 wx.reLaunch() 重新刷一遍, page1 的 onUnload() 生命周期也沒有執(zhí)行。所以 onUnload() 是有可能不執(zhí)行的,建議慎用。
最后還是得想辦法做到 在 page2 控制 page1 的數(shù)據(jù)銷毀或保留 。想到這里, vuex 就不自覺浮現(xiàn)在眼前了,如果page1的數(shù)據(jù)是通過vuex來控制的,那么我在page2就可以用vuex來靈活管理其他頁面的數(shù)據(jù)了。
如果page2做退出登錄操作時(shí),就讓page1的數(shù)據(jù)銷毀,如果是不退出登錄正常返回,page1的數(shù)據(jù)還是正常,做到靈活控制。
個(gè)人平時(shí)web開發(fā)很少用 vuex ,因?yàn)轫?xiàng)目比較簡單不用那么復(fù)雜的全局?jǐn)?shù)據(jù)傳遞。但在小程序中,建議全局使用 vuex 來控制所有數(shù)據(jù)(當(dāng)然是得根據(jù)需求來用)。
總結(jié)
第一次開發(fā)小程序就直接上了mpvue,可能有些坑已經(jīng)很多同學(xué)總結(jié)過了,有些坑可能是不熟悉而導(dǎo)致的,但自己沒有去踩過一遍可能不夠深刻。
有兩種坑會(huì)比較難啃:
框架本身的問題,如mpvue2.0.0出現(xiàn)的子組件無法觸發(fā)事件的問題。 開發(fā)者工具和真機(jī)運(yùn)行環(huán)境不一致導(dǎo)致的坑。
遇到真機(jī)和開發(fā)者工具不一致的情況,可按以下步驟排查:
- 有可能是緩存,可以殺掉之前的版本再跑起來
- 手機(jī)微信版本太低,可能api不支持,用wx.canIUse打印一下
- 手機(jī)端某些屬性不支持讀取,比如上面的this.audio.src,可以在真機(jī)打印調(diào)試一下
- 代碼在手機(jī)端運(yùn)行有報(bào)錯(cuò),可以在手機(jī)端開啟調(diào)試,看一下log
- 微信設(shè)計(jì)上的坑,百度下是否有相關(guān)的案例和解決辦法
而遇到mpvue框架的問題可以:
- 去搜一下mpvue的issue看有沒相關(guān)解決辦法
- 盡量使用最新版本的框架,可能某些問題已經(jīng)修復(fù)了的。實(shí)在解決不了的,建議想辦法繞過,換一種方法來實(shí)現(xiàn)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程
這篇文章主要給大家介紹了關(guān)于利用vue + koa2 + mockjs模擬數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
Vue中的Computed實(shí)現(xiàn)原理分析
這篇文章主要介紹了Vue中的Computed實(shí)現(xiàn)原理,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue配置electron使用electron-builder進(jìn)行打包的操作方法
這篇文章主要介紹了vue配置electron使用electron-builder進(jìn)行打包的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08

