uniapp介紹與使用以及小程序?qū)崟r(shí)獲取視頻播放時(shí)間
一、uni-app介紹
1、誕生背景
- 多端泛濫。現(xiàn)在是一個(gè)多端泛濫的時(shí)代,用戶被分散到了各個(gè)平臺(tái),隨著微信小程序的興起,各個(gè)平臺(tái)迅速也推出了自己的小程序。為了覆蓋到更多的用戶,企業(yè)增加了非常多的運(yùn)營(yíng)成本,開發(fā)人員增加了非常多的學(xué)習(xí)成本。
- 體驗(yàn)不好。過去也有一些跨平臺(tái)框架,但是在開發(fā)體驗(yàn)上不是太好。
- 生態(tài)不夠豐富。 過去的跨平臺(tái)開發(fā)框架在生態(tài)上不夠豐富,開發(fā)者想獲取好用的sdk是比較難得到的。
在這樣的背景下Dcloud公司決定打造一個(gè)終極的跨平臺(tái)解決方案,即uni-app
2、uni-app是什么(what、where)
uni-app是一個(gè)使用vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可以發(fā)布到iOS、Android、web(響應(yīng)式)、以及各種小程序(微信 / 支付寶 / 百度)、快應(yīng)用等多個(gè)平臺(tái)。
3、uni-app的優(yōu)勢(shì)(why)
- 跨平臺(tái)更多,正真做到一段代碼多端發(fā)行,支持原生代碼混寫和原生sdk集成
- 運(yùn)行體驗(yàn)良好。組件、api與微信小程序一致,兼容weex原生渲染
- 通用技術(shù)棧,學(xué)習(xí)成本更低。vue的的語法,微信小程序的api,對(duì)于前端開發(fā)人員來說更容易上手
- 開放生態(tài),組件更豐富。支持通過npm安裝第三方包;支持微信小程序自定義組件以及sdk;兼容mpvue組件及項(xiàng)目;app端支持與原生混合編碼
二、使用uni-app(how)
1、下載安裝&創(chuàng)建項(xiàng)目
大家通過官網(wǎng)就可以下載HBuilder,并進(jìn)行初步的項(xiàng)目創(chuàng)建
2、多端運(yùn)行
1、在進(jìn)行微信小程序調(diào)試時(shí),要先開啟安全設(shè)置里面的端口服務(wù),并且在初次進(jìn)行小程序調(diào)試時(shí)需要輸入微信開發(fā)者工具的路徑
2、在進(jìn)行模擬器(手機(jī))調(diào)試時(shí),要先打開模擬器的權(quán)限,并且,在使用模擬器調(diào)試時(shí),要先HBuilder打開模擬器,否則是檢測(cè)不到模擬器的
3、完成上述步驟之后,就可以在HBuilder中的 ‘ 運(yùn)行 ’ 開始調(diào)試了
3、uni-app操作
操作 | 參照項(xiàng) | 備注 |
---|---|---|
標(biāo)簽 | 微信小程序(組件) | 等 |
配置頁面 | 微信小程序 | page.json |
配置tabber | 微信小程序 | pages.json 中提供了 tabBar 配置 |
數(shù)據(jù)綁定 | vue | {{}} v-bind : |
界面、應(yīng)用生命周期 | 微信小程序 | 絕大多數(shù)采用了小程序的生命周期 |
組件生命周期 | vue | 這里uni將各個(gè)平臺(tái)的生命周期進(jìn)行封裝、統(tǒng)一,我們?cè)陂_發(fā)的時(shí)候需要注意個(gè)別生命周期只能特定的平臺(tái)使用。大家在開發(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就會(huì)報(bào)錯(cuò)。使用官方api會(huì)根據(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(shí)獲取視頻播放時(shí)間(秒)
使用 bindtimeupdate=“timeUpdate” 事件類型
具體請(qǐng)看官方文檔
<video bindtimeupdate="timeUpdate" src='視頻地址' poster="視頻封面地址"page-gesturecontrols> </video> timeUpdate: function (e) {//實(shí)時(shí)播放進(jìn)度秒數(shù) var currentTime = parselnt(e.detail.currentTime) console.log("視頻播放到第" + currentTime + "秒")//查看正在播放時(shí)間,以秒為單位 }
總結(jié)
到此這篇關(guān)于uniapp介紹與使用以及小程序?qū)崟r(shí)獲取視頻播放時(shí)間的文章就介紹到這了,更多相關(guān)uniapp 小程序?qū)崟r(shí)獲取視頻播放時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)支付寶滑塊驗(yàn)證碼效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)支付寶滑塊驗(yàn)證碼效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07關(guān)于javascript中的promise的用法和注意事項(xiàng)(推薦)
這篇文章主要介紹了關(guān)于javascript中的promise的用法和注意事項(xiàng),需要的朋友可以參考下2021-01-01JS+XML 省份和城市之間的聯(lián)動(dòng)實(shí)現(xiàn)代碼
用JS來操作一個(gè)XML文檔來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單聯(lián)動(dòng)2009-10-10淺談laytpl 模板空值顯示null的解決方法及簡(jiǎn)單的js表達(dá)式
今天小編就為大家分享一篇淺談laytpl 模板空值顯示null的解決方法及簡(jiǎn)單的js表達(dá)式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(六) ECMAScript中的運(yùn)算符(二)
ECMAScript中的運(yùn)算符,學(xué)習(xí)js的朋友可以參考下2012-02-02使用自定義setTimeout和setInterval使之可以傳遞參數(shù)和對(duì)象參數(shù)
該函數(shù)兼容ie,firefox。并且可以使用clearSetTimeOut和clearInterval清除,比原setTimeout,setInterval方便很多,并且參數(shù)可以是object。2009-04-04JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實(shí)例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03javascript獲取四位數(shù)字或者字母的隨機(jī)數(shù)
這篇文章主要介紹了javascript獲取四位數(shù)字或者字母的隨機(jī)數(shù),需要的朋友可以參考下2015-01-01