jyj-components 1.0.0 → 1.0.2

package/README.md

@@ -27,6 +27,22 @@ npm install jyj-components
 
 将 `miniprogram_dist` 目录复制到项目中，然后在 `app.json` 中配置相对路径。
 
+##  添加合法域名
+
+1. 小程序账号登录[微信公众平台](https://mp.weixin.qq.com/)
+2. 开发 —> 开发管理 —> 开发设置 —> 服务器域名
+3. 在 `downloadFile合法域名` 中增加如下配置
+
+```
+https://wxgo.cdn.adwke.com
+```
+
+4. 在request合法域名中增加
+
+```
+https://wxgo.adwke.com/
+```
+
 ## 组件使用
 
 ### 1. 横幅广告 (ad-banner)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jyj-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "scripts": {

package/MIGRATION.md

@@ -1,336 +0,0 @@
-# 插件到组件迁移指南
-
-本文档说明了从微信小程序插件到自定义组件的重构过程和主要变更。
-
-## 重构概览
-
-### 原插件结构
-```
-plugin/
-├── index.js              # 插件入口
-├── plugin.json           # 插件配置
-├── request.js            # 请求模块
-├── components/
-│   └── banner/           # 广告组件（包含所有类型）
-└── pages/
-    └── coupon/           # 优惠券页面（Page）
-```
-
-### 新组件结构
-```
-src/
-├── ad-banner/            # 横幅广告组件
-├── ad-interstitial/      # 插屏广告组件
-├── ad-rewarded-video/    # 激励视频组件
-├── ad-splash/            # 开屏广告组件
-├── ad-coupon/            # 优惠券组件（Component）
-├── mixins/
-│   └── ad-base.js        # 公共逻辑
-└── request.js            # 请求模块
-```
-
-## 主要变更
-
-### 1. 组件拆分
-
-**变更前：** 一个 `banner` 组件包含所有广告类型
-```javascript
-// plugin/components/banner/banner.js
-Component({
-  properties: {
-    type: String  // "banner" | "interstitial" | "rewardedVideo" | "splash"
-  }
-});
-```
-
-**变更后：** 拆分为 4 个独立组件
-```javascript
-// src/ad-banner/index.js
-// src/ad-interstitial/index.js
-// src/ad-rewarded-video/index.js
-// src/ad-splash/index.js
-```
-
-**优势：**
-- 代码更清晰，每个组件专注单一功能
-- 按需加载，减少包体积
-- 独立维护，互不影响
-
-### 2. Page 转 Component
-
-**变更前：** coupon 使用 Page() 构造器
-```javascript
-// plugin/pages/coupon/coupon.js
-Page({
-  onLoad(options) {
-    this.setData({ params: options });
-  }
-});
-```
-
-**变更后：** 使用 Component() 构造器
-```javascript
-// src/ad-coupon/index.js
-Component({
-  properties: {
-    secret: String,
-    phone: String,
-    userId: String
-  },
-  lifetimes: {
-    attached() {
-      // 初始化逻辑
-    }
-  }
-});
-```
-
-**使用方式变更：**
-
-插件方式（旧）：
-```xml
-<navigator url="plugin://juyoujia-adv/promotions?secret=xxx">
-  领取优惠券
-</navigator>
-```
-
-组件方式（新）：
-```xml
-<ad-coupon secret="{{secret}}" phone="{{phone}}" userId="{{userId}}" />
-```
-
-### 3. 公共逻辑提取
-
-**变更前：** 公共逻辑分散在各个组件中
-
-**变更后：** 提取到 `mixins/ad-base.js`
-```javascript
-// src/mixins/ad-base.js
-module.exports = {
-  restoreAdState() { /* ... */ },
-  saveAdState() { /* ... */ },
-  loadNextAd() { /* ... */ },
-  report(actionType) { /* ... */ }
-};
-```
-
-**使用方式：**
-```javascript
-const adBase = require('../mixins/ad-base.js');
-
-Component({
-  methods: {
-    ...adBase,
-    // 组件特有方法
-  }
-});
-```
-
-### 4. 路径引用变更
-
-**变更前：** 插件内部使用相对路径
-```javascript
-const { getAds } = require('../../request.js');
-```
-
-**变更后：** 组件使用相对路径
-```javascript
-const { getAds } = require('../request.js');
-```
-
-### 5. 配置文件变更
-
-**变更前：** 需要 `plugin.json`
-```json
-{
-  "publicComponents": {
-    "juyoujia-ad": "components/banner/banner"
-  },
-  "pages": {
-    "promotions": "pages/coupon/coupon"
-  },
-  "main": "index.js"
-}
-```
-
-**变更后：** 不需要特殊配置，直接使用标准组件配置
-```json
-{
-  "component": true,
-  "usingComponents": {}
-}
-```
-
-### 6. 宿主小程序引用方式
-
-**变更前：** 插件引用
-```json
-{
-  "plugins": {
-    "juyoujia-adv": {
-      "version": "1.0.0",
-      "provider": "wxAppId"
-    }
-  },
-  "usingComponents": {
-    "juyoujia-ad": "plugin://juyoujia-adv/juyoujia-ad"
-  }
-}
-```
-
-**变更后：** 普通组件引用
-```json
-{
-  "usingComponents": {
-    "ad-banner": "/components/jyj-components/ad-banner/index",
-    "ad-interstitial": "/components/jyj-components/ad-interstitial/index",
-    "ad-rewarded-video": "/components/jyj-components/ad-rewarded-video/index",
-    "ad-splash": "/components/jyj-components/ad-splash/index",
-    "ad-coupon": "/components/jyj-components/ad-coupon/index"
-  }
-}
-```
-
-## 迁移步骤
-
-### 对于组件开发者
-
-1. **构建组件库**
-```bash
-cd D:\myCode\miniProgram\jyj-components
-npm install
-npm run build
-```
-
-2. **发布到 npm（可选）**
-```bash
-npm publish
-```
-
-### 对于小程序开发者
-
-1. **移除插件配置**
-
-从 `app.json` 中删除：
-```json
-{
-  "plugins": {
-    "juyoujia-adv": { ... }
-  }
-}
-```
-
-2. **安装组件库**
-
-方式 A：npm 安装
-```bash
-npm install jyj-components
-```
-
-方式 B：本地复制
-```bash
-# 复制 miniprogram_dist 到项目的 components 目录
-```
-
-3. **更新组件引用**
-
-```json
-{
-  "usingComponents": {
-    "ad-banner": "jyj-components/ad-banner/index"
-  }
-}
-```
-
-4. **更新代码**
-
-**横幅广告：**
-```xml
-<!-- 旧 -->
-<juyoujia-ad slotId="xxx" type="banner" />
-
-<!-- 新 -->
-<ad-banner slotId="xxx" />
-```
-
-**插屏广告：**
-```xml
-<!-- 旧 -->
-<juyoujia-ad slotId="xxx" type="interstitial" />
-
-<!-- 新 -->
-<ad-interstitial slotId="xxx" isShow="{{show}}" />
-```
-
-**激励视频：**
-```xml
-<!-- 旧 -->
-<juyoujia-ad slotId="xxx" type="rewardedVideo" />
-
-<!-- 新 -->
-<ad-rewarded-video slotId="xxx" isShow="{{show}}" />
-```
-
-**开屏广告：**
-```xml
-<!-- 旧 -->
-<juyoujia-ad slotId="xxx" type="splash" />
-
-<!-- 新 -->
-<ad-splash slotId="xxx" />
-```
-
-**优惠券：**
-```xml
-<!-- 旧 -->
-<navigator url="plugin://juyoujia-adv/promotions?secret=xxx&phone=xxx">
-  领取优惠券
-</navigator>
-
-<!-- 新 -->
-<ad-coupon secret="{{secret}}" phone="{{phone}}" userId="{{userId}}" />
-```
-
-## 兼容性说明
-
-### 保持不变的部分
-
-1. **广告数据格式**：后端接口返回的数据格式保持不变
-2. **slotId**：广告位 ID 保持不变
-3. **事件名称**：`adLoad`、`adError`、`adClose` 等事件名保持不变
-4. **业务逻辑**：广告轮播、状态管理、数据上报逻辑保持不变
-
-### 需要调整的部分
-
-1. **组件名称**：从 `juyoujia-ad` 改为 `ad-banner` 等
-2. **type 属性**：不再需要 `type` 属性，直接使用对应的组件
-3. **优惠券参数传递**：从 URL 参数改为组件属性
-
-## 性能对比
-
-| 指标 | 插件方式 | 组件方式 |
-|------|---------|---------|
-| 包体积 | 所有类型打包在一起 | 按需加载 |
-| 代码可读性 | 大量条件判断 | 清晰独立 |
-| 维护成本 | 修改影响全部 | 独立维护 |
-| 加载速度 | 加载全部代码 | 只加载使用的组件 |
-
-## 常见问题
-
-### Q: 为什么要拆分组件？
-A: 提高代码可读性、可维护性，支持按需加载，减少包体积。
-
-### Q: 旧版插件还能用吗？
-A: 可以，但建议迁移到新版组件，获得更好的性能和维护体验。
-
-### Q: 迁移需要多久？
-A: 对于简单项目，约 30 分钟；复杂项目可能需要 1-2 小时。
-
-### Q: 数据会丢失吗？
-A: 不会，广告展示状态保存在本地存储中，迁移后会自动恢复。
-
-## 技术支持
-
-如有迁移问题，请联系开发团队或查看：
-- [完整文档](./README.md)
-- [快速开始](./QUICKSTART.md)

package/QUICKSTART.md

@@ -1,300 +0,0 @@
-# 快速开始
-
-## 5 分钟上手指南
-
-### 1. 构建组件
-
-```bash
-cd D:\myCode\miniProgram\jyj-components
-npm install
-npm run build
-```
-
-构建完成后，会在项目根目录生成 `miniprogram_dist` 目录。
-
-### 2. 在小程序中引入
-
-#### 方式 A：本地引入（推荐用于开发测试）
-
-将 `miniprogram_dist` 目录复制到你的小程序项目中，例如：
-
-```
-your-miniprogram/
-├── components/
-│   └── jyj-components/  # 复制 miniprogram_dist 到这里并重命名
-├── pages/
-└── app.json
-```
-
-在 `app.json` 中全局注册：
-
-```json
-{
-  "usingComponents": {
-    "ad-banner": "/components/jyj-components/ad-banner/index",
-    "ad-interstitial": "/components/jyj-components/ad-interstitial/index",
-    "ad-rewarded-video": "/components/jyj-components/ad-rewarded-video/index",
-    "ad-splash": "/components/jyj-components/ad-splash/index",
-    "ad-coupon": "/components/jyj-components/ad-coupon/index"
-  }
-}
-```
-
-或在页面 JSON 中单独注册：
-
-```json
-{
-  "usingComponents": {
-    "ad-banner": "/components/jyj-components/ad-banner/index"
-  }
-}
-```
-
-### 3. 使用组件
-
-#### 示例 1：横幅广告
-
-**pages/index/index.wxml**
-```xml
-<view class="container">
-  <text>页面内容</text>
-
-  <!-- 横幅广告 -->
-  <ad-banner
-    slotId="banner-slot-001"
-    bind:adLoad="onBannerLoad"
-    bind:adError="onBannerError"
-  />
-</view>
-```
-
-**pages/index/index.js**
-```javascript
-Page({
-  onBannerLoad(e) {
-    console.log('横幅广告加载成功', e.detail);
-  },
-
-  onBannerError(e) {
-    console.error('横幅广告加载失败', e.detail);
-  }
-});
-```
-
-#### 示例 2：插屏广告
-
-**pages/game/game.wxml**
-```xml
-<view class="container">
-  <button bindtap="showAd">显示插屏广告</button>
-
-  <ad-interstitial
-    slotId="interstitial-slot-001"
-    isShow="{{showInterstitial}}"
-    isDestroy="{{destroyInterstitial}}"
-    bind:adClose="onAdClose"
-  />
-</view>
-```
-
-**pages/game/game.js**
-```javascript
-Page({
-  data: {
-    showInterstitial: false,
-    destroyInterstitial: false
-  },
-
-  showAd() {
-    this.setData({ showInterstitial: true });
-  },
-
-  onAdClose() {
-    this.setData({
-      showInterstitial: false,
-      destroyInterstitial: true
-    });
-  }
-});
-```
-
-#### 示例 3：激励视频
-
-**pages/reward/reward.wxml**
-```xml
-<view class="container">
-  <button bindtap="watchVideo">观看视频获得奖励</button>
-
-  <ad-rewarded-video
-    slotId="video-slot-001"
-    isShow="{{showVideo}}"
-    bind:adFinished="onVideoFinished"
-    bind:adClose="onVideoClose"
-  />
-</view>
-```
-
-**pages/reward/reward.js**
-```javascript
-Page({
-  data: {
-    showVideo: false,
-    coins: 100
-  },
-
-  watchVideo() {
-    this.setData({ showVideo: true });
-  },
-
-  onVideoFinished(e) {
-    if (e.detail.isEnded) {
-      // 用户看完视频，发放奖励
-      this.setData({
-        coins: this.data.coins + 50,
-        showVideo: false
-      });
-      wx.showToast({
-        title: '获得 50 金币',
-        icon: 'success'
-      });
-    }
-  },
-
-  onVideoClose() {
-    this.setData({ showVideo: false });
-  }
-});
-```
-
-#### 示例 4：开屏广告
-
-**app.js 或首页**
-```xml
-<ad-splash
-  slotId="splash-slot-001"
-  bind:adFinished="onSplashFinished"
-/>
-
-<view class="main-content" wx:if="{{!showSplash}}">
-  <!-- 主要内容 -->
-</view>
-```
-
-```javascript
-Page({
-  data: {
-    showSplash: true
-  },
-
-  onSplashFinished() {
-    this.setData({ showSplash: false });
-  }
-});
-```
-
-#### 示例 5：优惠券组件
-
-**pages/coupon/coupon.wxml**
-```xml
-<ad-coupon
-  secret="{{couponSecret}}"
-  phone="{{userPhone}}"
-  userId="{{userId}}"
-/>
-```
-
-**pages/coupon/coupon.js**
-```javascript
-Page({
-  data: {
-    couponSecret: 'secret-key-from-server',
-    userPhone: '13800138000',
-    userId: 'user123'
-  }
-});
-```
-
-### 4. 测试
-
-在微信开发者工具中打开你的小程序项目，即可看到广告组件的效果。
-
-### 5. 常见配置
-
-#### 获取 slotId
-
-联系后端开发人员或管理员获取有效的广告位 ID（slotId）。
-
-#### 广告数据格式
-
-后端接口应返回以下格式的数据：
-
-```json
-{
-  "code": 1,
-  "data": [
-    {
-      "id": "ad001",
-      "source": "wx",
-      "showCount": 3,
-      "banner": {
-        "unitId": "adunit-xxxxxxxx"
-      }
-    },
-    {
-      "id": "ad002",
-      "source": "custom",
-      "showCount": 2,
-      "banner": {
-        "material": "https://example.com/ad.jpg",
-        "appid": "wxAppId",
-        "path": "pages/index/index"
-      }
-    }
-  ]
-}
-```
-
-### 6. 下一步
-
-- 查看 [README.md](./README.md) 了解完整的 API 文档
-- 查看 `tools/demo` 目录中的完整示例
-- 运行 `npm run dev` 启动开发模式，实时预览组件效果
-
-## 故障排除
-
-### 问题：组件不显示
-
-**解决方案：**
-1. 检查 `slotId` 是否正确
-2. 打开调试器查看网络请求是否成功
-3. 确认后端返回的数据格式正确
-
-### 问题：构建失败
-
-**解决方案：**
-```bash
-# 清理并重新安装依赖
-npm run clean
-rm -rf node_modules
-npm install
-npm run build
-```
-
-### 问题：组件路径找不到
-
-**解决方案：**
-确保路径正确，使用绝对路径：
-```json
-{
-  "usingComponents": {
-    "ad-banner": "/components/jyj-components/ad-banner/index"
-  }
-}
-```
-
-## 技术支持
-
-如有问题，请查看：
-- [完整文档](./README.md)
-- [GitHub Issues](https://github.com/your-repo/issues)
-- 联系开发团队