html5做后台程序 h5调用后端接口

项目开发中遇上三端接入h5的需求，所以自己动手做h5页面，但是在做的过程中也遇上了许多的问题

小程序端不支持在本地引入，所以需要将h5发布服务器，以请求接口的形式进行访问

首先是H5的开发：

像素单位：写的时候因为需要顾及ios和安卓，而且小程序端也会遇上各种屏幕比，比较麻烦，单位尽量使用rem；

请求：
如果闲麻烦的可以本地引入jq，如果不觉得麻烦的可以自己使用js进行请求封装：

复制可用，唯一需要修改的地方xhr.setRequestHeader()，后台设置有权限，所以必须在请求头携带token

function ajax(options,tokena){
        //创建一个ajax对象
        var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");
        //数据的处理 {a:1,b:2} a=1&b=2;
        var str = "";
        for(var key in options.data){
            str+="&"+key+"="+options.data[key];
        }
        str = str.slice(1);
        if(options.type == "get"){
            var url = options.url+"?"+str;
            xhr.open("get",url);
            xhr.send();
        }else if(options.type == "post"){
            xhr.open("post",options.url);
            xhr.setRequestHeader("X-Authorization",'Bearer ' + tokena);
            xhr.setRequestHeader("Content-type","application/json;charset=UTF-8");//可以发送
            xhr.send(options.data)
        }
        //监听
        xhr.onreadystatechange = function(){
            //当请求成功的时候
            if(xhr.readyState == 4 && xhr.status == 200){
                var d = xhr.responseText;
                //将请求的数据传递给成功回调函数
                options.success&&options.success(d)
            }else if(xhr.status != 200){
                //当失败的时候将服务器的状态传递给失败的回调函数
                options.error&&options.error(xhr.status);
            }
        }
    }

请求用法：

ajax({
                url:'http://222.211.87.12:9722/api/strategy/rong/award',
                type:'post',
                data:{},
                success:res=>{}
                error:err=>{}
                })

如果在请求接口地址时

让你后台去处理跨域问题，处理不了让他百度

h5页面接收参数：
不管是小程序还是安卓ios端，需要将参数拼接到请求地址

var query = window.location.search;
var getParam = JSON.parse(JSON.stringify(parseURL(query)));


//解析方法
    function parseURL(url){
        var url = url.split("?")[1];
        var para = url.split("&");
        var len = para.length;
        var res = {};
        var arr = [];
        for(var i=0;i<len;i++){
            arr = para[i].split("=");
            res[arr[0]] = arr[1];
        }
        return res;
    }

getParam 即为解析后的json格式参数

H5跳转到小程序的某页方法：

h5页面引入：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

后可直接调用

注：在设计h5页面的时候，小程序的头部导航由于官方webView不受navigationStyle: custom的影响，所以会存在背景被挤压的问题

小程序端：

需要新建一个page去放置承载H5的webview

wxml：其中urls是地址信息

<!--pages/content/webView/webView.wxml-->
  <web-view src='{{urls}}'></web-view>

其他页面要跳转到H5页面，就直接跳转到该webView页面，webView会自动根据src中的地址载入到该页，载入后的html页面自动铺满当前页，无法在webView页中进行一般调试。

因为跳转到该页面的时候就直接载入了src地址的页面，我们需要在小程序webView页面加载时(onLoad)对src进行配置，所以其他页面在跳转到webView页面时也需要再次传递参数，需要将h5页面的地址，和h5页面需要的参数一并传递，然后在webView页面进行地址二次拼接。
跳转页

let id = e.currentTarget.dataset.id;
    let hrefs = e.currentTarget.dataset.href

        //跳转webview页面
        wx.navigateTo({
          url: '../content/webView/webView?hrefs=' + hrefs

)}

webView页

/**
   * 生命周期函数--监听页面加载
   */
 onLoad: function (options) {
	urls = app.data.detailHref + '&token=' + options.token + '&tag=' + options.tag + '&SPID=' + options.SPID
	this.setData({
      urls: urls
    })
  }

在跳转h5页面时出现：

或者在微信开发者工具中出现白屏页，属正常现象，需要将该请求地址进行认证为https

完整的小程序H5开发介绍完毕