- 做了一个颜色选择器
edit at 11/12 代码传到了:https://github.com/eclipseglory/zasi-components , DEMO演示在文章结尾 小程序没有提供color-picker类似的组件,只能自己做。 可传统的RGB颜色选择器,真的腻了,而且在手机上也不是很操作,就跑网上搜了一圈,发现有一种圆环形的(基于HSV)我很喜欢: [图片] 我自诩对canvas2d和webgl很熟悉,做个这玩意儿很轻松,开始做!没想到痛苦开始了。 从上周5开始,一共做了三个版本: 1.纯canvas版本 2.canvas+组件版本 3.纯组件版本 纯canvas版本这个版本做了整整一天! [图片] 由于canvas绘制性能问题,特别是因为没有requestAnimationFrame可以调用,别说在真机上测试特别不流畅,就是在模拟器上也小卡小卡的。而且,在纯的canvas进行触摸定位等事件响应处理,计算起来太麻烦,bug不断,只能放弃了。 混合版本因为wxs模块是提供requestAnimationFrame接口的,所以我就想,使用canvas作为底部颜色环,上面就直接用view作为指针,这样,事件触发和处理比起纯canvas要简单得多,而且还能利用rAF回调页面接口去绘制其他canvas。 的确,我的想法得到了证实,这个混合版本比起第一个要流畅得多! 可就要完工的时候,我却发现,在真机上,cover-view的鼠标事件有很大问题,坐标值飘忽不定,也就是说拖动指针会发生鬼畜般的抖动!加上我不知道怎么debug到wxs模块中,于是跟个sb一样fix,找了半天也没找到问题在哪儿,直到我搜索时,返现有人也遇到和我一样的问题,我才安心了:这是小程序的问题。 动手改!既然cover-view有不行,那就不用它。 实际上canvas在该组件中的作用无非就是绘制一个圆环而已,如果我利用离屏canvas事先画好,然后保存成图片,再用image加载它,这样就可以避免使用canvas来显示圆环了,也就可以不用cover-view放到其顶部! 想法是好的,可是到了真机上,绘制保存出来的图片时好时坏: [图片] 只能放弃,又耽误我一天。 无canvas版本刚才说了,canvas在该组件中的作用,仅仅是绘制一个颜色环而已,除此之外真没什么用。 那我就用css模拟一个类似圆环就好了,精确到每一度一个颜色一点意义没有。 所以就利用css的background-image属性,做了4个四分之一圆弧,然后拼在一起,得到了一个彩色原版,再用一个小的view遮挡,让它们只露出一部分,圆环就做好了。 之前的代码都不用改,直接用新作的圆环views替换canvas的标签即可。主体框架和功能,不到一天就完成了,不得不说,比起纯的canvas绘制,要方便太多太多。 这是截图: [图片] 代码片段这里是 演示DEMO,要使用的话,复制里面的组件出来用就好。 有些代码我混淆过,但不耽误使用。 有问题找我
2019-11-12 - 商品数据接入(内测)
一、商品数据应用场景商品数据目前应用于微信扫一扫识物、小程序商品搜索、扫条码三个功能。 这些功能可以很好的满足微信用户对商品的信息获取诉求,同时也能为商家小程序带来曝光流量和建立用户品牌认知的机会。 扫一扫识物- 效果图: [图片][图片] 小程序商品搜索- 效果图: [图片][图片] 扫一扫商品条码- 效果图: [图片] 二、商品数据接入方式 目前微信已经爬得部分商品详情页,并对页面的商品信息进行了一定的分析理解。商家小程序可以配合接入商品数据,帮助微信更好地发现更多更丰富的商品信息,提高商品的曝光机会。 成功接入需要完成以下三步: 第一步:开启「爬虫开关」确保爬虫开关处于开启状态,保证小程序页面内容获得被微信收录的机会。爬虫开关在微信公众平台上设置,可参考如下示意图。 [图片]第二步:推送「页面路径」 通过接口主动推送商品详情页的页面路径至微信后台,保证推送页面被微信爬虫及时发现,获得曝光机会。具体参考:小程序search.submitPages接口文档 第三步:接入「数据更新协议」接入数据更新协议,可支持微信实时的获取到商品的价格、上下架状态等最新信息,避免由于信息不准确而影响商品的曝光效果。 具体参考文档:小程序商品数据实时更新文档 完成以上三步后,商家小程序的商品详情页将被收录,获得在“扫一扫识物功能”、“小程序商品搜索功能”和“扫条码”的曝光机会。 此外,我们建议商家小程序还可继续标记页面结构化内容和优化页面结构: 一、标记「页面结构化内容」 通过对页面结构化内容的标记,帮助微信爬虫更好的理解页面信息,提高页面的召回排序精准度和曝光转化率。具体参考:页面标记商品结构化数据文档 二、优化页面结构设计 基于小程序搜索优化指南,优化页面结构设计,提高页面对爬虫的友好度。具体参考:小程序SEO建议 如本文档版本过旧,请访问Git查看最新版本:点我
2020-01-13 - 给列表添加曝光统计【电商商品列表曝光统计】
场景: 电商平台商品推荐算法,是基于用户浏览商品进行推荐,介绍一下如何获取用户浏览列表的统计方法。 思路: 监听页面滚动 ——>判断用户浏览停留时间——>记录当前可视窗口的商品——>上报统计数据。 解析: 首先在页面滚动事件里监听,当用户停下来浏览超过1秒,获取当前屏幕视口有哪些商品,把获取到的商品记录下来,当用户离开页面上报曝光数据。 效果: [图片] 示例: https://developers.weixin.qq.com/s/YT6bJ7mx7NgE
2020-03-25