最近开发微信公众号也是各种接触jssdk,也走了不少弯路吧,写个总结铭记一下。。。。用的是vue框架来开发的。。。。。

在涉及分享的时候在因为默认取得就是页面第一张图,也走了点弯路,虽然可取但是自己定义的tittle和描述内容纹丝不动

最开始这么干的:仅仅改变了分享图标而已,并没有起到多大的作用

<body>
  <div style="display:none">
    <img src="http://***.com" alt=""/>
  </div>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

在可能被分享的页面里面的方法里写上

  //初始化微信js  我是在created里面调用 你随意
      initJs(){
        console.log('ajaxssssss')
        let fromUrl = window.location.href;
        utilAxios.post({
           url: `/api/wechat/wechat/jsSign?fromUrl=${fromUrl}`,//请求到配置函数所需参数
          method: 'POST',
          headers:{
            'Content-Type':'application/x-www-form-urlencoded'
          },
          callback: function (res) {
            console.log('成功了S')
            console.log(res)
            console.log(res.data.data.timestamp+'000000')
            if(res){
              wx.config({
                debug: false,
                appId: res.data.data.appId,
                timestamp: res.data.data.timestamp,
                nonceStr: res.data.data.noncestr,
                signature: res.data.data.signature,
                jsApiList: [ 
                  'checkJsApi',
                  'onMenuShareTimeline',
                  'onMenuShareAppMessage',
                  'onMenuShareQQ',
                  'onMenuShareWeibo',
                  'getNetworkType',
                ]
              });
            }else{
              alert('获取信息失败,请重新尝试!');
            }
          }, error: function () {
            alert("网络错误,请重新尝试");
          }
        });
      },

//显示设备状态
      getNetworkType(){
        let that = this ;
       wx.ready(function(){  
	wx.getNetworkType({
       	 success: function (res) {
//            console.log(res.networkType+'aaassasdsdsdasad');
        	  if( res.networkType == 'wifi') {
            //如果现在的网络状态是wifi  可以根据需要操作
         	 } else {
            //其他情况下的操作
        	  }
      	  },
       	 fail: function (res) {
//            console.log(JSON.stringify(res));
         	 console.log('错了')
       	 }
    	  	});

     	 })
      },
//分享给朋友自定义函数  
doShareAppMessage(){     
   wx.ready(function(){ //一定要在ready函数里面调用微信接口 如下     
     wx.onMenuShareAppMessage({         
 		title: '分享标题', // 分享标题          
		desc:"我是一个介绍",
		//   link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致  
       		 imgUrl: 'http://***.png', // 分享图标    
     		 success: function () {     
      			 // 用户确认分享后执行的回调函数     
      			 console.log('分享成功了')         
 		},        
  		cancel: function () {            // 用户取消分享后执行的回调函数      
    			  console.log('取消分享了')   
      		 }    
    		});       
 	})     
 },    
  //分享到朋友圈    
  doShareOnline(){    
  	  wx.ready(function () {      
   		 wx.onMenuShareTimeline({    
     			   title: '分享标题', // 分享标题   
      			   desc: '分享描述分享描述分享描述', // 分享描述      
     			   link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          		   imgUrl: 'http://**.png', // 分享图标    
        		   type: '', // 分享类型,music、video或link,不填默认为link       
    			   dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空    
       			   success: function () {    
          		  	// 用户确认分享后执行的回调函数        
   				 },           
 			   cancel: function () {           
   				// 用户取消分享后执行的回调函数    
      			  }       
  		 });       
 	})   
   },
支付 用的微信内置对象WeixinJSBridge
 用的也是莫名其妙,项目接近尾声了,也不好在过大调试, 下次全部用wx.方法来做 
utilAxios.post({
  url: `/api/wechat/pay/wechatOrder?orderNo=${questionId}&payType=question`,    
  method: 'POST',
  headers:{
    'Content-Type':'application/x-www-form-urlencoded'
  },
  callback: function (res) {
    if( res.data.success == 1000 ) {
      //支付成功
      let timeStamp = res.data.api.timeStamp;
      let nonceStr = res.data.api.nonceStr;
      let package1 = res.data.api.package;
      let signType = res.data.api.signType;
      let paySign = res.data.api.paySign;
      let appId = res.data.api.appId;
      console.log(this.signType);
      function onBridgeReady(){
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId":appId,     //公众号名称,由商户传入
            "timeStamp":timeStamp,         //时间戳,自1970年以来的秒数
            "nonceStr":nonceStr, //随机串
            "package":package1,
            "signType":signType,         //微信签名方式:
            "paySign":paySign //微信签名
          },
          function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。
            //支付成功跳转页面
            that.$router.push({
              path:`/myQuestions`
            })
          }
        );
      }
      if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        }else if (document.attachEvent){
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      }else{
        onBridgeReady();
      }
    }
  }
});


然后在合适的地方调用

created(){
  this.initJs();//微信初始函数 
  let that = this ;//保存当前this指向
//下面用了演示
   setTimeout(function(){
     that.doShareAppMessage();
     that.doShareOnline();
   },2000)
},


Logo

前往低代码交流专区

更多推荐