??uni-app默認使用uni-ui全端兼容的、高性能UI框架，在我們開發程序中可以滿足大部分的需求了，并且如果是為了兼容性，還是強烈建議使用uni-ui作為UI框架使用，
??如果作為初創公司，自身又不想費太多精力去自己設計一套UI框架，那么DCloud插件市場提供了很多優秀的UI框架，最重要的是有些UI框架能夠提供一整套行業的頁面模板，比如，前幾年電商專案比較火，Vant、ColorUI等提供了一整套電商模板方案，界面設計非常精美，
??專案之前使用過ColorUI，可惜的是ColorUI已經好久沒更新了，后續是否能夠繼續更新還是個未知數，最近剛好要做一個類似于論壇圈子的移動應用，在DCloud插件市場找到了界面設計美觀、基礎組件豐富的圖鳥UI和圖鳥模板-圈子，接下來以圖鳥UI為例介紹如何在uni-app專案中集成第三方UI并實作登錄注冊功能，
一、匯入圖鳥UI庫并配置生效
以下部分內容參考圖鳥UI官方部署檔案
1、首先從DCloud插件市場下載ZIP包或者直接使用HBuilderX匯入插件
??官方插件搜索下載,我這里是直接使用HBuilderX匯入插件，可以方便預覽插件，復制檔案操作也可以在HBuilderX中進行，相比較下載ZIP會方便一點，
2、整合圖鳥UI的store檔案
- 在gitegg-uni-app-v2的/store/modules檔案夾下新建tuniao.js ,復制圖鳥UI專案下 /store/index.js內容到tuniao.js中，將const store = new Vuex.Store修改為const tuniao = new Vuex.Store ，將export default store修改為export default tuniao
- 修改gitegg-uni-app-v2的/store/index.js，引入tuniao.js
tuniao.js
......
const store = new Vuex.Store({
......
})
......
export default store
index.js
......
import tuniao from './modules/tuniao'
......
modules: {
user,
tuniao
},
......
3、將圖鳥UI復制必須的庫檔案到我們新建的uni-app專案中
- 將圖鳥UI專案根目錄下的tuniao-ui目錄復制到gitegg-uni-app-v2根目錄下
- 將圖鳥UI專案根目錄下的static/css目錄復制到gitegg-uni-app-v2的static/css目錄
- 將圖鳥UI專案根目錄下的libs目錄復制到gitegg-uni-app-v2根目錄下
4、在專案中引入TuniaoUI主JS庫
??在gitegg-uni-app-v2專案根目錄中的main.js中，引入并使用TuniaoUI的JS庫，注意這兩行配置代碼要放在import Vue之后，
// 引入全域TuniaoUI主JS庫
import TuniaoUI from 'tuniao-ui'
Vue.use(TuniaoUI)
5、引入TuniaoUI的全域SCSS主題檔案
??在gitegg-uni-app-v2專案根目錄的uni.scss中引入tuniao-ui/theme.scss檔案，
@import 'tuniao-ui/theme.scss';
6、配置easycom組件模式
??修改page.json檔案，增加easycom組件配置，確保pages.json中只有一個easycom欄位，
??easycom組件模式：傳統vue組件，需要安裝、參考、注冊，三個步驟后才能使用組件，easycom將其精簡為一步， 只要組件安裝在專案的components目錄下，并符合components/組件名稱/組件名稱.vue目錄結構，就可以不用參考、注冊，直接在頁面中使用，
// pages.json
{
"easycom": {
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
},
"pages": [ //pages陣列中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
{
// ......
}
]
// ......
}
二、復制模板頁面檔案并預覽
??上面的操作將圖鳥UI基礎庫的內容復制集成到了我們的uni-app專案中，我們在實際開發程序中可能并不需要所有的頁面模板檔案，否則會使程式多了很多無用代碼，
1、復制圖鳥UI根目錄下/templatePage/login/demo1/demo1.vue檔案，替換我們gitegg-uni-app-v2目錄下的login.vue內容
2、啟動手機模擬器 > 雙擊桌面的nox_adb快捷方式(如果已啟動，可以忽略此步驟)
3、在HBuilder X中依次點擊 運行 -> 運行到手機或模擬器 -> 運行到Android App基座
4、彈出框會顯示我們已連接的模擬器，點擊運行，HBuilderX就可以自動打包app發布到模擬器中運行，并可以在HBuilderX控制臺查看運行日志
5、圖鳥UI的登錄頁面預覽
原始碼地址:
Gitee: https://gitee.com/wmz1930/GitEgg
GitHub: https://github.com/wmz1930/GitEgg
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/523002.html
標籤：其他