前端相关的技术资料

比较全的HEAD头信息介绍

 地址 ：https://github.com/joshbuchea/HEAD?utm_source=html5weekly&utm_medium=email

禁止微信分享功能js代码

禁止微信内分享当前页面代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

/** * 判断是否微信浏览器 * @returns {boolean} */ function  isWeixinBrowser() {      var  ua = navigator.userAgent.toLowerCase();     return  (/micromessenger/.test(ua)) ?  true  :  false ; } /** * 微信禁止分享按钮 * */ function  forbidShare() {      if  (isWeixinBrowser()) {          function  onBridgeReady() {              WeixinJSBridge.call( 'hideOptionMenu' );             WeixinJsBridge.invoke( 'disabledShare' , {},  function  (e) {                  return  false ;             });             WeixinJSBridge.invoke( 'closeWindow' , {},  function  (res) {                  alert(res.err_msg);             });         }            if  ( typeof  WeixinJSBridge ==  "undefined" ) {              if  (document.addEventListener) {                  document.addEventListener( 'WeixinJSBridgeReady' , onBridgeReady,  false );             }  else  if  (document.attachEvent) {                  document.attachEvent( 'WeixinJSBridgeReady' , onBridgeReady);                 document.attachEvent( 'onWeixinJSBridgeReady' , onBridgeReady);             }          }  else  {              onBridgeReady();         }      } } //调用禁止分享的方法 forbidShare();

PP 4.1以下分享代码

Android 分享必须注意

分享小图片必须为 100*100 一下png图片。必须10k一下。－ 20160728

HTML代码

<!-- app分享 --> < div  class = "sharkelayer" >      < div  class = "sharebox" >          < div  class = "line1" >              < a  class = "clickwx"  style = "margin-right:25px"  id = ""  href = "javascript:;" >                  < img  src = "<a href="http://dj.58cdn.com.cn/fe/jz/m/orderfor3/lanrenjie/img/sharke-weixin.png" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(29, 193, 22) !important; background: 0px center;">http://dj.58cdn.com.cn/fe/jz/m/orderfor3/lanrenjie/img/sharke-weixin.png"  alt = ""  width = "56" >                  < div  style = "color:#333" >微信</ div >              </ a >              < a  class = "clickpyq"  href = "javascript:;" >                  < img  src = "<a href="http://dj.58cdn.com.cn/fe/jz/m/orderfor3/lanrenjie/img/sharke-pyq.png" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(29, 193, 22) !important; background: 0px center;">http://dj.58cdn.com.cn/fe/jz/m/orderfor3/lanrenjie/img/sharke-pyq.png"  alt = ""  width = "56" >                  < div  style = "color:#333" >朋友圈</ div >              </ a >          </ div >          < div  class = "line2" >              < a  href = "javascript:;"  class = "btn_cancel" >取消</ a >          </ div >      </ div > </ div >

CSS代码

/* app分享弹层 */ .sharkelayer, .sharkelayer_link {      display :  none ;      position :  fixed ;      width :  100% ;      height :  100% ;      top :  0 ;      bottom :  0 ;      left :  0 ;      z-index :  101 ;      padding :  0 ;      background : rgba( 0 ,  0 ,  0 ,  0.8 );      text-align :  center ;      font-size :  15px ; } .sharebox {      position :  absolute ;      left :  0 ;      bottom :  0 ;      width :  100% ; } .line 1  {      padding :  20px  0 ;      background-color :  #fff ; } .line 1  a {      display : inline- block ; } .line 1  img {      margin :  0  10px ;      width :  56px ; } .line 2  {      background-color :  #fff ; } .line 2  a {      display :  block ;      height :  40px ;      line-height :  40px ;      background-color :  #e6ecf5 ;      color :  #000 ; }

Javascript 代码

// 分享遮罩 $( ".sharkelayer .btn_cancel" ).click( function (e) {      $( ".sharkelayer .sharebox" ).show();      $( ".sharkelayer" ).hide();      e.stopPropagation(); }); // $( '.clickwx' ).on( 'click' ,  function () {      appShare(3); }); $( '.clickpyq' ).on( 'click' ,  function () {      appShare(4); }); function  showShare() {      $( ".sharkelayer .sharebox" ).hide();      $( ".sharkelayer" ).show();      $( ".sharkelayer .sharebox" ).show(); } // 分享相关 function  appShare(type) {      var  img = encodeURIComponent( "<a href="http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(29, 193, 22) !important; background: 0px center;">http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png" );      var  activityid =  "0" ;  //      var  title =  "58到家发了一个会变大的礼包！" ;      var  direction = type;  // 1.微博2.qq3.微信好友4.朋友圈      var  desc =  "晓明和baby的品质之选，一点即可享受！" ;      var  url =  '' ;      var  encodePhone = getCookie( "tvc_mobile" );  //getCookie('tvc_mobile');//getCookie(mobile)      if  ($( '.help_me' ).css( 'display' ) ==  'block' ) {          title =  "考验友谊的时刻到了……" ;          desc =  "58到家赠大大大礼，越点越大！" ;          url =  'http://t.jzt.58.com/wechattvc/share_after.html?userPhone='  + encodePhone;      }  else  {          url =  "<a href="http://t.jzt.58.com/wechattvc/wechat.html" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(29, 193, 22) !important; background: 0px center;">http://t.jzt.58.com/wechattvc/wechat.html" ;      }      var  share_weixin_url =  "daojia://share?url="  + encodeURIComponent(url) +  "&img="  + img +          "&title="  + title +  "&activityid="  + activityid +          "&direction="  + direction +  "&desc="  + desc +  "&cityid=1" ;      window.location.href = share_weixin_url; } // /*导航栏app端分享*/ var  friends = {      'name' :  '朋友圈' ,      'type' : 4,      'title' :  '58到家发了一个会变大的礼包！' ,      'desc' :  '晓明和baby的品质之选，一点即可享受！' ,      'thumbnail' :  'http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png' ,      'url' :  'http://t.jzt.58.com/wechattvc/wechat.html' }; var  wx = {      'name' :  '微信' ,      'type' : 3,      'title' :  '58到家发了一个会变大的礼包！' ,      'desc' :  '晓明和baby的品质之选，一点即可享受！' ,      'thumbnail' :  'http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png' ,      'url' :  'http://t.jzt.58.com/wechattvc/wechat.html' }; var  activity = {      'key' :  'test' ,      'activity_id' :  'test_id' }; var  obj = {      'share' : [friends, wx],      'activity' : activity }; var  str = Base64.encode(JSON.stringify(obj)); function  titleForRightButton() {      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终端      //业务逻辑      if  (isIOS) {          return  '分享' ;      }  else  if  (isAndroid) {          window.daojia.rightButtonTitle( '分享' );      } } function  rightButtonClicked() {      $( ".sharkelayer .sharebox" ).hide();      $( ".sharkelayer" ).hide();      var  encodePhone = getCookie( "tvc_mobile" );      if  ($( '.help_me' ).css( 'display' ) ==  'block'  && isLogin() ) {          friends.title =  "考验友谊的时刻到了……" ;          friends.desc =  "58到家赠大大大礼，越点越大！" ;          friends.url =  'http://t.jzt.58.com/wechattvc/share_after.html?userPhone='  + encodePhone;          wx.title =  "考验友谊的时刻到了……" ;          wx.desc =  "58到家赠大大大礼，越点越大！" ;          wx.url =  'http://t.jzt.58.com/wechattvc/share_after.html?userPhone='  + encodePhone;      }  else  {          friends.title =  "58到家发了一个会变大的礼包" ;          friends.desc =  "晓明和baby的品质之选，一点即可享受！" ;          friends.url =  'http://t.jzt.58.com/wechattvc/wechat.html' ;          wx.title =  "58到家发了一个会变大的礼包" ;          wx.desc =  "晓明和baby的品质之选，一点即可享受！" ;          wx.url =  'http://t.jzt.58.com/wechattvc/wechat.html' ;      }      var  str = Base64.encode(JSON.stringify(obj));      window.location.href =  'daojia://share/toolbar?'  + str; }

APP4.1版本以上分享代码 cordova

Javascript

var  userAgent = navigator.userAgent; var  cookiestr = document.cookie; if  (userAgent.indexOf( 'cdvsupport' ) >= 0 || cookiestr.indexOf( 'cdvsupport' ) >= 0) {      document.write( "<script type='text/javascript' src='nacodovafile/js/cdplugins.js#nacodovafile'><\/script>" );      document.write( "<script type='text/javascript' src='nacodovafile/js/cordova.js#nacodovafile'><\/script>" ); } var  sharecall =  function (url) {      var  sharedata = {          "mediaType" :  "link" ,          "panels" : [{                  "panelKey" :  "weixin_friends" ,                  "panelData" : {                      "linkUrl" : url,                      "iconUrl" :  "<a href="http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(29, 193, 22) !important; background: 0px center;">http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png" ,                      "title" :  "好友喊你领现金大礼啦!" ,                      "content" :  "晓明和baby携手在58到家送200万现金大礼,领到就赚到!"                  }              }, {                  "panelKey" :  "weixin_chat" ,                  "panelData" : {                      "linkUrl" : url,                      "iconUrl" :  "<a href="http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(29, 193, 22) !important; background: 0px center;">http://dj.58cdn.com.cn/fe/other/xxc20160627tvc/images/tvc200_9k.png" ,                      "title" :  "好友喊你领现金大礼啦!" ,                      "content" :  "晓明和baby携手在58到家送200万现金大礼,领到就赚到!"                  }              }]              // }, {              //     "panelKey": "sinaweibo",              //     "panelData": {              //         "linkUrl": "<a href="http://daojia.com/xxxx" ,"="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://daojia.com/xxxx",              //         "iconUrl": "<a href="http://ss.bdimg.com/static/superman/img/logo/bd_logo1_31bdc765.png" ,"="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://ss.bdimg.com/static/superman/img/logo/bd_logo1_31bdc765.png",              //         "title": "发现了好东西",              //         "content": "好东西的东西的内容"              //     }              // }, {              //     "panelKey": "share_qrcode",              //     "panelData": {              //         "modKey": "modrepairsimple",              //         "modData": {              //             "linkUrl": "<a href="http://daojia.com/" ,"="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://daojia.com",              //             "imageUrl": "<a href="http://app.xiujiadian.com/third/58daojia/images/banner-index.jpg" ,"="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://app.xiujiadian.com/third/58daojia/images/banner-index.jpg",              //             "title": "手部护理SPA（含御甲）",              //             "contentData": [{              //                 "title": "服务价格",              //                 "content": ["单开门冰箱价格170元", "单开门冰箱价格170元"]              //             }, {              //                 "title": "服务价格",              //                 "content": ["单开门冰箱价格170元", "单开门冰箱价格170元"]              //             }],              //             "price": "¥200",              //             "qrDesc": "识别二维码查看详情",              //             "iconURL": ""              //         },              //         "panels": [{              //             "panelKey": "weixin_friends",              //             "panelData": {              //                 "linkUrl": "<a href="http://daojia.com/" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://daojia.com"              //             }              //         }, {              //             "panelKey": "weixin_chat",              //             "panelData": {              //                 "linkUrl": "<a href="http://daojia.com/" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://daojia.com"              //             }              //         }, {              //             "panelKey": "sinaweibo",              //             "panelData": {              //                 "linkUrl": "<a href="http://daojia.com/" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://daojia.com"              //             }              //         }, {              //             "panelKey": "save_photo",              //             "panelData": {              //                 "linkUrl": "<a href="http://daojia.com/" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://daojia.com"              //             }              //         }]              //     }              // }, {              //     "panelKey": "copylink",              //     "panelData": {              //         "linkUrl": "<a href="http://daojia.com/" "="" style="text-decoration: none; border-radius: 0px; border: 0px; bottom: auto; float: none; height: auto; left: auto; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto; box-sizing: content-box; min-height: inherit; color: rgb(66, 139, 221) !important; background: 0px center;">http://daojia.com"              //     }              // }]      };      CD58UtilsPlugin.util( "sharefunction" , sharedata,  function (data) {          //sharecusses          //alert(1);      },  function (data) {          //sharefailed          //alert(2);      }); }; document.addEventListener( "deviceready" , onDeviceReady,  false ); function  onDeviceReady(data) {      CD58UtilsPlugin.setRightButtons({          'rightbuttons' : [{              'title' :  'shareimage' ,              'tag' :  'share' ,              'color' :  '#00ff00'          }]      },  function () {},  function () {}); } document.addEventListener( "onrightbuttonclick" , onrightbuttonclick,  false ); function  onrightbuttonclick(data) {      sharecall(appShareUrl(1)); }

偶遇的bug及处理办法集锦

1、人民币符号“￥” 在红米note手机中显示为一个方块

 

解决办法：只认 shift+$ 打出来的 ￥ 人民币符号，用实体字符集 &yen 或从psd上复制粘贴的都不行。

2、ios微信环境下，阻止了链接跳转到https://itunes.apple.com/cn/进行下载app。

解决办法：判断ios环境下的微信环境，如果是，点击下载时候弹出提示，提示用户选择右上角到safari下打开页面，即可正常跳转下载。