通用框架介紹
目錄介紹
src
api 編寫接口請求方法目錄
common 公共樣式目錄
components-global 全局組件目錄厦酬，可以通過js 喚起組件
locale 國際化目錄
mix 抽象 page 和 功能組件公共方法和屬性的目錄
mock 網(wǎng)絡(luò)請求 mock 目錄 在此可以模擬接口請求返回等
pages 項目頁面
static 文件資源 圖片 資源等存放目錄
store Vuex 編寫目錄
utils 網(wǎng)絡(luò)請求 插件等工具方法目錄
App.vue 全局 app
main.js 入口文件
manifest.json 應(yīng)用配置 https://uniapp.dcloud.net.cn/collocation/manifest.html#
pages.json 頁面注冊文件 也可以稱之為路由文件
插件
借助Vue 原型鏈的方式架专，全局掛在一些函數(shù)
-
$util
目錄：src/utils/util/index
在這里可以編寫通用插件方法渤昌，例如時間處理，路由處理等等, 非業(yè)務(wù)相關(guān)的方法。
使用方式：
this.$util.[function name](options)
// navTo 路由跳轉(zhuǎn)方法
this.$util.navTo({
url: 'pages/target/index', // 目標路由地址
params: { // 添加到URL后的參數(shù)
a:1,
b:2
}
});
// 等效于： 'pages/target/index?a=1&b=2'
// 獲取url 參數(shù)
const { a, b } = this.$util.getParams(); // a = 1 b = 2
const a = this.$util.getParams('a'); // a = 1
const b = this.$util.getParams('b'); // b = 2
-
$b
目錄：src/utils/business/index
可以編寫業(yè)務(wù)方法豹休，例如處理一些通用復(fù)雜業(yè)務(wù)
-
$r
目錄：src/utils/global/index
全局組件的編寫，可以通過 $r.toast(options) 全局彈出唯一的 提示框
目前有 Toast Modal 兩種全局組件
this.$r.toast(options)
this.$r.modal(options)
具體 options 內(nèi)容參考 uView-Toast uView-Modal
具體使用方式：
<button @click="() => {
$r.toast({
message: '這是提示'桨吊，// 提示的內(nèi)容
type: 'success', // 提示的類型
})
}">
打開Toast
</button>
function test () {
this.$r.toast({
message: '這是提示'威根，// 提示的內(nèi)容
type: 'success', // 提示的類型
})
}
國際化
方便項目切換語言
方案： 前端項目掛載 后端提供的script 腳本 用來請求后端語言包數(shù)據(jù)，并掛在到 window 變量下视乐，方便業(yè)務(wù)自行編輯語言包內(nèi)容
目錄
-locale
├─ lang
| ├─en
| | └─index.js
| |
| ├─tw
| | └─index.js
| |
| └─index.js
|
├─ uni-app.en.json
|
├─ uni-app.tw.json
-
自定義自帶組件國際化內(nèi)容
uni-app.[language].json
locale/uni-app.語言地區(qū)代碼.json洛搀，如：uni-app.en.json，uni-app.tw.json
可以替換 uni-app 框架內(nèi)部組件的一些詞條
例如：{ "common": { "uni.app.quit": "再按一次退出應(yīng)用", "uni.async.error": "連接服務(wù)器超時佑淀，點擊屏幕重試", "uni.showActionSheet.cancel": "取消", "uni.showToast.unpaired": "請注意 showToast 與 hideToast 必須配對使用", "uni.showLoading.unpaired": "請注意 showLoading 與 hideLoading 必須配對使用", "uni.showModal.cancel": "取消", "uni.showModal.confirm": "確定", "uni.chooseImage.cancel": "取消", "uni.chooseImage.sourceType.album": "從相冊選擇", "uni.chooseImage.sourceType.camera": "拍攝", "uni.chooseVideo.cancel": "取消", "uni.chooseVideo.sourceType.album": "從相冊選擇", "uni.chooseVideo.sourceType.camera": "拍攝", "uni.previewImage.cancel": "取消", "uni.previewImage.button.save": "保存圖像", "uni.previewImage.save.success": "保存圖像到相冊成功", "uni.previewImage.save.fail": "保存圖像到相冊失敗", "uni.setClipboardData.success": "內(nèi)容已復(fù)制", "uni.scanCode.title": "掃碼", "uni.scanCode.album": "相冊", "uni.scanCode.fail": "識別失敗", "uni.scanCode.flash.on": "輕觸照亮", "uni.scanCode.flash.off": "輕觸關(guān)閉", "uni.startSoterAuthentication.authContent": "指紋識別中...", "uni.picker.done": "完成", "uni.picker.cancel": "取消", "uni.video.danmu": "彈幕", "uni.video.volume": "音量", "uni.button.feedback.title": "問題反饋", "uni.button.feedback.send": "發(fā)送" }, "ios": {}, "android": {} } -
自定義業(yè)務(wù)詞條
lang 目錄下 根據(jù)項目需求 創(chuàng)建對應(yīng)的語言包 例如 英文:en; 簡體 tw
在對應(yīng)語言包下的 index.js 文件內(nèi) 注冊具體的詞條條目
例如：// src/locale/lang/en/index.js { ...SYS_LABEL.en, // 也可以在本地添加自定義內(nèi)容 test: { name: 'this is test' } } // src/locale/lang/tw/index.js { ...SYS_LABEL.tw, // 也可以在本地添加自定義內(nèi)容 test: { name: '這是測試' } }SYS_LABEL 為后端掛在到 window 上的 語言對象
（針對于一些選項的國際化 可以參加源碼中的 SYS_DICT ） -
創(chuàng)建并注冊i18n 對象
- 創(chuàng)建
// src/locale/lang/index.js import Vue from 'vue' import VueI18n from 'vue-i18n' import TW from './tw' import EN from './en' Vue.use(VueI18n) const messages = { TW: { ...TW }, EN: { ... EN }, } const i18n = new VueI18n({ locale: localStorage.getItem('lang') || 'TW', messages, silentTranslationWarn: true }) Vue.prototype._i18n = i18n export default i18n- 注冊
// src/main.js import i18n from './locale/lang' const app = Vue({ i18n, ... other options }) -
使用i18n
<span>{{ $t('test.name') }}</span> const name = this.$t('test.name') -
切換語言
切換語言的方法已封裝在插件 $util 中,詳情見 src/utils/util/index.js switchLan 方法
$util.switchLan('en', $vm) this.$util.switchLan('en', this)
網(wǎng)絡(luò)請求
-
request
目錄 src/utils/http/request.js -
api
按照模塊創(chuàng)建api 目錄 定義對應(yīng)模塊的接口api留美，在需要使用的地方 導(dǎo)入對應(yīng)模塊的接口方法
目錄 src/api/xxx/index.js xxx 對應(yīng)模塊名 例如： user 模塊的接口全部定義在 src/api/user/index.js 中 import request from '@utils/http/request' export async function getUserInfo(data){ return request({ url: `/api/user/userInfo`, data, method: 'GET' }) } export async function xxx(){ ... } -
mock
模擬接口請求，項目初期沒有接口的時候伸刃，可以約定返回規(guī)范和數(shù)據(jù)谎砾，進行快速開發(fā) （框架中已集成對應(yīng)功能 按照要求創(chuàng)建目錄即可）
目錄 src/mock/index.js mock 入口文件 (無需修改) src/mock/xxx/index.js 對應(yīng)xxx模塊的模擬文件，在里面去編寫接口請求的url 方法 還有返回內(nèi)容mock 入口文件 會按照對應(yīng)的規(guī)則掃描所有 src/mock 目錄下的index.js 文件 所以 所有的api 編寫應(yīng)該寫在 index.js 文件中
了解更多 Mock
