今天在微信朋友圈里看到有人分享了一个含有音乐的网页，页面上是浓浓的最炫民族风那种风格，内容是“XX节日到了，发送一个祝福给你，希望你幸福......“，然后页面下方有个分享按钮，分享之后，就会弹出一个广告页面，页面上的内容是什么男性增大神药，简直不忍直视。不过，这个通过微信JS SDK的分享功能的创意其实还是不错的。首先，这种比较接地气的页面形式，虽然看起来土，但实际上传播效果很好；其次，在微信里分享成功之后，可以自己定义跳转到任何页面，又为运营人员提供了很好的发挥空间，你可以在跳转之后的页面里做很多营销方面的工作，当然，不建议你做男性增大之类没有档次的产品，那样就太没品味了。
我在微信里把对方的页面链接复制下来，将代码扒了下来，原页面的代码还是比较乱的，而且，原始也面试.net写的，而我自己是用的php，所以原页面的微信JS SDK功能是不能直接用的。经过一番改造和优化，终于整理出来了这样下面的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>标题</title>
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<script>music_player = new Audio();music_player.src = 'http://ws.stream.qqmusic.qq.com/101812894.m4a?fromtag=46';music_player.loop = 'loop';music_player.play();</script>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
height: 100%;
background: url(http://img01.store.sogou.com/net/a/04/link?appid=11&w=600&url=https://qbwx.qpic.cn/mmbiz/LDf4ic9knLDT4gMsU0g65AecmsV1tBQtudAUic7OmQktKwwzh50bGh9axtHZt81HpS0pqE2cZSIZoRlSDejdY2mQ/0?wx_fmt=jpeg) repeat-y #DBE0AA;
background-size: 100% auto;
-moz-background-size: 100% auto;
}
article {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
#text_box {
background-color: rgba(255,255,255,0.6);
margin: 50px 20px 0px 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 10px;
font-size: 20px;
color: #000;
line-height: 24px;
}
#text_box #luokuan {
text-align: right;
}
#text_box #shijian {
text-align: right;
}
#btn {
text-align: center;
margin: 0px auto;
margin-top: 20px;
clear: both;
}
#share_btn {
width: 40%;
height: 32px;
line-height: 32px;
color: #FFF;
text-align: center;
font-size: 24px;
font-weight: bold;
background-color: #FF6666;
background-color: rgba(255,102,102,0.6);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
margin-left: 5%;
}
#more_btn {
width: 40%;
height: 32px;
line-height: 32px;
color: #FFF;
text-align: center;
font-size: 24px;
font-weight: bold;
background-color: #61939B;
background-color: rgba(97,147,155,0.6);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
display: inline-block;
}
</style>
<article>
<div id="text_box">
<div id="leafContainer"></div>
<p id="zhengwen">今天4月16日是（这里写上你的祝福语）</p>
<br/>
<p id="luokuan">落款</p>
<p id="shijian">2016-4-16</p>
</div>
<div id="btn">
<link rel="stylesheet" href="sharetowx.css">
<div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display: none;">
<img src="http://img01.store.sogou.com/net/a/01/link?appid=11&w=600&url=https://qbwx.qpic.cn/mmbiz/EQg7ia4icAfqUt3X8G9yzUsvTJPKxQ9I0z6PqF49xribRiaG7dWbj73ocUeH3pvmlAJwyQhusLoWO33dcZ27Ig0umw/0?wx_fmt=png">
</div>
<div id="share_btn" onclick="document.getElementById('mcover').style.display='block';">
分 享
</div>
</div>
</article>
<div style="margin-bottom: 80px;"></div>
<!--call weixin JSSDK share start-->
<?php
require('WXJSSDK/jssdk.php');
$jssdk = new JSSDK("AppID", "AppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<script>
function shared() {
window.open('分享成功后跳转的页面');
}
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: '<?php echo $signPackage["timestamp"];?>',
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
wx.ready(function () {
wx.onMenuShareAppMessage({
title: '<?php echo $title;?>', // 分享标题
desc: '分享描述语', // 分享描述
link: '<?php echo $url;?>', // 分享链接
imgUrl: '分享图标，需用绝对地址，建议200X200正方形图', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function (res) {
shared(); // 用户确认分享后执行的回调函数
},
cancel: function () {
alert('已取消'); // 用户取消分享后执行的回调函数
}
});
wx.onMenuShareTimeline({
title: '<?php echo $title;?>', // 分享标题
link: '<?php echo $url;?>', // 分享链接
imgUrl: '分享图标，需用绝对地址，建议200X200正方形图', // 分享图标
success: function () {
shared(); // 用户确认分享后执行的回调函数
},
cancel: function () {
alert('已取消'); // 用户取消分享后执行的回调函数
}
});
});
</script>
<!--call weixin JSSDK share end-->
<style>
#leafContainer {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
}
#leafContainer > div {
position: absolute;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}
#leafContainer > div > img {
position: absolute;
width: 50px;
height: auto;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
/* Hides a leaf towards the very end of the animation */
@-webkit-keyframes fade {
/* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
0% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Makes a leaf fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop {
/* Move a leaf to -300 pixels in the y-axis at the start of the animation */
0% {
-webkit-transform: translate(0px, -50px);
}
/* Move a leaf to 600 pixels in the y-axis at the end of the animation */
100% {
-webkit-transform: translate(0px, 650px);
}
}
/* Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin {
/* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
0% {
-webkit-transform: rotate(-50deg);
}
/* Rotate a leaf by 50 degrees in 2D space at the end of the animation */
100% {
-webkit-transform: rotate(50deg);
}
}
/* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip {
/* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
0% {
-webkit-transform: scale(-1, 1) rotate(50deg);
}
/* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
100% {
-webkit-transform: scale(-1, 1) rotate(-50deg);
}
}
</style>
<script>
/* Define the number of leaves to be used in the animation */
const NUMBER_OF_LEAVES = 20;
/*
Called when the "Falling Leaves" page is completely loaded.
*/
function init()
{
/* Get a reference to the element that will contain the leaves */
var container = document.getElementById('leafContainer');
/* Fill the empty container with new leaves */
for (var i = 0; i < NUMBER_OF_LEAVES; i++)
{
container.appendChild(createALeaf());
}
}
/*
Receives the lowest and highest values of a range and
returns a random integer that falls within that range.
*/
function randomInteger(low, high)
{
return low + Math.floor(Math.random() * (high - low));
}
/*
Receives the lowest and highest values of a range and
returns a random float that falls within that range.
*/
function randomFloat(low, high)
{
return low + Math.random() * (high - low);
}
/*
Receives a number and returns its CSS pixel value.
*/
function pixelValue(value)
{
return value + 'px';
}
/*
Returns a duration value for the falling animation.
*/
function durationValue(value)
{
return value + 's';
}
/*
Uses an img element to create each leaf. "Leaves.css" implements two spin
animations for the leaves: clockwiseSpin and counterclockwiseSpinAndFlip. This
function determines which of these spin animations should be applied to each leaf.
*/
function createALeaf()
{
/* Start by creating a wrapper div, and an empty img element */
var leafDiv = document.createElement('div');
var image = document.createElement('img');
/* Randomly choose a leaf image and assign it to the newly created element */
image.src = randomInteger(1,3) + '.png';
leafDiv.style.top = "-100px";
/* Position the leaf at a random location along the screen */
leafDiv.style.left = pixelValue(randomInteger(0, 500));
/* Randomly choose a spin animation */
var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
/* Set the -webkit-animation-name property with these values */
leafDiv.style.webkitAnimationName = 'fade, drop';
image.style.webkitAnimationName = spinAnimationName;
/* Figure out a random duration for the fade and drop animations */
var fadeAndDropDuration = durationValue(randomFloat(5, 11));
/* Figure out another random duration for the spin animation */
var spinDuration = durationValue(randomFloat(4, 8));
/* Set the -webkit-animation-duration property with these values */
leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
var leafDelay = durationValue(randomFloat(0, 5));
leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
image.style.webkitAnimationDuration = spinDuration;
// add the <img> to the <div>
leafDiv.appendChild(image);
/* Return this img element so it can be added to the document */
return leafDiv;
}
/* Calls the init function when the "Falling Leaves" page is full loaded */
//window.addEventListener('load', init, false);
$(function () { init();})
</script>
</body>
</html>
代码需要调用 WXJSSDK 文件夹下的 jssdk.php 这个可以从腾讯的官方开发文档demo里的php版本中找到，下载下来解压缩之后，请不要删除文件夹里的任何文件，直接将php文件夹更名为WXJSSDK并将这个文件夹与上述代码输出的页面（假设为index.php）放在同一级目录中即可。
#mcover{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;z-index:20000;}
#mcover img{position:fixed;right:18px;top:5px;width:260px!important;height:180px!important;z-index:20001;}
.text{margin:15px 0;font-size:14px;word-wrap:break-word;color:#727272;}
#mess_share{margin:15px 0;display:block;}
#share_1{float:left;width:49%;display:block;}
#share_2{float:right;width:49%;display:block;}
.clr{display:block;clear:both;height:0;overflow:hidden;}
.button2{font-size:16px;padding:8px 0;border:1px solid #adadab;color:#000000;background-color:#e8e8e8;background-image:linear-gradient(to top,#dbdbdb,#f4f4f4);box-shadow:0 1px 1px rgba(0,0,0,0.45),inset 0 1px 1px #efefef;text-shadow:0.5px 0.5px 1px #fff;text-align:center;border-radius:3px;width:100%;}
#mess_share img{width:22px!important;height:22px!important;vertical-align:top;border:0;}
将上述css代码保存为sharetowx.css也放在同级目录，然后，将下图保存下来，分别命名为1.png, 2.png和3.png（同一张图命名3次，也保存3次），将三张图也放在同一级目录。
最后，将整个目录上传到服务器并在微信里访问这个目录网址就可以体验了。