index.html 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
  8. <title>华侨城集团介绍</title>
  9. <style>
  10. html,
  11. body {
  12. padding: 0;
  13. margin: 0;
  14. }
  15. .dv_img {
  16. max-width: 100%;
  17. height: auto;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <script>
  23. const shareImg = `${location.origin}${location.pathname}images/shaer.jpg`
  24. function request(url, options) {
  25. return fetch(url, options)
  26. .then(response => response.json())
  27. .then(data => {
  28. if (data.code === 1000) return data.data
  29. return Promise.reject(data.message)
  30. })
  31. }
  32. const jsApiList = [
  33. 'updateAppMessageShareData',
  34. 'updateTimelineShareData',
  35. 'onMenuShareTimeline',
  36. 'onMenuShareAppMessage',
  37. 'onMenuShareQQ',
  38. 'onMenuShareWeibo',
  39. 'onMenuShareQZone'
  40. ]
  41. function init(url) {
  42. request(`https://api.h5.njyunzhi.com/mp/jssdk?url=${encodeURIComponent(url)}`).then((res) => {
  43. console.log("🚀 ~ file: index.html ~ line 49 ~ request ~ res", res)
  44. window.wx.config({
  45. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  46. appId: res.appId, // 必填,公众号的唯一标识
  47. timestamp: res.timestamp, // 必填,生成签名的时间戳
  48. nonceStr: res.nonceStr, // 必填,生成签名的随机串
  49. signature: res.signature, // 必填,签名
  50. jsApiList // 必填,需要使用的JS接口列表
  51. })
  52. })
  53. }
  54. function share(opt) {
  55. init(opt.link)
  56. window.wx.ready(function () {
  57. jsApiList.map((apiName) => {
  58. const api = window.wx[apiName]
  59. api({
  60. title: opt.title || '', // 分享标题
  61. link: opt.link || '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  62. imgUrl: opt.imgUrl || '', // 分享图标
  63. desc: opt.desc || ''
  64. })
  65. })
  66. })
  67. }
  68. share({ title: '华侨城集团介绍', link: window.location.href, imgUrl: shareImg })
  69. </script>
  70. <img class="dv_img" alt="华侨城集团介绍" src="https://h5.njyunzhi.com/images/huaqiaocheng_20211224112744.jpg" />
  71. </body>
  72. </html>