<!DOCTYPE HTML>
|
<html>
|
<head>
|
<meta charset="utf-8"/>
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
<meta name="HandheldFriendly" content="true"/>
|
<meta name="MobileOptimized" content="320"/>
|
<title>微信分享</title>
|
<script type="text/javascript" src="../js/common.js"></script>
|
<script type="text/javascript">
|
var shares=null;
|
var sweixin=null;
|
var buttons=[
|
{title:'我的好友',extra:{scene:'WXSceneSession'}},
|
{title:'朋友圈',extra:{scene:'WXSceneTimeline'}},
|
{title:'我的收藏',extra:{scene:'WXSceneFavorite'}}
|
];
|
// H5 plus事件处理
|
function plusReady(){
|
updateSerivces();
|
}
|
if(window.plus){
|
plusReady();
|
}else{
|
document.addEventListener('plusready', plusReady, false);
|
}
|
/**
|
* 更新分享服务
|
*/
|
function updateSerivces(){
|
plus.share.getServices(function(s){
|
shares={};
|
for(var i in s){
|
var t=s[i];
|
shares[t.id]=t;
|
}
|
sweixin=shares['weixin'];
|
}, function(e){
|
outSet('获取分享服务列表失败：'+e.message);
|
});
|
}
|
|
// 分享文本
|
function shareText(){
|
var msg={type:'text',content:text_content.value};
|
sweixin?plus.nativeUI.actionSheet({title:'分享文本到微信',cancel:'取消',buttons:buttons}, function(e){
|
(e.index>0)&&share(sweixin, msg, buttons[e.index-1]);
|
}):plus.nativeUI.alert('当前环境不支持微信分享操作!');
|
}
|
|
// 分享图片
|
function shareImage(){
|
var msg={type:'image'};
|
if(!image_picture.realUrl){
|
plus.nativeUI.alert('请选择要分享的图片!');
|
return;
|
}
|
msg.pictures=[image_picture.realUrl];
|
sweixin?plus.nativeUI.actionSheet({title:'分享图片到微信',cancel:'取消',buttons:buttons}, function(e){
|
(e.index>0)&&share(sweixin, msg, buttons[e.index-1]);
|
}):plus.nativeUI.alert('当前环境不支持微信分享操作!');
|
}
|
|
// 分享网页
|
function shareWeb(){
|
var msg={type:'web',thumbs:['_www/logo.png']};
|
if(!web_href.value){
|
plus.nativeUI.alert('请输入分享网页的链接地址!');
|
web_href.focus();
|
return;
|
}
|
msg.href=web_href.value;
|
if(!web_title.value){
|
plus.nativeUI.alert('请输入分享网页的标题!');
|
web_title.focus();
|
return;
|
}
|
msg.title=web_title.value;
|
if(!web_content.value){
|
plus.nativeUI.alert('请输入分享网页的描述!');
|
web_content.focus();
|
return;
|
}
|
msg.content=web_content.value;
|
sweixin?plus.nativeUI.actionSheet({title:'分享网页到微信',cancel:'取消',buttons:buttons}, function(e){
|
(e.index>0)&&share(sweixin, msg, buttons[e.index-1]);
|
}):plus.nativeUI.alert('当前环境不支持微信分享操作!');
|
}
|
|
// 分享音乐
|
function shareMusic(){
|
var msg={type:'music',thumbs:['_www/logo.png']};
|
if(!music_meida.value){
|
plus.nativeUI.alert('请输入分享网页的链接地址!');
|
music_meida.focus();
|
return;
|
}
|
msg.media=music_meida.value;
|
if(!music_title.value){
|
plus.nativeUI.alert('请输入分享网页的标题!');
|
music_title.focus();
|
return;
|
}
|
msg.title=music_title.value;
|
if(!music_content.value){
|
plus.nativeUI.alert('请输入分享网页的描述!');
|
music_content.focus();
|
return;
|
}
|
msg.content=music_content.value;
|
sweixin?plus.nativeUI.actionSheet({title:'分享音乐到微信',cancel:'取消',buttons:buttons}, function(e){
|
(e.index>0)&&share(sweixin, msg, buttons[e.index-1]);
|
}):plus.nativeUI.alert('当前环境不支持微信分享操作!');
|
}
|
|
// 分享视频
|
function shareVideo(){
|
var msg={type:'video',thumbs:['_www/logo.png']};
|
if(!video_media.value){
|
plus.nativeUI.alert('请输入分享视频的链接地址!');
|
video_media.focus();
|
return;
|
}
|
msg.media=video_media.value;
|
if(!video_title.value){
|
plus.nativeUI.alert('请输入分享视频的标题!');
|
video_title.focus();
|
return;
|
}
|
msg.title=video_title.value;
|
if(!video_content.value){
|
plus.nativeUI.alert('请输入分享视频的描述!');
|
video_content.focus();
|
return;
|
}
|
msg.content=video_content.value;
|
sweixin?plus.nativeUI.actionSheet({title:'分享音乐到微信',cancel:'取消',buttons:buttons}, function(e){
|
(e.index>0)&&share(sweixin, msg, buttons[e.index-1]);
|
}):plus.nativeUI.alert('当前环境不支持微信分享操作!');
|
}
|
|
// 分享小程序
|
function shareMiniProgram(){
|
var msg={type:'miniProgram',title:'uni-app开发的小程序',thumbs:['_www/img/mp.png']};
|
msg.content = '开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。';
|
if(!mp_id.value){
|
plus.nativeUI.alert('请输入分享小程序的标识!');
|
mp_id.focus();
|
return;
|
}
|
msg.miniProgram={id:mp_id.value,
|
webUrl:'http://uniapp.dcloud.io/'};
|
sweixin?share(sweixin, msg, {extra:{scene:'WXSceneSession'}}):plus.nativeUI.alert('当前环境不支持微信分享操作!');
|
}
|
|
|
// 分享
|
function share(srv, msg, button){
|
outSet('分享操作：');
|
if(!srv){
|
outLine('无效的分享服务！');
|
return;
|
}
|
button&&(msg.extra=button.extra);
|
// 发送分享
|
if(srv.authenticated){
|
outLine('---已授权---');
|
doShare(srv, msg);
|
}else{
|
outLine('---未授权---');
|
srv.authorize(function(){
|
doShare(srv, msg);
|
}, function(e){
|
outLine('认证授权失败：'+JSON.stringify(e));
|
});
|
}
|
}
|
// 发送分享
|
function doShare(srv, msg){
|
outLine(JSON.stringify(msg));
|
srv.send(msg, function(){
|
outLine('分享到"'+srv.description+'"成功！');
|
}, function(e){
|
outLine('分享到"'+srv.description+'"失败: '+JSON.stringify(e));
|
});
|
}
|
// 解除授权
|
function cancelAuth(){
|
outSet('解除授权：');
|
if(sweixin){
|
if(sweixin.authenticated){
|
outLine('取消"'+sweixin.description+'"');
|
}
|
sweixin.forbid();
|
}else{
|
outLine('当前环境不支持微信分享操作!');
|
}
|
}
|
|
|
// 拍照添加图片分享
|
function imageCameraPicture(){
|
outSet('拍照添加分享图片：');
|
var cmr=plus.camera.getCamera();
|
cmr.captureImage(function(p){
|
plus.io.resolveLocalFileSystemURL(p,function(entry){
|
image_picture.src=entry.toLocalURL();
|
image_picture.realUrl=p;
|
outLine('拍照图片：'+image_picture.realUrl);
|
},function(e){
|
outLine('读取拍照文件错误：'+e.message);
|
} );
|
},function(e){
|
outLine('拍照失败：'+e.message);
|
});
|
}
|
// 从相册添加图片分享
|
function imageGalleryPicture(){
|
outSet('从相册添加分享图片：');
|
plus.gallery.pick(function(p){
|
// 从相册返回的路径不需要转换可以直接使用
|
image_picture.src=p;
|
image_picture.realUrl=image_picture.src;
|
outLine('选择图片：'+image_picture.realUrl);
|
});
|
}
|
// 使用Logo图片分享
|
function imageLogoPicture(){
|
outSet('使用Logo分享图片：');
|
var url='_www/logo.png';
|
plus.io.resolveLocalFileSystemURL(url, function(entry){
|
image_picture.src=entry.toLocalURL();
|
image_picture.realUrl=url;
|
}, function(e){
|
outLine('读取Logo文件错误：'+e.message);
|
});
|
}
|
</script>
|
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
|
<style type="text/css">
|
.sharecontent{
|
width:80%;
|
-webkit-user-select:text;
|
border: 1px solid #6C6C6C;
|
-webkit-border-radius: 2px;
|
border-radius: 2px;
|
}
|
.sharepicture{
|
width:30%;
|
}
|
.share_input{
|
width:90%;
|
-webkit-user-select:text;
|
border: 1px solid #6C6C6C;
|
-webkit-border-radius: 2px;
|
border-radius: 2px;
|
margin-bottom: .5em;
|
}
|
</style>
|
</head>
|
<body>
|
<br/>
|
<p class="heading">分享文本：</p>
|
<textarea id="text_content" class="sharecontent" rows="3">我正在使用HBuilder开发移动应用，赶紧跟我一起来体验！</textarea>
|
<div class="button" onclick="shareText()">分享文本</div>
|
<hr color="#EEE"/><br/><br/>
|
|
<p class="heading">分享图片：</p>
|
<table style="width:100%;">
|
<tbody>
|
<tr>
|
<td style="width:30%"><div class="button button-select" onclick="imageCameraPicture()">拍照</div></td>
|
<td style="width:30%"><div class="button button-select" onclick="imageGalleryPicture()">相册选取</div></td>
|
<td style="width:30%"><div class="button button-select" onclick="imageLogoPicture()">使用logo图</div></td>
|
</tr>
|
</tbody>
|
</table>
|
<img id="image_picture" class="sharepicture" src="../img/add.png"/>
|
<br/>
|
<div class="button" onclick="shareImage()">分享图片</div>
|
<hr color="#EEE"/><br/><br/>
|
|
<p class="heading">分享网页：</p>
|
<table style="width:100%;">
|
<tbody>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">网页地址</td>
|
<td style="width:65%">
|
<input id="web_href" class="share_input" type="url" value="http://www.dcloud.io/" placeholder="请输入要分享的网页地址"/>
|
</td>
|
</tr>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">网页标题</td>
|
<td style="width:65%">
|
<input id="web_title" class="share_input" type="url" value="DCloud-做最好的HTML5开发工具" placeholder="请输入要分享的网页地址"/>
|
</td>
|
</tr>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">网页描述</td>
|
<td style="width:65%">
|
<input id="web_content" class="share_input" type="url" value="我正在使用HBuilder+HTML5开发移动应用，赶紧跟我一起来体验！" placeholder="请输入要分享的网页描述"/>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<p class="des">分享网页需要设置缩略图，否则可能会分享失败。</p>
|
<div class="button" onclick="shareWeb()">分享网页</div>
|
<hr color="#EEE"/><br/><br/>
|
|
<p class="heading">分享音乐：</p>
|
<table style="width:100%;">
|
<tbody>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">音乐地址</td>
|
<td style="width:65%">
|
<input id="music_meida" class="share_input" type="url" value="http://dl.stream.qqmusic.qq.com/C400000q83572f7Uea.m4a?vkey=A1C6E05C86AFC64CB41106C58CFA7777EDB5DF6F007885F311E6EF8FEFA3987E6642030D74D9246B70649F4051ACD534C392A147CFB0CEEB&guid=4414564731&uin=26156427&fromtag=66" placeholder="请输入要分享的音乐地址"/>
|
</td>
|
</tr>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">音乐标题</td>
|
<td style="width:65%">
|
<input id="music_title" class="share_input" type="url" value="吴亦凡-Hold Me Down" placeholder="请输入要分享的音乐标题"/>
|
</td>
|
</tr>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">音乐描述</td>
|
<td style="width:65%">
|
<input id="music_content" class="share_input" type="url" value="《Hold Me Down》（中文版），是吴亦凡新专辑的第二支中文单曲。通过轻快的节奏、朗朗上口的副歌，传递出夏日空气里弥漫的甜蜜气息。" placeholder="请输入要分享的音乐描述"/>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<p class="des">分享音乐需要设置缩略图，否则可能会分享失败。</p>
|
<div class="button" onclick="shareMusic()">分享音乐</div>
|
<hr color="#EEE"/><br/><br/>
|
|
<p class="heading">分享视频：</p>
|
<table style="width:100%;">
|
<tbody>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">视频地址</td>
|
<td style="width:65%">
|
<input id="video_media" class="share_input" type="url" value="http://download.dcloud.net.cn/liuvip.mp4" placeholder="请输入要分享的音乐地址"/>
|
</td>
|
</tr>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">视频标题</td>
|
<td style="width:65%">
|
<input id="video_title" class="share_input" type="url" value="HBuilder-使用HTML5开发原生应用" placeholder="请输入要分享的音乐标题"/>
|
</td>
|
</tr>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">视频描述</td>
|
<td style="width:65%">
|
<input id="video_content" class="share_input" type="url" value="同型号手机上HTML5+应用和原生应用的对比视频。" placeholder="请输入要分享的视频描述"/>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<p class="des">分享视频需要设置缩略图，否则可能会分享失败。</p>
|
<div class="button" onclick="shareVideo()">分享视频</div>
|
<hr color="#EEE"/><br/><br/>
|
|
<p class="heading">分享小程序：</p>
|
<table style="width:100%;">
|
<tbody>
|
<tr>
|
<td style="width:20%;text-align:right;font-size:12px;">小程序标识</td>
|
<td style="width:65%">
|
<input id="mp_id" class="share_input" type="url" value="gh_33446d7f7a26" placeholder="请输入要分享的小程序标识"/>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<p class="des">分享小程序也需要设置标题、描述信息、缩略图（小于128K，宽高比5:4）等，否则可能会分享失败。分享的小程序还必须在微信开放平台绑定到应用的账号中，否则不能分享。</p>
|
<div class="button" onclick="shareMiniProgram()">分享小程序</div>
|
<hr color="#EEE"/>
|
<div id="outpos"/>
|
<div id="output">
|
微信分享支持分享文本、图片、网页、音乐（网络地址）、视频（网络地址）、小程序等。
|
</div>
|
</body>
|
</html>
|
