uni-app開(kāi)發(fā)小程序：項(xiàng)目架構(gòu)以及經(jīng)驗(yàn)分享

2022年的時(shí)候，公司為了快速完成產(chǎn)品并上線，所以選用微信小程序?yàn)檩d體；由于后期還是打算開(kāi)發(fā)App；雖然公司有ios和Android，但是如果能一套代碼打包多端，一定程度上可以解決成本；前端技術(shù)棧也是vue，在考察選擇了uni-app。后來(lái)多個(gè)小程序項(xiàng)目都采用了uni-app開(kāi)發(fā)，積累了一定的經(jīng)驗(yàn)以及封裝了較多業(yè)務(wù)組件，這里就分享一下uni-app項(xiàng)目的整體架構(gòu)、常用方法封裝以及注意事項(xiàng)。全文代碼都會(huì)放到github，先贊后看，年入百萬(wàn)！

創(chuàng)建項(xiàng)目

uni-app提供了兩種創(chuàng)建項(xiàng)目的方式：

• 1.通過(guò)HBuilderX可視化工具創(chuàng)建
• 2.通過(guò)vue-cli命令創(chuàng)建

??需要注意的是，一定要根據(jù)項(xiàng)目需求來(lái)選擇項(xiàng)目的創(chuàng)建方式；如果只是單獨(dú)的開(kāi)發(fā)小程序或App，且開(kāi)發(fā)環(huán)境單一，可以使用HBuilderX可視化工具創(chuàng)建。如果多端開(kāi)發(fā)，以及同一套代碼可能會(huì)打包生成多個(gè)小程序建議使用vue-cli進(jìn)行創(chuàng)建，不然后期想搞自動(dòng)化構(gòu)建以及按指定條件進(jìn)行編譯比較痛苦。關(guān)于按條件編譯，文章后面會(huì)有詳細(xì)說(shuō)明。

使用vue-cli安裝和運(yùn)行比較簡(jiǎn)單：

1.全局安裝 vue-cli

js復(fù)制代碼npm install -g @vue/cli

2.創(chuàng)建uni-app

js復(fù)制代碼vue create -p dcloudio/uni-preset-vue 項(xiàng)目名稱(chēng)

3.進(jìn)入項(xiàng)目文件夾

js復(fù)制代碼cd 項(xiàng)目名稱(chēng)

4.運(yùn)行項(xiàng)目，如果是已微信小程序?yàn)橹?，可以在package.json中的命令改為：

json復(fù)制代碼"scripts": {
    "serve": "npm run dev:mp-weixin"
}

然后執(zhí)行

js復(fù)制代碼npm run serve

使用cli創(chuàng)建項(xiàng)目默認(rèn)不帶css預(yù)編譯，需要手動(dòng)安裝一下，這里已sass為例：

js復(fù)制代碼npm i sass --save-dev
npm i sass-loader --save-dev

整體項(xiàng)目架構(gòu)

通過(guò)HBuilderX或者vue-cli創(chuàng)建的項(xiàng)目，目錄結(jié)構(gòu)有稍許不同，但基本沒(méi)什么差異，這里就按vue-cli創(chuàng)建的項(xiàng)目為例，整體架構(gòu)配置如下：

tree復(fù)制代碼    ├──dist 編譯后的文件路徑
    ├──package.json 配置項(xiàng)
	├──src 核心內(nèi)容
        ├──api 項(xiàng)目接口
        ├──components 全局公共組件
        ├──config 項(xiàng)目配置文件
        ├──pages 主包
        ├──static 全局靜態(tài)資源
        ├──store vuex
        ├──mixins 全局混入
        ├──utils 公共方法
        ├──App.vue 應(yīng)用配置，配置App全局樣式以及監(jiān)聽(tīng)
        ├──main.js Vue初始化入口文件
        ├──manifest.json 配置應(yīng)用名稱(chēng)、appid等打包信息
        ├──pages.json 配置頁(yè)面路由、導(dǎo)航條、選項(xiàng)卡等頁(yè)面類(lèi)信息
        └──uni.scss 全局樣式

封裝方法

工欲善其事，必先利其器。在開(kāi)發(fā)之前，我們可以把一些全局通用的方法進(jìn)行封裝，以及把uni-app提供的api進(jìn)行二次封裝，方便使用。全局的公共方法我們都會(huì)放到/src/utils文件夾下。

封裝常用方法

下面這些方法都放在/src/utils/utils.js中，文章末尾會(huì)提供github鏈接方便查看。如果項(xiàng)目較大，建議把方法根據(jù)功能定義不同的js文件。

小程序Toast提示

js復(fù)制代碼/**
 * 提示方法
 * @param {String} title 提示文字
 * @param {String}  icon icon圖片
 * @param {Number}  duration 提示時(shí)間
 */
export function toast(title, icon = 'none', duration = 1500) {
    if(title) {
        uni.showToast({
            title,
            icon,
            duration
        })
    }
}

緩存操作（設(shè)置/獲取/刪除/清空）

js復(fù)制代碼/**
 * 緩存操作
 * @param {String} val
 */
export function setStorageSync(key, data) {
    uni.setStorageSync(key, data)
}

export function getStorageSync(key) {
    return uni.getStorageSync(key)
}

export function removeStorageSync(key) {
    return uni.removeStorageSync(key)
}

export function clearStorageSync() {
    return uni.clearStorageSync()
}

頁(yè)面跳轉(zhuǎn)

js復(fù)制代碼/**
 * 頁(yè)面跳轉(zhuǎn)
 * @param {'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab' | 'navigateBack' | number } url  轉(zhuǎn)跳路徑
 * @param {String} params 跳轉(zhuǎn)時(shí)攜帶的參數(shù)
 * @param {String} type 轉(zhuǎn)跳方式
 **/
export function useRouter(url, params = {}, type = 'navigateTo') {
    try {
        if (Object.keys(params).length) url = `${url}?data=${encodeURIComponent(JSON.stringify(params))}`
        if (type === 'navigateBack') {
            uni[type]({ delta: url })
        } else {
            uni[type]({ url })
        }
    } catch (error) {
        console.error(error)
    }
}

圖片預(yù)覽

js復(fù)制代碼/**
 * 預(yù)覽圖片
 * @param {Array} urls 圖片鏈接
 */
export function previewImage(urls, itemList = ['發(fā)送給朋友', '保存圖片', '收藏']) {
    uni.previewImage({
        urls,
        longPressActions: {
            itemList,
            fail: function (error) {
                console.error(error,'===previewImage')
            }
        }
    })
}

圖片下載

js復(fù)制代碼/**
 * 保存圖片到本地
 * @param {String} filePath 圖片臨時(shí)路徑
 **/
export function saveImage(filePath) {
    if (!filePath) return false
    uni.saveImageToPhotosAlbum({
        filePath,
        success: (res) => {
            toast('圖片保存成功', 'success')
        },
        fail: (err) => {
            if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
                uni.showModal({
                    title: '提示',
                    content: '需要您授權(quán)保存相冊(cè)',
                    showCancel: false,
                    success: (modalSuccess) => {
                        uni.openSetting({
                            success(settingdata) {
                                if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                    uni.showModal({
                                        title: '提示',
                                        content: '獲取權(quán)限成功,再次點(diǎn)擊圖片即可保存',
                                        showCancel: false
                                    })
                                } else {
                                    uni.showModal({
                                        title: '提示',
                                        content: '獲取權(quán)限失敗，將無(wú)法保存到相冊(cè)哦~',
                                        showCancel: false
                                    })
                                }
                            },
                            fail(failData) {
                                console.log('failData', failData)
                            }
                        })
                    }
                })
            }
        }
    })
}

更多函數(shù)就不在文章中展示了，已經(jīng)放到/src/utils/utils,js里面，具體可以到github查看。

請(qǐng)求封裝

為了減少在頁(yè)面中的請(qǐng)求代碼，所以我們要對(duì)uni-app提供的請(qǐng)求方式進(jìn)行二次封裝，在/src/utils文件夾下建立request.js，具體代碼如下：

js復(fù)制代碼
import {toast, clearStorageSync, getStorageSync, useRouter} from './utils'
import {BASE_URL} from '@/config/index'

const baseRequest = async (url, method, data, loading = true) =>{
	header.token = getStorageSync('token') || ''
	return new Promise((reslove, reject) => {
	loading && uni.showLoading({title: 'loading'})
        uni.request({
                url: BASE_URL + url,
                method: method || 'GET',
                header: header,
                timeout: 10000,
                data: data || {},
                success: (successData) => {
                    const res = successData.data
                    uni.hideLoading()
                    if(successData.statusCode == 200){
                            if(res.resultCode == 'PA-G998'){
                                    clearStorageSync()
                                    useRouter('/pages/login/index', 'reLaunch')
                            }else{
                                    reslove(res.data)
                            }
                    }else{
                            toast('網(wǎng)絡(luò)連接失敗，請(qǐng)稍后重試')
                            reject(res)
                    }
                },
                fail: (msg) => {
                    uni.hideLoading()
                    toast('網(wǎng)絡(luò)連接失敗，請(qǐng)稍后重試')
                    reject(msg)
                }
        })
    })
}

const request = {};

['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
	request[method] = (api, data, loading) => baseRequest(api, method, data, loading)
})

export default request

請(qǐng)求封裝好以后，我們?cè)?src/api文件夾下按業(yè)務(wù)模塊建立對(duì)應(yīng)的api文件，拿獲取用戶信息接口舉例子：

在/src/api文件夾下建立user.js，然后引入request.js

js復(fù)制代碼import request from '@/utils/request'

//個(gè)人信息
export const info = data => request.post('/v1/api/info', data)

在頁(yè)面中直接使用：

js復(fù)制代碼import {info} from '@/api/user.js'

export default {
    methods: {
        async getUserinfo() {
            let info = await info()
            console.log('用戶信息==', info)
        }
    }
}

版本切換

很多場(chǎng)景下，需要根據(jù)不同的環(huán)境去切換不同的請(qǐng)求域名、APPID等字段，這時(shí)候就需要通過(guò)環(huán)境變量來(lái)進(jìn)行區(qū)分。下面案例我們就分為三個(gè)環(huán)境：開(kāi)發(fā)環(huán)境(dev)、測(cè)試環(huán)境(test)、生產(chǎn)環(huán)境(prod)。

建立env文件

在項(xiàng)目根目錄建立下面三個(gè)文件并寫(xiě)入內(nèi)容(常量名要以VUE開(kāi)頭命名)：

.env.dev(開(kāi)發(fā)環(huán)境)

ini復(fù)制代碼VUE_APP_MODE=build
VUE_APP_ID=wxbb53ae105735a06b
VUE_APP_BASE=https://www.baidu.dev.com

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

ini復(fù)制代碼VUE_APP_MODE=build
VUE_APP_ID=wxbb53ae105735a06c
VUE_APP_BASE=https://www.baidu.test.com

.env.prod(生產(chǎn)環(huán)境)

ini復(fù)制代碼VUE_APP_MODE=wxbb53ae105735a06d
VUE_APP_ID=prod
VUE_APP_BASE=https://www.baidu.prod.com

修改package.json文件

json復(fù)制代碼"scripts": {
    "dev:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode dev",
    "build:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode prod"
},

然后執(zhí)行

js復(fù)制代碼npm run dev:mp-weixin

在/src/pages/index/index.vue下，打印：

js復(fù)制代碼onLoad() {
    console.log(process.env.VUE_APP_MODE, '====VUE_APP_BASE')
    console.log(process.env.VUE_APP_BASE, '====VUE_APP_BASE')
},

此時(shí)輸出結(jié)果就是

js復(fù)制代碼dev ====VUE_APP_BASE
https://www.baidu.dev.com ====VUE_APP_BASE

動(dòng)態(tài)修改appid

如果同一套代碼，需要打包生成多個(gè)小程序，就需要?jiǎng)討B(tài)修改appid了；文章開(kāi)頭說(shuō)過(guò)appid在/src/manifest.json文件中配置，但json文件又不能直接寫(xiě)變量，這時(shí)候就可以參考官方 提出的解決方案：建立vue.config.js文件，具體操作如下。

在根目錄下建立vue.config.js文件寫(xiě)入以下內(nèi)容：

js復(fù)制代碼// 讀取 manifest.json ，修改后重新寫(xiě)入
const fs = require('fs')

const manifestPath = './src/manifest.json'
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' })
function replaceManifest(path, value) {
  const arr = path.split('.')
  const len = arr.length
  const lastItem = arr[len - 1]

  let i = 0
  let ManifestArr = Manifest.split(/\n/)

  for (let index = 0; index < ManifestArr.length; index++) {
    const item = ManifestArr[index]
    if (new RegExp(`"${arr[i]}"`).test(item)) ++i
    if (i === len) {
      const hasComma = /,/.test(item)
      ManifestArr[index] = item.replace(
        new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`),
        `"${lastItem}": ${value}${hasComma ? ',' : ''}`
      )
      break
    }
  }

  Manifest = ManifestArr.join('\n')
}
// 讀取環(huán)境變量?jī)?nèi)容
replaceManifest('mp-weixin.appid', `"${process.env.VUE_APP_ID}"`)

fs.writeFileSync(manifestPath, Manifest, {
  flag: 'w'
})

結(jié)尾

關(guān)于uni-app項(xiàng)目的起步工作就到這里了，后面有機(jī)會(huì)寫(xiě)一套完整的uni搭建電商小程序項(xiàng)目，記得關(guān)注。代碼已經(jīng)提交到github，如果對(duì)你有幫助，記得點(diǎn)個(gè)star!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-696583.html

到了這里，關(guān)于uni-app開(kāi)發(fā)小程序：項(xiàng)目架構(gòu)以及經(jīng)驗(yàn)分享的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！