【小程序】使用uni-app搭建小程序環境調用

本文轉載自查看原文 2020-04-17 19:00 1015

什么是uni-app:

　　官方：uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平台。

即使不跨端，uni-app同時也是更好的小程序開發框架。

　　白話兒：就是一個可以搭建各個平台的前端框架

產品特征：通用技術棧

　　vue的語法

　　微信小程序的api

　　內嵌mpvue

搭建環境

下載HBuilderX （下載的是App開發版） https://www.dcloud.io/hbuilderx.html
安裝微信開發者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

創建項目：

新建項目：

配置小程序

　　1.在HBuilderX中配置微信開發者工具路徑：工具-設置-運行配置

　　2.開啟微信開發者工具服務器端口設置

運行結果：（ctr+r -----微信開發者工具）

框架簡介---開發規范：

頁面文件遵循 Vue 單文件組件 (SFC) 規范
組件標簽靠近小程序規范，詳見uni-app 組件規范
接口能力（JS API）靠近微信小程序規范，但需將前綴 wx 替換為 uni，詳見uni-app接口規范
數據綁定及事件處理同 Vue.js 規范，同時補充了App及頁面的生命周期
為兼容多端運行，建議使用flex布局進行開發

框架簡介---目錄結構　

　　一個uni-app工程，默認包含如下目錄及文件：

    
┌─components            uni-app組件目錄
│  └─comp-a.vue         可復用的a組件
├─hybrid                存放本地網頁的目錄，詳見
├─platforms             存放各平台專用頁面的目錄，詳見
├─pages                 業務頁面文件存放的目錄
│  ├─index
│  │  └─index.vue       index頁面
│  └─list
│     └─list.vue        list頁面
├─static                存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此
├─wxcomponents          存放小程序組件的目錄，詳見
├─main.js               Vue初始化入口文件
├─App.vue               應用配置，用來配置App全局樣式以及監聽 應用生命周期
├─manifest.json         配置應用名稱、appid、logo、版本等打包信息，詳見
└─pages.json            配置頁面路由、導航條、選項卡等頁面類信息，詳見

注意事項：

static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經過轉換直接運行，在手機設備上會報錯。
css、less/scss 等資源同樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。

框架簡介---生命周期

應用生命周期

uni-app 支持如下應用生命周期函數：

函數名	說明
onLaunch	當`uni-app` 初始化完成時觸發（全局只觸發一次）
onShow	當 `uni-app` 啟動，或從后台進入前台顯示
onHide	當 `uni-app` 從前台進入后台
onUniNViewMessage	對 `nvue` 頁面發送的數據進行監聽，可參考 nvue 向 vue 通訊

注意

應用生命周期僅可在App.vue中監聽，在其它頁面監聽無效。
onlaunch里進行頁面跳轉，如遇白屏報錯，請參考https://ask.dcloud.net.cn/article/35942

路由環境

路由跳轉
uni-app路由全部交給框架統一管理，開發者需要在pages.json里配置每個路由頁面的路徑及頁面樣式，不支持 Vue Router。
uni-app 有兩種路由跳轉方式：使用navigator組件跳轉、調用API跳轉。

相關資料：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。