uniapp項目基礎模板使用指南
該方案通用與基於vue的web開發，不局限於app
- 內容描述：
- 1：項目目錄說明
- 2：頁面組織方式
- 3：全局api及vuex，及部分全局api說明
- 4: 開發中如何使用theme及css組織方式說明
- 項目目錄說明
-
common - 用於存放靜態css，css theme文件，非全局js文件
components - 用於存放自定義/外部組件
global - 用於存放全局api，vuex，page配置等全局內容
pages - 頁面
static - 所有靜態文件，如圖片，音頻，文字等
-
- 頁面組織方式
-
問題：uniapp默認pages.json無法模塊化，和nvue頁面刷新無法熱加載
方案：社區方案 - https://ext.dcloud.net.cn/plugin?id=1602。
基本使用說明：
1. 在pages.js設置主頁
2. 新建頁面不需要勾選底部在pages.json注冊，直接在global/pages/modules/index.js中進行注冊即可
-
- 全局api及vuex
-
問題：使用common設置api無法方便進行全局調用，nvue不支持原型掛載
解決方案：自動掛載至vuex中進行全局調用
基本使用說明：
1.在global/common中定義api或者變量
2.頁面中：this.$store.xxxx
3.vuex使用與官網一致
-
- 預設全局api說明
-
1.getBox - 默認type = 1， 1用於獲取高度style子串，2用於獲取寬度與高度相等的style字串，else用於獲取計算的px數值，公式模仿npro計算公式
2.getColor - 需傳顏色class，會根據主題進行后綴添加，返回class數組
3.getIcon - 預設選用了ant design icon，具體icon表請查看 iconfont
4.to - 用於跳轉頁面
- 如何使用theme及css組織方式說明
-
1.css說明
如果需要修改scss內容請轉換為普通css內容再放入，以免影響提示功能，而除了main主題外其他主題已給出范例，不需要轉css，因為不需要這部分提示
free.scss - 基礎庫一般不允許修改，這次改進了free.scss內容，保證了多端一致性
common.scss - 用於存放非顏色的項目css class
theme/theme.scss - 用於引入主題
theme/main.scss - 默認主題
theme/xxxx.scss - 其他主題，如dark.scss
2.theme使用
在main.scss中定義 .a {}
在dark.scss中定義 .a_dark {}
vue中使用getColor('a')獲取class即可
-
- 感謝您的閱讀，如果有誤，或者其他問題，請回復
- 如使用本預設項目，請認真查看free.scss內容
- 如有其他好的想法請留言聯系