index.html 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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. height: auto;
  17. display: block;
  18. width: 100%;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <img class="dv_img" alt="华侨城集团介绍" src="" data-src="./images/new-1_01.jpg" />
  24. <img class="dv_img" alt="华侨城集团介绍" src="" data-src="./images/new-1_02.jpg" />
  25. <img class="dv_img" alt="华侨城集团介绍" src="" data-src="./images/new-1_03.jpg" />
  26. <img class="dv_img" alt="华侨城集团介绍" src="" data-src="./images/new-1_04.jpg" />
  27. </body>
  28. <script>
  29. var imgs = document.querySelectorAll('img');
  30. //offsetTop是元素与offsetParent的距离,循环获取直到页面顶部
  31. function getTop(e) {
  32. var T = e.offsetTop;
  33. while (e = e.offsetParent) {
  34. T += e.offsetTop;
  35. }
  36. return T;
  37. }
  38. function lazyLoad(imgs) {
  39. var H = document.documentElement.clientHeight;//获取可视区域高度
  40. var S = document.documentElement.scrollTop || document.body.scrollTop;
  41. for (var i = 0; i < imgs.length; i++) {
  42. if (H + S > getTop(imgs[i])) {
  43. imgs[i].src = imgs[i].getAttribute('data-src');
  44. }
  45. }
  46. }
  47. window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
  48. lazyLoad(imgs);
  49. }
  50. const shareImg = `${location.origin}${location.pathname}images/shaer.jpg`
  51. function request(url, options) {
  52. return fetch(url, options)
  53. .then(response => response.json())
  54. .then(data => {
  55. if (data.code === 1000) return data.data
  56. return Promise.reject(data.message)
  57. })
  58. }
  59. const jsApiList = [
  60. 'updateAppMessageShareData',
  61. 'updateTimelineShareData',
  62. 'onMenuShareTimeline',
  63. 'onMenuShareAppMessage',
  64. 'onMenuShareQQ',
  65. 'onMenuShareWeibo',
  66. 'onMenuShareQZone'
  67. ]
  68. function init(url) {
  69. request(`https://api.h5.njyunzhi.com/mp/jssdk?url=${encodeURIComponent(url)}`).then((res) => {
  70. console.log("🚀 ~ file: index.html ~ line 49 ~ request ~ res", res)
  71. window.wx.config({
  72. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  73. appId: res.appId, // 必填,公众号的唯一标识
  74. timestamp: res.timestamp, // 必填,生成签名的时间戳
  75. nonceStr: res.nonceStr, // 必填,生成签名的随机串
  76. signature: res.signature, // 必填,签名
  77. jsApiList // 必填,需要使用的JS接口列表
  78. })
  79. })
  80. }
  81. function share(opt) {
  82. init(opt.link)
  83. window.wx.ready(function () {
  84. jsApiList.map((apiName) => {
  85. const api = window.wx[apiName]
  86. api({
  87. title: opt.title || '', // 分享标题
  88. link: opt.link || '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  89. imgUrl: opt.imgUrl || '', // 分享图标
  90. desc: opt.desc || ''
  91. })
  92. })
  93. })
  94. }
  95. share({ title: '华侨城集团介绍', link: window.location.href, imgUrl: shareImg })
  96. </script>
  97. </html>