Egret白鷺開發微信小游戲分享功能

今天給大家分享一下微信分享轉發功能，話不多說，直接干

方法一：

1.在egret中打開Platfrom.ts文件，添加代碼如下（當然，你也可以直接復制粘貼）

/** 
 * 平台數據接口。
 * 由於每款游戲通常需要發布到多個平台上，所以提取出一個統一的接口用於開發者獲取平台數據信息
 * 推薦開發者通過這種方式封裝平台邏輯，以保證整體結構的穩定
 * 由於不同平台的接口形式各有不同，白鷺推薦開發者將所有接口封裝為基於 Promise 的異步形式
 */
declare interface Platform {

    getUserInfo(): Promise<any>;

    login(): Promise<any>;
        //轉發菜單
    showShareMenu(): Promise<any>;

}

class DebugPlatform implements Platform {
    async getUserInfo() {
        return { nickName: "username" }
    }
    async login() {
    }
        //被動分享
    async showShareMenu() {
    }
    
}
if (!window.platform) {
    window.platform = new DebugPlatform();
}
declare let platform: Platform;

declare interface Window {

    platform: Platform
}

2.在Main.ts中調用Platfrom.ts新增加的方法

    private async runGame() {
        await this.loadResource()
        this.createGameScene();
        // const result = await RES.getResAsync("description_json")
        // this.startAnimation(result);
        await platform.login();
        const userInfo = await platform.getUserInfo();
        console.log(userInfo);
        await platform.showShareMenu();
    }

 3.打包成微信小游戲

4.使用微信開發者工具打開微信小游戲項目，打開platfrom.js,添加代碼

  showShareMenu() {
    return new Promise((resolve, reject) => {
      wx.showShareMenu({
        withShareTicket: true
      })
      wx.onShareAppMessage(function callback(res){
        return {
          title: '被動分享',
          imageUrl: "resource/assets/bg.jpg",
          success: (res) => {
            console.log("轉發成功", res);
          },
          fail: (res) => {
            console.log("轉發失敗", res)
          },
        }
      })
    })
  }
shareAppMessage() {
    return new Promise((resolve, reject) => { wx.shareAppMessage({ title: '主動分享', imageUrl: "http://www.9665.com/uploadfile/2017/0717/20170717043846826.png", query: "a=1&b=2&c=3&d=4", success: (res) => { console.log("轉發成功", res); resolve(res); }, fail: (err) => { console.log("轉發失敗", err) reject(err); }, }) }) }

參數可根據實際情況寫。

其他分享API同理，API及參數詳見https://developers.weixin.qq.com/minigame/dev/document/share/wx.getShareInfo.html

platform.js主動分享代碼：

注意：主動分享功能可能在微信開發工具上不體現，因此，博主建議在手機上預覽。

下面介紹一個分享成功后顯示傳入參數的方法

在打開微信開發工具，在game.js中添加代碼如下：

wx.onShow((option) => {
  console.log(option);
})

 

 在手機上預覽，進行被動轉發，從分享鏈接打開分享的小游戲，在控制台可以查看到傳入的參數如下：

 方法二：

（1）添加微信ts庫文件,並放在egret指定位置（沒有的朋友可以點擊右側加群下載）：

（2）在egret中新建腳本，並添加分享方法，效果如下：

class WxShare {
    /**
     * 設置默認分享
     */
    public static setDefaultShare() {
        console.log('set_default_share');
        wx.showShareMenu({
            withShareTicket: true,
            success: (res) => { console.log('setting_success'); console.log(res); },
            fail: (err) => { console.warn(err) }
        });
        wx.onShareAppMessage(function () {
            return {
                title: GameConfig.getShareTitle() || '',
                imageUrl: GameConfig.getShareImg() || ''
            }
        });
    }

    /**
     *主動分享
     */
    public static async shareGame(type?: string, title?: string, imageUrl?: string) {
        // 不傳type時，默認為普通分享
        type || (type = 'normalShare');
        // 不傳title時，為默認title
        title || (title = GameConfig.getShareTitle());
        // 不傳imageUrl時，為默認image
        imageUrl || (imageUrl = GameConfig.getShareImg());

        return new Promise((resolve, reject) => {
            wx.shareAppMessage({
                title: title,
                imageUrl: imageUrl,
                query: "a=1&b=2",
                success: res => {
                    resolve(res);
                    console.log('主動分享成功');
                },
                fail: (err) => { resolve(null); }
            })
        })
    }
}

（3）在main.ts中調用被動分享：

// 設置默認分享
WxShare.setDefaultShare();

（4）自定義主動分享按鈕，添加監聽事件（綠框里面的內容可根據實際情況填寫）：

 （5）在main.ts的返回前台時進行主動分享的輸出，以獲取分享成功時主動分享方法傳出的query參數：

注意：在這個時候，你如果直接粘貼代碼或許會出現下面錯誤：

這個時候我們的解決辦法是跳轉到onShow函數，去為這個函數添加一個形參，如res等。