应用场景: 微信小程序内,游戏娱乐,玩家交流使用
目标用户:娱乐用户
实现思路:多个网页实现流程交互,使用云存储功能存储图片和玩家留言板消息。使用js实现页面音乐播放,音乐源来自QQ音乐。
效果截图:
功能代码展示:
首页:
<view class="container">
<navigator bindtap="innerchatroom" id="chatroom" url="../im/room/room" open-type="navigate" class="uploader-text">
<text>评论留言版</text>
</navigator>
<view id="atfirst"></view>
<button id="toplay" bindtap="changewebtoplay">点击开始</button>
</view>
js部分:
onLoad: function() {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
innerAudioContext.autoplay = false
innerAudioContext.src = '?'
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.play()
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
onGetUserInfo: function(e) {
if (!this.data.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
changewebtoplay:function(){
// wx.stopVoice();
wx.redirectTo({
url: '../question/question1',
})
innerAudioContext.stop()
},
innerchatroom:function(){
innerAudioContext.stop()
},
单个问题界面:
<view id="backgroundscenery">
<view id="questionbox">
<text>欢迎你,初入幻想之人</text>
<text>随着旅行团旅游的你和大伙走散了,你只身来到一所未知的神庙,在此触碰到幻想的境界,你将成为幻想乡中的一员,现在来选择你的种族吧:</text>
</view>
<text class="anws {{animated1?'':'becheck'}}" bindtap="checked1" >妖精</text>
<text class="anws {{animated2?'':'becheck'}}" bindtap="checked2">人类</text>
<text class="anws {{animated3?'':'becheck'}}" bindtap="checked3">妖怪</text>
</view>
js部分:
checked1:function(options){
this.setData({
animated1:false
})
setTimeout(function(){
wx.redirectTo({
url: '../question2/question2',
})
},2000)
},
checked2:function(options){
this.setData({
animated2:false
})
setTimeout(function(){
wx.redirectTo({
url: '../question5/question5',
})
},2000)
},
checked3:function(options){
this.setData({
animated3:false
})
setTimeout(function(){
wx.redirectTo({
url: '../question5/question5',
})
},2000)
},
data: {
animated1:true,
animated2:true,
animated3:true
},
人物卡片界面:
<view id="talkbox1" style="position:fixed;z-index:999;color:#ff7675;font-size:1.5rem">你遇见了:雾雨魔理沙</view>
<image bindtap="checked2" mode="scaleToFill" class="backgroundscenery" src="cloud://xly-ugom6.786c-xly-ugom6-1302909523/魔理沙.jpg"><view class="uploader"> </view></image>
<navigator style="z-index:999" url="../im/room/room" open-type="navigate" class="uploader-text"><image style="top:0.5rem;right:1rem;z-index:999;position:fixed;height:50px;width:50px" src="cloud://xly-ugom6.786c-xly-ugom6-1302909523/聊天.png"></image>
</navigator>
<view id="talkbox2" class="{{animated?'':'anima1'}}" >
<text style="display:block;font-size:1.5rem;color:orange">雾雨魔理沙:</text>
<text style="font-size:1.2rem;color:#fdcb6e;text-indent:2rem">虽然这本书原本是属于你的啦,但至于为什么现在在我手上,这.....这本书可不是我偷的哦,魔法师的事情怎么能叫偷呢?</text>
</view>
<image bindtap="checked1" style="bottom:0.5rem;right:1rem;z-index:999;position:fixed;height:50px;width:50px;" src="cloud://xly-ugom6.786c-xly-ugom6-1302909523/下一步.png"></image>
<text style="top:calc(.5rem + 50px);;right:1rem;z-index:999;position:fixed;height:50px;width:50px;font-size:.5rem;color:#e55039;" >评论留言</text>
js部分:
checked1:function(options){
wx.redirectTo({
url: '../question8/question8',
})
},
checked2:function(options){
this.setData({
animated:false
})
},
data: {
animated:true,
},
onLoad: function (options) {
innerAudioContext.autoplay = true
innerAudioContext.src = '?'
innerAudioContext.onPlay(() => {
console.log('开始播放')
})
innerAudioContext.onError((res) => {
console.log(res.errMsg)
console.log(res.errCode)
})
},
留言板部分:
<view class="container">
<view class="uploader">
<navigator url="./room/room" open-type="navigate" class="uploader-text">
<text>留言板</text>
</navigator>
</view>
</view>
js部分:
data: {
avatarUrl: './user-unlogin.png',
userInfo: null,
logged: false,
takeSession: false,
requestResult: '',
chatRoomCollection: 'chatroom',
chatRoomGroupId: 'demo',
chatRoomGroupName: '幻想留言板',
onGetUserInfo: null,
getOpenID: null,
},
onLoad: function() {
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
this.setData({
onGetUserInfo: this.onGetUserInfo,
getOpenID: this.getOpenID,
})
wx.getSystemInfo({
success: res => {
console.log('system info', res)
if (res.safeArea) {
const { top, bottom } = res.safeArea
this.setData({
containerStyle: `padding-top: ${(/ios/i.test(res.system) ? 10 : 20) + top}px; padding-bottom: ${20 + res.windowHeight - bottom}px`,
})
}
},
})
},
getOpenID: async function() {
if (this.openid) {
return this.openid
}
const { result } = await wx.cloud.callFunction({
name: 'login',
})
return result.openid
},
onGetUserInfo: function(e) {
if (!this.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
onShareAppMessage() {
return {
title: '幻想聊天室',
path: '/pages/im/room/room',
}
},
})
团队简介:
李君豪(天津城建大学 电信工程系) 负责”菜“,前端,后端