更新记录

1.0.0（2024-09-27） 下载此版本

无

平台兼容性

页面开发规范

• 页面统一放入pages文件夹下
• 页面路径与命名要和中台系统中工作台展示的的分类路径保持一致
  • 例如: 用户模块(一级分类(user)) -> 登录模块(二级分类(loin)) -> 手机号密码登录(login-password)
  • /pages/user/login/login-password.vue
• 一级分类下的页面,用到的私有组件(非公共组件),统一放入页面所属一级分类下的components文件夹下
  • 例如: 手机号密码登录页面用到的第三方登录组件
  • /pages/user/components/wx-auth.vue
• 一级分类下的页面,用到的静态资源(非通用资源),统一放入页面所属一级分类下的static文件夹下,同样static内的目录结构需要和分类下的路径一一对应
  • 例如: 手机号密码登录页用到的logo图标,属于通用资源,其他页面也会用到,所以放入项目根目录下的 static/images 文件下,而背景图是私有的,其他页面用不到,就需要放在 pages/user/static/login/login-password文件夹下
  • 页面内的data定义的变量,props传递的参数,methods内的方法需要写明注释
  • 开发完页面至少要保证APP端和小程序端的兼容性
  • 小程序胶囊按钮适配
  • iphoneX底部适配
  • ...

组件开发规范

• 公共组件统一放入components文件夹下
• 组件中使用的静态资源统一放入static文件夹下
• 组件中一定要写说明文档,包含作者,说明,接收参数,使用示例等,具体参考fu-button组件

编码规范

• 变量
  • 使用驼峰命名法
  • 所有变量都应有注释,多态变量要有详细说明
  • example

    data(){
    return {
    id: '896', // 商品ID,数据从哪来,数据类型
    type: 0, // 0: 普通商品 1: 秒杀商品 2: 拼团商品
    }
    }

• 常量
  • 全部大写
  • 使用下划线链接
• 方法
  • 使用驼峰命名
  • 每个方法都应有注释,使用文档注释类型,复杂函数内部须有逻辑判断注释,详细说明处理步骤
  • example

    
    methods: {
    /**
    * @description 测试函数,演示代码注释规范
    * @param {string} type = 测试类型
    * @param {string} id = 测试ID

  • • */ test(type,id){ /**
    • @description 根据类型做不同操作
    • @param {string} type = 测试类型
    • */ switch(type){ case 0: // 未付款状态 // 允许 取消订单操作 // 允许 去支付操作 // 修改支付按钮显示状态 this.showBtn = true; break; case 1: // 已付款状态 // 允许 申请售后操作 // 允许 提醒发货操作 break; case 2: // 已发货状态 // 允许 申请售后操作 // 允许 确认售后操作 break; } }, }

目的: 补充模板页面, 统一代码规范, 统一页面开发标准

工作台使用: 贡献页面 下载页面 下载代码包

代码规范: 见上方

新版打包模式改动

1. 以页面为单位进行资源管理,一个文件夹下包含页面文件,组件文件,资源文件,例如:

   pages
   tab
   home
     home
       index.vue // 页面文件 (名称固定为index.vue) (必选)
       // api.js // 接口文件 (暂不修改)
       // lang.js // 语言包文件 (暂不修改)
       components // 页面依赖组件(基础包内置的不需要放在这里) (非必选)
         advert
           advert.vue // 广告位组件
       static // 页面依赖的静态资源文件,没有可不创建此文件夹(非必选)
         a.png

2. 跳转路径的改变,原有的跳转路径 pages/tab/home/home 改为 pages/tab/home/home/index
3. 图片资源路径的改变 @/static/home/home/a.png 改为 ./static/a.png
4. 由于组件挪到了页面下单独管理,因此页面需要手动引入依赖的组件,之前的自动引入只对公共组件生效,例如

   <template>
   <view>
   <navigator url="/pages/tab/home/home/index" type="switchTab"></navigator>
   <image src="./static/a.png"></image>
   <fu-advert></fu-advert>
   </view>
   </template>

   
   import FuAdvert from './components/fu-advert/fu-advert.vue';
   export default {
   components: {
   FuAdvert,
   },
   }