uniapp介紹與使用以及小程序?qū)崟r獲取視頻播放時間
一、uni-app介紹
1、誕生背景
- 多端泛濫?,F(xiàn)在是一個多端泛濫的時代,用戶被分散到了各個平臺,隨著微信小程序的興起,各個平臺迅速也推出了自己的小程序。為了覆蓋到更多的用戶,企業(yè)增加了非常多的運(yùn)營成本,開發(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集成
- 運(yùn)行體驗良好。組件、api與微信小程序一致,兼容weex原生渲染
- 通用技術(shù)棧,學(xué)習(xí)成本更低。vue的的語法,微信小程序的api,對于前端開發(fā)人員來說更容易上手
- 開放生態(tài),組件更豐富。支持通過npm安裝第三方包;支持微信小程序自定義組件以及sdk;兼容mpvue組件及項目;app端支持與原生混合編碼

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

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

3、完成上述步驟之后,就可以在HBuilder中的 ‘ 運(yùn)行 ’ 開始調(diào)試了
3、uni-app操作
| 操作 | 參照項 | 備注 |
|---|---|---|
| 標(biāo)簽 | 微信小程序(組件) | 等 |
| 配置頁面 | 微信小程序 | page.json |
| 配置tabber | 微信小程序 | pages.json 中提供了 tabBar 配置 |
| 數(shù)據(jù)綁定 | vue | {{}} v-bind : |
| 界面、應(yīng)用生命周期 | 微信小程序 | 絕大多數(shù)采用了小程序的生命周期 |
| 組件生命周期 | vue | 這里uni將各個平臺的生命周期進(jìn)行封裝、統(tǒng)一,我們在開發(fā)的時候需要注意個別生命周期只能特定的平臺使用。大家在開發(fā)過程中如果遇到兼容問題可以翻閱文檔中查看說明。 |
| 事件定義和傳參 | vue | v-on 和 @ 進(jìn)行事件綁定,傳參方式也和vue一致,$event 獲取元數(shù)據(jù) |
| 組件 | vue | 父子間傳值與vue中完全一致 |
| 跳轉(zhuǎn)及傳參 | 微信小程序 | 首先:微信小程序中頁面跳轉(zhuǎn)方法之一為wx.navigateTo(),在uniapp中方法為uni.navigateTo(),要把wx. 改為uni. 。其次:最好還是按照uniapp官方文檔來使用api,在web頁面使用this.$router也是可以進(jìn)行跳轉(zhuǎn)的,但是在小程序以及app就會報錯。使用官方api會根據(jù)不同的頁面進(jìn)行不同的解析。 |
| 循環(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) {//實時播放進(jìn)度秒數(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)文章
關(guān)于javascript中的promise的用法和注意事項(推薦)
這篇文章主要介紹了關(guān)于javascript中的promise的用法和注意事項,需要的朋友可以參考下2021-01-01
JS+XML 省份和城市之間的聯(lián)動實現(xiàn)代碼
用JS來操作一個XML文檔來實現(xiàn)一個簡單的表單聯(lián)動2009-10-10
淺談laytpl 模板空值顯示null的解決方法及簡單的js表達(dá)式
今天小編就為大家分享一篇淺談laytpl 模板空值顯示null的解決方法及簡單的js表達(dá)式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript高級程序設(shè)計閱讀筆記(六) ECMAScript中的運(yùn)算符(二)
ECMAScript中的運(yùn)算符,學(xué)習(xí)js的朋友可以參考下2012-02-02
使用自定義setTimeout和setInterval使之可以傳遞參數(shù)和對象參數(shù)
該函數(shù)兼容ie,firefox。并且可以使用clearSetTimeOut和clearInterval清除,比原setTimeout,setInterval方便很多,并且參數(shù)可以是object。2009-04-04
JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
javascript獲取四位數(shù)字或者字母的隨機(jī)數(shù)
這篇文章主要介紹了javascript獲取四位數(shù)字或者字母的隨機(jī)數(shù),需要的朋友可以參考下2015-01-01

