微信小游戏如何自己插入广告

这里以官方生成的飞机大战的小游戏为例子
假设我们要实现下图中这样的广告位

先看一下微信给的这个小游戏的文档结构，这个banner.js就绘制广告位的代码

1.新建绘制广告要的js文件（以下称为banner.js）

import Sprite from '../base/sprite'
import DataBus from '../databus'

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

// 玩家相关常量设置
const PLAYER_IMG_SRC = 'images/banner.png'//设置要的广告图img
const PLAYER_WIDTH = screenWidth - 80//设置img宽度
const PLAYER_HEIGHT = 80//设置img高度

let databus = new DataBus()

export default class Player extends Sprite {
  constructor() {
    super(PLAYER_IMG_SRC, PLAYER_WIDTH, PLAYER_HEIGHT)
    /**广告开始按钮区域方便简易判断按钮点击 */
    var area = {
      startX:40,
      startY: screenHeight - 80,
      endX: screenWidth - 40,
      endY: screenHeight 
    }
    // 广告默认处于屏幕底部居中位置
    this.x = screenWidth / 2 - this.width / 2
    this.y = screenHeight - this.height
    var that=this;
    wx.onTouchStart(function (e) {
      var x=e.touches[0].clientX//数组第一个是按下点的横坐标
      var y=e.touches[0].clientY//数组第一个是按下点的纵坐标
      // console.log(x,y)
      if (x >= area.startX
        && x <= area.endX
        && y >= area.startY
        && y <= area.endY){
          console.log('点中广告')
          that.jump()//跳转到其它小程序或小游戏
      }
    })

  }

//跳转的小程序信息配置
  jump(){
    console.log(11111)
    wx.navigateToMiniProgram({
      appId: '这里写小程序的id',
      path:'这里写要跳转到的指定界面',
      extraData: {},
      envVersion: 'release',
      success(res) {
        // 打开成功

      }
    })
  }

}

2.然后我们需要 main.js 引入这个我们新建的 banner.js，并在main.js里面引用

import banner from './runtime/banner'

分别在main.js的游戏主函数内声明

和绘制的地方引入就可以了

最后保存运行就可以了，但要跳转到其它小程序或者小游戏下的话需要绑定哦