如何做一個uni-app專案？流程講解

如何做一個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. 元件
• 元件的簡單使用

元件傳參

元件插槽

7.1 元件的簡單使用
• 元件的定義
• 元件的引入

元件的註冊

元件的使用

##7.11 元件的定義
• 在src目錄下新資料夾components用來存放元件

在components目錄下直接新元件*.vue

7.12 元件的引入

在頁面中引入元件「import 元件名稱from'元件路徑'“

7.13 元件的註冊
• #在頁面中的實例中，新增屬性components

屬性components是一個對象，把元件放進去註冊

7.14 元件的使用

在頁面的標籤中，直接使用引入的元件「元件>」

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中文網其他相關文章！