EasyFly-Ads

Appearance

小程序 — 如何接入 ​

本章介绍微信小程序接入 EasyFly-Ads 平台的完整步骤，包括 API 集成、广告接入、金币系统和提现功能。

环境要求 ​

项目要求
微信开发者工具最新稳定版
基础库版本2.10.0+
小程序类目工具 / 游戏 / 资讯等（非个人主体）

注意

个人主体的小程序无法使用广告组件。请确保小程序已通过企业认证。

1. 安装 SDK ​

方式一：NPM（推荐） ​

bash
npm install easyfly-miniapp-sdk

在微信开发者工具中：工具 → 构建 npm。

javascript
// app.js
const EasyFly = require('easyfly-miniapp-sdk')

App({
  onLaunch() {
    EasyFly.init({
      appKey: 'your_miniapp_key',  // EasyFly 后台获取
      debug: false                  // 开发阶段开启 true
    })
  }
})

方式二：手动引入 ​

下载 SDK 文件放入 libs/ 目录：

javascript
const EasyFly = require('./libs/easyfly-miniapp-sdk')

2. 用户登录 ​

javascript
// pages/login/login.js
Page({
  async handleLogin() {
    try {
      // 1. 获取微信登录凭证
      const { code } = await wx.login()
      
      // 2. 调用后端接口换取用户信息
      const res = await wx.request({
        url: 'https://api.yourdomain.com/miniapp/login',
        method: 'POST',
        data: { code }
      })
      
      // 3. 设置用户信息
      EasyFly.setUserInfo({
        userId: res.data.userId,
        token: res.data.token
      })
      
      // 4. 获取用户详细信息
      const userInfo = await EasyFly.getUserInfo()
      console.log('用户信息:', userInfo)
      
    } catch (err) {
      console.error('登录失败:', err)
    }
  }
})

3. 广告接入 ​

激励视频广告 ​

javascript
// pages/reward/reward.js
Page({
  onLoad() {
    // 创建激励视频实例
    this.rewardedVideoAd = EasyFly.createRewardedVideoAd({
      sceneId: 'miniapp_reward_unlock'  // EasyFly 后台配置的场景ID
    })
    
    // 监听事件
    this.rewardedVideoAd.onLoad(() => {
      console.log('广告加载完成')
    })
    
    this.rewardedVideoAd.onClose(res => {
      if (res && res.isEnded) {
        // 播放完成，调用后端发放奖励
        this.handleReward()
      } else {
        wx.showToast({ title: '观看完才能获得奖励', icon: 'none' })
      }
    })
    
    this.rewardedVideoAd.onError(err => {
      console.error('广告错误:', err)
    })
  },
  
  // 展示广告
  showRewardAd() {
    this.rewardedVideoAd.show().catch(() => {
      // 加载失败，重新加载
      this.rewardedVideoAd.load().then(() => this.rewardedVideoAd.show())
    })
  },
  
  // 发放奖励
  async handleReward() {
    try {
      const res = await EasyFly.reward('miniapp_reward_unlock')
      if (res.success) {
        wx.showToast({ title: `获得 ${res.amount} 金币！`, icon: 'success' })
      }
    } catch (err) {
      console.error('奖励发放失败:', err)
    }
  }
})
html
<!-- pages/index/index.wxml -->
<view class="page">
  <!-- 页面内容 -->
  
  <!-- Banner 广告 -->
  <easyfly-banner 
    scene-id="miniapp_banner_home"
    bind:load="onBannerLoad"
    bind:error="onBannerError">
  </easyfly-banner>
</view>
javascript
// pages/index/index.js
Page({
  onBannerLoad(e) {
    console.log('Banner 广告加载成功')
  },
  onBannerError(e) {
    console.error('Banner 广告加载失败:', e.detail)
  }
})

插屏广告 ​

javascript
Page({
  // 在页面返回或切换时展示
  onUnload() {
    EasyFly.showInterstitial('miniapp_inter_page_leave')
      .catch(err => console.log('插屏展示失败:', err))
  }
})

4. 金币系统接入 ​

javascript
// 查看金币余额
const wallet = await EasyFly.getWallet()
console.log('金币:', wallet.coins)
console.log('可提现余额:', wallet.balance)

// 金币明细
const records = await EasyFly.getCoinRecords({
  page: 1,
  pageSize: 20
})

// 兑换现金
const result = await EasyFly.exchangeCoins({
  amount: 10000  // 10000金币 = 1元
})

5. 提现功能接入 ​

提现页面 ​

html
<!-- pages/withdraw/withdraw.wxml -->
<view class="withdraw-page">
  <view class="balance">
    可提现余额：¥{{balance}}
  </view>
  
  <view class="amount-input">
    <text>提现金额：</text>
    <input type="digit" 
           placeholder="最低 ¥0.3" 
           bindinput="onAmountInput" 
           value="{{amount}}" />
  </view>
  
  <view class="methods">
    <radio-group bindchange="onMethodChange">
      <label>
        <radio value="wechat" checked /> 微信零钱
      </label>
      <label>
        <radio value="alipay" /> 支付宝
      </label>
    </radio-group>
  </view>
  
  <button type="primary" bindtap="handleWithdraw">立即提现</button>
</view>
javascript
// pages/withdraw/withdraw.js
Page({
  data: {
    balance: 0,
    amount: '',
    method: 'wechat'
  },
  
  async onLoad() {
    const wallet = await EasyFly.getWallet()
    this.setData({ balance: wallet.balance })
  },
  
  async handleWithdraw() {
    const { amount, method } = this.data
    
    if (!amount || amount < 0.3) {
      wx.showToast({ title: '最低提现金额 0.3 元', icon: 'none' })
      return
    }
    
    try {
      const res = await EasyFly.withdraw({
        amount: parseFloat(amount),
        method: method
      })
      
      wx.showToast({ title: '提现申请已提交', icon: 'success' })
      
      // 刷新余额
      const wallet = await EasyFly.getWallet()
      this.setData({ balance: wallet.balance, amount: '' })
      
    } catch (err) {
      wx.showToast({ title: err.message || '提现失败', icon: 'none' })
    }
  }
})

6. 订阅消息推送 ​

引导用户订阅消息模板，实现收益到账、提现进度等关键消息推送：

javascript
// 订阅消息模板
wx.requestSubscribeMessage({
  tmplIds: ['template_id_1', 'template_id_2'],
  success(res) {
    console.log('订阅结果:', res)
  }
})

详情参考小程序推送介绍。

接入检查清单 ​

  • [ ] SDK 已安装，初始化正常
  • [ ] 用户登录流程完整
  • [ ] 激励视频广告加载和展示正常
  • [ ] 广告展示 → 服务器回调 → 奖励发放链路完整
  • [ ] 金币余额查询正常
  • [ ] 兑换功能正常，汇率正确
  • [ ] 提现功能正常，到账验证通过
  • [ ] 订阅消息授权和推送正常
  • [ ] 小程序审核已通过

常见问题 ​

问题解决方法
广告组件报错确认小程序为非个人主体，且已开通广告
奖励未到账检查服务端回调是否正常接收
提现失败确认微信商户平台配置正确
SDK 初始化失败确认 AppKey 正确，检查网络请求

相关功能 ​