|
这是一个从H5跳转到第三方小程序的功能。
一? ?第一个注意点，要知道你要跳转的第三方小程序原始ID一般是gh_开头的，有了这个id就能跳转到第三方小程序公共界面。
二? ?第二个注意点，这个跳转标签的path地址一定一定一定要提前准备好，因为假如你要跳转到小程序里具体某个用户那如果不提前准备好跳转地址拼上用户信息，而是等点击跳转按钮再获取跳转地址拼上用户信息那你是无法准确跳到准确的用户那的。? ? ? ? ? 暂时的理解是点击跳转的一瞬间就已经跳过去了，这时候手机会出现个弹窗这个弹窗绑定不了任何事件，只能做是否具体跳转拦截处理。如果在跳转绑定获取地址拼用户信息接口始终慢跳转一步，? ? ? ? ? ? ? 总结一句话就是不能同时获取跳转地址拼用户信息再跳转到小程序具体某一用户
? ? ? ? ? ? ? ? ? ? <wx-open-launch-weapp id="doc-launch-btn" username="gh_95xxxxxxxx" ?:path="path" @launch="handleLaunchFn">
? ? ? ? ? ? ? ? ? ? ? ? <script type="text/wxtag-template">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <style>.btn { ? width: 100%;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-family: PingFangSC-Medium, PingFang SC;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-weight: 600;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: #14B5B0;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height: 46px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? border: 0px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? background: #FFFFFF;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }</style>
? ? ? ? ? ? ? ? ? ? ? ? <button ?type='primary' class="btn">立即使用</button>
? ? ? ? ? ? ? ? ? ? ? ? </script>
? ? ? ? ? ? ? ? ? ? </wx-open-launch-weapp>
使用标签前封装的配置代码
第一个? ?jssdkSignTest.js文件
(function () {
? ? var _sino = window.hmt = {};
? ? // let url // 微信jsdkSign待签名url;
? ? const serverPath =? ?'域名'; //jssdkSign服务器地址;
? ? // _sino.callbackWX // 回调函数
? ? window.jssdkSign = function (url, callback) {
? ? ? ? this.url = url;
? ? ? ? _sino.callbackWX = callback;
? ? ? ? getJssdk(url);
? ? };
? ? function getJssdk (url) {
? ? ? ? // 加载jssdk信息;
? ? ? ? var scriptJssdk = document.createElement('script');
? ? ? ? try {
? ? ? ? ? ? scriptJssdk.src = serverPath + '/jssdkSign.json?url=' + url + '&callback=hmt.callbackWX';
? ? ? ? ? ? document.head.appendChild(scriptJssdk);
? ? ? ? } catch (e) {
? ? ? ? ? ? console.log(e);
? ? ? ? }
? ? }
})();
第二个配置wxfig.js文件
export function initWxConfig () {
? ? const url = encodeURIComponent(window.location.href.split('#')[0]);
? ? // console.log(sessionStorage.getItem('wxInfo'));
? ? window.jssdkSign(url, function (res) {
? ? ? ? // console.log(wx, 'wx');
? ? ? ? // localStorage.setItem('wxInfo', JSON.stringify(res));
? ? ? ? wx.config({
? ? ? ? ? ? debug: false,
? ? ? ? ? ? appId: res.appId,
? ? ? ? ? ? timestamp: res.timestamp,
? ? ? ? ? ? nonceStr: res.noncestr,
? ? ? ? ? ? signature: res.signature,
? ? ? ? ? ? jsApiList: [
? ? ? ? ? ? ? ? 'hideOptionMenu',
? ? ? ? ? ? ? ? 'showOptionMenu'
? ? ? ? ? ? ],
? ? ? ? ? ? openTagList: ['wx-open-launch-weapp']
? ? ? ? });
? ? ? ? wx.error(function (res) {
? ? ? ? ? ? console.log('微信签名错误进入', res.errMsg);
? ? ? ? });
? ? ? ? wx.ready(function () {
? ? ? ? ? ? // console.log('ready');
? ? ? ? });
? ? });
};
哪个页面使用的时候只需要在使用页面 import initWxConfig from 'wxfig.js'然后mounted里initWxConfig（）即可。
|