項目：XX項目-H5
開發(fā)環(huán)境
node版本
node > 12 【eg. 例如開發(fā)電腦node = 16.14.0】
程序啟動
npm run dev:h5
程序打包
npm run build:h5
框架
- uniapp官網(wǎng)暴构，使用Vue3/Vite版 https://uniapp.dcloud.net.cn/quickstart-cli.html
npx degit dcloudio/uni-preset-vue#vite theme-manage-fe-h5 - 參考配置【安裝ts擴展、配置環(huán)境變量嚷量、統(tǒng)一代碼規(guī)范prettier、安裝 eslint逆趣、安裝 husky規(guī)范git提交蝶溶、安裝配置 pina配置持久化、uniapp 攔截器和http封裝】
參考鏈接：https://www.cnblogs.com/weizwz/p/17952042
1）配置環(huán)境變量宣渗，添加.env,.env.development,.env.development抖所，開發(fā)者可以按照項目需要使用，這個可以是非必須的
2）安裝pina提示版本依賴不兼容的錯誤痕囱，要注意安裝版本田轧，否則啟動頁面也出不來，會報錯鞍恢。
安裝版本如下：npm i pinia@2.0.33 pinia-plugin-persistedstate --legacy-peer-deps
3）uniapp 攔截器封裝的請求頭傻粘，需要按照項目需要修改，當(dāng)前只是一個參考示例帮掉。
4）安裝 husky報錯弦悉，會檢查是否 有 .git，沒有要先運行g(shù)it init旭寿，npx husky-init 才會成功警绩。安裝這個的前提是電腦有安裝git，且git環(huán)境變量有正確配置盅称，運行 git --version 會出現(xiàn)相對應(yīng)的版本肩祥。 - 安裝uview-plus后室，使用npm方式配置文檔 https://uiadmin.net/uview-plus/components/install.html
1）安裝sass-loader，注意需要版本10混狠，否則可能會導(dǎo)致vue與sass的兼容問題而報錯 - 引入svg矢量圖 https://www.jb51.net/javascript/305915tdi.htm
使用參考：<svg-icon name="search"></svg-icon>
矢量圖標(biāo)列表：/components/SvgIcon/index-example - 建議使用頻率較高的注冊為全局組件岸霹，look components/index.ts
- husky配置是讓開發(fā)者在git push的之前eslint -t代碼，由于該配置使用一直提交不成功将饺，手動eslint也沒報錯贡避，因此把這個husky配置又卸載和刪除了。但是要強調(diào)開發(fā)者在開發(fā)的時候予弧，提交代碼前刮吧，最好手動eslint下再提交。
- 添加/bin/zip,使用build:h5-zip打包掖蛤，便于上傳到自動發(fā)布平臺杀捻。
目錄
economic-project-h5/src
│ App.vue
│ main.ts
│ README.md
├─assets 靜態(tài)文件，圖片蚓庭，字體致讥，多媒體，樣式等
├─css 樣式文件
├─icon svg
└─images 圖片
├─components 組件 (見組件目錄)
├─api 接口請求
├─store 存儲類
├─utils 工具類
└─pages 頁面
├─sheet 主題庫模塊
├─index 動態(tài)表單-管理
├─detail 動態(tài)表單-詳情
└─list 動態(tài)表單-列表
├─login 登錄頁面
├─welcome 登錄頁面
└─test 開發(fā)者測試頁面
組件
| 文件 | 名稱 | 參考代碼(如何使用) | 展示效果 |
|---|---|---|---|
| com-head | 公共頭部 | /pages/sheet/index.vue | ---------- |
| svg-icon | 矢量圖標(biāo) | /components/SvgIcon/index-example.vue | ---------- |
| com-select | 下拉框 | /pages/sheet/list/list-search | ---------- |
| com-tree | 樹形數(shù)據(jù)顯示 | 無 | ---------- |
| da-tree | 插件市場樹形控件 | /components/com-select-tree/index.vue | ---------- |
| com-select-tree | 下拉樹形單選 | /components/com-select-tree/index.vue | ---------- |
注意事項
1器赞、從門戶跳轉(zhuǎn)過來垢袱，url上有兩個參數(shù)一個是ticket，一個是要顯示頁面港柜。參考示例如下：
http://10.10.11.18:34103/video/#/caslogin?ticket=ST-171-P1NpIon1E9OaeQsXAPrs-cas01.example.org&entranceUrl=home
2请契、子系統(tǒng)嵌入APP相關(guān)代碼
1）頂部菜單欄背景 background: #5181fb;
2）核心代碼
<pre>
<code>
const onBack = () => {
const pages = getCurrentPages();
if (pages.length === 1 && window.plus) {
const webview = plus.webview.currentWebview();
webview.close();
} else {
uni.navigateBack();
}
};
</code>
</pre>
3、uview-plus官網(wǎng)沒有tree的夏醉，去dcloud官網(wǎng)下載組件/components/da-tree/*,具體可以看其目錄下的readme文檔姚糊。
4、uview-plus官網(wǎng)的時間表單有問題授舟，mode=time時不能正確顯示值，mode=date時贸辈，返回的是時間戳和現(xiàn)實的不一致释树，顯示不能清空，實際上值是清空了的擎淤，在手機上看的時候奢啥，居然先彈出來的鍵盤面板，要關(guān)掉才能顯示時間選擇面板嘴拢。
