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+ 开发分享功能的更多相关文章

  1. 安卓开发分享功能,分享到facebook网页上不显示图片的问题

    最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常 ...

  2. 移动端H5微信分享

    移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档:  微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...

  3. H5 + 开发App(分享功能)

    我们开发App有一个不可少的功能,就是分享功能.让用户将app分享到他的社交圈.比如微信 QQ 微博等等. 准备工作:我们要先去申请相关的权限, 这是传送门http://ask.dcloud.net. ...

  4. H5分享功能

    web端分享功能 https://www.cnblogs.com/sdcs/p/8328367.html H5分享功能 公司里面做web开发经常会做H5页面,今天整理分享一下. 微信公众号平台 步骤一 ...

  5. 微信开发(一)基于Wx-java的微信分享功能

    最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...

  6. 【微信开发】【Asp.net MVC】-- 微信分享功能

    内嵌在微信中的网页,右上角都会有一个默认的分享功能.如下图所示,第一个为自定义的效果,第二个为默认的效果.实现了自定义的分享链接是不是更让人有点击的欲望?下面讲解下开发的过程. 一.准备,设置js接口 ...

  7. 微信jssdk分享功能开发

    先理解下分享: 在app端 ,经常能看见 分享按钮的功能,(分享给朋友,分享到朋友圈,分享到QQ空间等等): https://open.weixin.qq.com/(微信开发平台),这需要到开放平台注 ...

  8. 微信开发】【Asp.net MVC】-- 微信分享功能

    [微信开发][Asp.net MVC]-- 微信分享功能 2017-01-15 09:09 by stoneniqiu, 12886 阅读, 15 评论, 收藏, 编辑 内嵌在微信中的网页,右上角都会 ...

  9. H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例

    H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例 (转载:https://blog.csdn.net/weixin_38787928/article/details/86741227 ...

随机推荐

  1. Swoole 实战:MySQL 查询器的实现(协程连接池版)

    目录 需求分析 使用示例 模块设计 UML 类图 入口 事务 连接池 连接 查询器的组装 总结 需求分析 本篇我们将通过 Swoole 实现一个自带连接池的 MySQL 查询器: 支持通过链式调用构造 ...

  2. BeanDefinition源码解析

    我们知道BeanDefintion定义了Bean在IoC容器内的基本数据结构.在学习IoC之前先了解BeanDefition对我们理解IoC容器是有帮助的. 首先BeanDefinition是一个接口 ...

  3. MongoDB学习(三)

    MongoDB条件操作符 $gt  > 大于 $lt   < 小于 $gte >= 大于等于 $lte  <= 小于等于 $ne  !=  不等于 条件操作符可用于查询语句中, ...

  4. CultureInfo 类中需要的【区域性名称】查询

    2019独角兽企业重金招聘Python工程师标准>>> 提供有关特定区域性的信息(对于非托管代码开发,则称为"区域设置"). 这些信息包括区域性的名称.书写系统. ...

  5. 演示:配置日志发送到syslog日志服务器

    演示目标:配置网络环境中的交换机和路由器将日志发送到syslog日志服务器. 演示环境:如下图10.54所示的演示环境. 演示背景:要求部署网络中的syslog服务器,集中的收集交换机S1和路由器R1 ...

  6. Soldiers Sortie

    这部2006年上映的作品豆瓣评分9.3,时至今日仍然有人乐此不疲地讨论剧情和启发,我想称之为经典应该不算过分. 这部剧我至少完整看过3遍,随着阅历增加,对某些角色的体会也变得更深刻. 许三多 许三多是 ...

  7. Socket中SO_REUSEADDR简介

    SO_REUSEADDR:字面意思重复使用地址 一般来说,一个端口释放后会等待两分钟之后才能再次被使用,SO_REUSEADDR是让端口释放后立即就可以被再次使用. SO_REUSEADDR用于对TC ...

  8. JavaWeb----Servler

    Servlet简介 Servlet就是sun公司开发动态web的一门技术 Sun在这些API中提供一个接口叫做:Servlet,如果你想开发一个Servlet程序,只需要完成两个小步骤: 编写一个类, ...

  9. JVM系列-2、JVM内存结构

    一.JVM内存结构 1.1.栈(JVM Stacks) 存放局部变量(定义在方法中的变量和定义在方法参数列表上的变量).对象引用(reference类型,它不等同于对象本身,根据不同的虚拟机实现,它可 ...

  10. 选择结构(if、switch)

    3.2  用if语句实现选择结构 什么是选择结构 单分支if语句 双分支if语句 多分支if语句 1.什么是选择结构? 选择结构又称为分支结构,是根据给定的条件是否成立来决定程序的执行流程. 用if语 ...