经常有做微信运营的童鞋,咨询怎么在自己的公众号里面放微信小游戏和修改分享图片分享链接的问题,那么今天的文章就具体讲讲这个话题。
再写文章之前,我先给大家简单介绍与微信游戏有关的两个最重要的背景知识。
一是HTML5,HTML5是万维网联盟(W3C)在2007年起草的一款最新版的网页标准规范,是HTML的升级版,历经了W3C八年的艰辛努力,在今年的11月左右正式完工。作为最新版的网页协议标准,HTML5的强大之处三言两语难以言表,其最大的优点就是对现代智能移动设备良好支持性,为了这一目的W3C甚至专门成立了DeviceAPI工作组,为HTML5添加了对智能移动设备例如GPS和各种硬件感应器功能的API支持,以至于让HTML5能够在移动设备上大放异彩。
在这里特别提到一下,大家现在下载一些国产的浏览器经常会提到一个字眼“双核”,这里的双核可不是指CPU双核的意思,浏览器的双核指的就是基于IE的Trident内核和对HTML5有着良好性能支持的WebKit内核。国内的浏览器一般出于兼容性的考虑,会同时在浏览器中内置这两款网页渲染引擎,一般称之为兼容模式和高速/极速模式,以便于用户在这两种网页标准协议上相互切换,来满足一些极个别特殊网站对IE内核的要求。
为什么会有兼容性的问题?一是由于微软公司在全球计算机桌面系统几乎垄断的市场地位,其自带的IE系列浏览器在一经推出就迅速的占领了全球桌面浏览器市场,由于微软在桌面系统及浏览器市场不可动摇的地位,出于“有钱就是任性”和商业厚黑学的原因,微软的IE浏览器在很多网页标准上没有遵守W3C的规范,使用一些只有自家IE浏览器才支持的网页渲染规范。其次,新旧标准的替换也需要一个过渡时间。另外,之前有位在微社区的朋友,提到一个flash视频的问题,在这里顺便说下,HTML5还有一个目的就是消灭flash,所以HTML5没有提供对flash的支持。
写到这儿,其实已经有点跑题了,扩展太多,估计三天三夜也讲不完。。。回到微信上面来。
微信浏览器的内核就是一款对万维网联盟最新版的网页标准规范HTML5有着最良好支持性的WebKit网页渲染引擎。现在移动端一些效果炫酷的网页游戏基本上就是基于HTML5开发的,甚至是一些APP的交互界面也都有HTML5的影子。在移动端上HTML5已经随处可见了。
要么,再回到今天文章的主题上来:“如何把微信小游戏放在自己的平台上?”HTML5是前端网页的标准,因此它是基于浏览器的,组成部分是HTML+CSS3+JavaScript,HTML是网页的布局结构,CSS3+div是网页的样式表现和定位,JavaScript是网页的动态效果。与例如PHP+MySQL(动态网站的一种开发组合)等,HTML5不需要什么特殊软件系统的支持,使用WebKit内核的浏览器就可以直接打开本地的HTML文件。因此,网页设计的调试也十分简单,本地关联HTML文件的默认打开软件是浏览器就好了。大家在浏览器网页时,鼠标点击右键,打开“查看源代码”就可以看到你所浏览的这个网页的源文件了。
国内外有很多提供非结构化静态文件存储的公司,将微信小游戏的静态文件HTML、CSS、JS放在这些他们的这些存储系统上,用浏览器打开就可以直接运行微信HTML5游戏了。
(七牛云虽然免费,但有诸多限制,如需最优服务或自定义分享功能,则需要一个支持PHP等开发语言的动态空间,在这里建议使用阿里云)
在国内有一家在这方面做得非常好的公司七牛云存储,大家可以注册一个,把下载到的微信游戏源文件按原目录结构放在七牛云上,通过他自动分配的文件地址(URL)就可以访问游戏了。你只需要把分配的游戏网址放在自己的微信自定义菜单上就可以。如果没有自定义菜单,也可以关键词引导,就是在微信后台设置一个自动回复的关键词,例如“游戏”,当大家向你的公众号发送“游戏”这个词的时候,就自动回复一个游戏链接给他。微信对话界面游戏链接的做法十分简单,像这样<a href="游戏URL链接" >微信游戏</a>就可以了,例如<a href="http://g.huceo.com/">微信游戏</a>。
关于怎么修改游戏分享参数,本来想写个教程,html5除了div+css这种标记语法,JavaScript是一种网页动态开发的直译型脚本语言,游戏的分享参数不是固定形式的,有的可能是变量函数,没什么唯一的共性,也就不存在单一的教程,只有直接学会JavaScript才行。
可以教给大家几个技巧:
一,打开HTML或JS文件,搜索“http://”,找到网址后修改成自己的。
二,打开游戏后,点击右上角的分享,之后再打开分享链接并复制,如同第一个办法,搜索复制的链接。
三,有些分享网址可能是变量形式,不是直接以“http://”开头或者是分离组合,那么大家就搜索网址的一部分找找看。
四,一般微信游戏的分享参数包含imgUrl(小图标)、timeLineLink(分享链接)、tTitle(分享标题)、tContent(分享描述),分别搜索之就能找到分享参数。
其他扩展:
如需要PHP等服务器环境支持,则建议使用新浪云SAE或阿里云等,其中新浪云新手被邀请注册有一定的免费额度,一般足够使用。
「新浪云福利」1000云豆免费领!低成本、免运维、灵活、安全稳定,轻松应对业务爆发式增长,一起来用吧!
注册地址:https://www.sinacloud.com/public/login/inviter/gaimrn-mddmzeKWrhKWnaoGem699eIGvfoy6dg.html (首次注册可获得200免费云豆奖励,首次充值可获得600云豆奖励)
阿里云服务器通过邀请链接注册2折起: https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=f4auw66k&utm_source=f4auw66k
第一次购买云服务器或云数据库时通过该链接注册购买,可享受优惠。
七牛云存储:https://portal.qiniu.com/signup?code=3ldz27h3w0nde
微信html5小游戏源码下载:微信朋友圈html5小游戏源码分享平台
新版微信分享方法:怎么使用微信JSSDK的自定义分享功能