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