微信小程序实现邀请好友组队功能
battle.wxml

<!--pages/battle/battle.wxml-->
<!-- 对战页面 -->
<view class='whole'>
  <image class='backImage' src='../../resources/img/battle/background.png'></image>
  <!-- 个人信息 -->
  <view class="userinfo">
    <cover-image class="userinfo-avatar" src="{{userInfoAimageurl}}"></cover-image>
    <cover-text class="userinfo-nickname">{{userInfoAnickname}}</cover-text>
  </view>
  <!-- 好友信息（如果有则显示，没有则显示邀请按钮)-->
 <!--<view class="friendinfo" wx:if="false">
    <cover-image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></cover-image>
    <cover-text class="userinfo-nickname">{{userInfo.nickName}}</cover-text>
  </view>--> 
  <!-- 邀请按钮-->
  <view class="share" wx:if="{{yaoqing}}">
    <button  open-type='share' class='sharebutton'>
      <image style='width:100%;height:100%;z-index:9998;' src="http://ucardstorevideo.b0.upaiyun.com/perfectCP/share.svg"></image>   
    </button>
    <cover-text class="userinfo-nickname">邀请</cover-text>
  </view>
  <view class="userinfoB" wx:if="{{usershow}}">
    <cover-image class="userinfo-avatar" src="{{userInfoBimageurl}}"></cover-image>
    <cover-text class="userinfo-nickname">{{userInfoBnickname}}</cover-text>
  </view>  
  <view class='start' wx:if="{{start}}">
       <cover-image  class='startbutton'  src="../../resources/img/battle/start.png" bindtap='toLevel'></cover-image>
  </view>
</view>

battle.js

// pages/battle/battle.js

//获取应用实例
const app = getApp()

Page({

    /**
     * 页面的初始数据
     */
    data: {
        userInfo: {},//当前用户信息
        cpId: 0,
        userAInfo: {},//用户信息
        userBInfo: {},//好友信息
        yaoqing: true,//邀请按钮
        start: false,//开始按钮
        usershow: false,//用户B是否显示
        userInfoAnickname: "",
        userInfoAimageurl: "",
        userInfoBimageurl: "",
        userInfoBnickname: "",
        Loadingtime: '',//定时器
        flag: false
    },

    /**
     * 
     * 生命周期函数--监听页面加载
     */
    onLoad(opt) {

        const that = this
        this.setData({
            cpId: opt.cpId,
        })
        console.log(this.data.cpId + "battle页面获取到的cpId")
        //获取到个人信息
        if (app.globalData.userInfo) {
            this.setData({
                //userInfo: app.globalData.userInfo,
                userInfoAnickname: app.globalData.userInfo.nickName,
                userInfoAimageurl: app.globalData.userInfo.avatarUrl,
            })
            console.log(111)
        }
        console.log(this.data.userInfo)

        //根据scene判断是否为邀请者还是被邀请者。1为邀请者，2为被邀请者。
        if (opt.scene == 2) {//如果为2，则表示该页面来自转发
            wx.request({//后台根据cpId和用户B的个人信息找出对应cp表的所有信息，如果用户B没有对应的cpId，则将其加入到此cpId所在的信息中。并把对应的userBstatus变为1表示在线。
                url: getApp().data.url + 'battle.htm',
                method: 'POST',
                data: {
                    cpId: this.data.cpId,
                    userBnickname: app.globalData.userInfo.nickName,
                    userBimageurl: app.globalData.userInfo.avatarUrl,
                },
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                success: function (res) {
                    console.log(res.data);
                    console.log(res.data[0].wxuser.imageurl);
                    console.log(res.data[0].wxuser.nickname);
                    that.setData({
                        userInfoAnickname: res.data[0].wxuser.nickname,
                        userInfoAimageurl: res.data[0].wxuser.imageurl,
                        userInfoBimageurl: res.data[0].wxuserB.imageurl,
                        userInfoBnickname: res.data[0].wxuserB.nickname,
                        yaoqing: false,
                        start: true,
                        usershow: true
                    })

                }
            })
        }

        wx.showShareMenu({
            withShareTicket: true,
            success: function (res) {
                // 分享成功
                console.log('shareMenu share success')
                console.log('分享' + res)
            },
            fail: function (res) {
                // 分享失败
                console.log(res)
            }
        })
        that.setData({
            Loadingtime: setInterval(function () {
                console.log("循环执行代码" + that.data.cpId)//循环执行代码
                if (!that.data.flag) {
                    wx.request({
                        url: getApp().data.url + 'share.htm',
                        method: 'POST',
                        data: {
                            cpId: that.data.cpId
                        },
                        header: {
                            'content-type': 'application/x-www-form-urlencoded'
                        },
                        success: function (res) {
                            console.log(res.data + "邀请成功的回调");
                            that.setData({
                                userInfoAnickname: res.data[0].wxuser.nickname,
                                userInfoAimageurl: res.data[0].wxuser.imageurl,
                                userInfoBimageurl: res.data[0].wxuserB.imageurl,
                                userInfoBnickname: res.data[0].wxuserB.nickname,
                                yaoqing: false,
                                start: true,
                                usershow: true,
                                flag: true
                            })
                        }
                    })
                }

            }, 2000)
        })

    },

    /*onUnload: function () {
      clearInterval(this.data.Loadingtime)
    },
    onHide: function () {
      clearInterval(this.data.Loadingtime)
    },*/

    onShareAppMessage: function (res) {
        const that = this
        console.log('this.data', this.data.cpId)
        if (res.from === 'button') {
            // 来自页面内转发按钮
            console.log(res.target)
        }
        return {
            title: '一起加入完美cp闯关吧！',
            path: '/pages/battle/battle?scene=2&cpId=' + this.data.cpId,

            success: function (res) {
                console.log('res.shareTickets[0]' + res.shareTickets[0])
                wx.getShareInfo({
                    shareTicket: res.shareTickets[0],
                    success: function (res) { 'success' + console.log(res) },
                    fail: function (res) { 'fail' + console.log(res) },
                    complete: function (res) { 'complete' + console.log(res) }
                })
                //去服务器根据cpId找出好友是否上线的字段。上线了则根据cpId找出所有好友信息以及用户的个人信息
                clearInterval(this.data.Loadingtime)
            },
            fail: function (res) {
                // 分享失败
                console.log(res)
            }
        }

    },
    //点击开始游戏进入到关卡页面
    toLevel: function () {
        clearInterval(this.data.Loadingtime)
        wx.redirectTo({
            url: '../levels/levels?cpId=' + this.data.cpId
        })
    }
})

battle.wxss

/* pages/battle/battle.wxss */

page{
  height: 100%;
}
.backImage{
  width:100%;
  height:100%;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
} 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  height:50%;
}
.userinfoB {
  display: flex;
  flex-direction: column;
  align-items: center;
  height:50%;
  padding-top: 80rpx;
}
.userinfo-avatar {
  width: 260rpx;
  height: 260rpx;
  margin-top: 180rpx;
  border-radius: 50%;
  z-index: 9998;
}
.userinfo-nickname {
  color: #aaa;
  z-index: 9998;
}
.share{
  background-color:  white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:50%;
}
.sharebutton{
  width: 260rpx;
  height: 260rpx;
  margin-top: 250rpx;
  border-radius: 50%;
  z-index: 9998;
}
.start{
  background-color:  white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:50%;
}
.startbutton{
  width: 200rpx;
  height: 200rpx;
  margin-top: -550rpx;
  border-radius: 50%;
  z-index: 9998;
}
.startbutton-text{

   padding-top: 200rpx;

}