提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助檔案
文章目錄
- 前言
- 一、 如何創建專案
- 1.使用 hbuilerX 創建一個新專案
- 2.啟動專案（微信小程式）
- 3.微信小程式開發者工具匯入專案 （初始界面）
- 二、 如何撰寫代碼
- 樣式和sass
- 結構與基本語法
- 事件
- 三、 組件
- 四、 生命周期
- 常用：
- 應用生命周期
- 頁面生命周期
- 總結
前言
首先我們要先了解什么是uni-app？
（1） uni-app是一個使用Vue.js語法來開發所有前端應用的框架（也稱之為全端開發框架）
技術堆疊：JavaScript，vue， 微信小程式， uni-app
uni-app的線上作品有哪些(列舉)
一、 如何創建專案
1.使用 hbuilerX 創建一個新專案
2.啟動專案（微信小程式）
3.微信小程式開發者工具匯入專案 （初始界面）
專案結構介紹 官方解釋
二、 如何撰寫代碼
樣式和sass
支持小程式的rpx 和 h5的vw，vh，
rpx 小程式中的單位 750rpx = 螢屏寬度 vw h5單位 100vw = 螢屏的寬度， 100vh = 螢屏的高度
內置sass的配置， 只需要安裝對應的依賴即可 npm install sass-loader node-sass
vue組件中，在style標簽上加入屬性<style lang= 'scss'>即可
結構與基本語法
學過vue的可以放手大膽嘗試一下😁
事件
來看下效果
三、 組件
在src目錄下新建檔案夾components用來存放組件
在components目錄下直接新建vue檔案
//組件的引入
在頁面中引入組件 "import 組件名 from '組件路徑'"
//組件的注冊
在頁面的實體中，新增屬性 components
屬性components是一個物件， 在里面添加要注冊的組件
//組件的使用
+在頁面的template中添加組件標簽 "<組件><組件/>"
四、 生命周期
常用：
uni-app框架的生命周期結合了vue和微信小程式的生命周期
全域APP中使用 onLaunch 表示應用啟動時
頁面中使用 onl oad 或者 onShow 分別表示頁面加載完成 和 頁面顯示時
組件中使用mounted 表示組件掛載完畢時
應用生命周期
onLaunch 當uni-app 初始化完成時觸發（全域只觸發一次）
onShow 當 uni-app 啟動，或從后臺進入前臺顯示
onHide 當 uni-app 從前臺進入后臺
onError 當 uni-app 報錯時觸發
onUniNViewMessage 對 nvue 頁面發送的資料進行監聽，可參考 nvue 向 vue 通訊
onUnhandledRejection 對未處理的 Promise 拒絕事件監聽函式（2.8.1+）
onPageNotFound 頁面不存在監聽函式
onThemeChange 監聽系統主題變化
頁面生命周期
onLoad 監聽頁面加載，其引數為上個頁面傳遞的資料，引數型別為Object（用于頁面傳參），參考示例
onShow 監聽頁面顯示，頁面每次出現在螢屏上都觸發，包括從下級頁面點回傳露出當前頁面
onReady 監聽頁面初次渲染完成，注意如果渲染速度快，會在頁面進入影片完成前觸發
onHide 監聽頁面隱藏
onUnload 監聽頁面卸載
onResize 監聽視窗尺寸變化 App、微信小程式
onPullDownRefresh 監聽用戶下拉動作，一般用于下拉重繪，參考示例
onReachBottom 頁面上拉觸底事件的處理函式
onTabItemTap 點擊 tab 時觸發，引數為Object，具體見下方注意事項 微信小程式、百度小程式、H5、App（自定義組件模式）
onShareAppMessage 用戶點擊右上角分享 微信小程式、百度小程式、位元組跳動小程式、支付寶小程式
onPageScroll 監聽頁面滾動，引數為Object
總結
看完記得點贊
🙊
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230318.html
標籤：其他
上一篇：html的行內元素與塊級元素總結