公司需要在內(nèi)網(wǎng)的情況下，也可以訪(fǎng)問(wèn)手機(jī)端，H5就是最佳的選擇了。于是，我選擇了用uniapp來(lái)開(kāi)發(fā)這個(gè)H5，結(jié)果，遇到無(wú)數(shù)的坑，廢話(huà)不多說(shuō)，我們來(lái)時(shí)進(jìn)入主題吧

說(shuō)明
初次使用UIAPP這個(gè)框架的時(shí)候，發(fā)現(xiàn)這個(gè)編輯軟件貌似不太穩(wěn)定，如果，大家碰到一些沒(méi)有代碼問(wèn)題，缺顯示錯(cuò)誤或無(wú)法顯示，這個(gè)時(shí)候需要關(guān)閉軟件并且重啟，可能就好了。但是，也有碰到那種明明剛才好好的，可能是配置的時(shí)候添加了一些東西，導(dǎo)致顯示錯(cuò)亂，可能重啟也效果，這個(gè)時(shí)候需要新建一個(gè)項(xiàng)目，把就項(xiàng)目的東西針對(duì)性的copy過(guò)去。這些都是我爬過(guò)無(wú)數(shù)的坑，得出來(lái)的 "經(jīng)驗(yàn)"

先看下項(xiàng)目的架構(gòu)

項(xiàng)目結(jié)構(gòu)目錄.png

環(huán)境配置

因?yàn)?，公司目前還沒(méi)有正規(guī)的測(cè)試環(huán)境，所以，我就搭配了一個(gè)開(kāi)發(fā)環(huán)境與生成環(huán)境，測(cè)試環(huán)境同理
1、開(kāi)發(fā)環(huán)境 .env.development

測(cè)試環(huán)境.png

2、生成環(huán)境 .env.production

生成環(huán)境.png

跨域配置 vue.config.js

跨域配置.png

服務(wù)配置 service

const baseURL =  process.env.NODE_ENV === 'production' ? window.httpUrl : process.env.VUE_APP_BASE_API

function requestPromise (method, api, data, header = {
    'content-type': 'application/json' // 默認(rèn)值
}) {
    return new Promise((resolve, reject) => {
        console.log(baseURL, method, api, data, header)
        uni.request({
            url: baseURL+api, //僅為示例，并非真實(shí)接口地址。
            data: data,
            method: method,
            header: header,
            success: (res) => {
                console.log(res.data)
                uni.hideLoading()
                let data = res.data, code = res.data.code, msg = res.data.msg
                if (!code) {
                    resolve(data)
                } else {
                    uni.showLoading({
                        title: msg
                    })
                }
            },
            fail: (res) => {
                console.log(res)
            }
        })
    })
}

export const get_  = (api, data = null, header = null) => {
    console.log(api, data, header)
    return requestPromise('GET', api, data, header)
}

export function post_ (api, data = null, header = null){
    return requestPromise('post', api, data, header)
}

api配置

import {get_, post_} from '@/service/request.js';

// 上傳圖片, 個(gè)人
export function uploadCanvasImage (jid, grqz, data) {
    let url = `xxxxxxxxxxxxxx&jid=${jid}&&grqz=${grqz}`
    console.log(url, data)
    return get_(url, data)
}

這里我使用的是導(dǎo)航欄自定義的用法，自己新建一個(gè)導(dǎo)航在這里不展開(kāi)細(xì)說(shuō)了，官網(wǎng)上有詳細(xì)的介紹

為什么我會(huì)選擇用cli來(lái)新建項(xiàng)目的呢？因?yàn)?，我覺(jué)得這個(gè)cli新建的項(xiàng)目雖然比軟件新建的項(xiàng)目復(fù)雜不少，但是，它的靈活性是軟件新建項(xiàng)目無(wú)法比擬的。
各位配置好了之后，可以啟動(dòng)一個(gè)界面看下效果，如果，有什么問(wèn)題的小伙伴，歡迎點(diǎn)贊并評(píng)論區(qū)留言，一起討論共同進(jìn)步