h5+ 开发分享功能
h5+ 开发微信、QQ分享功能
此处只做微信网页分享示例代码
方式一、JS+HTML+h5Plus
1.html代码
<div class="button" onclick="shareWeb()">分享网页</div>
2.JS代码
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);
}
/**
*1. 更新分享服务
* 根据授权,通过getServices方法获取分享服务
*/
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);
});
}
/*
2.*/
// 分享网页
function shareWeb(){
var msg={
type:'web',
thumbs:['_www/logo.png'],
href:'分享网页的链接',
title:'分享网页的标题',
content:'分享网页的描述'
}; sweixin?plus.nativeUI.actionSheet({title:'分享网页到微信',cancel:'取消',buttons:buttons}, function(e){
(e.index>0)&&share(sweixin, msg, buttons[e.index-1]);
}):plus.nativeUI.alert('当前环境不支持微信分享操作!');
}
//
//3.分享
function share(srv, msg, button){
outSet('分享操作:');
if(!srv){
outLine('无效的分享服务!');
return;
}
button&&(msg.extra=button.extra);
// 发送分享
if(srv.authenticated){
doShare(srv, msg);
}else{
srv.authorize(function(){
doShare(srv, msg);
}, function(e){
});
//4. 发送分享
function doShare(srv, msg){
outLine(JSON.stringify(msg));
srv.send(msg, function(){
outLine('分享到"'+srv.description+'"成功!');
}, function(e){
outLine('分享到"'+srv.description+'"失败: '+JSON.stringify(e));
});
}
Tip:时间仓促,先写这么多吧。详细注解后期会补上
h5+ 开发分享功能的更多相关文章
- 安卓开发分享功能,分享到facebook网页上不显示图片的问题
最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常 ...
- 移动端H5微信分享
移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档: 微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...
- H5 + 开发App(分享功能)
我们开发App有一个不可少的功能,就是分享功能.让用户将app分享到他的社交圈.比如微信 QQ 微博等等. 准备工作:我们要先去申请相关的权限, 这是传送门http://ask.dcloud.net. ...
- H5分享功能
web端分享功能 https://www.cnblogs.com/sdcs/p/8328367.html H5分享功能 公司里面做web开发经常会做H5页面,今天整理分享一下. 微信公众号平台 步骤一 ...
- 微信开发(一)基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
- 【微信开发】【Asp.net MVC】-- 微信分享功能
内嵌在微信中的网页,右上角都会有一个默认的分享功能.如下图所示,第一个为自定义的效果,第二个为默认的效果.实现了自定义的分享链接是不是更让人有点击的欲望?下面讲解下开发的过程. 一.准备,设置js接口 ...
- 微信jssdk分享功能开发
先理解下分享: 在app端 ,经常能看见 分享按钮的功能,(分享给朋友,分享到朋友圈,分享到QQ空间等等): https://open.weixin.qq.com/(微信开发平台),这需要到开放平台注 ...
- 微信开发】【Asp.net MVC】-- 微信分享功能
[微信开发][Asp.net MVC]-- 微信分享功能 2017-01-15 09:09 by stoneniqiu, 12886 阅读, 15 评论, 收藏, 编辑 内嵌在微信中的网页,右上角都会 ...
- H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例
H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...
随机推荐
- 工程师泄露5G核心技术文档 被判有期徒刑三年缓刑四年
2002 年至 2017 年 1 月,黄某瑜就职于中兴通讯公司,担任过射频工程师.无线架构师等职务.2008 年 4 月至 2016 年 10 月,王某就职于中兴通讯公司西安研究所,担任过 RRU 部 ...
- Vue项目开发流程(自用)
一.配置开发环境 1.1 安装Node.js npm集成在Node中,检查是否安装完成:node -v 1.2 安装cnpm(淘宝镜像) npm install -g cnpm,检查安装是否完成:cn ...
- CentOS配置Tomcat监听80端口,虚拟主机
2019独角兽企业重金招聘Python工程师标准>>> Tomcat更改默认端口为80 更改的配置文件是: /usr/local/tomcat/conf/server.xml [ro ...
- JavaScript 后台获取数据 - HTTP203 Advent(中文字幕)
如果关注过 Google 相关的开发技术,对 HTTP203 这个栏目应该不陌生. 这是 HTTP203 圣诞节的特别版! Jake(@jaffathecake)和 Surma(@DasSurma)有 ...
- 使用Jexus 容器化您的 Blazor 应用程序
在本文中,我们将介绍如何将 Blazor 应用程序放入Jexus 容器以进行开发和部署.我们将使用 .NET Core CLI,因此无论平台如何,使用的命令都将是相同的. Blazor 托管模型 B ...
- 消息队列,RabbitMQ、Kafka、RocketMQ
目录 1.消息列队概述 1.1消息队列MQ 1.2AMQP和JMS 1.2.1AMQP 1.2.2JMS 1.2.3AMOP 与 JMS 区别 1.3消息队列产品 1.3.1 Kafka 1.3.2 ...
- HDU1300Pearls
传送门 描述: 有几种不同的珍珠.每种珍珠都有它的单价.当然质量高的珍珠价格一定也是高的. 为了避免买家只买1个珍珠.就要求不论是买了多少个珍珠都是需要在购买数量上加10.之后乘上单价. 例如:买5个 ...
- 【MySQL基础总结】常用函数库
常用函数库 数学函数 分类及含义 示例 字符串函数 分类及含义 示例 日期时间函数 分类及含义 示例 条件判断函数 分类及含义 示例 系统函数 分类及含义 加密函数 分类及定义 其他常用函数 分类及含 ...
- Linux设备子系统初始化
本文介绍的内容是基于Linux3.1源码,并参考了很多网上找来的资料 Linux内核的启动的流程如下: start_kernel->rest_init->kernel_init->d ...
- Pytest 单元测试框架
1.pytest 是 python 的第三方单元测试框架,比自带 unittest 更简洁和高效 2.安装 pytest pip install pytest 3.验证 pytest 是否安装成功 p ...