uni-app實(shí)現(xiàn)了一套代碼，同時(shí)運(yùn)行到多個(gè)平臺(tái)。支持iOS模擬器、Android模擬器、H5、微信開發(fā)者工具、支付寶小程序Studio、百度開發(fā)者工具、字節(jié)跳動(dòng)開發(fā)者工具

工具安裝

開發(fā)uni-app需要安裝HBuilder X.下載地址。

下載成功后直接解壓即可

簡單的配置一下開發(fā)偏好：

創(chuàng)建第一個(gè)uni-app

點(diǎn)擊左上角【文件】>>【新建】>>【項(xiàng)目】，選擇uni-app模板。

uni-app目錄結(jié)構(gòu)

目錄結(jié)構(gòu)基本和小程序的目錄結(jié)構(gòu)相似，只是多了個(gè)基礎(chǔ)組件的文件夾；

uni-app有自己的插件庫，直接點(diǎn)擊安裝即可，而且，它也支持npm包管理，點(diǎn)擊【工具】>> 【插件安裝】即可配置

好了，基本的安裝工作就是這么多，下面我們看一下如何調(diào)試

調(diào)試

瀏覽器

uni-app支持多個(gè)端同時(shí)調(diào)試，這也是它最便捷的地方，首先看一下瀏覽器端的調(diào)試：

調(diào)試之前我們首先要配置一下你的瀏覽器的安裝路徑，默認(rèn)HBuilder是檢測(cè)不到的

點(diǎn)擊【運(yùn)行】>>【運(yùn)行到瀏覽器】>> 【配置web服務(wù)器】

把瀏覽器的安裝路徑粘貼在里邊即可

然后就能夠調(diào)試了

然后我們看一下真機(jī)

手機(jī)調(diào)試

以安卓手機(jī)為例，需要開啟開發(fā)者模式才能進(jìn)行調(diào)試，方法如下：

打開【設(shè)置】>> 【關(guān)于本機(jī)】，找到【軟件版本】，連續(xù)點(diǎn)擊五次，即可開啟開發(fā)者選項(xiàng)

開發(fā)者選項(xiàng)的開啟和關(guān)閉在【設(shè)置】 >> 【高級(jí)設(shè)置】>> 【開發(fā)者選項(xiàng)】，如下：

進(jìn)入打開 【USB調(diào)試】，插上數(shù)據(jù)線連接手機(jī)，然后就能真機(jī)調(diào)試了。中途可能要進(jìn)行一次授權(quán)，點(diǎn)擊確認(rèn)即可，授權(quán)成功后你的手機(jī)上會(huì)安裝一個(gè)HBuilder app，你之后再開發(fā)環(huán)境中做的所有效果都會(huì)渲染到這個(gè)app中

點(diǎn)擊，選擇自己的手機(jī)即可調(diào)試

iphone手機(jī)更加簡單，連接手機(jī)后直接運(yùn)行，他會(huì)報(bào)錯(cuò)，然后在手機(jī)設(shè)置一下就行了，步驟如下：

【設(shè)置】>> 【通用】>> 【設(shè)備管理】,信任一下HBuilder即可。

小程序調(diào)試：

點(diǎn)擊 【運(yùn)行】 >> 【運(yùn)行到小程序模擬器】>> 【運(yùn)行設(shè)置】

打開后把微信開發(fā)者工具的安裝路徑粘貼多對(duì)應(yīng)的地址欄即可

需要注意兩點(diǎn)： 1）微信開發(fā)者工具必須是官方最新版。 2）微信開發(fā)者工具需要授權(quán)，方法如下：

打開微信開發(fā)者工具，點(diǎn)擊設(shè)置圖標(biāo)

選擇【安全】，服務(wù)端口選擇開啟

然后即可進(jìn)行微信小程序調(diào)試

*百度，支付寶，字節(jié)跳動(dòng)小程序步驟和微信類似

uni-app項(xiàng)目實(shí)戰(zhàn)

我做了一個(gè)簡單的demo，項(xiàng)目結(jié)構(gòu)如下：

我把每個(gè)不同的功能分了不同的文件夾，相當(dāng)于不同的層（每個(gè)文件夾里可以根據(jù)業(yè)務(wù)在進(jìn)行細(xì)分）,請(qǐng)求工具我用的uni-app官方的api（uni.request），在此基礎(chǔ)上我進(jìn)行了簡單的二次封裝，代碼如下：

// uni-app請(qǐng)求封裝

export default class Request {
 http (router,data={},method) {
  // 基礎(chǔ)地址
  let path = 'http://mock.allhome.com.cn/mock/5c91b03a2add03001024c420/uni';
  // 返回promise
  return new Promise((resolve,reject) => {
   // 請(qǐng)求
   uni.request({
    url: `${path}${router}`,
    data: data,
    method:method,
    success: (res) => {
     // 將結(jié)果拋出
     resolve(res.data)
    }
   })
  }) 
 }
}

這個(gè)類接受三個(gè)參數(shù)，第一個(gè)是后端的路由地址，第二個(gè)是需要給后端傳的實(shí)體，第三個(gè)是請(qǐng)求方法，該類返回一個(gè)Promise，請(qǐng)求成功后將結(jié)果拋出，最后在api.js文件中引用并實(shí)例化，代碼如下：

import Request from '../static/js/request.js';
let request = new Request().http

export default {
 getJobList: function () {
  return request('/jobList',{},'GET')
 }
}

然后就可以在組件里取結(jié)果了，代碼如下：

import api from '../../api/api.js';

export default {
  data() {
   return {
    listArr: []
   }
  },
  onLoad() {
   // 請(qǐng)求職位列表
   api.getJobList().then(res => {
    this.listArr = res.data
   })
  }
 }

好了，基本的情況就是 這么多，最后是調(diào)試結(jié)果：

該項(xiàng)目代碼我已經(jīng)上傳到了gitlab上：gitlab項(xiàng)目地址

好了，基本的安裝和配置過程就這么多了，接下來的幾個(gè)月我會(huì)繼續(xù)踩坑，期待我后面的博客吧！

到此這篇關(guān)于uni-app從安裝到卸載的入門教程的文章就介紹到這了,更多相關(guān)uni-app 安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論