最近公司要加大拓客力度,要求做个h5分享领红包页面,要求动态获取app端的用户名和用户头像并展示。
实现流程如下:
H5(实现静态页面,并且对服务端动态拼接的参数做预处理) -------- 服务端(动态拼接参数) -------- app端(通过事件获取到服务端的h5)
流程清晰,结构明确;这里关键的一环是h5端不与app直接交互,而是通过服务端作为中间层进行最终的交互,这里我们就需要用到一个重要的方法,就是获取url参数并进行转码的方法,话不多说,上代码:
function getRequest() {
//window.location.search获取URL路径?及其后面的字符串
var url = window.location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
这个方法的作用就是将url后面拼接的参数转化成对象,方便后续转出处理。
接下来就方便多了,
if (getRequest().headImgUrl != 'null') {
var pictureUrl = getRequest().headImgUrl;
document.getElementById("picture").src = pictureUrl;
}else{
document.getElementById("picture").src = 'http://img.yashijitv.com/c3f74e1f-ea7b-4c47-a071-dd3fb38a8787';
}
比如我们要获取服务端给我们拼接的用户头像,只需要getRequest().headImgUrl
就可以直接取到头像的url并且展示到我们的h5页面