微信公众号分享的引导页(附素材)

参考 : https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

不过要提醒的是,这种自定义的分享,微信要即将废弃了

在微信公众号内应该是没办法唤起分享弹出框.(没深入研究过),暂时做了引导页去引导用户点击右上方按钮去分享

分享会用到:  微信JS-SDK  (需要验签)

第一步,程序后台计算验签数据

            $durl = ‘http://‘.$_SERVER[‘HTTP_HOST‘].$_SERVER[‘REQUEST_URI‘];
            $timestamp = time();

            $nonceStr = createNonceStr();  //生成随机字符串

            $jsapiTicket = getTicket($appID,$appsecret); //先换取token,在用token换取的
            // 这里参数的顺序要按照 key 值 ASCII 码升序排序
            $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$durl";
            $signature = sha1($string);

//把上面计算的数据传递到网页模板中区
            $smarty->assign("appid",‘XXXXX‘);
            $smarty->assign("timestamp",$timestamp);
            $smarty->assign("noncestr",$nonceStr);
            $smarty->assign("signature",$signature);
            $smarty->assign("durl",$durl);
        

生成随机字符串方法

    function createNonceStr($length = 16)
    {
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $str = "";
        for ($i = 0; $i < $length; $i++) {
            $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }
        return $str;
    }

获取Ticket方法

    function getTicket($appID,$appsecret)
    {$access_token = getAccessToken($appID,$appsecret);
        $ticket = curlPost("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access_token&type=jsapi");
        $ticket = json_decode($ticket);
        if(isset($ticket->ticket))
        {return  $ticket->ticket;
        }
        else
        {
            return "";
        }
    }

    function getAccessToken($appID,$appsecret)
    {
        $token = curlPost("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appID&secret=$appsecret");
        $token = json_decode($token);
        if(isset($token->access_token))
        {return  $token->access_token;
        }
        else
        {
            return "";
        }
    }
    function curlPost($url, $data = null)
    {//post请求接口
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
        if (!empty($data)) {
            curl_setopt($ch, CURLOPT_POST, TRUE);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
        }
        curl_setopt($ch, CURLOPT_TIMEOUT, 5);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $output = curl_exec($ch);
        curl_close($ch);
        return $output;

    }

第二部,在微信公众号网页使用    微信JS-SDK

引入 : http://res.wx.qq.com/open/js/jweixin-1.4.0.js

配置:

  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: ‘{$appid}‘, // 必填,公众号的唯一标识
    timestamp: ‘{$timestamp}‘, // 必填,生成签名的时间戳
    nonceStr: ‘{$noncestr}‘, // 必填,生成签名的随机串
    signature: ‘{$signature}‘,// 必填,签名
    jsApiList: [‘onMenuShareTimeline‘,‘onMenuShareAppMessage‘] // 必填,需要使用的JS接口列表
  });

用了那个接口,写那些接口jsApiList:

wx.ready(function(){

    wx.onMenuShareTimeline({
      title: ‘{$group_buy_info.goods_name}-团购详情‘, // 分享标题
      link: ‘{$link_url}‘, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: ‘{$group_buy_info.goods_thumb}‘, // 分享图标
      success: function () {
        // 用户点击了分享后执行的回调函数
      }
    });

    wx.onMenuShareAppMessage({
      title: ‘{$group_buy_info.goods_name}-团购详情‘, // 分享标题
      desc: ‘{$group_buy_info.group_buy_desc}‘, // 分享描述
      link: ‘{$link_url}‘, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: ‘{$group_buy_info.goods_thumb}‘, // 分享图标
      type: ‘link‘, // 分享类型,music、video或link,不填默认为link
      dataUrl: ‘‘, // 如果type是music或video,则要提供数据链接,默认为空
      success: function () {
        // 用户点击了分享后执行的回调函数
      }
    });

  });

用户点击按钮更改分享内容(没有试过):

  function weixinSendAppMessage(title,desc,link,imgUrl){
    WeixinJSBridge.invoke(‘onMenuShareAppMessage‘,{

      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: imgUrl, // 分享图标
      type: ‘link‘, // 分享类型,music、video或link,不填默认为link
      dataUrl: ‘‘, // 如果type是music或video,则要提供数据链接,默认为空
      success: function () {
        // 用户点击了分享后执行的回调函数
      }

    });
  }

上面功能性已经完成

下面需要引导用户点击右上方按钮分享......

引导页面使用的是layui的样式

<style>
    .layui-m-layer-nobg{
        background-color:rgba(0,0,0,0)!important;
        position: absolute;
        top:0px;
        right: 0px;
    }
</style>

<!--分享引导框开始-->
<div id="guide_box" class="hide" >
    <img src="/images/guide_point.png"  class="img-responsive img-rounded" width="200px">
    <img src="/images/guide_btn.png"  class="img-responsive img-rounded" width="200px" onclick="layer.closeAll();">
</div>
<!--分享引导框结束-->

<script>
  layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    shade:0.2,
    offset:‘rt‘, //右上
    area: ‘0px‘,
    skin: ‘nobg‘, //没有背景色,就是上面的.layui-m-layer-nobg样式,layui框架自动加前缀
    shadeClose: true,
    content: $(‘#guide_box‘).html()
  });
</script>

素材guide_point.png:

素材guide_btn.png:

原文地址:https://www.cnblogs.com/fps2tao/p/9870442.html

时间: 2024-10-01 02:47:45

微信公众号分享的引导页(附素材)的相关文章

vue 微信公众号分享后支付失效页面URL不变的坑

微信分享后支付页面还是初始页面,这个问题解决了, created(){ //判断是否是IOS设备 // IOS分享时的页面是首页,也就是进入页而不是当前页.所有可以采用刷新当前页,让进入页的链接改成当前页,再在页面卸载时删除缓存数据. let agent = navigator.userAgent let isIOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端 if(isIOS && !sessionStorage.g

微信公众号批量爬取java版

最近需要爬取微信公众号的文章信息.在网上找了找发现微信公众号爬取的难点在于公众号文章链接在pc端是打不开的,要用微信的自带浏览器(拿到微信客户端补充的参数,才可以在其它平台打开),这就给爬虫程序造成很大困扰.后来在知乎上看到了一位大牛用php写的微信公众号爬取程序,就直接按大佬的思路整了整搞成java的了.改造途中遇到蛮多细节问题,拿出来分享一下. 附上大牛文章链接:https://zhuanlan.zhihu.com/c_65943221  写php的或者只需要爬取思路的可以直接看这个,思路写

微信开发教程:用户账号绑定到微信公众号的方法分享

时间:2015-02-26    作者:Abyssly   来源:Abyssly Blog 最近由于工作需要,接触了微信公众号的开发.业务上要求绑定微信用户和系统用户,以便用户在一次绑定后能够通过系统用户的身份去使用一些功能.我关注的招行信用卡公众号实现了这个功能,所以估计还是可行的,在网上搜索了一下,发现这个问题没什么好的答案,很多都说取不到微信用户名实现不了,甚至有说实现了这个功能的应该是与微信有内部合作的. 搜索无果,遂自己动手实验,后发现其实完全可以的,看来实践才是检验真理的唯一标准,方

长按微信公众号文章内容可分享朋友圈且附带二维码

就在刚刚,有朋友无意间发现长按住微信公众号文章内容的某一句话,将会出现“分享”的选项,一旦分享之后,微信将会自动将选中的内容,形成一段话分享在朋友圈,而且会在分享的文末,附上该篇文章的二维码.ytkah觉得这个非常文艺范,一小句话自动生成图片,很唯美,在朋友圈容易疯转,附带的二维码也利于公众号的宣传,整个有点像前段时间那个很火的宽图小应用 长按住微信公众号文章内容的某一句话,将会出现“分享”的选项 长按微信公众号文章可以分享朋友圈且附带二维码 目前,经过测试,仅有苹果手机可以使用这一功能.有了这

微信公众号(静默授权和分享)

微信网页授权 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ appId +'&redirect_uri=' + redirectUri + '&response_type=code&scope=snsapi_base#wechat_redirect' 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回

微信公众号可通过现金红包接口发放微信支付现金红包(附开发教程)

农历新年将至,支付宝红包打了一仗,微信在朋友圈屏蔽了它的分享,但单防守还不行,进攻才是最好的防守.昨日,微信支付现金红包接口正式开放,只需开通微信支付,即可接入现金红包.微信公众号也可以发放现金红包了! 通过现金红包接口,公众号开发者可以策划相关运营活动,向用户发放微信支付现金红包,更好的达到品牌推广及回馈用户的效果. 1.商户调用接口时,通过指定发送对象以及发送金额的方式发放红包,这样的方式,允许商户灵活的应用于各种各样丰富的活动场景 2.领取到红包后,用户的资金直接进入微信零钱,避免繁复的领

浅谈关于微信公众号开发的分享

最近在做微信公众号的开发,h5页面!其中调用了很多微信的自带功能,包括支付,上传图片,扫码,分享等,今天我就来谈谈我在分享上遇到的坑,我看网上有些同胞们也在问相关的问题,鄙视不才,不知道他们问题是不是和我一样,但是我想分享下我遇到的这个坑~~希望可以帮助到有用的人~~ 遇到的问题:页面分享给好友或朋友圈,我更改了分享链接和分享的标题,以及分享的图片,but!!!安卓是可以分享成功的,ios却不能正常分享! 经过我不停地排查最后才发现 引起的原因:我在更改分享的URL时传了参数,其中有些参数是中文

分享微信公众号运营助手,可以在手机上回复粉丝留言

由于公司旗下有好几个微信公众号,经常来回切换登录很麻烦,粉丝留言咨询的时候常常不能及时回复,导致订单流失.于是我们团队开发了一个公众号小助手,可以把多个公众号绑定进来,只要有粉丝留言,马上管理员就收到通知了,然后还可以在手机上进行回复. 实现的功能如下: 粉丝留言自动微信通知 在微信中回复粉丝留言,文字+图片 粉丝关注自动微信通知 粉丝关注自动推送多图文消息或者历史消息 更强大的自定义菜单管理 自定义客服消息模板 支持绑定多个管理员 支持关键词自动回复 支持二次开发 虽然这个小助手很小,但是里面

微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友

之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注入权限验证配置以及签名算法实现的Java版本 前两天在做微信分享的时候发现按照以前的思路每次都不能正确获取"分享到朋友圈"按钮点击状态及自定义分享内容接口,而是必须通过一个按钮先点击帮点事件,然后才能获取"分享到朋友圈"按钮点击状态及自定义分享内容接口. 回顾一下以前扫