uniapp介紹與使用以及小程序?qū)崟r獲取視頻播放時間
一、uni-app介紹
1、誕生背景
- 多端泛濫?,F(xiàn)在是一個多端泛濫的時代,用戶被分散到了各個平臺,隨著微信小程序的興起,各個平臺迅速也推出了自己的小程序。為了覆蓋到更多的用戶,企業(yè)增加了非常多的運營成本,開發(fā)人員增加了非常多的學習成本。
- 體驗不好。過去也有一些跨平臺框架,但是在開發(fā)體驗上不是太好。
- 生態(tài)不夠豐富。 過去的跨平臺開發(fā)框架在生態(tài)上不夠豐富,開發(fā)者想獲取好用的sdk是比較難得到的。
在這樣的背景下Dcloud公司決定打造一個終極的跨平臺解決方案,即uni-app
2、uni-app是什么(what、where)
uni-app是一個使用vue.js開發(fā)所有前端應用的框架,開發(fā)者編寫一套代碼,可以發(fā)布到iOS、Android、web(響應式)、以及各種小程序(微信 / 支付寶 / 百度)、快應用等多個平臺。
3、uni-app的優(yōu)勢(why)
- 跨平臺更多,正真做到一段代碼多端發(fā)行,支持原生代碼混寫和原生sdk集成
- 運行體驗良好。組件、api與微信小程序一致,兼容weex原生渲染
- 通用技術(shù)棧,學習成本更低。vue的的語法,微信小程序的api,對于前端開發(fā)人員來說更容易上手
- 開放生態(tài),組件更豐富。支持通過npm安裝第三方包;支持微信小程序自定義組件以及sdk;兼容mpvue組件及項目;app端支持與原生混合編碼
二、使用uni-app(how)
1、下載安裝&創(chuàng)建項目
大家通過官網(wǎng)就可以下載HBuilder,并進行初步的項目創(chuàng)建
2、多端運行
1、在進行微信小程序調(diào)試時,要先開啟安全設置里面的端口服務,并且在初次進行小程序調(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 : |
界面、應用生命周期 | 微信小程序 | 絕大多數(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)文章
關(guān)于javascript中的promise的用法和注意事項(推薦)
這篇文章主要介紹了關(guān)于javascript中的promise的用法和注意事項,需要的朋友可以參考下2021-01-01JS+XML 省份和城市之間的聯(lián)動實現(xiàn)代碼
用JS來操作一個XML文檔來實現(xiàn)一個簡單的表單聯(lián)動2009-10-10淺談laytpl 模板空值顯示null的解決方法及簡單的js表達式
今天小編就為大家分享一篇淺談laytpl 模板空值顯示null的解決方法及簡單的js表達式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript高級程序設計閱讀筆記(六) ECMAScript中的運算符(二)
ECMAScript中的運算符,學習js的朋友可以參考下2012-02-02使用自定義setTimeout和setInterval使之可以傳遞參數(shù)和對象參數(shù)
該函數(shù)兼容ie,firefox。并且可以使用clearSetTimeOut和clearInterval清除,比原setTimeout,setInterval方便很多,并且參數(shù)可以是object。2009-04-04JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03javascript獲取四位數(shù)字或者字母的隨機數(shù)
這篇文章主要介紹了javascript獲取四位數(shù)字或者字母的隨機數(shù),需要的朋友可以參考下2015-01-01