uni-app實現了一套代碼，同時運行到多個平臺。支持iOS模擬器、Android模擬器、H5、微信開發者工具、支付寶小程序Studio、百度開發者工具、字節跳動開發者工具
?
工具安裝
開發uni-app需要安裝HBuilder X.下載地址。
?
下載成功后直接解壓即可
?
簡單的配置一下開發偏好：
?
?創建第一個uni-app
點擊左上角【文件】>>【新建】>>【項目】，選擇uni-app模板。
?
uni-app目錄結構
?
目錄結構基本和小程序的目錄結構相似，只是多了個基礎組件的文件夾；
uni-app有自己的插件庫，直接點擊安裝即可，而且，它也支持npm包管理，點擊【工具】>> 【插件安裝】即可配置
?
?
?
?
好了，基本的安裝工作就是這么多，下面我們看一下如何調試
?
調試
瀏覽器
uni-app支持多個端同時調試，這也是它最便捷的地方，首先看一下瀏覽器端的調試：
調試之前我們首先要配置一下你的瀏覽器的安裝路徑，默認HBuilder是檢測不到的
點擊【運行】>>【運行到瀏覽器】>> 【配置web服務器】
?
把瀏覽器的安裝路徑粘貼在里邊即可
然后就能夠調試了
?
?然后我們看一下真機
?
?
手機調試
以安卓手機為例，需要開啟開發者模式才能進行調試，方法如下：
打開【設置】>> 【關于本機】，找到【軟件版本】，連續點擊五次，即可開啟開發者選項
?
開發者選項的開啟和關閉在【設置】 >> 【高級設置】>> 【開發者選項】，如下：
進入打開 【USB調試】，插上數據線連接手機，然后就能真機調試了。中途可能要進行一次授權，點擊確認即可，授權成功后你的手機上會安裝一個HBuilder app，你之后再開發環境中做的所有效果都會渲染到這個app中
?
?
點擊，選擇自己的手機即可調試
?
iphone手機更加簡單，連接手機后直接運行，他會報錯，然后在手機設置一下就行了，步驟如下：
【設置】>> 【通用】>> 【設備管理】,信任一下HBuilder即可。
?
小程序調試：
點擊 【運行】 >> 【運行到小程序模擬器】>> 【運行設置】
?
打開后把微信開發者工具的安裝路徑粘貼多對應的地址欄即可
?
?
需要注意兩點： 1）微信開發者工具必須是官方最新版。 2）微信開發者工具需要授權，方法如下：
打開微信開發者工具，點擊設置圖標
?
選擇【安全】，服務端口選擇開啟
?
然后即可進行微信小程序調試
*百度，支付寶，字節跳動小程序步驟和微信類似
?
?
uni-app項目實戰
我做了一個簡單的demo，項目結構如下：
?
?
我把每個不同的功能分了不同的文件夾，相當于不同的層（每個文件夾里可以根據業務在進行細分）,請求工具我用的uni-app官方的api（uni.request），在此基礎上我進行了簡單的二次封裝，代碼如下：
// uni-app請求封裝export default class Request {http (router,data={},method) {// 基礎地址let path = 'http://mock.allhome.com.cn/mock/5c91b03a2add03001024c420/uni';// 返回promisereturn new Promise((resolve,reject) => {// 請求uni.request({url: `${path}${router}`,data: data,method:method,success: (res) => {// 將結果拋出resolve(res.data)}})}) }
} 這個類接受三個參數，第一個是后端的路由地址，第二個是需要給后端傳的實體，第三個是請求方法，該類返回一個Promise，請求成功后將結果拋出，最后在api.js文件中引用并實例化，代碼如下：
import Request from '../static/js/request.js';
let request = new Request().httpexport default {getJobList: function () {return request('/jobList',{},'GET')}
} 然后就可以在組件里取結果了，代碼如下：
import api from '../../api/api.js';export default {data() {return {listArr: []}},onLoad() {// 請求職位列表api.getJobList().then(res => {this.listArr = res.data})}} ?
?好了，基本的情況就是 這么多，最后是調試結果：
?
?
該項目代碼我已經上傳到了gitlab上：gitlab項目地址?
?
好了，基本的安裝和配置過程就這么多了，接下來的幾個月我會繼續踩坑，期待我后面的博客吧！
?
原文地址：https://www.cnblogs.com/qisi007/p/10489176.html
)
)
