uniapp介紹與使用以及小程序?qū)崟r獲取視頻播放時間
一、uni-app介紹
1、誕生背景
- 多端泛濫?,F(xiàn)在是一個多端泛濫的時代,用戶被分散到了各個平臺,隨著微信小程序的興起,各個平臺迅速也推出了自己的小程序。為了覆蓋到更多的用戶,企業(yè)增加了非常多的運營成本,開發(fā)人員增加了非常多的學(xué)習(xí)成本。
- 體驗不好。過去也有一些跨平臺框架,但是在開發(fā)體驗上不是太好。
- 生態(tài)不夠豐富。 過去的跨平臺開發(fā)框架在生態(tài)上不夠豐富,開發(fā)者想獲取好用的sdk是比較難得到的。
在這樣的背景下Dcloud公司決定打造一個終極的跨平臺解決方案,即uni-app
2、uni-app是什么(what、where)
uni-app是一個使用vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可以發(fā)布到iOS、Android、web(響應(yīng)式)、以及各種小程序(微信 / 支付寶 / 百度)、快應(yīng)用等多個平臺。
3、uni-app的優(yōu)勢(why)
- 跨平臺更多,正真做到一段代碼多端發(fā)行,支持原生代碼混寫和原生sdk集成
- 運行體驗良好。組件、api與微信小程序一致,兼容weex原生渲染
- 通用技術(shù)棧,學(xué)習(xí)成本更低。vue的的語法,微信小程序的api,對于前端開發(fā)人員來說更容易上手
- 開放生態(tài),組件更豐富。支持通過npm安裝第三方包;支持微信小程序自定義組件以及sdk;兼容mpvue組件及項目;app端支持與原生混合編碼

二、使用uni-app(how)
1、下載安裝&創(chuàng)建項目
大家通過官網(wǎng)就可以下載HBuilder,并進行初步的項目創(chuàng)建
2、多端運行
1、在進行微信小程序調(diào)試時,要先開啟安全設(shè)置里面的端口服務(wù),并且在初次進行小程序調(diào)試時需要輸入微信開發(fā)者工具的路徑

2、在進行模擬器(手機)調(diào)試時,要先打開模擬器的權(quán)限,并且,在使用模擬器調(diào)試時,要先HBuilder打開模擬器,否則是檢測不到模擬器的

3、完成上述步驟之后,就可以在HBuilder中的 ‘ 運行 ’ 開始調(diào)試了
3、uni-app操作
| 操作 | 參照項 | 備注 |
|---|---|---|
| 標簽 | 微信小程序(組件) | 等 |
| 配置頁面 | 微信小程序 | page.json |
| 配置tabber | 微信小程序 | pages.json 中提供了 tabBar 配置 |
| 數(shù)據(jù)綁定 | vue | {{}} v-bind : |
| 界面、應(yīng)用生命周期 | 微信小程序 | 絕大多數(shù)采用了小程序的生命周期 |
| 組件生命周期 | vue | 這里uni將各個平臺的生命周期進行封裝、統(tǒng)一,我們在開發(fā)的時候需要注意個別生命周期只能特定的平臺使用。大家在開發(fā)過程中如果遇到兼容問題可以翻閱文檔中查看說明。 |
| 事件定義和傳參 | vue | v-on 和 @ 進行事件綁定,傳參方式也和vue一致,$event 獲取元數(shù)據(jù) |
| 組件 | vue | 父子間傳值與vue中完全一致 |
| 跳轉(zhuǎn)及傳參 | 微信小程序 | 首先:微信小程序中頁面跳轉(zhuǎn)方法之一為wx.navigateTo(),在uniapp中方法為uni.navigateTo(),要把wx. 改為uni. 。其次:最好還是按照uniapp官方文檔來使用api,在web頁面使用this.$router也是可以進行跳轉(zhuǎn)的,但是在小程序以及app就會報錯。使用官方api會根據(jù)不同的頁面進行不同的解析。 |
| 循環(huán)遍歷 | vue | v-for=‘item in list’ :key=‘index’ |
| 條件渲染 | vue | v-if v-else v-show |
| 數(shù)據(jù)改變,頁面更更新 | vue | 沒有setData方法 |
三、其他
微信小程序?qū)崟r獲取視頻播放時間(秒)
使用 bindtimeupdate=“timeUpdate” 事件類型
具體請看官方文檔
<video bindtimeupdate="timeUpdate" src='視頻地址' poster="視頻封面地址"page-gesturecontrols>
</video>
timeUpdate: function (e) {//實時播放進度秒數(shù)
var currentTime = parselnt(e.detail.currentTime)
console.log("視頻播放到第" + currentTime + "秒")//查看正在播放時間,以秒為單位
}
總結(jié)
到此這篇關(guān)于uniapp介紹與使用以及小程序?qū)崟r獲取視頻播放時間的文章就介紹到這了,更多相關(guān)uniapp 小程序?qū)崟r獲取視頻播放時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
three.js 利用uv和ThreeBSP制作一個快遞柜功能
這篇文章主要介紹了three.js 利用uv和ThreeBSP制作一個快遞柜,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
bootstrap fileinput插件實現(xiàn)預(yù)覽上傳照片功能
這篇文章主要介紹了bootstrap fileinput插件實現(xiàn)預(yù)覽上傳照片功能,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-01-01
IntersectionObserver實現(xiàn)圖片懶加載的示例
下面小編就為大家?guī)硪黄狪ntersectionObserver實現(xiàn)圖片懶加載的示例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09

