怎樣評(píng)價(jià)uni-app？

前端最火熱的話題無法就是flutter,不管是刷哪個(gè)論壇，必定有探討flutter的文章。沒用過flutter，但是對(duì)于跨平臺(tái)的技術(shù)，我一直都在研究。

創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、烏蘇網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為烏蘇等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

為什么是uni-app

之前一直在找解決跨平臺(tái)的方案，嘗試了很多方案，比如滴滴的變色龍，但是最終還是選擇了uni-app，這里附上uni-app的官網(wǎng)。為什么會(huì)選擇它呢，第一，vue語法，學(xué)習(xí)成本低，上手速度快，只要之前你做過vue的項(xiàng)目，那么就能很快上手，其實(shí)是vue和微信小程序的結(jié)合體，一半vue，一半微信小程序。第二，長(zhǎng)期維護(hù)，之前做微信小程序的時(shí)候，選擇了美團(tuán)的mpvue，但是后面發(fā)現(xiàn)長(zhǎng)期不維護(hù)了，提了Issues也沒人理，隨之就放棄了，而uni-app長(zhǎng)期在維護(hù)，這樣看出了開發(fā)團(tuán)隊(duì)的用心。第三，跨平臺(tái)的能力，uni-app能夠跨多個(gè)終端，H5，安卓，Ios，微信小程序，百度小程序，頭條小程序，支付寶小程序，真正實(shí)現(xiàn)了一套代碼，多端運(yùn)行，而且很好適應(yīng)了我國(guó)的市場(chǎng)。第四，日益豐富的插件市場(chǎng)，uni的插件市場(chǎng)也在日益強(qiáng)大，能夠基本上滿足我們平時(shí)的開發(fā)需求。

uni-app的組件有原生調(diào)用能力，第三方的vue庫在調(diào)原生接口時(shí)跟 5+runtime 不兼容。就像nativescript 有vue版和angular版，類似于react native , 都是起源于phonegap/cordova

實(shí)際開發(fā)效果遵義小紅椒 做了一款app，打包了安卓，Ios,微信小程序3個(gè)平臺(tái)，產(chǎn)出的效果都還是不錯(cuò)，總體還是比較滿意。而且打包過程也很方便簡(jiǎn)單，配套的HBuilderX自動(dòng)內(nèi)置了打包功能，所以也省去了打包的煩惱。

遵義小紅椒 建議

如果你現(xiàn)在想做一款跨平臺(tái)的產(chǎn)品，而且有vue和微信小程序的經(jīng)驗(yàn)，最重要的，你不想學(xué)習(xí)一門新語言，那么uni-app也許是你的一個(gè)選擇。

Flutter 仿抖音效果 (二) 界面布局

Flutter 仿抖音效果 (一) 全屏點(diǎn)愛星

Flutter 仿抖音效果 (二) 界面布局

[Flutter 仿抖音效果 (三) 視頻播放列表] ( )

項(xiàng)目地址: 持續(xù)效果更新

1.基本的布局是簡(jiǎn)單的,外層通過Stack作為根

2.左邊點(diǎn)贊的控件組通過Align進(jìn)行統(tǒng)一布局

3.頂部控件組通過Positioned進(jìn)行布局,設(shè)置頂部距離,其實(shí)也可以用align,我們多使用幾種來習(xí)慣flutter的布局

4.底部同樣使用Positioned,設(shè)置底部距離

5.子頁面的左右滑動(dòng)使用PageView,一開始我們要從推薦開始左滑到關(guān)注,可以使用reverse屬性,不需要更多額外的操作

1.pageController監(jiān)聽

刷新頂部的下劃線時(shí),我們一樣使用StreamController刷新,這樣效率比setstate高很多

2.歌曲名走馬燈效果

這個(gè)效果看起來挺麻煩的其實(shí)實(shí)現(xiàn)起來超級(jí)的簡(jiǎn)單用最普通的ListView就能快速的實(shí)現(xiàn)

首頁listview里面套入的是最簡(jiǎn)單的container+text

listview添加一個(gè)ScrollController做為滑動(dòng)的控制

使用一個(gè)定時(shí)器,把listview滑到最大的位置之后,在滑回去

先通過scroController.position.maxScrollExtent獲取最大位置,

然后通過scroController.animateTo進(jìn)行滑動(dòng),因?yàn)槲以O(shè)置一次循環(huán)的時(shí)間是3000毫秒,所以滑過去和滑回來的時(shí)間各占一般 new Duration(milliseconds: (time * 0.5).toInt()),還有就是歌名沒有大于最大寬度時(shí)候其實(shí)我們不需要進(jìn)行滑動(dòng),所以判斷maxScrollExtent是否大于0來確定是否進(jìn)行滑動(dòng)動(dòng)畫

使用Flutter + V8/JsCore開發(fā)小程序引擎（一）

眾所周知，小程序是由HTML標(biāo)簽來開發(fā)原生組件，那么首先需要將HTML做解析，這里我們將HTML通過node腳本解析成JSON字符串，再用Dart來解析JSON，映射對(duì)應(yīng)的標(biāo)簽到flutter的組件。這里先簡(jiǎn)單介紹實(shí)現(xiàn)的功能以及展示效果，后續(xù)再詳細(xì)介紹。

為了高效解析，直接用flutter的組件名在HTML文件上開發(fā)

直接使用flutter的組件

模仿微信小程序的Api，cc對(duì)應(yīng)是微信小程序的wx

以上HTML中的例子

《使用Flutter + V8/JsCore開發(fā)小程序引擎（二）》

《使用Flutter + V8/JsCore開發(fā)小程序引擎（三）》

求flutter的教學(xué)視頻！！！！

Flutter教程全套 （全網(wǎng)獨(dú)家)百度網(wǎng)盤免費(fèi)資源在線學(xué)習(xí) ?

鏈接:

提取碼: m9z8 ?

Flutter教程全套 （全網(wǎng)獨(dú)家)

第一套：Flutter 攜程17章全-整理好

第五套：Flutter高仿谷歌翻譯項(xiàng)目課程

第四套：兩小時(shí)掌握Flutter移動(dòng)App開發(fā)視頻

第三套：flutter入門到精通全套

第七套：Flutter小實(shí)戰(zhàn)20個(gè)

第六套：仿直聘boss的flutter完整教程

第九套：Flutter跨平臺(tái)開發(fā)

第二套：flutter移動(dòng)電商實(shí)戰(zhàn)-技術(shù)胖

第八套：Flutter基礎(chǔ)教程（基礎(chǔ)不好的優(yōu)先看）

24Flutter的打包.mp4

23靜態(tài)資源和項(xiàng)目圖片的處理.mp4

22頁面跳轉(zhuǎn)并返回?cái)?shù)據(jù)_.mp4

21導(dǎo)航的參數(shù)傳遞和接受-2_.mp4

20導(dǎo)航的參數(shù)傳遞和接受-1.mp4

Flutter開源app---開眼短視頻

在玩安卓上有款組件化開源app的項(xiàng)目，一款模仿 Eyepetizer | 開眼視頻的 開源app,這款app設(shè)計(jì)風(fēng)格特別喜歡的，比較簡(jiǎn)潔，美觀，然后最近又在學(xué)flutter的知識(shí)，于是就寫了一款flutter版本的開源短視頻，效果也是聽不錯(cuò)的，廢話不多說，先上效果圖。

先附上項(xiàng)目地址：

項(xiàng)目api會(huì)在后面的參考鏈接里，或者直接項(xiàng)目?jī)?nèi)查看。

項(xiàng)目地址：

更新：6/30 項(xiàng)目新增下拉刷新，上拉加載功能

kotlin版本開眼短視頻開發(fā)中，敬請(qǐng)期待...

總結(jié)：在此感謝參考的伙伴的文章，寫的也很好，然后我將這個(gè)項(xiàng)目改寫成了flutter，當(dāng)中也學(xué)習(xí)到了很多flutter相關(guān)的知識(shí)，后續(xù)還有繼續(xù)鞏固，不斷學(xué)習(xí)。

參考鏈接（包含本項(xiàng)目的api）

名稱欄目：flutter仿滴滴,flutter 仿微信
鏈接URL：http://chinadenli.net/article22/dsgdccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、Google、外貿(mào)建站、電子商務(wù)、面包屑導(dǎo)航、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)