H5微信分享，fontSize自适应

已于 2023-07-19 15:06:24 修改
阅读量138 收藏
点赞数
文章标签： ui javascript html
于 2023-04-26 14:45:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ndkfa/article/details/130385828
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
  <meta name="format-detection" content="telephone=no, email=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="renderer" content="webkit">
  <meta name="HandheldFriendly" content="true">
  <meta name="MobileOptimized" content="320">
  <meta name="screen-orientation" content="portrait">
  <meta name="x5-orientation" content="portrait">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="browsermode" content="application">
  <meta name="x5-page-mode" content="app">
  <meta name="msapplication-tap-highlight" content="no">
  <title></title>
  <link rel="stylesheet" href="../js/lib/mint_ui/style.min.css">
  <script src="../js/lib/jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="../js/lib/vue.min.js"></script>
<!--	<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>-->
  <script src="../js/lib/mint_ui/index.js"></script>
  <script src="../js/request.js"></script>
  <style>
  font {
  font-size: 16px;
}
  font[size="6"] {
  font-size: 17px
  }
  font[size="7"] {
    font-size: 18px
  }
  font[size="5"] {
    font-size: 16px
  }
  font[size="4"] {
    font-size: 15px
  }
  font[size="3"] {
    font-size: 14px
  }
  font[size="2"] {
    font-size: 13px
  }
  font[size="1"] {
    font-size: 12px
  }
  .vhtml{
    font-size: 17px!important;
  }
  .vhtml p{
    margin: 20px 0 20px 0!important;
    line-height: 1.6;
  }
  .vhtml p span{
    font-size: 16px!important;
  }
  </style>

</head>
<body>
  <div id="app" style="height: 100%;">
    <div v-if="offline" style="padding: 10px 10px 0;;height: 100%;">
      <p style="font-size: 24px;margin: 0;font-weight: 700;">{{title}}</p>
      <p style="margin: 8px 0;font-size: 13px;color: #666;">{{publish_time}}</p>
      <p v-if="abstract" style="margin: 8px 0;
      padding: 9.375px 11.25px;
      font-size: 14px;
      text-align: justify;
      word-break: break-all;
      word-wrap: break-word;
      background: #f5f5f5;
      color: #666;">{{abstract}}</p>
      <div v-html="content" class="vhtml"></div>
    </div>
    <div v-if="offline" style="background: #d7d7d7;height: 74.5313px;
    padding: 9.9994px;
    font-size: 14.0006px;">注：投资有风险，入市需谨慎</div>
    <div v-if="!offline" style="
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 8vh;
    ">
      <img src="../images/offline.png" style="width: 255px;">
      <span style="margin-top: 30px;font-size: 14px;">内容已下线</span>
    </div>
  </div>
</body>
<script>
  var protocol = window.location.protocol;//获取http头
  // var vConsole = new VConsole();
  var app = new Vue({
    el:"#app",
    name:"MarketingShare",
    data:{
      unique_id: '',
      code: '',
      abstract:'',
      content:'',
      next: 1,
      publish_time:'',
      cover_img:'',
      offline: true,
      title:'',
      id:'',
    },
    created:function() {
      this.next = sessionStorage.getItem('next')  * 1 || 1
      this.unique_id = tool.getStringNew("unique_id");
      this.code = tool.getStringNew("code");
    },
    mounted:function() {
      this.getData()
      this.is_weixn()
      /* 适配 */
      this.windowChange()
      window.addEventListener('resize', this.windowChange)
    },
    destroyed() {
    document.getElementsByTagName('html')[0].style.fontSize = ''
    window.removeEventListener('resize', this.windowChange)
    },
    methods:{
      is_weixn(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
          var APPID = 'appid'
          var url = window.location.origin+ '地址?unique_id=' + this.unique_id
          if (this.code) {
            this.browsingHistory()
          }
          console.log('!this.code',!this.code);
          console.log(' this.offline', this.offline);
          console.log('url',url);

          if (!this.code  && this.offline) {

            console.log('!this.code  && this.offline',!this.code  && this.offline);
            this.next = this.next + 1
            sessionStorage.setItem('next', this.next)
            console.log('this.next',this.next);
            if (this.next <= 2) {
              console.log('this.next66',this.next);
              window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID +
              '&redirect_uri=' + encodeURIComponent(url) +
              '&response_type=code&' +
              'scope=snsapi_userinfo&' +
              'state=STATE&' +
              '#wechat_redirect'
            }
          }

        } else {
          this.browsingHistory()
          console.log('微信外请求记录');
        }
      },
      share() {
        var _this = this;
        tool.shareimg({
            platform: ['weixin','qicq'],//品台
            link: window.location.href, //分享详情连接
            title: _this.title, //分享详情标题
            dsec: _this.abstract,//分享详情简介
            imgUrl: _this.cover_img,//分享图片
          });
      },
      windowChange() {
      const dom = document.querySelector('html');
      const fontSize = (dom.clientWidth / 30.4375).toFixed(4)
      document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px'
      },
      browsingHistory() {
        var _this = this;
        var url = protocol + '//'+window.CONFIG.SERVICE_URL+'接口';
        tool.ajaxFix({
            type: 'get',
            dataType: 'jsonp',
            url: url,
            data: {
              unique_id:_this.unique_id,
              wx_code: _this.code,
            },
            success: function(res){
              if (res.code ==1) {
              }
              if(res.code != 1){
                _this.$toast(res.message);
              }
            }
        })   
      },

      getData() {
        var _this = this;
        var url = protocol + '//'+window.CONFIG.SERVICE_URL+'接口';

        tool.ajaxFix({
            type: 'get',
            dataType: 'jsonp',
            url: url,
            data: {
              unique_id:_this.unique_id,
            },
            success: function(res){
              if (res.code ==1) {
                let {abstract,content,cover_img,id,publish_time,title} = res.data
                _this.title = title
                _this.id = id
                _this.cover_img = cover_img
                _this.publish_time = publish_time
                _this.content = content
                _this.abstract = abstract
                //微信浏览器无封面问题
                _this.$nextTick(()=>{
                  var u = navigator.userAgent;
                  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;     //android终端
                  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                  var ua = navigator.userAgent.toLowerCase();
                  if(ua.match(/MicroMessenger/i)=="micromessenger") {
                    console.log('微信内')

                    if(isAndroid){ //安卓
                      console.log('安卓');
                      let videos = document.getElementsByTagName('video');
                      for(var i= 0; i<videos.length; i++){
                        videos[i].currentTime = 0.01
                      };
                    }
                    if (isiOS) {
                      console.log('是IOS');
                      document.addEventListener('WeixinJSBridgeReady', function() {
                      let videos = document.getElementsByTagName('video');
                      for(var i= 0; i<videos.length; i++){
    
                          videos[i].setAttribute('webkit-playsinline', "true");
                          videos[i].setAttribute('playsinline', "true");
                          videos[i].setAttribute('x5-playsinline', "true");
                          videos[i].play()
                          // videos[i].currentTime = 0.01
                          videos[i].pause()
                        };
                      })   
                    }
                  }else{
                    console.log('微信外')
                      let videos = document.getElementsByTagName('video');
                      for(var i= 0; i<videos.length; i++){
                        videos[i].setAttribute('webkit-playsinline', "true");
                        videos[i].setAttribute('playsinline', "true");
                        videos[i].setAttribute('x5-playsinline', "true");
                        videos[i].play()
                        videos[i].pause()
                      };
                  }

                })    

                _this.share()
              }
              if(res.code != 1){
                _this.offline = false
                _this.$toast(res.message);
              }
            }
        }) 
      },
    }
  })
</script>
</html>
getString:function(_name){
    var obj = this.getUrlQueryArgs();
   if (obj && obj.hasOwnProperty(_name)) {
   return obj[_name];
       } else {
         return '';
         }
},

// 解析url query参数
var getUrlQueryArgs = (function() {
    var obj = null;
    return function(){
        if (obj) return obj;
        obj = {};
        var searchStr = window.location.search;
        if (!searchStr) return null;
        var _search = searchStr.slice(1).split("&");
        for(var i = 0, len = _search.length; i < len; i++){
            var _item = _search[i].split("=");
            obj[_item[0]] = _item[1];
        }
        if (i) {
            return obj;
        } else {
            return null;
        }
    }
})();

is_weixn:function(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
},

shareimg: (function() {
    //自定义分享图片
    var platformShareMethods = {
        weixin: function(options){
            tool.ajaxFix({
                url: protocol + "//"+ window.CONFIG.SERVICE_URL + "接口" + tool.getString("appcode"),
                // url: 'https://h5.jjzqtz.com/sample.php',
                data:{
                    url: window.location.href
                },
                type: "get",
                dataType: "json",
                success: function (res) {
                    wx.config({
                        debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话，可以开了看对应报错信息
                        appId: res.data.appId,
                        timestamp: res.data.timestamp,
                        nonceStr: res.data.nonceStr,
                        rawString: res.data.rawString,
                        signature: res.data.signature,
                        jsApiList: ['updateAppMessageShareData','onMenuShareAppMessage',
]
                    });
                    wx.ready(function(){
                        if (wx.updateAppMessageShareData) {
                            wx.updateAppMessageShareData({
                                title: options.title, // 分享标题
                                desc: options.dsec, // 分享描述
                                link: options.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: options.imgUrl, // 分享图标
                                success: function() {
                                    // 设置成功
                                    console.log('分享成功')
                                    }
                            })
                        } else {
                            wx.onMenuShareAppMessage({
                                title: options.title, // 分享标题
                                desc: options.dsec, // 分享描述
                                link: options.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: options.imgUrl, // 分享图标
                                success: function() {
                                    // 设置成功
                                    console.log('分享成功')
                                    }
                            })
                        }

                    });
                    // wx.error(function(err){
                    //     alert(err)
                    // })
                },
                error: function(err){
                    // alert(JSON.stringify(err))
                }
            })
        }
        /*qicq: function(options){
            setShareInfo({
                title: options.title, // 分享标题
                summary: options.desc, // 分享内容
                pic: options.imgUrl, // 分享图片
                url: options.link, // 分享链接
            });
        }*/
    }
    return function(options){
        for(var i = 0; i < options.platform.length; i++){
            // platformShareMethods[options.platform[i]](options);

            // this[options.platform[i]] = options.isJsApiList[i]

            if (typeof (platformShareMethods[options.platform[i]]) == 'function') {

                platformShareMethods[options.platform[i]].call(this, options)
            }
        }
    }
})(),

椿天在哪里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5分享功能实现
bestyinjun的专栏
09-14 1935
H5分享
Html 字体大小
weixin_34221112的博客
02-28 3461
Html 字体大小 上标下标 设置 2011-07-19 8:41 网页中常用的字体尺寸定义有7个号，1号字最小，7号字最大，定义字号的 　　指令代码是尖括号内：[font size=X] 。 　　为了便于正常显示，&lt; &gt;暂时用[ ]代替。 　　各种字号尺寸如下： 　　[font size=1]一号字尺寸式样 [/font] 　　[font size=2]二号字...
用户设置了系统字体，导致页面布局错乱，微信公众号
weixin_42241340的博客
03-18 637
兼容android代码 /* 禁止用户自定义设置字体大小 */ (function () { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { ...
H5移动端字体自适应（也适用于宽高）
TS_144636的博客
08-10 7718
阅读原文扫码查看： 自己研究摸索了几种H5移动端字体自适应的方法，分享出来和大家一起共享。 方法一：纯css方法, 精确度高，IOS 和 安卓 字体大小同等比例 1.1 以16px为基准，在根元素html下，字体为62.5% 1.2 此时1rem=10px; /* css代码 */ html { /* 10÷16=62.5% */ font-size: 62.5%; } body { font-size: 12px; /* 12÷10=1.2 */ font-size: 1.2re
微信分享第三方连接（H5页面）自定义页面
最新发布
J_Lee
04-22 1053
微信分享第三方连接（H5页面）自定义页面
H5实现分享功能
Wang_MengHan的博客
08-09 3537
H5实现分享功能
H5微信分享的规则
Kino的博客
05-25 2821
1、微信分享 用户调用微信的分享功能，可以自定义分享的title和描述，以及小图标和链接。可以分享到群、好友、朋友圈、QQ、QQ空间等。 2、分享设计规范 分享标题：14字以内，建议使用朋友般亲切的口吻 分享图标：尺寸120*120，大小不超过10K，不支持GIF格式。必须采用https协议。 分享描述：20字以内，对标题的简要解读。 分享链接：外链页面所在服务器至少能支持每秒1500次的访问压力，且每次访问的响应时间200ms以内。必须采用https协议。 分享行为：页面上无分享按钮，页面上无诱导分
微信小程序通过一个json实现分享朋友圈图片
12-03
标题中的“微信小程序通过一个json实现分享朋友圈图片”是指在微信小程序开发中，利用JSON配置文件来绘制并生成用于分享到朋友圈的自定义图片。这种技术可以帮助开发者更方便地创建具有个性化内容的分享图片，而无需...
echarts大屏字体自适应的方法步骤
10-16
在使用ECharts进行大屏数据可视化时，一个常见的问题是字体大小在不同屏幕尺寸下的自适应问题。当直接在大屏幕上展示而非通过电脑投屏时，固定像素（px）的字体大小可能显得过于微小，影响阅读体验。为了解决这个...
手机端页面rem宽度自适应脚本
12-10
根据手机宽度改变相对大小就可以实现自适应了，就不用什么媒体查询那些的。 我们的设计图往往宽度是640或者其他尺寸的，不过我建议是用这个尺寸，以640为基准，以小到大，实现自适应，下面实现的比例为1rem=40px(640...
移动端网页大小自适应的实现方法
09-28
doc.documentElement.style.fontSize = (size ) + 'px'; }; setTimeout(function(){ setFontSize(); }, 200); }); ``` 最后，使用`rem`时，一个需要注意的细节是，当`html`的`font-size`较大时，行内元素的`...
前端 H5 公众号网页 卡片式分享
m0_64798066的博客
01-10 1447
一个微信H5 卡片式分享 使用uniapp、vue2、js具体步骤查看成功的演示。
H5实现微信分享
MostDish_girl的博客
11-07 5351
H5实现微信分享
微信H5页面分享给朋友或朋友圈解决方案
weixin_48263393的博客
06-04 5073
微信H5页面 分享朋友或朋友圈解决方案
微信分享 h5 实现
qq_41429765的博客
11-05 4658
最初开发的时候分享功能已经实现了，可以分享qq，qq空间，但是微信朋友，微信朋友圈分享的效果无法以分享卡片的形式体现。只有将访问h5的链接挂在公众号的自定义菜单下才可以实现微信中分享朋友圈，朋友以卡片形式展现。今天微信开发的分享就到这里了，希望我填的坑对你有所帮助。实现h5页面分享，并将分享的链接携带参数，在微信中使用。
不同平台使用不同技术实现微信好友、朋友圈分享汇总（H5、taro、uni-app）
weixin_36989919的博客
04-18 5617
人生路漫漫，坑，是活久了见。程序猿世界里各种奇葩的需求都有，随之而来的各种坑也是层出不穷。应前IBM同事邀请特来做分享的专题总结。事情前情概述，昨天IBM的同事前来咨询我怎样实现微信分享功能。经过一系列的细细道来。原来他们前端是用uniapp开发的一个app，现在要实现分享功能。他们前端的小伙伴没有这方面的经验，折腾了半天没有眉目。那么接下来我从以下三个方面来解剖如何实现分享。说白了，对于分享功能来说，是一个非常普遍而又常见的功能。但是面临不同的环境、不同的技术栈确实有点头大。
H5网页实现微信分享，分享朋友圈功能（分享带图片，附源码
2401_83739472的博客
04-03 4256
面试题文档来啦，内容很多，485页！由于笔记的内容太多，没办法全部展示出来，下面只截取部分内容展示。
H5学习（四）-- 常用属性
旭日的博客
06-29 1300
(其中上, 下边距是相等的. 例如行高为40px, 文字大小为18px, 则上下边距为11px)浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别。为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式。通过上述代码将盒子的大小设置为宽度 500px, 高度 200px。a 标签可以放块级元素, 但是建议先把 a 标签转换为块级元素。可以将行内元素变为块级元素, 也可以将块级元素变为行内元素。url 中的路径可以是绝对路径, 也可以是相对路径。
WPF viewbox 中的 TextBlock FontSize 自适应
05-19
在 WPF 中，可以使用 Viewbox 控件来实现容器中的内容自适应大小...根据容器的大小和 TextBlock 的文本内容长度，计算新的字体大小，并将其赋值给 TextBlock 的 FontSize 属性，实现 TextBlock 控件的字体大小自适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值