手机微信端html5网页页面启用共享插口示例

日期:2021-02-23 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

近期企业做了1个给学员网络投票的H5网页页面,关键是在手机微信端应用,必须加上手机微信共享作用;

本文章内容关键是纪录启用手机微信共享插口必须留意的事项;

1、前端开发用的angular1架构,最先必须在index网页页面引进手机微信插口文档;

<script src="http://res.wx.qq.com/open/js/jweixin⑴.2.0.js"></script>

2、在myApp.run文档中写手机微信共享涵数,留意该涵数必须将当今网页页面的url获得并分析,随后发给后端开发来转化成对应签字,立即上编码;

// 手机微信共享涵数
    function wxShare() {
        var url = $location.absUrl().split('#')[0];
            wxServices.postWxShare(url).then(function (res) {
            if (res.data.code == 0) {
                var respanse = res.data.data;
                wx.config({
                    debug: false, // 打开调节方式,启用的全部api的回到值会在顾客端alert出来,若要查询传入的主要参数,能够在pc端开启,主要参数信息内容会根据log打出,仅在pc端时才会复印。
                    appId: respanse.appId,
                    timestamp: respanse.timestamp, // 必填,转化成签字的時间戳
                    nonceStr: respanse.nonceStr, // 必填,转化成签字的任意串
                    signature: respanse.signature,// 必填,签字
                    jsApiList: ['onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone']// 必填,必须应用的JS插口目录
                });
            }
        })
    }

将当今url分析后,发给后端开发插口,后端开发必须将appId,時间戳,任意标识符串和签字回到,随后插口目录(jsApiList)依据必须自身手动式加上,留意是1个数字能量数组的方式,我这里只必须启用共享插口;
调节的情况下,能够将debug变更为true,这样在就每次启用手机微信插口的情况下就会有插口信息内容alert出来,便捷查询插口启用是不是一切正常了;

3、在该涵数后,自定共享內容,编码以下;

wx.ready(function () {
        var obj = {
            title: 'SPBCN团队赛刚开始网络投票啦!', // 共享题目
            desc: 'SPBCN团队赛刚开始网络投票了,快来为大家加油吧!', // 共享叙述
            link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 共享连接,该连接网站域名或相对路径务必与当今网页页面对应的群众号JS安全性网站域名1致
            // 该连接是重定项连接,由于必须获得客户code,可是该连接又没法立即写手机微信获得code的连接,
            // 因此必须点一下后再次载入新的网页页面,来完成重定项,再次开启获得code的手机微信连接,完成获得客户信息内容的作用;
            imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 共享标志
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        };
        // 2.1 监视“共享给盆友”,按钮点一下、自定共享內容及共享結果插口
        wx.onMenuShareAppMessage(obj);

        // 2.2 监视“共享到盆友圈”按钮点一下、自定共享內容及共享結果插口
        wx.onMenuShareTimeline(obj);

        // 2.3 监视“共享到QQ”按钮点一下、自定共享內容及共享結果插口
        wx.onMenuShareQQ(obj);

        // 2.4 监视“共享到新浪微博”按钮点一下、自定共享內容及共享結果插口
        wx.onMenuShareWeibo(obj);

        // 2.5 监视“共享到QZone”按钮点一下、自定共享內容及共享插口
        wx.onMenuShareQZone(obj);
    })

wx.ready是在wx.config以后全自动运作的,我是界定了1个共享內容的通用性目标,随后立即启用便可,还可以依据必须来各自界定共享盆友、盆友圈、新浪微博等的不一样內容,实际查询手机微信插口文本文档便可;
关键强调1下共享连接,该连接务必是你的群众号设定的JS安全性网站域名下的,要不然没法共享取得成功;

共享不成功的主要表现是,共享连接照片没法载入你自定的照片,共享题目也不对;

5、我这个新项目是网络投票类的,因此必须每次点一下进来以后获得客户code,假如你只是共享文章内容,不必须客户信息内容,立即将link变更为你的文章内容连接便可;

6、针对网络投票类,我这里独特解决了,便是重定项了该连接,大伙儿都了解H5获得手机微信客户信息内容有两种,1种是关心手机微信群众号;另外一种提醒客户必须获得客户公布信息内容,客户点一下明确便可。可是这两种都必须是依照手机微信的规定来拼接成独特的手机微信连接,因而该网站域名是手机微信自带的,就并不是大家自身群众号的JS安全性网站域名了;

7、因此,针对共享后的连接,假如还必须获得客户code,就要用别的方式完成,我用的是加上了1个空白网页页面,在该网页页面载入后自动跳转手机微信获得code的连接,http://dev.spbcn.org/wechat-vote-phone/redirect.html该连接是个空白网页页面,该网页页面编码以下;

window.onload = function () {
        // 重定项连接,跟手机微信群众号中获得客户code是1样的连接
        window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=群众号appid&redirect_uri=http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect"
    }

8、该方式有缺点,便是多加了1个空白网页页面,临时想不到好的方法,欢迎大伙儿留言;

9、假如不加这1步,共享出来的连接显示信息一切正常,可是获得不到code,后端开发就没法分辨客户,致使没法限定客户网络投票;

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。