h5 注册页面

很久没有用过jquery了，都差点忘记如何在html中引入自定义的js文件了。

在html文件中引入自定义的js文件，可以通过script标签引入，为了能够执行js文件中的方法，可以用立即执行函数进行函数封装。

具体写法如下：

(function(){
	//里面是代码块
})()

或者是这样的:

(function(){
	//里面是代码块
}())

判断访问终端

为了保证兼容性，可以通过判断访问终端的方式来获取当前的环境。

因为像微信 QQ等，是不能直接在微信/QQ中打开某个链接进行下载东西的。最常见的方式就是通过点击右上角的扩展按钮，然后进入到浏览器中，进行东西的下载。

h5 封装ios h5封装是什么意思_vue


判断访问终端的代码：

var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: !!u.search(/(Android);?[\s\/]+([\d.]+)?/) || u.indexOf('Adr') > -1, //更新适配
            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2017-07-03新增）
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

request参数的处理

//url参数获取
function request(strName) {
     var strHref = document.location.href;
     var intPos = strHref.indexOf("?");
     var strRight = strHref.substr(intPos + 1);
     var arrTmp = strRight.split("&");
     for(var i = 0; i < arrTmp.length; i++) {
         var arrTemp = arrTmp[i].split("=");
         if(arrTemp[0].toUpperCase() == strName.toUpperCase())
             return arrTemp[1];
     }
     return undefined;
 }

通过百度地图API获取当前定位

小知识点

script标签中的src属性，如果是为了能够更加方便http或者https协议，可以使用相对协议地址的方式来进行处理。

h5 封装ios h5封装是什么意思_vue_02


我之前用的百度地图api做的公司官网，在引用百度api时，用的就是写死的http协议，在本地使用nignx的时候，就会提示我http协议错误的信息，我当时的解决办法就是用https代替了http,现在看来，直接使用相对协议地址会更灵活一些。

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=cghSjChDF3wdWSFLtM0eNO10EVKYUzbGdfsdf"></script>

//获取当前定位是用的百度地图的Geolocation方法
var geolocation = new BMap.Geolocation();
var gc = new BMap.Geocoder();
geolocation.getCurrentPosition(function (r) {
    console.log(r);
    console.log(this.getStatus())
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var pt = r.point;
        gc.getLocation(pt, function (rs) {
            console.log(rs)
            var addComp = rs.addressComponents;
            var province = addComp.province;
            var city = addComp.city;
            var area = addComp.district;
            //获取到当前的定位信息后，需要调用一个接口去返回个参数，这个参数是我们想要的。
            // if(inviteId){
                $.ajax({
                    url: "/api/user/regionInviteCode",
                    type: 'post',
                    data: JSON.stringify({provinceName:province,cityName:city,districtName:area}),
                    //headers:请求头，一般通过请求头传递的参数都是固定死的。
                    headers: { 'Content-Type': 'application/json;charset=utf8', 'pt': 'android', 'dk': time, 'pk': 'fenxiao' },
                    async: false,
                    success:function(result){
                        console.log(result)
                        if(result.code === 200){
                        //此处的regionInviteCode  regionId 这两个参数是我需要的。
                            regionInviteCode = result.result.inviteCode;
                            regionId = result.result.regionId;
                        }
                    },
                    error:function(data){
                        $.MsgBox.Confirm("温馨提示", "网络连接错误!");
                        flag = true;
                    }
                })
            // }
            console.log(province,city,area)
        });
    }
    else {
        alert("定位失败");
    }
}, { enableHighAccuracy: true });

手机号格式的验证

//手机验证
function verifyPhone() {
  var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
  var tel = $.trim($('#phone').val());
  if (tel == '') {
    $.MsgBox.Confirm("温馨提示", "请输入手机号");
    return false;
  }
  if (!reg.test(tel)) {
    $.MsgBox.Confirm("温馨提示", "请输入正确的手机格式");
    return false;
  }
  return tel;
}

点击跳转新的页面

//jsonp回调
window.download = function (data) {
  if (data.code == 200) {
    window.location.href = data.h5Url;
  } else {
    $.MsgBox.Confirm("温馨提示", data.msg);
  }
};

如果是想要打开一个新的页面，则可以通过window.open = data.h5Url