zoukankan      html  css  js  c++  java
  • 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:时间仓促,先写这么多吧。详细注解后期会补上

  • 相关阅读:
    支付宝支付
    django之contenttype
    vue 项目搭建 及基础介绍
    redis续
    1012
    1009
    灾后重建
    FLOYD判圈
    1007
    1006
  • 原文地址:https://www.cnblogs.com/ts119/p/12943787.html
Copyright © 2011-2022 走看看