index.html 3.3KB

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