阅读 188

vue 开发活动页面增加H5跳转小程序,微信分享朋友,分享朋友圈等功能

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。可以只设置一级域名,如*.qq.com, 这样的话,同个公司不同业务部门都可以绑定域名了。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的html页面引入如下JS文件,(支持https):res.wx.qq.com/open/js/jwe… 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:res2.wx.qq.com/open/js/jwe… (支持https)。

备注:支持使用 AMD/CMD 标准模块加载方法加载

步骤三:编写wxConfig.js 文件

import axios from 'axios';

/**
 * @name: xxx
 * @Date: 2021-04-30 10:00:00
 * @msg:  微信分享朋友,分享朋友圈,H5跳转小程序配置
 * @param {object} pageInfo
 * @return {*}
 */
const wxConfig = (pageInfo) => {
    let ua = navigator.userAgent.toLowerCase();
    let isWXWork = ua.match(/wxwork/i) == 'wxwork'; // 企业微信
    let isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; // 微信
    if (!isWeixin) {
        return;
    }
    axios({
        method: 'post',
        url: 'https://xxx.xxx.com/xxx/xxx',
        data: {
            JsSdkUrl: window.location.href
        },
        transformRequest: [function (data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(function (res) {
        if (res.status === 200 && res.data) {
            let data = res.data;
            window.wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: data.appid, // 必填,公众号的唯一标识
                timestamp: data.timestamp, // 必填,生成签名的时间戳
                nonceStr: data.nonceStr, // 必填,生成签名的随机串
                signature: data.signature, // 必填,签名
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填,需要使用的JS接口列表
                openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app', 'wx-open-subscribe', 'wx-open-audio']
            });
            window.wx.ready(function () {
                console.log('进入ready')
                window.wx.updateAppMessageShareData({ // 朋友
                    title: pageInfo.shareTitle, // 分享标题
                    desc: pageInfo.shareDesc, // 分享描述
                    link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: pageInfo.shareImg, // 分享图标
                    success: function () {
                        // 用户点击了分享后执行的回调函数
                        console.log('updateAppMessageShareData success');
                    }
                });
                window.wx.updateTimelineShareData({ // 分享朋友圈
                    title: pageInfo.shareTitle, // 分享标题
                    link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: pageInfo.shareImg, // 分享图标
                    success: function () {
                        // 设置成功
                        console.log('updateTimelineShareData success');
                    }
                })
            });
            wx.error(function (res) {
                // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,
                // 也可以在返回的res参数中查看,对于SPA可以在这里更新签名
                console.error('wx.config.error' + JSON.stringify(res));
            });
            window.wx.checkJsApi({
                jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
                success: function (res) {
                    console.log('checkJsApi', res)
                }
            });
        }
    });
};

export {
    wxConfig
}
复制代码

步骤四:main.js 文件配置忽略Vue对开放标签的检查

// 开放标签属于自定义标签,Vue会给予未知标签的警告,
// 可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。

Vue.config.ignoredElements = ['wx-open-launch-weapp'];
复制代码

步骤五:在vue组件进行引入wxConfig.js 进行必要配置

import { wxConfig } from '@/common/wxConfig';

// 可以在获取活动详情后,进行动态配置数据
let pageInfo = {     
    shareTitle: '活动标题', // 分享标题     
    shareDesc: '活动描述~~', // 分享描述     
    shareImg: 'http://placehold.it/120x120/e84c10/ffffff?text=share' // 分享图标
}
wxConfig(pageInfo);

复制代码

此时,微信分享朋友,分享朋友圈等功能都可以正常使用了。

步骤六:编写wx-open-launch-weapp 标签

如果按钮样式固定,并且按钮文字固定的话,下列写法就满足了。


 <div v-if="isWeixin">        
                <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc">            
                    <script type="text/wxtag-template">
                        <style>.btn { padding: 12px }</style> 
                        <button class="btn">打开小程序</button> 
                    </script>       
                </wx-open-launch-weapp>   
 </div>
复制代码

如果需要根据活动的状态动态设置按钮文案和按钮样式,用vue动态绑定样式和文案的方式无法起效。原因是在下列代码包裹内,里面的不再属于vue管理范畴了, 所以动态绑定无法生效。

   <script type="text/wxtag-template">XXX</script>
复制代码

heli1.png

第一次想用原生js获取这个button的dom,然后动态绑定样式和文案,发现获取这个dom总是null, 故此路不通。

<button id="launch-inner-btn" class="btn">打开小程序</button>

document.getElementById('launch-inner-btn') // null
复制代码

第二次和同事讨论后,决定将wx-open-launch-weapp标签全部透明化,然后再造一个可以动态设置按钮文字和样式的button(此处命名为Btn)。

最后将wx-open-launch-weapp标签 和 Btn 用一个div 包裹起来,将透明的wx-open-launch-weapp标签盖在能看到的Btn上。最终效果为看到Btn,但是点击的却是透明的 wx-open-launch-weapp 标签,完美实现打开小程序的功能。

.wx-launch-wrap {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  
  .wx-launch-btn {
    position: relative;
  }

  .wx-launch {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    overflow: hidden;
  }
复制代码
 <div v-if="isWeixin" lass="wx-launch-wrap wx-launch-btn">
        <!-- 透明的wx-open-launch-weapp按钮, 此处一定要设置overflow: hidden;保证不溢出,设置z-index: 10;将此按钮遮在能看的按钮Btn上-->
        <wx-open-launch-weapp
            id="launch-btn"
            class="btn wx-launch-wrap wx-launch"
            :class="dynamicCss"
            username="gh_xxxxxxxx"
            path="pages/home/index?user=123&action=abc"
            >
            <script type="text/wxtag-template">
                <button style="display:inline-block;width:1000px;height:1000px;opacity:0;"></button>
            </script>
        </wx-open-launch-weapp>
        <!-- 能看的按钮Btn dynamicCss为动态设置的css btnLabel为动态设置的按钮文字-->
        <button class="btn" :class="dynamicCss">{{btnLabel}}</button>
    </div>

复制代码

到了这里,就可以实现动态设置按钮样式和文字了。亦可以完美实现打开小程序的功能。

mp.png

文章分类
前端
文章标签