消费贷款app“一刻千金”接入网易严选总结

主要任务列表

  1. 隐藏相关元素
  2. 商品列表页跳转事件绑定
  3. 获取商品信息(skuid比较复杂)

隐藏元素

这部分没什么好讲的,使用原生js的document的api定位元素或者jQuery的选择器定位元素,然后隐藏(hide)或者移除(remove)

阻止列表页的事件

搜索到结果后,点击其中某个商品,希望跳转至改造过的详情页(改变了购买方式)。

搜索列表页的html主要结构如下:

<ul class="list">
<li class="item">
<a class="good" data-reactid="aaaaaa">商品1</a>
</li>
<li class="item">
<a class="good" data-reactid="bbbbbb">商品1</a>
</li>
<li class="item">
<a class="good" data-reactid="cccccc">商品1</a>
</li>
</ul>

以往接入京东、苏宁时,列表页商品跳转都是通过<a>标签设置href的,重新绑定事件,并使用preventDefault,可以防止href的跳转;

严选使用了react技术栈,这里有两个问题:

  1. 没有使用href,跳转是通过绑定事件,而这个事件处理方法是匿名函数,不知道怎么去移除(使用了jquery的off和unbind,都不起作用知识有限,暂留问号???);
  2. 列表页下拉时,加载,所以给每个<a>标签绑定事件,貌似不太友好也不太靠谱。

最后,采用事件委托的方式,只需给<ul>绑定一个点击事件,通过判断所点击当前元素,找出<a>标签所带的商品信息(取出属性data-reactid的值)。使用stopPropagation方法,可以阻断<a>的点击事件执行,完美。同时,也解决了下拉加载的问题。

使用jQuery:

$('ul').off('click').on('click', '.item', function(e) {
e.stopPropagation();
//e.currentTarget 当前点击的'.item'元素
var tag_a = $(e.currentTarget).find('a.good');
var data_reactid = tag_a.attr('data-reactid');
var product_id = data_reactid.match(/\$\d+/g)[0].replace('$', '');
var obj = {
link: 'http://m.you.163.com/item/detail?id=' + product_id,
type: '001'
}; console.log(obj);
postData(obj); //postData是与app通信的方法
});

原生js:

var ul = document.getElementsByClassName('list');
if(ul.length > 0) {
ul.addEventListener('click', function(e){
e.stopPropagation();
var path = e.path();//文档流
var a = path.filter(item => item.tagName == 'A')//寻找到a标签
var data_reactid = a[0].getAttribute('data-reactid');
var obj = {
link: 'http://m.you.163.com/item/detail?id=' + product_id,
type: '001'
}; console.log(obj);
postData(obj);//postData是与app通信的方法
})
}

使用事件委托的方式,还有个很大的好处。如果循环给<a>标签绑定点击事件,导致该页面存在大量事件处理程序,会影响性能。

在测试时,一直有个奇怪的问题:大量情况下,能确定该段js完整注入并执行,但是通过调试,就是观察不到ul的click事件;只有很小的几率成功。

并且webview注入该js时,确定是在页面渲染完成后才注入的。

后来猜想问题可能是react-router生命周期导致的,<ul>这一部分其实是在子路由里面,通过锚点形式。所以webview认为的页面渲染完成,可能其实不包括这段hash路由。

最后尝试将该事件绑定在<body>上,完美解决。

获取商品信息--skuid

京东、苏宁的商品id,在url上可以很直观地的出来;

而网易严选的商品页面,url中的search部分也有类似id的字段。只可惜,此id并不是需要下单商品的skuid。因为同样商品,不同规格(颜色、尺码等)时,skuid是不一样的。

经过大量不同商品页面的分析(其实也就试了两个)。

在商品详情页和选择规格的页面,有一个jsonData的全局变量,其中jsonData.skuMap类似下面的形式:

该商品有两个规格(颜色和尺码需要选择),很容易分析出,该如何确定,寻找skuid了。

  1. 获得所选规格(颜色、尺码)的值keyList;
  2. 将jsonData.skuMap转为[k,v]的列表skuMapList(使用Object.entries);
  3. 根据keyLlist,过滤筛选skuMapList,正常情况下,skuMapList只剩下一条数据。
function getSkuId() {
var spec_cons = document.getElementsByClassName('u-format');
var selObject = []
for (var i = 0; i < spec_cons.length - 1; i++) {
var element = spec_cons[i];
var selected = element.getElementsByClassName('tab-sel')[0];
if (selected) {
var str = selected.getAttribute('data-reactid');
var kv = str.match(/\$\d+/g);
var item = {
id: kv[0].replace('$', ''),
value: kv[1].replace('$', '')
}
selObject.push(item);
}
} polyfill();//解决老旧版本兼容性问题 var skuMapList = Object.entries(jsonData.skuMap);
for (var i = 0; i < selObject.length; i++) {
skuMapList = skuMapList.filter(function(item){
return item[0].indexOf(selObject[i].value) >= 0;
})
} var result_id = null; if(skuMapList.length == 1) {
result_id = skuMapList[0][1].id;
} return result_id;
}

老旧版本浏览器不支持Object.entries,Object.keys,Array.filter等方法,这里polyfill()就是检测兼容性:

方法参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

function polyfill(){
if(!Object.keys){
Object.prototype.keys = function(){
//fun body
...
}
} if(!Object.entirs){
Object.prototype.keys = function(){
//fun body
...
}
} if(!Array.filter){
Array.prototype.keys = function(){
//fun body
...
}
}
}

最开始的算法中,找到所选规格的之后,通过拼接字符串得到skuMap的关键字。

如所选颜色color,尺寸size,那么key = color + ';' + size,最后的结果就是jsonData.skuMap[key]。

通过大量测试,发现有些情况key = size + ';' + color,导致取不到skuid。

所以改变算法,将skuMap变为列表,循环过滤。

app接入网易严选:webview注入js的几个坑的更多相关文章

  1. iOS webview注入JS

    - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *js = @"function imgAutoFit() { \ ...

  2. iOS app的webview注入JS遇到的坑

    webview使用JSContext 向网页js注入时时机要选为网页加载完成后即放在 -(void)webViewDidFinishLoad:(UIWebView *)webView 方法 : -(v ...

  3. iOS WebView调用JS的一个小坑

    假如调用一个函数,传入的参数为String,要以这样的格式传入: let resultStr="1234" self.webView.stringByEvaluatingJavaS ...

  4. 基于Node.js+MySQL开发的开源微信小程序B2C商城(页面高仿网易严选)

    界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城 功能和数据库参考ecshop 服务端api基于Node.js+ThinkJS+MySQL 计划添加基于Vue.js的后台管 ...

  5. WebView与JS的几种交互

    http://www.jianshu.com/p/0042d8eb67c0 最近整理了一下原生与H5之间的交互方式,简单的做个总结.OC端与JS的交互,大致有这几种:拦截协议.JavaScriptCo ...

  6. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

  7. 一步一步 copy163: 网易严选 ---- vue-cli

    面试点 组件间通信 生命周期函数 路由 - 参数 - 重定向 vuex 参考 网易严选商城小程序全栈开发,域名备案中近期上线(mpvue+koa2+mysql) 小程序服务端源码地址 小程序源码地址 ...

  8. WebView注入Java对象注意事项

    在android4.2以前,注入步骤如下: webview.getSetting().setJavaScriptEnable(true); class JsObject { public String ...

  9. 4.22 注入js需要加 addjavascriptinterface

    由于项目需要,再次使用到了android的webview,webview要加载的页面是html5的页面: 需要有点击webview中的控件的交互,所以需要在android应用中注入一个js对象: 通过 ...

随机推荐

  1. SELECT与SET对变量赋值

    SQL Server 中对已经定义的变量赋值的方式用两种,分别是 SET 和 SELECT. 对于这两种方式的区别,SQL Server 联机丛书中已经有详细的说明,但很多时候我们并没有注意,其实这两 ...

  2. windows 本地构建hadoop-spark运行环境(hadoop-2.6, spark2.0)

    下载hadoop http://hadoop.apache.org/releases.html --> http://mirrors.tuna.tsinghua.edu.cn/apache/ha ...

  3. kubeernetes节点资源限制

    实际应用中发现,部分节点性能不足,某些较大的服务如果跑在这些机器上.会很快消耗该机器的内存和cpu资源,如果用uptime看一下的就会发现负载特别高(合理的范围这个值应该等于cpu个数),高到一定值就 ...

  4. win10 uwp 访问解决方案文件

    本文讲如何访问解决方案的资源. 我们经常会把一些图片资源放在我们的解决方案,那么从这里拿出来很简单. 我在 Assets 放了图片 1.jpg 那么我要把他拿出来可以 <Image Source ...

  5. Tomcat针对网站打开速度慢进行局部优化方案

    首先打开tomcat下的conf文件夹里面的server.xml找到Tomcat端口号一栏 <Connector port="8081" protocol="HTT ...

  6. MyBatis 开发记录

    1.在classpath下创建log4j.properties # Global logging configuration log4j.rootLogger=DEBUG, stdout # Cons ...

  7. RabbitMQ 笔记-Exchanges

    Procuder Publish的Message进入了Exchange.接着通过"routing keys", RabbitMQ会找到应该把这个Message放到哪个queue里. ...

  8. 深入理解Java中的迭代器

    迭代器模式:就是提供一种方法对一个容器对象中的各个元素进行访问,而又不暴露该对象容器的内部细节. 概述 Java集合框架的集合类,我们有时候称之为容器.容器的种类有很多种,比如ArrayList.Li ...

  9. Android 分包 MultiDex 策略总结

    1.分包背景 我们在Android开发中,会不断的在App代码里面增加新功能,引入新的类库,如果不加控制的话,那么会碰到编辑器IDE爆出一下错误: Error:Execution failed for ...

  10. svn: Working copy 'D:\workspace\web\..\..\images' is too old (format 10, created by Subversion 1.6

    问题:SVN同步或者提交的时候出现类似错误信息: 解决:找到对应目录,删除隐藏文件.SVN 重新提交或更新