uniapp项目基础模板使用指南

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内容
• 如有其他好的想法请留言联系