h5分享领红包页面获取app用户名头像并动态展示

最近公司要加大拓客力度,要求做个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页面

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值