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

 165 2019-10-19 13:56:46 艾奇站长网

TAG:小程序组队

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


微信小程序实现邀请好友组队功能(图1)


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;
}


猜你喜欢
宝塔面板根据访问协议头屏蔽字节跳动爬虫

宝塔面板根据访问协议头屏蔽字节跳动爬虫

教程资讯 257 2019-10-27

最近,字节跳动搜索引擎的爬虫疯狂爬取全网资源,导致一些小网站服务器不堪重负,严重的直接使网站宕机。我们有很多方法可屏蔽掉...

TAG:字节跳动爬虫协议头宝塔面板

ThinkPHP5框架实现多数据库查询的方法

ThinkPHP5框架实现多数据库查询的方法

教程资讯 206 2019-10-17

这篇文章主要介绍了tp5(thinkPHP5)框架实现多数据库查询的方法,结合实例形式分析了thinkPHP5框架多数据...

TAG:ThinkPHP框架

无需借助其他软件或者插件实现Chrome网页长截图

无需借助其他软件或者插件实现Chrome网页长截图

教程资讯 235 2019-09-30

相信大家在电脑需要截图的时候使用最多的应该就是QQ上自带的截图功能(Ctrl+Alt+A),但这个功能一次性截取到的内容...

TAG:Chrome截图插件

Discuz不使用插件实现简单的打赏功能

Discuz不使用插件实现简单的打赏功能

教程资讯 231 2019-10-16

本文介绍Discuz不使用插件实现简单的打赏功能实现目标:用户自行上传自己的支付宝及微信收款二维码,在主题帖增加打赏按钮...

TAG:Discuz插件打赏