前端二次开发指南

面向 uniapp 前端开发者：页面规范、api.js 封装、三端兼容与公共样式。

1. 页面骨架（必须以公共样式的主题类包裹）

<template>
  <view class="user" :class="[AppStyle, ThemeClass]">
    <!-- 页面内容 -->
  </view>
</template>

• 根节点必须带 [AppStyle, ThemeClass]：AppStyle 是换肤 class（simple-red…），ThemeClass 是黑夜模式 class。
• 禁止在页面内写 <style>：新样式一律进 static/base.css。
• 颜色用主题变量：var(--theme-bg-card)、var(--theme-text-main)、var(--theme-text-sub)、var(--theme-border)。

2. 接口封装（utils/api.js）

myNewApi: function () {
  return API_URL + 'typechoXxx/myNewApi';
},

• 统一 functionName(){ return API_URL + 'path'; } 形式，供文档生成器识别。
• 调用：that.$Net.request({ url: that.$API.myNewApi(), data: {...}, ... }) 或 that.http.$post(that.api.xxx(), Qs.stringify(data))。

3. 三端（H5 / APP / 小程序）兼容

• 页面顶部导航高度差异用条件编译：

// #ifdef APP-PLUS || MP
that.NavBar = this.CustomBar;
// #endif

• 外链/下载必须分端处理（参考 pages/soft/info.vue 的 openDownload）：

// #ifdef APP-PLUS
plus.runtime.openURL(url);            // APP 拉起系统浏览器
// #endif
// #ifdef H5
window.open(url, '_blank');           // H5 新窗口
// #endif
// #ifdef MP
uni.setClipboardData({ data: url });  // 小程序复制链接
// #endif

• 小程序的坑：:key 不能字符串拼接表达式；vuex 在部分平台注入时机不同（用 mixin 安全取值，见 main.js AppStyle 兼容写法）。

4. 页面生命周期

• 列表页：onShow 刷新 + onPullDownRefresh 下拉 + onReachBottom 触底加载。
• 详情页：onLoad 取参数（res.softId 等）→ onShow 拉数据。
• 返回：统一 back() 判断 getCurrentPages().length。

5. 多端主题适配（黑夜模式）

• 所有新样式必须以 var(--theme-*) 呈现，禁止硬编码 #fff/#000/#f3f3f3。
• 新增弹窗：遮罩用半透明黑 rgba(0,0,0,.5) + z-index 避开 loading（9999）层级。
• 手风琴/卡片底色用 var(--theme-bg-card)。

6. 双端同步（Rro ↔ X）

• 新页面先在 RuleAppRro 完成并验收。
• 同步到 RuleAppX 时处理差异：Vue2 this.$set → Vue3 可直接赋值；:key 严格化；卸载钩子 beforeDestroy → beforeUnmount。
• 同步后执行一次全局 diff（文件名/结构比对）。