微信X5

发表于 | 分类于 |

关于2018新版微信点击img出现弹出层效果

直接img标签会出现类似朋友弹出层效果，如果不想要则用div包裹起来。

如果是类似于映客直播之类的请使用背景图片做为封面图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="poster" style="background-image: url(https://file.feiniaolive.com/fc5026378c1b5540aa7085ab68ce5858?imageView2/1/w/480/h/270/format/png/interlace/1/q/75|imageslim)">
</div>
<style>
.poster {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0.7);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

关于微信浏览器中 高度问题

导航栏+iphone状态栏高度： 64px = 导航栏44+状态栏20

http://www.25xt.com/allcode/9581.html
http://www.25xt.com/html5css3/14584.html

判断是iOS手机还是andorid手机 进行控制”关注按钮”的位置 解决安卓手机视频最优先

1
2
3
4
5
6
var ua = navigator.userAgent.toLowerCase();
if(/iphone|ipad|ipod/.test(ua)){
  alert("iphone");
}else if(/android/.test(ua)){
  alert("android");
};

判断微信浏览器内核

手机打开网址 http://debugx5.qq.com/

android是腾讯x5

腾讯x5

iOS不是腾讯x5

腾讯nx5

微信分享

今天遇到微信分享输入了””，而在页面中直接用php模板语言输出进js中报错.

1
2
3
输入: titlte "天空之城"梦想起航

js: var title = '{$info.title}';

但是微信自动把””闭合，不允许这样输出导致js出错，进而微信分享报错

解决: 在页面中输出出来所有的php模板语言然后js获取

html

1
2
3
<!-- 微信分享 -->
<div id="wx-share" wx-title="{$info.chan_name}" wx-desc="{$info.affiche}" wx-link="{$info.redirect_url}" wx-imgUrl="{$info.face_url}">
</div>

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!-- 配置微信 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

wx.config({
  debug: false,
  appId: "{$signPackage.appId}",
  timestamp: "{$signPackage.timestamp}",
  nonceStr: "{$signPackage.nonceStr}",
  signature: "{$signPackage.signature}",
  jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "chooseImage", "uploadImage"]
});
wx.ready(function () {
    var title = $("#wx-share").attr("wx-title") || "";
    title = title.replace(/\s/, "").replace(" ", "");
    var descript = $("#wx-share").attr("wx-desc");
    var shareurl = $("#wx-share").attr("wx-link");
    var imgurl = $("#wx-share").attr("wx-imgUrl");
    if (descript == '') {
        descript = title;
    }
    //分享给朋友
    wx.onMenuShareAppMessage({
        title: title, //  分享标题
        desc: descript, //  分享链接
        link: shareurl, // 分享图标
        imgUrl: imgurl,
        type: 'link',
        dataUrl: '',
        success: function () {
            $(this).minTipsBox({
                tipsContent: "分享成功",
                tipsTime: 1
            }); // 用户确认分享后执行的回调函数
            //window.location.reload(true);
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    //分享到朋友圈
    wx.onMenuShareTimeline({
        title: title, // 分享标题
        link: shareurl, // 分享链接
        imgUrl: imgurl, // 分享图标
        success: function () {
            $(this).minTipsBox({
                tipsContent: "分享成功",
                tipsTime: 1
            }); // 用户确认分享后执行的回调函数
            //window.location.reload(true);
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    //分享到QQ
    wx.onMenuShareQQ({
        title: title, // 分享标题
        desc: descript, // 分享描述
        link: shareurl, // 分享链接
        imgUrl: imgurl, // 分享图标
        success: function () {
            $(this).minTipsBox({
                tipsContent: "分享成功",
                tipsTime: 1
            }); // 用户确认分享后执行的回调函数
            //window.location.reload(true);
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    //分享到腾讯微博
    wx.onMenuShareWeibo({
        title: title, // 分享标题
        desc: descript, // 分享描述
        link: shareurl, // 分享链接
        imgUrl: imgurl, // 分享图标
        success: function () {
            $(this).minTipsBox({
                tipsContent: "分享成功",
                tipsTime: 1
            }); // 用户确认分享后执行的回调函数
            //window.location.reload(true);
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });

    //分享到QQ空间
    wx.onMenuShareQZone({
        title: title, // 分享标题
        desc: descript, // 分享描述
        link: shareurl, // 分享链接
        imgUrl: imgurl, // 分享图标
        success: function () {
            $(this).minTipsBox({
                tipsContent: "分享成功",
                tipsTime: 1
            }); // 用户确认分享后执行的回调函数
            //window.location.reload(true);
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    wx.hideMenuItems({
        menuList: ["menuItem:share:qq",
        "menuItem:share:weiboApp",
        "menuItem:favorite",
        "menuItem:share:facebook",
        "menuItem:share:QZone",
        "menuItem:editTag",
        "menuItem:delete",
        "menuItem:copyUrl",
        "menuItem:originPage",
        "menuItem:readMode",
        "menuItem:openWithQQBrowser",
        "menuItem:openWithSafari",
        "menuItem:share:email",
        ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
     });    
});
wx.error(function(res) {
  console.log(res.errMsg);
});

微信支付

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// 支付
$('.xx').click(function(event) {
  $.ajax({
    url: "",
    type: "POST", //请求方式 GET
    async: false,
    data: {
      'id': '111'
    },
    dataType: "json",
    success: function(req) {
      if (req.zt == 'ok') {
        jsApiParameters = JSON.parse(req.jsApiParameters);
        alert(JSON.stringify(jsApiParameters));
        callpay();
      } else {
        ok_tips(req.err);
      }
    },
    error: function(req) {
      console.log(req);
    }
  });
});

//调用微信JS api 支付
// 接受一个jsApiParameters的参数对象
function jsApiCall() {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', jsApiParameters,
    function(res) {
      if (res.err_msg == "get_brand_wcpay_request:ok") {
        ok_tips('支付成功');
        $('.ex-paytrue').text('已报名').css('background', '#a6a6a6');

      } else {
        ok_tips('支付失败');
      }
    }
  );
}

function callpay() {
  if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', jsApiCall);
      document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
    }
  } else {
    jsApiCall();
  }
}
0%