精华内容
下载资源
问答
  • 一个很简单的分享功能,在Web开发经常用到的
  • 学习与探索调用系统实现分享功能或者直接调起实现了分享功能的应用的activity来进行分享。
  • android分享功能实现 源码下载

    热门讨论 2013-11-25 14:49:02
    为了应用的推广、传播,很多的应用中都有“分享”功能,一个按钮,点击后会出现短信、微博等等一切实现了分享功能的应用列表。具体可参考:http://blog.csdn.net/xyz_lmn/article/details/16856843
  • 小程序分享功能

    万次阅读 2018-12-28 16:26:23
    之前项目中没有用到分享功能,今天用到了,查了不少资料,算是搞的比较明白,今天分享给大家,希望对大家有所帮助,闲话不说,先上效果图: 点击分享按钮,会把内容分享出去,效果图如下: 点击关闭分享按钮 下面...

    之前项目中没有用到分享功能,今天用到了,查了不少资料,算是搞的比较明白,今天分享给大家,希望对大家有所帮助,闲话不说,先上效果图:
    在这里插入图片描述
    点击分享按钮,会把内容分享出去,效果图如下:

    在这里插入图片描述
    点击关闭分享按钮 下面的分享按钮会隐藏 点击右上角自带的分享按钮 会有如下效果:
    在这里插入图片描述
    下面直接上代码,先是wxml:

      <view class="view">
         <image class="cover-9" src="{{img}}" bindtap="img"></image>
            <view class="window-1">
                <button type="default" id="open" bindtap="showShareMenu">开启分享</button>
                <button type="warn" id="close" bindtap="hideShareMenu">关闭分享</button>
             </view>
          <button type="primary" open-type="share" data-name="pageShare" id="share"  wx:if="{{show}}">点击分享</button>
    </view>
    
    

    然后是js:

    let app = getApp();
    Page({
      data: {
        img: "../images/1.png",
        show:true
      },
      onLoad() {
    
      },
      showShareMenu() {
        wx.showShareMenu();
        this.setData({
          show: true
        })
        console.log("显示了当前页面的转发按钮");
      },
      // wx.hideShareMenu()关闭分享按钮 此时再点击右上角的分享按钮 会弹出 当前页面未设置分享 字样
      hideShareMenu() {
        wx.hideShareMenu();
        this.setData({
          show: false
        })
        console.log("隐藏了当前页面的转发按钮");
    
      },
      onShareAppMessage: (res) => {
        if (res.from === 'button') {
          console.log("来自页面内转发按钮");
          console.log(res.target);
        }
        else {
          console.log("来自右上角转发菜单")
        }
        return {
          title: '关老爷',
          path: '/pages/share/share?id=123',//这里的path是当前页面的path,必须是以 / 开头的完整路径,后面拼接的参数 是分享页面需要的参数  不然分享出去的页面可能会没有内容
          imageUrl: "../images/1.png",
          desc: '关公面前耍大刀',
          success: (res) => {
            console.log("转发成功", res);
            console.log("成功了")
          },
          fail: (res) => {
            console.log("转发失败", res);
          }
        }
      }
    })
    

    最后是wxss:

    page{
      height: 100%;
    }
    .view{
      width: 100%;
      height: 100%;
    }
    .window-1{
      display: flex;
      flex-direction: row;
      margin: 20rpx 0;
    }
    .cover-9{
      width: 688rpx;
      height: 75%;
      margin: 0 30rpx;
      border:2rpx solid;
      border-radius:5px;  
    }
    button{
      margin: 0 10rpx;
      width: 100%;
    }
    #share{
      width: 730rpx;
    }
    
    

    完美结束,如果还需要其他的功能,可以在这个基础上进行修改!

    展开全文
  • Android--分享功能

    千次阅读 2019-04-10 22:02:43
    实现分享功能的几个办法: 一、调用系统的分享功能 二、通过第三方SDK,如ShareSDK,友盟等 三、自行使用各自平台的SDK,比如QQ,微信,微博各自的SDK DEMO地址:...

    实现分享功能的几个办法:

    一、调用系统的分享功能
    二、通过第三方SDK,如ShareSDK,友盟等
    三、自行使用各自平台的SDK,比如QQ,微信,微博各自的SDK

    DEMO地址:https://github.com/chaoyu168/shareDemo/tree/master

    先看原生方法:

    /**
         * Android原生分享功能
         * 默认选取手机所有可以分享的APP
         */
        public void allShare(){
            Intent share_intent = new Intent();
            share_intent.setAction(Intent.ACTION_SEND);//设置分享行为
            share_intent.setType("text/plain");//设置分享内容的类型
            share_intent.putExtra(Intent.EXTRA_SUBJECT, "share");//添加分享内容标题
            share_intent.putExtra(Intent.EXTRA_TEXT, "share with you:"+"android");//添加分享内容
            //创建分享的Dialog
            share_intent = Intent.createChooser(share_intent, "share");
            startActivity(share_intent);
        }
        /**
         * Android原生分享功能
         * @param appName:要分享的应用程序名称
         */
        private void share(String appName) {
            Intent share_intent = new Intent();
            share_intent.setAction(Intent.ACTION_SEND);
            share_intent.setType("text/plain");
            share_intent.putExtra(Intent.EXTRA_SUBJECT, "分享");
            share_intent.putExtra(Intent.EXTRA_TEXT, "推荐您使用一款软件:" + appName);
            share_intent = Intent.createChooser(share_intent, "分享");
            startActivity(share_intent);
        }

    二、以shareSDK为例

    1,在http://www.mob.com官网上去创建一个后台应用(如果没有账号的同学要去先注册一下),主要后去的是你新创建的应用的appKey值

    2,这里我们分享新浪微博为例,在新浪微博的sdk中创建一个新的应用,主要是获取这个应用的appKey和appSecret值

    3.在官网配置

    4、按方法配置APP build.gradle

    5一键分享

    /**
         * onekeyshare分享调用九宫格方法
         */
        private void showShare() {
            OnekeyShare oks = new OnekeyShare();
            //关闭sso授权
            oks.disableSSOWhenAuthorize();
    
            // 分享时Notification的图标和文字  2.5.9以后的版本不调用此方法
            //oks.setNotification(R.drawable.ic_launcher, getString(R.string.app_name));
            // title标题,印象笔记、邮箱、信息、微信、人人网和QQ空间使用
            oks.setTitle("分享标题");
            // titleUrl是标题的网络链接,仅在人人网和QQ空间使用
            oks.setTitleUrl("http://sharesdk.cn");
            // text是分享文本,所有平台都需要这个字段
            oks.setText("我是分享文本");
            // imagePath是图片的本地路径,Linked-In以外的平台都支持此参数
            oks.setImagePath("/sdcard/test.jpg");//确保SDcard下面存在此张图片
            // url仅在微信(包括好友和朋友圈)中使用
            oks.setUrl("http://sharesdk.cn");
            // comment是我对这条分享的评论,仅在人人网和QQ空间使用
            oks.setComment("我是测试评论文本");
            // site是分享此内容的网站名称,仅在QQ空间使用
            oks.setSite(getString(R.string.app_name));
            // siteUrl是分享此内容的网站地址,仅在QQ空间使用
            oks.setSiteUrl("http://sharesdk.cn");
    
            // 启动分享GUI
            oks.show(this);
        }
        /**
         * 指定平台分享
         */
        private void showShare1() {
            Platform platform = ShareSDK.getPlatform(SinaWeibo.NAME); //获取分享平台
    
            //设置平台监听器
            platform.setPlatformActionListener(new PlatformActionListener() {
                @Override
                public void onComplete(Platform platform, int i, HashMap<String, Object> hashMap) {
                    // TODO: 2016/11/3 此方法中增加分享功能
                    switch (i) {
                        case Platform.ACTION_AUTHORIZING:
                            Toast.makeText(getApplicationContext(), "授权成功", Toast.LENGTH_SHORT).show();
                            //获取分享参数
                            SinaWeibo.ShareParams params = new SinaWeibo.ShareParams();
                            String sTxt = "http://www.baidu.com/互联";//转成url编码
                            try {
                                sTxt += URLEncoder.encode("互联", "utf-8");
                            } catch (UnsupportedEncodingException e) {
                                e.printStackTrace();
                            }
                            params.setText("测试指定平台分享 @1611 zsp 分享地址:" + sTxt);
                            platform.share(params); //开始分享
                            platform.showUser(null);
                            break;
    
                        case Platform.ACTION_SHARE:
                            Log.d("zsp", "分享成功");
                            Toast.makeText(getApplication(), "分享成功", Toast.LENGTH_SHORT).show();
                            break;
                        case Platform.ACTION_USER_INFOR:
                            //显示所有用户信息
                            for (Map.Entry<String, Object> e : hashMap.entrySet()) {
                                Log.d("zsp", e.getKey() + "---" + e.getValue());
                            }
                            break;
                    }
                }
    
                @Override
                public void onError(Platform platform, int i, Throwable throwable) {
    
                }
    
                @Override
                public void onCancel(Platform platform, int i) {
    
                }
            });
            platform.authorize();//分享授权
        }

    具体详见DEMO:https://github.com/chaoyu168/shareDemo/tree/master

    三、微信分享,与2大同小异

    https://blog.csdn.net/baidu_35559769/article/details/82497289

    展开全文
  • Vue-分享功能

    千次阅读 2019-12-08 23:32:34
    今天分享一个小技巧,教你如何一分钟内学会用vue实现分享功能。 H5无法实现直接调用手机App并实现分享功能,如果你想自定义分享的内容,就必须在微信内嵌的浏览器里面调用微信的分享接口(QQ浏览器就要调用它的...

    今天分享一个小技巧,教你如何一分钟内学会用vue实现分享功能。

     

    H5无法实现直接调用手机App并实现分享功能,如果你想自定义分享的内容,就必须在微信内嵌的浏览器里面调用微信的分享接口(QQ浏览器就要调用它的相关api,其他浏览器也是),毕竟H5不是APP,有一些东西还是在APP上调用比较方便。H5方便的也就是直接使用浏览器自带的分享功能(把当前页面的URL分享出去,分享的内容根据浏览器自身而定)。

    不过有个别分享是可以直接通过URL,自定义分享内容的

     

    效果图:

    (比较简陋,但是能用)

     

     

     

    image.png

    代码如下:

     

     

     

    完整代码呈上(方便复制粘贴)

    <template>
      <div style="margin-top:100px;">
        <button @click="shareToQQ()">分享到QQ</button>
        <button @click="shareToRoom()">分享到QQ空间</button>
        <button @click="shareToMicroblog()">分享到微博</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        //分享到QQ好友(PC端可用)
        shareToQQ() {
          //此处分享链接内无法携带图片
          const share = {
            title: "东金秀财",
            desc: "描述",
            share_url: "https://xiucai.neafex.com/#/"
          };
          location.replace(
            "https://connect.qq.com/widget/shareqq/index.html?url=" +
              encodeURIComponent(share.share_url) +
              "&title=" +
              share.title +
              "&desc=" +
              share.desc
          );
        },
        //分享到QQ空间(可用)
        shareToRoom() {
            //自定义内容
          const share = {
            title: "东金秀财",
            desc: "描述",
            image_url: ["https://xxx.jpeg"],
            share_url: "https://地址"
          };
          let image_urls = share.image_url.map(function(image) {
            return encodeURIComponent(image);
          });
           //跳转地址
          location.replace(
            "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
              encodeURIComponent(share.share_url) +
              "&title=" +
              share.title +
              "&pics=" +
              image_urls.join("|") +
              "&summary=" +
              share.desc
          );
        },
        //分享到微博(可用)
        shareToMicroblog() {
          //自定义内容
          const share = {
            title: "东金秀财",
            image_url: ["https://xxx.jpeg"],
            share_url: "https://地址"
          };
          //跳转地址
          location.replace(
            "https://service.weibo.com/share/share.php?url=" +
              encodeURIComponent(share.share_url) +
              "&title=" +
              share.title +
              "&pic=" +
              share.image_url +
              "&searchPic=true"
          );
        }
      }
    };
    </script>
    
    <style>
    </style>

    微信公众号: 我的web前端自救之路

    回复 加群 ,跟大佬们一起交流技术吧

    展开全文
  • 使用uni app实现H5微信分享功能

    万次阅读 热门讨论 2020-01-05 16:00:24
    要实现自定义微信分享功能,需要使用到微信官方提供的 js-sdk,微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包,通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、...

    一、描述

    要实现自定义微信分享功能,需要使用到微信官方提供的 js-sdk,微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包,通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

    二、准备工作

    下载 HBuilderX 并安装
    js-sdk官方开发文档 《官方文档》

    三、JS-SDK使用步骤

    步骤一:绑定域名

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    注意:该公众号必须通过微信认证,没有微信公众号需要注册一个 点击注册公众号

    在这里插入图片描述这里业务域名、js接口安全域名以及网页授权域名设置成一样的(分享可以不用配置网页授权域名),根据自己的业务需求来设置.
    注意:前端页面必须在js接口安全域名下,获取token时是需要配置ip白名单(服务器的公网ip即可)。
    在这里插入图片描述

    步骤二:引入JS文件

    在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js

    如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。

    备注:支持使用 AMD/CMD 标准模块加载方法加载

    步骤三:通过config接口注入权限验证配置

    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: '', // 必填,公众号的唯一标识
      timestamp: , // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [] // 必填,需要使用的JS接口列表
    });
    
    步骤四:通过ready接口处理成功验证
    wx.ready(function(){
      // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    });
    

    四、业务逻辑

    以上js-sdk需要的配置以及介绍完毕,开始上代码部分。

    1、后端代码

    调用微信sdk是需要后端进行签名的,签名代码:

    1)、获取token

    // 获取token
        private static String getAccessToken() {
            String access_token = "";
            String grant_type = "client_credential";//获取access_token填写client_credential
            String AppId="你自己的公众号appid";//第三方用户唯一凭证
            String secret="公众号 秘钥";//第三方用户唯一凭证密钥,即appsecret
            //这个url链接地址和参数皆不能变  这个token是需要进行缓存的,因为它的调用次数每日是有限的。
     
            String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type="+grant_type+"&appid="+AppId+"&secret="+secret;  //访问链接
     
            try {
                URL urlGet = new URL(url);
                HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
                http.setRequestMethod("GET"); // 必须是get方式请求
                http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");
                http.setDoOutput(true);
                http.setDoInput(true);
                http.connect();
                InputStream is = http.getInputStream();
                int size = is.available();
                byte[] jsonBytes = new byte[size];
                is.read(jsonBytes);
                String message = new String(jsonBytes);
                JSONObject demoJson = JSONObject.fromObject(message);
                access_token = demoJson.getString("access_token");
                is.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            logger.info("access_token:"+access_token);
            return access_token;
        }
     
    

    2)、获取ticket (需要缓存)

      // 获取ticket
        private static String getTicket(String access_token) {
            String ticket = null;
            String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi";// 这个url链接和参数不能变
            try {
                URL urlGet = new URL(url);
                HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
                http.setRequestMethod("GET"); // 必须是get方式请求
                http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
                http.setDoOutput(true);
                http.setDoInput(true);
                System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒
                System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒
                http.connect();
                InputStream is = http.getInputStream();
                int size = is.available();
                byte[] jsonBytes = new byte[size];
                is.read(jsonBytes);
                String message = new String(jsonBytes, "UTF-8");
                JSONObject demoJson = JSONObject.fromObject(message);
                ticket = demoJson.getString("ticket");
                is.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            System.out.println("ticket:"+ticket);
            return ticket;
        }
    

    3)、签名类

     
    public class Sign {
        public static Map<String, String> sign(String jsapi_ticket, String url) {
            Map<String, String> ret = new HashMap<String, String>();
            String nonce_str = create_nonce_str();  //生成随机串
            String timestamp = create_timestamp();   //生成当前时间戳
            String string1;
            String signature = "";
     
            // 注意这里参数名必须全部小写,且必须有序
            string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "&timestamp=" + timestamp + "&url=" + url;
            System.out.println("string1:"+string1);
     
            try {
                MessageDigest crypt = MessageDigest.getInstance("SHA-1");
                crypt.reset();
                crypt.update(string1.getBytes("UTF-8"));
                signature=	WXUnitl.getSignature(jsapi_ticket, nonce_str, timestamp, url);
            } catch (NoSuchAlgorithmException e) {
                e.printStackTrace();
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
     
            ret.put("url", url);
            ret.put("jsapi_ticket", jsapi_ticket);
            ret.put("nonceStr", nonce_str);
            ret.put("timestamp", timestamp);
            ret.put("signature", signature);
     
            return ret;
        }
     
        // 生成签名
        private static String byteToHex(final byte[] hash) {
            Formatter formatter = new Formatter();
            for (byte b : hash) {
                formatter.format("%02x", b);
            }
            String result = formatter.toString();
            formatter.close();
            return result;
        }
     
        // 生成nonce_str
        private static String create_nonce_str() {
            return UUID.randomUUID().toString();
        }
     
        // 生成timestamp
        private static String create_timestamp() {
            return Long.toString(System.currentTimeMillis() / 1000);
        }
    }
    

    4)、将需要的参数封装成实体类

    public class WinXinEntity {
        private String access_token;
        private String ticket;
        private String noncestr;
        private String timestamp;
        private String str;
        private String signature;
        ...省略set()get()
    }
    

    5)、封装签名串参数

    public static WinXinEntity getWinXinEntity(String url) {
            WinXinEntity wx = new WinXinEntity();
            String access_token = getAccessToken();  //同类的  上面的获取token的方法
            String ticket = getTicket(access_token);  //同类的  上面的获取ticket的方法
            Map<String, String> ret = Sign.sign(ticket, url);
            wx.setTicket(ret.get("jsapi_ticket"));
            wx.setSignature(ret.get("signature"));
            wx.setNoncestr(ret.get("nonceStr"));
            wx.setTimestamp(ret.get("timestamp"));
            return wx;
        }
    

    6)、签名

    public class WXUnitl {
        public static String getSignature(String jsapi_ticket, String nonce_str, String timestamp, String url) {
            // 注意这里参数名必须全部小写,且必须有序
            String string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "&timestamp=" + timestamp + "&url="
                    + url;
    
            String signature = "";
            try {
                MessageDigest crypt = MessageDigest.getInstance("SHA-1");
                crypt.reset();
                crypt.update(string1.getBytes("UTF-8"));
                signature = byteToHex(crypt.digest());
            } catch (NoSuchAlgorithmException e) {
                e.printStackTrace();
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
            return signature;
        }
    
        private static String byteToHex(final byte[] hash) {
            Formatter formatter = new Formatter();
            for (byte b : hash) {
                formatter.format("%02x", b);
            }
            String result = formatter.toString();
            formatter.close();
            return result;
        }
    }
    

    7)、Controller调用签名

      public Map<String, Object> sgture(HttpServletRequest request) {
            String strUrl=request.getParameter("url");
            logger.info("===前====url========="+strUrl);
            WinXinEntity wx = WeiXinUnitl.getWinXinEntity(strUrl);
            // 将wx的信息到给页面
            Map<String, Object> map = new HashMap<String, Object>();
            String sgture = WXUnitl.getSignature(wx.getTicket(), wx.getNoncestr(),             wx.getTimestamp(), strUrl);
            map.put("sgture", sgture.trim());//签名
            map.put("timestamp", wx.getTimestamp().trim());//时间戳
            map.put("noncestr",  wx.getNoncestr().trim());//随即串
            map.put("appid","写你自己的appid");//你的公众号APPID
            return map;
        }
    

    后端代码完毕!!

    五、前端部分 前端使用uni app

    import wxj from "../wxj/index.js"    //这是wx js-sdk的js文件
    	//点击邀请投票分享到朋友圈
    	/*
    	*参数根据自己的业务需求
    	 url:是当前页面的路径,let url=location.href.split("#")[0];
    	*desc:分享描述
    	imgUrl:分享小图标的连接,这里的连接必须在js接口安全域名下可以访问的。否者小图标不生效
    	shareUserName与shareDesignName 进行拼接做tittle
    	*/
    	  function myshare (url,desc,imgUrl,shareUserName,shareDesignName){
    		   //分享功能
    	  		 uni.request({
    				url:"http://***/vote/wx/wx",    //后端接口,返回微信签名串的接口,即上面的Controller
    	   			method:'GET',
    				data:{
    					'url':url
    				},
    	   			success(res) {
    	   						console.log(res.data)
    	   						//转换为json对象
    	   						var result =res.data;
    							let param=window.location.href.split("#")[1];
    										//设置分享的标题
    							var title="我是:"+shareUserName+",我为***命名为:"+shareDesignName+",请为我投票";
    							let host=window.location.href.split("?")[0];
    							console.log("========host======"+host)
    	   						wxj.config({
    	   							debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    	   							appId:result.appid, // 必填,公众号的唯一标识
    	   							timestamp: result.timestamp, // 必填,生成签名的时间戳
    	   							nonceStr: result.noncestr, // 必填,生成签名的随机串
    	   							signature: result.sgture,// 必填,签名
    	   							jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填,需要使用的JS接口列表
    	   						/* 即将废弃	jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填,需要使用的JS接口列表 */
    							});
    							wxj.ready(function () {   //需在用户可能点击分享按钮前就先调用
    							  wxj.updateAppMessageShareData({ 
    							    title:title, // 分享标题
    							    desc: desc, // 分享描述
    							    link:"http://***/wxShare/redirect?host="+encodeURIComponent(host)+"&param="+encodeURIComponent(param), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    							    imgUrl:imgUrl, // 分享图标
    							    success: function () {
    											
    									//alert("分享成功")
    							      // 设置成功
    							    },
    								fail: function (res) {
    									//alert("分享失败")
    								},
    								cancel : function() {
    								 // 用户取消分享后执行的回调函数
    								 
    								}
    							  });
    							 wxj.updateTimelineShareData({
    								 title:title, // 分享标题
    								 desc: desc, // 分享描述
    								 link:"http://***/wxShare/redirect?host="+encodeURIComponent(host)+"&param="+encodeURIComponent(param), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    								 imgUrl: imgUrl, // 分享图标
    								success: function (res) {	
    											console.log(res.data)
    										
    								  // 设置成功
    								},
    								fail: function (res) {
    									//alert("分享失败")
    								},
    								cancel : function() {
    								 // 用户取消分享后执行的回调函数	 
    								}
    							 })
    							});
    	   				}
    	   })
    	}
    	
    export default{
    	myshare
    }
    

    说明:前端分享接口中 link参数,可以写成windows.location.href 但是这种情况 在前端路由hash模式下会被微信截取(#后面被截取),使得每次分享出去的链接都会进入首页。
    如何解决分享进入首页问题:
    1、修改路由模式为history,但是分享出去链接不能打开,这个需要去nginx去配置一下。
    2、使用hash模式,我是在后端做了一次重定向,参数通过get方式进行拼接起来。

     link:"http://***/wxShare/redirect?host="+encodeURIComponent(host)+"&param="+encodeURIComponent(param), // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    

    后端接收参数并处理:

       public String shareUrl(String host,String param){
            logger.info("==========param===================="+param);
            logger.info("==========host===================="+host);
            String href=host+"#"+param;
            logger.info("==========href===================="+href);
    
            return "redirect:"+href;
        }
    

    这样就可以实现了hash模式下微信分享功能。

    总结:实现微信分享自定义功能并不难,我们一定要认真读官方文档,避免入坑。

    展开全文
  • js实现第三方平台分享功能

    千次阅读 2018-07-03 15:13:27
    1. qq好友分享实现 API文档:https://connect.qq.com/intro/sharetoqq/ 链接为 : http://connect.qq.com/widget/shareqq/index.html?title='分享标题'&...url='分享链接'......等参数 具体参数介绍如下: ...
  • Flutter 分享功能之Share

    万次阅读 热门讨论 2019-06-28 11:45:56
    效果: Summons the platform’s share sheet to share text. 非常简单,但也仅限于文本。 1、导入及引用 share: ^0.6.1+1 import 'package:share/share.dart'; 2、调用 Share.share( '【玩安卓Flutter版】...
  • H5+ App分享功能

    千次阅读 2019-06-11 17:43:17
    Hbuild app分享功能 首先去自己需要的平台申请相关权限。 新浪微博appkey申请步骤 腾讯微博appkey申请方法 微信appkey申请方法 Dcloud社区也提供了相关开发平台的参数配置。这是地址:...
  • 微信分享功能

    万次阅读 2018-07-30 18:06:05
    最近在做手机端页面,需要一个分享功能,其实自身分享是可以的,但是为了分享出的内容丰富,比如缩略图了,描述了等等,如下图所示: 步骤一:绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里...
  • vue 页面分享功能

    千次阅读 2019-04-30 16:42:13
    -- 分享弹窗 --> <el-dialog title="分享:数据大屏" :visible.sync="shareDialogVisible" width="30%"> <el-checkbox v-model="shareInfo.usePassword">启用密码:</el-checkbox> ...
  • 链接分享功能

    千次阅读 2018-11-23 09:00:26
    链接分享功能的网址是bshare.cn x先让你们看一下效果 当你从网上复制这段代码的时候 &amp;lt;div class=&quot;bshare-custom&quot;&amp;gt;&amp;lt;div class=&quot;bsPromo bsPromo2&...
  • 微信小程序之自定义分享功能

    千次阅读 2020-07-10 13:52:02
    方式1:小程序右上角自带的分享功能(…): 如果在当前页面调用wx.hideShareMenu()方法,那么右上角的分享功能将被隐藏,当然,隐藏方法与现实方法是承兑出现的,调用wx.showShareMenu()方法,可以显示该功能。 ...
  • * 实现微信分享功能的核心类 * @author chengcj1 * */ public class WechatShareManager { private static final int THUMB_SIZE = 150; public static final int WECHAT_SHARE_WAY_TEXT = 1; //文字 ...
  • H5 webapp 实现分享功能

    千次阅读 2019-02-09 22:05:25
    HBuilder webapp 实现分享功能 在webapp要实现分享首要需要去社区开放平台进行申请 腾讯开放平台:https://open.tencent.com/ 在腾讯开放平台上的QQ与微信开放平台中申请创建应用,一般没什么要求都是可以通过的。 ...
  • 还有一种就是类似饿了么的,买完东西后可以分销你的红包给其他人,当然shareSDK的功能不仅如此,今天我们就来快速集成一下。 一、mob中创建应用,并申请appKey 首先去官网,没有账号的需要注册,有账号的直接登录...
  • 微信分享与QQ分享功能现在都挺常见的,可以根据一些第三方社会化分功能快速实现,不过多多少少都不怎么纯净,最好都是自己看官方文档来实现就最好了~一、微信分享微信分享功能需要先在微信开放平台注册应用并获取APP...
  • 微信公众号自定义分享功能 与 获取点击分享者的openid,通过cookic校验,重新请求获取 引用的微信 js: <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>...
  • vue调用微信jssdk实现微信分享功能

    千次阅读 2019-05-09 11:19:29
    安装sdk npm install weixin-js-sdk...封装微信分享功能sdk.js import wx from 'weixin-js-sdk' //微信sdk依赖 import axios from 'axios'; // 引用全局 const jsApiList = ['onMenuShareAppMessage', 'onMenuS...
  • android实现微信分享、朋友圈分享功能

    千次阅读 多人点赞 2020-11-25 11:17:41
    相信做app的都遇到要分享朋友圈,或者把东西分享给别人的这个功能,下面就是实现这个功能的代码 1、第一步添加依赖 implementation 'com.tencent.mm.opensdk:wechat-sdk-android-without-mta:+' implementation '...
  • Hexo添加分享功能

    千次阅读 2018-08-25 15:40:29
    小编用的是Hexo的landscape主题,现在就给我的博客添加分享功能1.打开百度官方分享按钮网站: 百度分享2.找到“直接复制代码-&gt;复制”3.打开themes\landscape\layout_partial\article.ejs,将复制的代码粘贴到...
  • 实现微信小游戏好友分享功能 好友分享/转发功能是游戏传播的一种重要途径,在本节教程中我们就来看下如何在微信小游戏中实现这一功能。 运行效果如下: Cocos Creator版本:2.2.0 完整项目下载地址: ...
  • 微信小程序之分享功能

    万次阅读 多人点赞 2018-10-15 12:22:17
    微信小程序的分享功能可以分享页面给朋友或群聊,但是不能分享到朋友圈,需要分享朋友圈的话,可以在小程序内设计一个分享页面,利用小程序提供的canvas把小程序码绘制到分享图里保存到本地分享到朋友圈。...
  • javascript实现分享功能

    千次阅读 2018-10-30 12:26:40
    禁用 google、twitter、facebook 并设置分享的描述3.2.2. 设置微信二维码标题 使用的是一个插件share.js 因为我写的是静态网页,所以直接下载源文件,然后引用到项目中。引用cdn可以在这里获取cdnjs-share.js 下载...
  • 禁用微信分享功能

    千次阅读 2019-01-25 10:56:55
    微信浏览的禁止转发和分享,需要调用JSSDK,在网上找到了如下代码,直接复制粘贴即可。 &amp;lt;script type=&quot;text/javascript&quot; src=&quot;...
  • H5手机移动端调起浏览器自带分享功能实例(QQ、UC浏览器微博、微信分享) 注:代码需要在服务器或测试服务器上方可看到效果 HTML: <span class="viewshare wx" data-mshare="2"></span> <span ...
  • H5实现微信的自定义分享功能

    千次阅读 2020-04-20 18:47:32
    绑定域名,先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,即后端接口的域名。 引入微信官方的JS-SDK文件:<script src=...
  • Android微信分享功能集成开发指南(这一篇就够了)

    万次阅读 多人点赞 2018-09-07 17:11:26
    本文介绍的只是微信开发中的一个功能分享。看到网上很多关于微信分享的博客、帖子,说实话,没几篇写的全的,很多都是复制粘贴,介绍的也不全,缺少代码的分析,关键性的代码总是漏一句两句,看着就很难受。所以,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 750,026
精华内容 300,010
关键字:

分享功能