微信分享给朋友圈/朋友/判断网络类型/支付在vue里面亲测

最近开发微信公众号也是各种接触jssdk，也走了不少弯路吧，写个总结铭记一下。。。。用的是vue框架来开发的。。。。。在涉及分享的时候在因为默认取得就是页面第一张图，也走了点弯路，虽然可取但是自己定义的tittle和描述内容纹丝不动最开始这么干的：仅仅改变了分享图标而已，并没有起到多大的作用style="display:none">src="http://***。c

fighting_sunnyGirl

2967人浏览 · 2017-07-30 19:17:49

fighting_sunnyGirl · 2017-07-30 19:17:49 发布

最近开发微信公众号也是各种接触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)
},

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^