微信小程序和抖音小程序的分享和广告接入代码

最新推荐文章于 2025-05-29 19:11:03 发布

互联网时光机

最新推荐文章于 2025-05-29 19:11:03 发布

阅读量2.7k

点赞数 29

CC 4.0 BY-SA版权

分类专栏：小游戏开发文章标签：小程序微信小程序游戏程序

本文链接：https://blog.csdn.net/li060708/article/details/142728373

开发完成小程序或者小游戏之后，我们为什么要接入分享和广告视频功能，主要原因有以下几个方面。

微信小程序和抖音小程序接入分享和广告功能主要基于以下几个原因：

用户获取与增长：分享功能可以帮助用户将小程序内容传播给更多人，从而扩大用户基础。通过社交网络的分享，能够吸引更多潜在用户使用小程序。
增强用户互动：分享功能可以提升用户之间的互动，增加用户粘性。用户在分享内容时，往往会带来新的使用场景和体验，这样可以促进用户的积极参与。
商业变现：广告功能为小程序提供了一种商业变现的方式。通过广告，开发者可以获得收入，从而支持小程序的持续运营与发展。

目前大部分小程序和小游戏都是靠广告变现，所以接入广告的代码是所有开发者必不可少的环节了，下面给大家讲解一下如何加入分享和广告接入的代码。

文章最后整合了一个工具类,有需要的朋友可以直接复制使用.

微信小程序

分享功能

在页面逻辑中设置分享:

在小程序的页面代码中，使用 onShareAppMessage 函数设置分享内容：


Page({  
  onShareAppMessage: function () {  
    return {  
      title: '分享标题',  
      path: '/pages/example/example?id=123',  
      imageUrl: '/images/share.png' // 可选  
    };  
  }  
});

2. 用户触发分享:

可以在页面中添加一个分享按钮，使用 wx.showShareMenu 显示分享菜单：


wx.showShareMenu({  
  withShareTicket: true // 可选，是否使用带分享票据的分享  
});

广告接入

1，接入广告组件:
- 在小程序的页面中引入广告组件，例如 banner 广告：
- ```
<ad unit-id="你的广告位ID" />
```
  由于广告目前是各大平台的主要收入来源，所以微信和抖音都是花了很大的力气让开发者尽可能地简单接入广告代码。就这样一句代码，加到你的小程序里面，他就会源源不断地输送广告。
- 输送的广告完全是依靠大数据，你喜欢看什么，就给你推什么广告。

2，初始化广告:

在对应的 JavaScript 文件中，您可以监控广告加载事件：


const adInstance = wx.createBannerAd({  
  adUnitId: '你的广告位ID',  
  style: {  
    left: 0,  
    top: 0,  
    width: 300  
  }  
});  

adInstance.onLoad(() => {  
  console.log('广告加载成功');  
});  

adInstance.onError((err) => {  
  console.error('广告加载失败', err);  
});

抖音小程序

分享功能

在页面中设置分享行为:

在页面的 JS 文件中，使用 onShareAppMessage：


Page({  
  onShareAppMessage: function () {  
    return {  
      title: '抖音小程序分享',   
      path: '/pages/example/example?id=123',  
    };  
  }  
});

2.主动分享:

通过按钮或其他触发事件调用 my.share 方法：


my.share({  
  title: '分享标题',  
  url: '分享链接',  
  success: (result) => {  
    console.log(result);  
  },  
  fail: (error) => {  
    console.error(error);  
  }  
});

广告接入

引入广告组件:

在页面的 HTML 代码中添加广告组件：
```
<ad unit-id="你的广告位ID" />
```
广告初始化和监控:

通过 JavaScript 控制广告的加载和监控

const ad = my.createBannerAd({  
  adUnitId: '你的广告位ID',  
  style: {  
    top: 0,  
    left: 0,  
    width: '100%',  
  },  
});  

ad.onLoad(() => {  
  console.log('广告加载成功');  
});  

ad.onError((err) => {  
  console.error('广告加载失败', err);  
});

虽然看起来非常简单,但是实际上开发起来还是不方便,所以我写了一套完整的小游戏开发的工具类,满足了各大平台的要求.包括登录,分享,插屏广告,激励广告,banner广告,抖音侧边栏功能.

/**
 * 小游戏平台SDK工具封装，目前只支持微信和抖音平台
 */
export namespace MiniGameSdk {

    interface ISize {
        width: number;
        height: number;
    }

    export interface IPosition {
        top: number;
        left: number;
    }

    export function isWechat(): boolean {
        //@ts-ignore
        return window.wx !== null && window.wx !== undefined;
    }

    export function isBytedance(): boolean {
        //@ts-ignore
        return window.tt !== null && window.tt !== undefined;
    }

    // 支付宝平台
    export function isAli(): boolean {
        //@ts-ignore
        return window.my !== null && window.my !== undefined;
    }

    function getSysWinSize(): ISize {
        let sys: any;
        if (isWechat()) {
            // @ts-ignore
            sys = wx.getSystemInfoSync();
        } else if (isBytedance()) {
            // @ts-ignore
            sys = tt.getSystemInfoSync();
        }

        let size: ISize = { width: 0, height: 0 };
        if (sys) {
            size.width = sys.windowWidth;
            size.height = sys.windowHeight;
        }

        return size;
    }

    /**
     * 插屏广告。微信抖音都支持！
     */
    class ADInterstitial {
        private _adUid: string;
        private _interstitial: any;

        get aduid() {
            return this._adUid;
        }

        constructor(adUid: string) {
            this._adUid = adUid;
        }

        show() {
            // @ts-ignore
            if (isWechat() && !wx.createInterstitialAd) {
                console.warn('wechat unsupport interstitial AD!');
                this._interstitial = null;
                return;
            }

            // @ts-ignore
            if (isBytedance() && !tt.createInterstitialAd) {
                console.warn('bytedance unsupport interstitial AD!');
                this._interstitial = null;
                return;
            }


            if (this._interstitial) {
                this._interstitial.load();
            } else {
                if (isWechat()) {
                    // @ts-ignore
                    this._interstitial = wx.createInterstitialAd({ adUnitId: this._adUid });
                } else if (isBytedance()) {
                    // @ts-ignore
                    this._interstitial = tt.createInterstitialAd({ adUnitId: this._adUid });
                } else {
                    this._interstitial = null;
                }

                this._interstitial?.onLoad(() => {
                    console.log('load interstitial ad success');
                    this._interstitial.show().catch((err: any) => {
                        console.log('catch interstitial ad error:', err);
                    });
                });

                this._interstitial?.onError((err: any) => {
                    console.log('interstitial ad on error:', err);
                });
            }
        }
        destory() {
            this._interstitial?.destroy();
        }
    }

    class ADBanner {
        private _adUid: string;
        private _banner: any;

        get aduid() {
            return this._adUid;
        }

        /**
         * 抖音和微信都支持
         * 横幅广告。预估宽度默认为300，预估高度为140。如果你不确定就按默认值来。
         * @param adUid 广告UID，后端配置
         * @param isTop 是否在屏幕顶部展示。内部会自动居中计算位置。
         * @param bannerWidth 横幅广告的预估宽度。默认300
         * @param autoShow 广告加载完成后是否立刻显示，默认为不显示
         */
        constructor(adUid: string, param: boolean | IPosition, bannerWidth: number = 300, autoShow: boolean = false) {
            this._adUid = adUid;
            this.create(autoShow, bannerWidth, param); // 默认300比较合适
        }

        private create(autoShow: boolean, bannerWidth: number, param: boolean | IPosition) {
            if (!isWechat() && !isBytedance()) {
                this._banner = null;
                return;
            }

            this.destroy();

            let winSize = getSysWinSize();

            let height = bannerWidth * 0.4;
            let top = 0, left = 0;

            if (typeof param === "boolean") {
                left = (winSize.width - bannerWidth) / 2
                top = param ? 5 : (winSize.height - height);
            } else {
                left = param.left;
                top = param.top;
            }

            let params