美文网首页Egret游戏开发
Egret微信小游戏转发、分享等功能实现

Egret微信小游戏转发、分享等功能实现

作者: 韩梅梅梅梅 | 来源:发表于2018-09-03 10:11 被阅读474次

    https://mp.weixin.qq.com/s/fFR0nSNRE33LRp9IF_-IZg

    今天我们分享的菜鸟教程文档将介绍开发微信小游戏四种常用功能的实现方法,期望能和开发者朋友们交流,非常欢迎大家给我们留言反馈。

    这四种功能分别是:

    • 获取头像功能

    • 微信转发功能

    • 微信分享功能

    • 游戏圈

    在Egret Wing和微信开发者工具里的配置

    为实现以上四个功能,我们需要分别在Egret Wing(图1,图2)和微信开发者工具(图3)里配置。

    image

    图1 图2 图3

    1. 需要在Platform.ts里调用platform.js接口。

    2. 在Main.ts通过Platform.ts调用执行函数 。

    3. 在 platform.js写相对应的逻辑代码。

    以上三点是实现四个微信小游戏功能的通用配置,具体操作如下:

    获取头像

    用户登录,可以获取用户自己的头像,参看微信平台。

    Egret Wing,已经在Platform.ts写了默认功能,微信开发者工具已经写了默认逻辑,开发者只需要在Main添加代码在Egret Wing—>src—>Main.ts添加以下代码

    1. private async runGame() {

    2. const userInfo = await platform.getUserInfo();

    3. this.createGameScene(userInfo);

    4. }

    5. protected createGameScene(userInfo:any): void {

    6. // 用户头像

    7. let img=new eui.Image();

    8. img.source=userInfo.avatarUrl

    9. this.addChild(img);

    10. }

    </pre>

    微信小游戏转发功能

    微信小游戏转发功能通过点击微信小游戏右上角按钮来触发小游戏的内置转发效果,达到转发给朋友的效果。

    1. 在Egret Wing—>src—>Platform.ts添加以下代码

    1. declare interface Platform {

    2. shop():Promise<any>;

    3. }

    4. class DebugPlatform implements Platform {

    5. async shop() {}

    6. }

    </pre>

    2. 在Egret Wing—>src—>Main.ts添加以下代码

    1. private async runGame() {

    2. platform.shop();

    3. }

    </pre>

    3. 在微信开发者工具里Platform.ts添加以下代码

    微信转发主要使用了wx.showShareMenu()和wx.onShareAppMessage()方法,具体参数可参看微信开发平台

    1. class WxgamePlatform {

    2. shop() {

    3. return new Promise((resolve, reject) => {

    4. wx.showShareMenu({

    5. withShareTicket: true

    6. });

    7. wx.onShareAppMessage(function () {

    8. return {

    9. title: "+++",

    10. imageUrl: 'resource/assets/art/heros_goods/btnOK.png'

    11. }

    12. })

    13. })

    14. }

    15. openDataContext = new WxgameOpenDataContext();

    16. }

    </pre>

    微信小游戏分享功能

    除了转发功能,我们也可以在微信小游戏内自定义一个按钮,主动分享给朋友。

    1. 在Egret Wing—>src—>Platform.ts添加以下代码

    1. declare interface Platform {

    2. shareAppMessage():Promise<any>;

    3. }

    4. class DebugPlatform implements Platform {

    5. async shareAppMessage(){}

    6. }

    </pre>

    2. 在Egret wing—>src—>Main.ts添加以下代码

    1. protected createGameScene(): void {

    2. //游戏内自定义分享按钮

    3. let btnClose = new eui.Button();

    4. btnClose.label = "分享";

    5. btnClose.y = 300;

    6. btnClose.horizontalCenter =180;

    7. this.addChild(btnClose);

    8. btnClose.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{

    9. platform.shareAppMessage()

    10. }, this)

    11. }

    </pre>

    3. 在微信开发者工具里Platform.ts添加以下代码

    微信分享主要使用了shareAppMessage()方法,具体参数可参看微信开发平台

    1. class WxgamePlatform {

    2. shareAppMessage() {

    3. return new Promise((resolve, reject) => {

    4. wx.shareAppMessage({

    5. title: '转发标题',

    6. imageUrl: 'resource/assets/art/heros_goods/btnOK.png'

    7. })

    8. })

    9. }

    10. openDataContext = new WxgameOpenDataContext();

    11. }

    </pre>

    游戏圈

    微信游戏圈,在这里和好友交流游戏心得。1. 在Egret Wing—>src—>Platform.ts添加以下代码

    1. declare interface Platform {

    2. createGameClubButton():Promise<any>;

    3. }

    4. class DebugPlatform implements Platform {

    5. async createGameClubButton(){}

    6. }

    </pre>

    2. 在Egret Wing—>src—>Main.ts添加以下代码

    1. private async runGame() {

    2. platform.createGameClubButton();

    3. }

    </pre>

    3. 在微信开发者工具里platform.js添加以下代码 使用方法createGameClubButton().查看参看微信平台 。

    1. class WxgamePlatform {

    2. wx.createGameClubButton({

    3. icon: 'green',

    4. style: {

    5. left: 200,

    6. top: 626,

    7. width: 40,

    8. height: 40

    9. }

    10. })

    11. openDataContext = new WxgameOpenDataContext();

    12. }

    </pre>

    相关文章

      网友评论

        本文标题:Egret微信小游戏转发、分享等功能实现

        本文链接:https://www.haomeiwen.com/subject/gshbwftx.html