微信js分享_微信jssdk分享功能不能使用 - CSDN
精华内容
参与话题
  • 微信分享公共js

    2019-06-06 11:28:49
    基于微信公众号分享,调用微信 sdk,引用本文件前必须保证页面已经引入(支持 https) http://res.wx.qq.com/open/js/jweixin-1.2.0.js 详细查看微信公众号开发 这里是微信分享公共方法 CommonJs 本文件判断 ...

    微信分享

    更多前端工具和笔记博客:
    https://yaohuihou.github.io/

    基于微信公众号分享,调用微信 sdk,引用本文件前必须保证页面已经引入(支持 https) http://res.wx.qq.com/open/js/jweixin-1.2.0.js 详细查看微信公众号开发

    这里是微信分享公共方法

    CommonJs

    本文件判断 CommonJs API(module.exports),可在 vue 中引用此模块

    // vue调用
    const wxShare = require('./assets/share')
    wxShare(config, callback)
    
    // 普通页面调用
    wxShare(config, callback)
    

    config

    config 是为接口权限配置,必传 ;callback 为成功之后的回调函数,非必传,

    config = {
      appId: '', // 必填,公众号的唯一标识
      timestamp: , // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [], // 必填,调用api
      WechatShareData:{  // 必填
        'title': '分享文案',
        'link': '分享链接',
        'imgUrl': '分享图标',
        'desc': '描述'
      }
    }
    
    wxShare( config )
    

    callback

    callback 是微信 sdkapi 的其他扩展方法,非必填

    wxShare(config, function() {
      // 其他api扩展 非必填
      wx.hideAllNonBaseMenuItem()
    })
    

    微信分享源码

    /*! Weixin Share */
    ;(function(w) {
      // check API
      function checkJsApi(config) {
        var shareArr = {
          timeline: 'onMenuShareTimeline',
          appmessage: 'onMenuShareAppMessage',
          qq: 'onMenuShareQQ',
          weiboApp: 'onMenuShareWeibo',
          QZone: 'onMenuShareQZone'
        }
        for (var i = 0; i < config.jsApiList.length; i++) {
          var API = config.jsApiList[i]
          if (API.indexOf('share') != -1) {
            var type = API.split(':')[2]
    
            // 获取分享
            wx[shareArr[type]](config.WechatShareData)
          }
        }
      }
    
      var wxShare = function(config, callback) {
        wx.config({
          debug: true,
          appId: config.appId,
          timestamp: config.timestamp, // 生成签名的时间戳
          nonceStr: config.nonceStr, // 生成签名的随机串
          signature: config.signature, // 签名
          jsApiList: config.jsApiList
        })
        wx.ready(function() {
          // 检验是否分享
          checkJsApi(config)
    
          // 回调函数可扩展其他方法
          callback && callback()
        })
    
        //
        wx.error(function(res) {})
      }
      // commonjs
      if (typeof module !== 'undefined') {
        module.exports = wxShare
      } else {
        w.wxShare = wxShare
      }
    })(typeof global !== 'undefined' ? global : this)
    
    展开全文
  • 解决问题:微信JSSDK分享缩略图片在IOS中不显示,在安卓中显示正常。 1.在基本配置中,获取AppID,并配置IP白名单 2.设置js接口安全域名 (坑一!!!遇到的第一个坑就是只配置了业务域名,以及网页授权域名,没有...

    说明:项目前端框架vue,
    解决问题:微信JSSDK分享缩略图片在IOS中不显示,在安卓中显示正常。

    1.在基本配置中,获取AppID,并配置IP白名单

    在这里插入图片描述

    2.设置js接口安全域名

    (坑一!!!遇到的第一个坑就是只配置了业务域名,以及网页授权域名,没有配置JS接口安全域名,导致前端一直报错invalid signature)

    3.安装微信sdk

    1. 安装
    npm install weixin-js-sdk
    
    1. 引用,在index.html中
        <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript">
    

    4.上代码

    以下操作都在App.vue中完成

    1. 获取wx.config的配置参数,从后台获取
    2. 配置wx.config,并调用方法
    //在create中调用此方法
    
    getConfigParam(){
       ajaxSubmit(
           this.$http,
           getConfigParam,
           "get",
           { url:location.href.split('#')[0]},
           resData => {
                	wx.config({
    				    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    				    appId: _AppID, // 必填,公众号的唯一标识
    				    timestamp:resData.data.timestamp , // 必填,生成签名的时间戳
    				    nonceStr: resData.data.noncestr , // 必填,生成签名的随机串
    				    signature: resData.data.signature ,// 必填,签名
    				    jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填,需要使用的JS接口列表
    				});
    				wx.error(function(res){
    				    console.log(res)
    				});
    				wx.ready(function(){
    			  		var shareTitle="***"
    			  		var shareDesc="***************************************"
    			  		var shareLink=_localBaseUrl+"login"
    			  		var shareImg="################"
    			  		wx.onMenuShareAppMessage({
    							title: shareTitle, // 分享标题
    							desc: shareDesc, // 分享描述
    							link: shareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    							imgUrl:shareImg, // 分享图标
    							type: '', // 分享类型,music、video或link,不填默认为link
    							dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    							success: function () {
    							// 用户点击了分享后执行的回调函数
    							}
    						});
    						wx.onMenuShareTimeline({
    					    title: shareTitle, // 分享标题
    					    link:shareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    					    imgUrl:shareImg, // 分享图标
    					    success: function () {
    							},
    			  		});
    	  	})
           }
          )
      	}
    

    需要注意的地方:

    关于微信config:invalid signature:

    1. 配置JS接口安全域名
    2. 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。
    3. 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

    微信JSSDK分享缩略图片

    1. 分享缩略图imgUrl不支持相对位置(例如:"…/…/…/static/images/share_img.jpg"),只支持绝对位置(“http://www.baidu.com/static/images/share_img.jpg”)
    2. 分享缩略图片在IOS中不显示,但是在安卓中显示没有问题。官方给出原因是:在iOS微信6.1版本中,分享的图片外链不显示,只能显示公众号页面内链的图片或者微信服务器的图片(微信团队已经确认此问题,会在6.2中修复)
      但是我也不知道为什么在7.0以上版本的微信依旧存在这个问题,
      我的解决方法:
      将图片上传到微信公众号,然后把上传后图片地址考出来放进代码imgUrl

    好啦,以上就是我的一个小方法,希望对大家有帮助!

    展开全文
  • 前端js 个别问题解决方法 1、公众号配置  前提:公众号必须经过认证  登录公众号 ------> 公众号配置 ------> 功能设置  找到“JS接口安全域名”,配置域名(域名必须经过认证)  ...
    1. 公众号配置

    2. 后台接口

    3. 前端js

    4. 个别问题解决方法

     

     


     

    1、公众号配置

      前提:公众号必须经过认证

      登录公众号 ------> 公众号配置 ------> 功能设置

      找到“JS接口安全域名”,配置域名(域名必须经过认证)

      具体规则如下

      【以百度域名为例,下面输入框中填写的就是www.baidu.com(不知道只写baidu.com能不能行)】

      【如果填写的指定路径,那么分享的页面需在此路径下】

      

     

    2、后台接口

      控制层

      注:

      其中HttpUtils 中只使用了httpGet 来请求微信api接口

      RedisClient把token和ticket保存进redis,限制过期时间

      getSiteConfig仅仅用来获取appid和secrect

      加密的工具类在控制层的代码下面

      

    package com.mingtai.yuqing.common.controller;
    
    import com.alibaba.fastjson.JSONObject;
    import com.mingtai.base.model.ApiResult;
    import com.mingtai.yuqing.common.redis.RedisClient;
    import com.mingtai.yuqing.common.util.HttpUtils;
    import com.mingtai.yuqing.plat.tenant.service.ITenantService;
    import org.apache.commons.lang.StringUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import java.util.UUID;
    import static com.mingtai.yuqing.common.util.SHA1.SHA1;
    
    @RestController
    @RequestMapping("/wx/js/")
    public class WxJsConfigController {
    
        @Autowired
        private ITenantService tenantService;
        private static final Integer siteId = 180;
        private String token = null;
        private String appId = null;
        private String secret = null;
        private String ticket = null;
    
        /**
         * 获取微信JS配置信息
         * @param url
         * @param datetime
         * @return
         * @throws Exception
         */
        @RequestMapping("getConfig")
        public ApiResult getConfig(String url, String datetime) throws Exception {
            String key = "wx.ticket." + this.siteId;
            String nowTicket = RedisClient.get(key);
            getSiteConfig();
            if (StringUtils.isBlank(nowTicket)) {
                getAccessToken();
                getTicket(key);
            } else {
                this.ticket = nowTicket;
            }
            //随机字符串
            String nonceStr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);
            //时间戳
            String timestamp = datetime;
            //生成内容
            url = url + "&t=" + datetime;
            String str = "jsapi_ticket=" + this.ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;
            String signature = SHA1(str);
    
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("appId", this.appId);
            jsonObject.put("timestamp", timestamp);
            jsonObject.put("nonceStr", nonceStr);
            jsonObject.put("signature", signature);
            return new ApiResult(jsonObject);
        }
    
        public void getAccessToken() throws Exception {
            String key = "wx.token." + this.siteId;
            String accessToken = RedisClient.get(key);
            if (StringUtils.isBlank(accessToken)) {
                String tokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";
                tokenUrl = tokenUrl.replace("APPID", this.appId).replace("APPSECRET", this.secret);
                String result = HttpUtils.doGet(tokenUrl);
                JSONObject json = JSONObject.parseObject(result);
                String newToken = json.getString("access_token");
                Integer expireTime = json.getInteger("expires_in");
                this.token = newToken;
                RedisClient.set(key, newToken, expireTime - 10);
            } else {
                this.token = accessToken;
            }
        }
    
        public void getTicket(String key) throws Exception {
            String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + this.token + "&type=jsapi";
            String nowTicket = RedisClient.get(key);
            String result = HttpUtils.doGet(url);
            JSONObject json = JSONObject.parseObject(result);
            nowTicket = json.getString("ticket");
            Integer expireTime = json.getInteger("expires_in");
            this.ticket = nowTicket;
            RedisClient.set(key, nowTicket, expireTime - 10);
        }
    
        private void getSiteConfig() {
            String allConfig = tenantService.getTenantById(this.siteId).getTeExpandField();
            JSONObject jsonObject = JSONObject.parseObject(allConfig);
            this.appId = jsonObject.getString("appId");
            this.secret = jsonObject.getString("secret");
        }
    
    
    }

      工具类

      

    package com.mingtai.yuqing.common.util;
    
    import java.io.UnsupportedEncodingException;
    import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    
    public class SHA1 {
    
        public static String SHA1(String decript) throws UnsupportedEncodingException {
            try {
                MessageDigest digest = MessageDigest.getInstance("SHA-1");
                digest.update(decript.getBytes("utf-8"));
                byte messageDigest[] = digest.digest();
                StringBuffer hexString = new StringBuffer();
                //转为十六进制
                for (int i = 0; i < messageDigest.length; i++) {
                    String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
                    if (shaHex.length() < 2) {
                        hexString.append(0);
                    }
                    hexString.append(shaHex);
                }
                return hexString.toString();
            } catch (NoSuchAlgorithmException e) {
                e.printStackTrace();
            }
            return "";
        }
    
    }

     

    3、前端JS

      注:需先调用wxJsConfig方法

    //微信js配置
        wxJsConfig: function (config) {
            wx.config({
                appId: config.appId,
                timestamp: config.timestamp,
                nonceStr: config.nonceStr,
                signature: config.signature,
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'onMenuShareAppMessage',  //旧的接口,即将废弃
                    'onMenuShareTimeline' //旧的接口,即将废弃
                ]
            });
        },
        //微信分享
        wxJsShare: function (data) {
            //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
            wx.ready(function () {
                wx.updateAppMessageShareData({
                    title: data.title,
                    desc: data.desc,
                    link: data.link,
                    imgUrl: data.imgUrl,
                    success: function () {
                        console.log("自定义分享1");
                    }
                });
            });
            //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
            wx.ready(function () {
                wx.updateTimelineShareData({
                    title: data.title,
                    link: data.link,
                    imgUrl: data.imgUrl,
                    success: function () {
                        console.log("自定义分享2");
                    }
                });
            });
        }

     

    4、个别问题解决方法

      注:只作补充,具体问题解决方法见官方JS文档----附录5

      (1)可以使用“微信开发者工具”来调试

      (2)“js-sdk 没有此SDK或暂不支持此SDK模拟”。

        微信开发者工具不支持此方法的调用,用手机上的微信是没问题的。

        例如:updateAppMessageShareData

    转载于:https://www.cnblogs.com/ys382815832/p/10826960.html

    展开全文
  • 1,你需有一个公众号,没有不用谈自定义分享内容了; 2,公众号上把你的域名增加到“JS接口安全域名”: 3,我这功能是基于thinkphp...* 微信分享初始化 * @return array * @author simon */ if(!function_ex...

    1,你需有一个公众号,没有不用谈自定义分享内容了;

    2,公众号上把你的域名增加到“JS接口安全域名”:

    3,我这功能是基于thinkphp3.1实现的,按下图上网下包放在对应该目录下:

    4,修改内核公共文件:functions.php

    加入代码:

    /**
    * 微信分享初始化
    * @return array
    * @author simon
    */

    if(!function_exists('wx_share_init')){
        function wx_share_init(){
        $wxconfig = array();
        vendor('Wxjssdk.Jssdk');
        $config = array('appid'=>WXAPPID,'appsecret'=>WXAPPSECRET); //这里配置了微信公众号的AppId和AppSecret
        $jssdk =new JSSDK($config['appid'], $config['appsecret']);
        $wxconfig = $jssdk->GetSignPackage();
        return $wxconfig;
        }
    }

    5,在项目配置文件:config.php

    加入代码:(星为公众号的appid和appsecret)

    define("WXAPPID", "******");
    define("WXAPPSECRET", "*****");

    6,在对应要调用的页面控制器里加入代码:

    public function _initialize() {
            //调用微信JSSDK接口,为自定义分享功能提供验证参数----
            $this->wxconfig = wx_share_init();
            $this->assign('wxconfig', $this->wxconfig); 
        }

    6,在对应要调用的页面控制器的模板文件里加入代码:

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script type="application/javascript" language="javascript">
    //alert("sdfasfasf");
    var shareimg='http://{$Think.server.http_host}/Public/images/choujiang-ad.jpg';
    var appId="{$wxconfig['appId']}";
    var timestamp="{$wxconfig['timestamp']}";
    var nonceStr="{$wxconfig['nonceStr']}";
    var signature="{$wxconfig['signature']}";
    //微信分享-------------------------
    wx.config({
    debug:false,// 是否开启调试模式
    appId:appId,// 必填,微信号AppID
    timestamp:timestamp,// 必填,生成签名的时间戳
    nonceStr:nonceStr,// 必填,生成签名的随机串
    signature:signature,// 必填,签名,见附录1
    jsApiList: [
                        'checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone'
                      ]
    });


    wx.ready(function(){
    //alert("出现");
     // 1 判断当前版本是否支持指定 JS 接口,支持批量判断
                    wx.checkJsApi({
                      jsApiList: [
                        'getNetworkType',
                        'previewImage',
                         'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone'
                      ],            
                    });
    var shareData ={
    title:'{$title}',// 分享标题
    link:'{$wxconfig.url}',// 分享链接,记得使用绝对路径
    imgUrl:shareimg,// 分享图标,记得使用绝对路径
    desc:'{$art.description}',// 分享描述
    type: 'link',
    success:function(){
    console.info('分享成功!');
    // 用户确认分享后执行的回调函数
    },

    cancel:function(){
    console.info('取消分享!');
    // 用户取消分享后执行的回调函数
    }
    }
    wx.onMenuShareAppMessage(shareData);
    wx.onMenuShareTimeline(shareData);
    wx.onMenuShareQQ(shareData);
    wx.onMenuShareWeibo(shareData);

    });

    wx.error(function(res){ 
      console.info(res);
    });
    </script>

     

    搞掂,不是程序员的勿看,不会tp的自学去,不了解微信JS接口勿做

    展开全文
  • 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 步骤二:引入JS文件 在需要调用JS接口的页面引入如下JS文件,(支持https):...
  • 要想自定义分享的link、title、desc、imgUrl(分享卡片缩略图)就得集成JSSDK做自定义分享。准备阶段第一步要先配置安全域名:开发阶段可以将测试服和正式服的域名都配进去。没配置的话点击设置---公众号设置---功能...
  • 公众号在有需要时(如不需要用户分享某个页面),可在网页中通过JavaScript代码隐藏网页右上角按钮。 接口调用代码(JavaScript) document.addEventListener('WeixinJSBridgeReady', function ...
  • 1.引入js &lt;script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"&gt;&lt;/script&gt; 2.在页面添加配置 &lt;script type="...
  • 微信h5界面隐藏分享按钮

    千次阅读 2018-08-03 17:08:13
    1: 加一段js代码 &lt;script type="text/javascript"&gt; document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); }); &...
  • [JS]二维码分享微信

    千次阅读 2016-12-23 15:49:54
    [JS]二维码分享微信
  • 最近做一个微信的小项目,测试的时候发现iphone版的微信分享网页或者分享到朋友圈时描述文字都变了乱码,安卓的微信分享倒没有这样的问题,最后问题解决了,分享一下我解决问题的过程。 一开始我以为是页面编码的...
  • 微信分享页面到朋友圈或者发送给朋友的时候,会把网址所带参数截断, 例如在微信里面打开:http://nrnc.net/52441/?a=12321 分享给朋友后,地址会变成: ... ... 这样的有什么解决方案??
  • h5页面调用微信jssdk分享

    千次阅读 2019-03-21 11:33:04
    引入微信js <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script> 配置wx.config,其中appID、TimeStamp、NonceStr、SigNature都是由后台生成,需要...
  • 前端实现微信分享

    千次阅读 2017-06-05 14:58:01
    前端实现微信分享,思路是先申请借口,配置环境,然后调用微信公众平台开放的用于分享的接口实现分享即可。
  • 最近做一个项目的时候用到微信分享 ,实现定义分享标题,图片,了解到微信在发布JSSDK后,把包括自定义分享在内的众多网页服务接口进行了统一。如果要想自定义分享自己的网页信息给好友或朋友圈,就最好使用这个...
  • php 中去除中文的换行,str_replace(PHP_EOL,'',($res['share_content']));
  • 1.微信js的debug模式开启情况下,在微信端载入页面时,夺得config OK 的信息(认证成功) 2.但是在分享后,无法加载配置的分享信息,分享后仍然是非定制的信息。 条件说明: 1.参考微信官方文档进行配置 2....
  • http://www.jiathis.com/ 打开以上网页,将代码复制到你的页面中,即可 优点:使用方便 缺点:无法做统计
  • 微信分享后的链接如何修改?根据用户测试的结果不同,分享后的链接内容显示不同结果
  • webApp如何实现分享功能(微信端)

    千次阅读 2017-05-27 09:18:20
    webApp实现分享功能首先,在微信的右上角公众号名称->功能设置->js接口安全域名首先引入:微信接口js,http://res.wx.qq.com/open/js/jweixin-1.0.0.js其次,对分享进行一个配置:wx.config({ debug: true, appId:...
1 2 3 4 5 ... 20
收藏数 41,980
精华内容 16,792
关键字:

微信js分享