应用场景： 微信小程序内，游戏娱乐，玩家交流使用
目标用户：娱乐用户
实现思路：多个网页实现流程交互，使用云存储功能存储图片和玩家留言板消息。使用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',
}
},
})
团队简介：
李君豪（天津城建大学 电信工程系） 负责”菜“，前端，后端
MUD