zoukankan      html  css  js  c++  java
  • vue H5 公众号 授权分享

    公众号 网页授权 官方文档

    调用授权地址的设置

    页面内直接跳转微信授权链接

    window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx27d6e2a2b7be9&redirect_uri="+ urlcode+"&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect"

    • redirect_uri 授权后返回的页面  可设置参数 
    • 带参数 必须使用 encodeURI 加密    (decodeURI) 参数和链接都要加密
    • 例子:let urlcode = encodeURI("http://lm.huhacity.com/callBack.html?item="+encodeURI(JSON.stringify(self.InfoData)))
    • self.InfoData 是自己要携带的参数

    公众号 微信注册分享功能官方文档

    回调页获取code 及参数 中间跳转页面方法 也可直接拿首页 当做回调页  获取方法一样

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="code"></div>
        <script>
            let code = getParam("code")
            let userOpenId= getParam("userOpenId")||''
    
            function getParam(paramName) { 
                paramValue = "", isFound = !1; 
                if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) { 
                    arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0; 
                    while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++ 
                } 
                return paramValue == "" && (paramValue = null), paramValue 
            }
            window.location.href="http://loery.tubalog.top/ltery/index.html?userOpenId="+getParam("userOpenId")+"&code="+getParam("code")
        </script>
    </body>
    </html>
    

      

    async 异步方法 调用微信注册分享功能

    async wechatShare(){

    let self= this

    let useUrl = self.useSharData.shardUseId?encodeURI('http://acity.com/#/couponShare?item='+encodeURI(JSON.stringify(self.useSharData))+'&type=true'):''

    //注释  自定义分享链接 必须  encodeURI 加密    useUrl 为分享的链接

    const data = await wechatConfig();//通过接口获取微信的信息 如://appId 微信appId  timestamp 时间戳

    //注册微信配置信息

    wx.config({ debug: false, appId: data.data.appId, timestamp: data.data.timestamp, nonceStr: data.data.nonceStr, signature: data.data.signature, jsApiList: [ "onMenuShareTimeline", "onMenuShareAppMessage" ] });

    //ready 方法为 分享功能注册成功 回调函数   及可自定义分享的信息

    wx.ready(() => {

    //朋友圈 

     wx.onMenuShareTimeline({

     title: '邀请领取',

     link: useUrl,

     imgUrl:`http://${window.location.host}/static/images/huha_logo.png`,

    success: (data) => { if(data.errMsg === 'onMenuShareTimeline:ok') { this.toast('分享成功'); } }, cancel: () => { this.toast('分享失败'); } });

    //微信好友

    wx.onMenuShareAppMessage({

    title: '邀请领取', // 分享标题

    desc: '邀请领取', // 分享描述

    link: useUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

    imgUrl:`http://${window.location.host}/static/images/a_logo.png`, // 分享图标

    type: 'link', // 分享类型,music、video或link,不填默认为link

    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空

    success: (data) => {

     if(data.errMsg === 'onMenuShareAppMessage:ok') { this.toast('分享成功'); } },

     cancel: () => { this.toast('分享失败'); } }); }) },

    注释  手机微信点击分享 无效时肯定是 自定义分享链接错误   ios不支持端口号  分享的链接不能带端口号  

    页面进入需要加载环境 如不做客户触发注册分享 做进入页面自动注册分享功能  需要做延迟调用  

    setTimeout(function() {
                    this.wechatShare()
                }, 1500)

  • 相关阅读:
    linux基础名词
    计算机基础
    c++ 构造函数
    c++ stdafx.h、targetver.h文件
    centos7初步命令
    mysql 操作表的语句
    后台返回API数据格式
    nginx相关知识
    js复制内容到剪贴板格式化粘贴到excel中
    PHP开启错误提示
  • 原文地址:https://www.cnblogs.com/wukongz/p/12580889.html
Copyright © 2011-2022 走看看