uni-app—從安裝到卸載

uni-app實現了一套代碼，同時運行到多個平臺。支持iOS模擬器、Android模擬器、H五、微信開發者工具、支付寶小程序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';
        // 返回promise
        return 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().http



export 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項目地址 

 

好了，基本的安裝和配置過程就這麼多了，接下來的幾個月我會繼續踩坑，期待我後面的博客吧！

 

原文地址：http://www.javashuo.com/article/p-wsyghjbi-cu.html