如何做一個uni-app專案?這篇文章就來給大家系統的講解一下做一個uni-app的流程,希望對大家有幫助!
做一個uni-app的流程:
包含大量目前前端必備的技能,如vue,微信小程序,組件封裝,行動裝置手勢封裝,資料分頁,axios,moment,flex佈局,sass,影片播放,影片下載等等功能。 【相關推薦:《uniapp教學》】
1. uni-app介紹
1.1 什麼是uni- app
uni-app 是使用vue.js語法開發所有前端應用的框架
可以開發各種東西
也叫全端發展架構
2. uni-app 基礎
#2.1 基礎問題
- uni-app初體驗
- 專案結構介紹
- 樣式與sass
- 基本語法
- 事件
- 元件
- 生命週期
3. 先基礎,後專案
#需要的技術堆疊有
- html
-
-
-
- #css
- JavaScript
- vue
- 微信小程式
- uni-app
##uni-ui- uni-api
moment.js手勢封裝
#4. 用鷹架搭建專案
##1、全域安裝
npm install -g @vue/cli
登入後複製
2、建立專案
vue create -p dcloudio/uni-preset-vue my-project
登入後複製
3、啟動專案(微信小程式)
npm run dev:mp-weixin
登入後複製
4、微信小程式開發者工具匯入專案 #記得要進入根目錄裡
4.1 專案目錄
4.2 樣式和sass- 支援小程式的rpx和h5的vw、vh
內建有sass的配置了,只需要安裝對應的依賴即可「npm install sass-loader node-sass "
vue組件中,在style標籤上加入屬性「
#5 .基本語法
Vue的基礎語法如v-bind,v-if,v-show,v-for之類的
6. 事件的使用
v-on
元件傳參
元件插槽
元件的註冊
元件的使用
##7.11 元件的定義在src目錄下新資料夾components用來存放元件
在components目錄下直接新元件*.vue
在頁面中引入元件「import 元件名稱from'元件路徑'“
7.13 元件的註冊 #在頁面中的實例中,新增屬性components
屬性components是一個對象,把元件放進去註冊
在頁面的標籤中,直接使用引入的元件「<元件>元件>」
7.2 元件傳遞參數
父向子傳遞參數透過- 屬性的方式
子向父傳遞參數透過- 觸發事件
的方式- 使用全域資料傳遞參數
透過掛載- vue 的原型上
透過
globalData # 的方式
7.21 父向子傳遞資料- 父頁向子元件ul- com
透過屬性名稱- list傳遞了一個陣列資料
子元件透過
props
接收資料
<ul-com : list="[1,2,3,4]">
props: {
list: Array
},
登入後複製
7.22 子向父傳遞資料 子元件透過- 觸發事件的方式向父元件傳遞資料
父元件透過
監聽事件
的方式來接收資料
- 寫法
methods: {
handleclick(){
this.$emit("textchange",'来自子组件的数据');}
}
登入後複製
<ul-com :list="[1,2,3,4]"
@textChange="handleTextchange">
登入後複製
- 在子元件上設定點擊事件
- 在methods 設定傳遞的參數
- 在父子見設定一個監聽事件
##在父的methods中接受一個參數
7.3 全域共享資料
- 透過Vue的原型共享資料(用this取得)
- 透過globalData共享資料(定義後用getapp取得)
- vuex
本地儲存
Vue.prototype.baseURL="http: //www.baidu.com"
登入後複製
7.4 元件插槽#######
- 標籤其實也是資料中的一種,想實作動態的給子元件傳遞標籤,就可以使用插槽slot
- 透過slot實作佔位符
簡單來說就是把父頁面的標籤丟到子頁面去
#8. 生命週期
-
# #8.1 介紹-
uni-app框架的生命週期結合了vue和微信小程式的生命週期
- 全域的APP中使用onLaunch 表示應用程式啟動時
頁面中使用onLoad 或
onShow
分別表示頁面載入完畢時和頁面顯示時元件中使用mounted
元件掛載完畢時############本文轉載自:https://juejin.cn/post/6996561691639037983##########更多程式設計相關知識,請造訪:###程式設計入門###! ! ###以上是如何做一個uni-app專案?流程講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!