记一次活动投放页开发

所用知识点：jquery，swiper(轮播)，jweixin(微信JS接口)，jqDownCount(倒计时)，jqQrCode(生成二维码)

重点：微信内置浏览器支付

次重点：PCweb支付宝支付，Mweb支付宝支付，PCweb微信支付(公众号配置问题,尚未开发)，Mweb微信支付(公众号配置问题,尚未开发)

再次重点：页面制作

 

代码片段：

1.判断当前浏览器是不是微信内置浏览器

//判断是否wx内置浏览器
function isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

 

2.判断是否是移动端

//mobile
            var mobileBoolean = isMobile();
            function isMobile() {
                var userAgentInfo = navigator.userAgent;
                var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
                var mobile_flag = false;
                //根据userAgent判断是否是手机
                for (var v = 0; v < mobileAgents.length; v++) {
                    if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                        mobile_flag = true;
                        break;
                    }
                }
                 var screen_width = window.screen.width;
                 var screen_height = window.screen.height;    
                 //根据屏幕分辨率判断是否是手机
                 if(screen_width < 500 && screen_height < 800){
                     mobile_flag = true;
                 }
                 return mobile_flag;
            }

 

3.结合1跟2判断当前是在什么情况下发起支付

　　　　　　　　　　if(mobileBoolean){
                    if (isWeiXin()) {
                        pay_method = 'mp';　　　　//M微信内置浏览器
                    } else {
                        pay_method = 'wap';　　　　//M支付宝
                    }
                }else{
                    if (isWeiXin()) {
                        pay_method = 'scan';　　　　//M微信
                    } else {
                        if(pay_payType==1){                            
                            pay_method = 'scan'　　　　//PC微信
                        }else{              
                            pay_method = 'web'　　　　//PC支付宝
                        }
                    }
                }

 

4.前端h5微信内置浏览器获取code值

var local = window.location.href // 获取页面url
var appid = '' 
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

 

5.微信内置浏览器唤醒支付

function onBridgeReady(appId,nonceStr,package,paySign,signType,timeStamp){
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId":appId,     //公众号ID，由商户传入     
            "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数     
            "nonceStr":nonceStr, //随机串     
            "package":package,     
            "signType":signType,         //微信签名方式：     
            "paySign":paySign //微信签名 
        },
        function(res){
        if(res.err_msg == "get_brand_wcpay_request:ok" ){
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
            window.location.href = "./wechat.html"
        } 
    }); 
}

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();
}

 

6.h5分享到微信

$.ajax({
        type: "get",
        url: baseUrl+'url',
        dataType: "json",
        success: function (data) {
            console.log(data)
            wx.config({
                debug: false,
                appId: data.appID,
                timestamp: data.timestamp,
                nonceStr: data.noncestr,
                signature: data.signature,
                jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData']

            });
            wx.ready(function () {
                //分享给朋友
                wx.updateAppMessageShareData({
                    title: '标题',
                    desc: '内容',
                    link: '跳转链接',
                    imgUrl: '图片路径',
                    success:function(){
                        console.log("分享给朋友成功");
                    }
                });
                //分享到朋友圈
                wx.updateTimelineShareData({
                    title: '标题',
                    link: '跳转链接',
                    imgUrl: '图片路径',
                    success:function(){
                        console.log("分享到朋友圈成功");
                    }
                });
            });
            wx.error(function (res) {
                console.log("页面加载异常！" + res.errMsg);
            });
        }
    });

 

7.localStorage的增删查

localStorage.setItem("token", data.data.token)

localStorage.getItem("token")

localStorage.removeItem('token')

 

8.ajax

$.ajax({
    url:baseUrl+"",
    data:{good_id:id},
    headers: {
        'token':localStorage.getItem("token"),
    },
    success:function(data){
    },
    error:function(err){
    }
});

 

9.原生60秒短信验证码倒计时

//获取验证码
            var smsSwitch = true;　　　　//制作一个开关防止用户多次点击
            var smsSecond = 60;　　　　//倒计时
            var smsInterval =""　　　　//预留setInterval
            $(".smsGet").on("click",function(){　　　　//点击了获取验证码
                if(smsSwitch && $(".phoneNum").val()!=""){　　//判断是否输入了手机号
                    smsSwitch = false;　　　　//改变开关状态,防止用户重复点击
                    smsSetTime()　　　　//执行定时器
                    smsPost($(".phoneNum").val());　　　　//发起交互，获取验证码
                }else if($(".phoneNum").val()==""){
                    toast("手机号码为空");
                }
            })
            function smsSetTime(){
                smsInterval = setInterval(() => {
                    if(smsSecond>0){　　　　//60秒倒计时
                        smsSecond--;　　　　//每秒-1
                        $(".smsGet").html("("+smsSecond+"s)后重发");　　　　//改变按钮文案
                        console.log(smsSecond);
                    }else{
                        smsSwitch = true;　　　　//开启开关用户可再次点击
                        smsSecond = 60;　　　　//设定倒计时
                        $(".smsGet").html("获取验证码");　　　　//改变按钮文案
                        clearTimeout(smsInterval);　　　　//清除定时器
                    }
                }, 1000);
            }
            function smsClearTime(){　　　　//清除定时器
                smsInterval.clearInterval();
            }

 

 10.JQ倒计时插件

//timeDown————plug-in
function timeDownAction(){
    var nowtime=new Date().getTime()+600000;
    var date=new Date(nowtime);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;
    var timestamp = m + '/' + d + '/' + y + ' ' + h + ':' + minute + ':' + second;
    $('.time1').downCount({
        date: timestamp,
        offset: 8//时区东8区
    }, function () {
        console.log('倒计时结束!');
    });
}