当前位置:主页 > 织梦教程 >

静态页面H5页面如果调用微信JS-SDK进行自定义内容分享

栏目分类:织梦教程   发布日期:2019-02-23   来源:www.zybox.cc   浏览次数:
最近在给朋友手机站做一个手机静态页面,朋友要求能在微信中自定义分享的内容,百度有各种相关文章,翻了很多页也没找到一个能详细阐述的文章,站长爬了微信官方技术文档,同时也爬了

背景


        最近在给朋友手机站做一个手机静态页面,朋友要求能在微信中自定义分享的内容,百度有各种相关文章,翻了很多页也没找到一个能详细阐述的文章,站长爬了微信官方技术文档,同时也爬了很多相关文章,结合后就有了如下的文章。


前提

        

        使用本文教程,必须满足几个条件:1、项目域名必须备案(想要使用微信的接口都必须要域名是备案的)  2、认证过的公众号    3、能运行PHP文件的环境

        满足上面几个条件的话,请接着往下看:


教程


        第一步


        下载相关代码文件   网页调用微信js-sdk分享接口(1.4.0)      提取码:s8ep 


        第二步

        将上步下载的accessToken文件夹上传网站目录中(路径自定义)


        第三步

        登录微信公众号平台(需要有认证的公众号)

        1、设置-公众号设置-功能设置-JS接口安全域名(域名需要备案的)

        如图:

image.png

      

        2、开发-基本设置-IP白名单(添加IP白名单后才能调用接口)

        如图:

image.png


       

        第四步

        进入accessToken文件夹,打开signPackage.php,将微信公众号的AppID、AppSecret填入对应的位置

        示例代码:

<?php
	// 实现微信分享功能
	// 通过script标签引入该文件,通过url参数传递原网页的完整url
	error_reporting(0);
	$queryString = $_SERVER["QUERY_STRING"];// 获取PHP后的网址参数,格式为:originUrl=...
	$url = substr($queryString,10);	// 截取原网页的完整url
	
	require_once "jssdk.php";
	$jssdk = new JSSDK("AppID", "AppSecret", $url);// 改为自己公众号的AppID、AppSecret
	$signPackage = $jssdk->GetSignPackage();
	echo "var signPackage=";
 	die(json_encode($signPackage));// 返回微信分享所需参数
 ?>


        

        第五步

        在需要调用微信自定义分享接口的html页面添加如下代码

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 
<script>document.write("<script src='accessToken/signPackage.php?originUrl=" + window.location.href + "' type='text/javascript'><\/script>");</script>
<script>
    var baseUrl = "https://www.abc.com/";
    var wxData = {
      "imgUrl" : baseUrl + 'logo.png',//分享缩略图
      "link"   : baseUrl + 'welcome.html',//分享的链接
      "title"  : '接单:网站,公众号,小程序等业务',//分享朋友标题
      "title2"  : 'QQ:345823660',//分享朋友圈标题
      "desc"   : '价格美丽'//分享朋友的文案
    };
    wx.config({
    debug: false,
    appId: signPackage.appId,
    timestamp: parseInt(signPackage.timestamp),
    nonceStr: signPackage.nonceStr,
    signature: signPackage.signature,
    jsApiList: [
    'onMenuShareTimeline',
    'onMenuShareAppMessage'
    ]
    });
    wx.ready(function () {
    wx.onMenuShareTimeline({
    title: wxData.title2,
    link: wxData.link,
    imgUrl: wxData.imgUrl,
    success: function () {
    }
    });
    wx.onMenuShareAppMessage({
    title: wxData.title,
    desc: wxData.desc,
    link: wxData.link,
    imgUrl: wxData.imgUrl,
    type: 'link',
    dataUrl: '',
    success: function () {
    }
    });
    });
</script>



        DEMO演示地址

打赏本站
相关下载
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
织梦标签工具下载 ↑↓
织梦标签工具下载