问题一:既然这个数字游戏是放到了微信公众账号里,那用户玩儿的时候也就必然是在微信里玩儿的,如果用户在玩儿的过程中,来了一条微信消息,用户该犹豫了,是继续玩儿呢,还是去看消息?
继续玩儿:那万一是一条很重要的消息,现在继续玩儿,不去看的话,耽误了怎么办?
去看消息:那现在都快玩到目标了,退出去以后,积分不就都丢了,那不白玩了么?
解决方案:为游戏增加本地存储的功能,具体策略:
在用户每次移动一个小格子之后,都更新游戏状态到本地
游戏胜利或失败时,清除游戏本地缓存
游戏重新开始时,清除游戏本地缓存
首次进入游戏时,加载游戏本地缓存,并提示用户:有自动存局的游戏,是否继续?
所用知识点:HTML5之localStorage
问题二:为了便于游戏的传播,当然是希望用户主动分享游戏到朋友圈、微信好友、或腾讯微博,但在微信内置的浏览器中,默认分享出去的,就是游戏的标题和游戏的地址,连个配图都没用,传播效果会很差!
解决方案:利用前一篇文章(微信内置浏览器的JsAPI)中提到的WeixinApi,监听各个微信分享行为:
监听分享到朋友圈的操作,自定义分享内容(当前游戏的信息)
监听分享到微信好友的操作,自定义分享内容(当前游戏的信息)
监听分享到腾讯微博的操作,自定义分享内容(当前游戏的信息)
所用知识点:微信公众平台如何对WebView进行Javascript Interface支持的,调研并完善WeixinApi.js类库
问题三:用户对新事物的认知,图片一定比文字更能直接。所以用户分享出去的游戏,一定要配图,而且每个人玩儿自己的游戏,配图一定都是不一样的。接下来需要做的,就是如何将当前的游戏状态生成为图片,并通过微信分享出去?
解决方案:首先能想到的办法,就是直接将HTML节点转换到Canvas上,通过Canvas的toDataURI方法将节点(就是游戏状态了)转换为图片数据。分别对iPhone和Android手机上得微信内置浏览器(WebView)进行分析调研与尝试,然后分平台进行处理:
iPhone上,直接将Canvas转换出来的dataURI格式图片数据,作为微信分享Data中的imgUrl分享出去,iPhone端的微信会自动上传dataURI数据到服务器并生成图片URL
Android手机上,微信不会将dataURI的图片数据上报,所以我需要自己开一个服务接口,实现data:image/png;base64, 格式的图片到图片文件的转存,并生成固定URL;并分享出去
由于Android端上需要将数据上报到我自己的服务器,所以整个分享过程必须异步执行,为了避免“用户点击相应的分享按钮后,分享对话框一直不弹出”的情况,需要增加一个loading的效果,让用户感知到分享正在进行中
所用知识点:共两点
HTML节点到Canvas的转换,并用Canvas生成dataURI格式图片;用到之前的一个组件:html2canvas.js
在服务器端开一个接口,完成dataURI格式数据到图片文件的转换,并生成固定URL