项目开发中赶上三端接入h5的需求，因此本身动手作h5页面，可是在作的过程当中也赶上了许多的问题javascript

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

首先是H5的开发：java

像素单位：写的时候由于须要顾及ios和安卓，并且小程序端也会赶上各类屏幕比，比较麻烦，单位尽可能使用rem；python

请求：

若是闲麻烦的能够本地引入jq，若是不以为麻烦的能够本身使用js进行请求封装：ios

复制可用，惟一须要修改的地方xhr.setRequestHeader()，后台设置有权限，因此必须在请求头携带tokenweb

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

ajax({

url:'http://222.211.87.12:9722/api/strategy/rong/award',

type:'post',

data:{},

success:res=>{}

error:err=>{}

})

若是在请求接口地址时json

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

h5页面接收参数：

无论是小程序仍是安卓ios端，须要将参数拼接到请求地址api

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

arr = para[i].split("=");

res[arr[0]] = arr[1];

}

return res;

}

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

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

h5页面引入：后可直接调用

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

小程序端：

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

wxml：其中urls是地址信息

其余页面要跳转到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开发介绍完毕