SoFunction
Updated on 2025-04-05

vue2.0 How to implement WeChat sharing in hash mode

Recently, I took out the demo of vue and sorted it out, and it happened to be the "WeChat Sharing" function, so I encountered new problems;

Because the hash mode has "#", the visa shared by WeChat is invalid; when it is changed to history mode, share ok;

But the problem is, the history mode is quite,:

  • Refresh the page and the page reports an error of 404; isn't this a joke? [However, this problem can be solved in the background, so I won’t talk about it here]
  • The img file under assets failed to introduce the path;

I can't stand the above problem, so the history mode is definitely not possible; I decided to still use the hash mode; the history mode must not be possible

So the question is: How to implement WeChat sharing in hash mode?

In fact, the most important step in the problem of failure in WeChat sharing is to solve the problem of "#";

On the general page, we obtain the current url that is used for Jiang Zi operation.

let params = '&params=' + ({url: });

We need to make some minor adjustments on the SPA page. The purpose of the adjustment is to make “#” say goodbye

let params = '&params=' + ({url: encodeURIComponent(('#')[0])});

After modifying this way, the signed url does not contain "#", so it will be OK. The completed code is posted below.

<script>
// Share on WeChatimport configModel from "../models/";
import elementService from "../services/";

class ShareService{
 wxShare(succCb, cancelCb, errorCb){
  let baseUrl = '/api/jsapi?action=jscfg';
  let samekey = '&uid=' +  + '&wxapiopenid=' +  +　'&wxapitoken=' +  + '&debug=nf';
  let params = '&params=' + ({url: encodeURIComponent(('#')[0])}); // Here is the key  let url = baseUrl + params + samekey;
  $.post(url, data => {
   ();
   (data);
   switch () {
    case 0:
     (, , succCb, cancelCb, errorCb);
     break;
    default:
     (data.error_msg, 'error');
     break;
   }
  }, 'json');
 }
 wxConfig(wxconfig, share, succCb, cancelCb, errorCb){
  ({
   debug: false,
   appId: ,
   timestamp: ,
   nonceStr: ,
   signature: ,
   jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo'
   ]
  });
  (function() {
   ({ //friend    title: ,
    desc: ,
    link: ,
    imgUrl: ,
    success: function() {
     succCb && succCb();
    },
    cancel: function() {
     cancelCb && cancelCb();
    }
   });
   ({ //Friends    title: ,
    link: ,
    imgUrl: ,
    success: function() {
     succCb && succCb();
    },
    cancel: function() {
     cancelCb && cancelCb();
    }
   });
   ({ //QQ
    title: ,
    desc: ,
    link: ,
    imgUrl: ,
    success: function() {
     succCb && succCb();
    },
    cancel: function() {
     cancelCb && cancelCb();
    }
   });
   ({ //QQ
    title: ,
    desc: ,
    link: ,
    imgUrl: ,
    success: function() {
     succCb && succCb();
    },
    cancel: function() {
     cancelCb && cancelCb();
    }
   });
  });
  (function(res) {
   (res);
   errorCb && errorCb((res));
  });
 }
}

let shareSerivice = new ShareService();
export default shareSerivice;
</script>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.