kirinlau的专栏

有个需求是重构小程序的某些页面，比如以下这种列表，之前都是支持copy的，导致代码比较臃肿，占用有限的空间且不好维护我把组件库写好后，准备直接使用时发现有用到分享和反馈这种小程序原生button才有的属性即：open-type='feedback'open-type='share'本来准备直接复用以前的来着，但是看代码很乱，就想着把它的功能在组件中直接实现好了，开始想着把已有的逻辑贴进去再加个if的属性就可以，臃肿得很， 最终理性战胜了我，试试其他实现方式，以下是我的ui组件库效果：试着点了

项目中需要一个轮播的banner，直接使用了小程序的swiper组件，发现没有小圆点，上代码<view wx:if="{{bannerList && bannerList.length>0}}" class="advertise-wrap"> <swiper class="advertise" indicator-dots="{{true}}" autoplay="{{true}}"> <swiper-item class="swiperI

前几天准备回去架构组来着，但是那边新来了个妹子在搞，新项目有还没启动，小程序一直有项目，又没人，一直在小程序的feature-team中，这不又来个几个需求。其中一个新需求是需要做一个协议更新的功能，即老用户登录后，接口检查一遍协议是否已更新，需要重新同意协议，否则直接退出小程序。查了一下没有全局组件的说法，问了隔壁老王，老徐有什么比较好的方法，都丢下一句话，写个component然后挨个页面引入，在每个页面做一遍标签引入，然后传值给子组件，子组件observe即可。按照常规实现我感觉这个改动还挺大的

接上个博客的，文本跑马灯的animate实现上个版本是根据setinterval定时器修改位置实现动画效果，体验还行，但是太耗资源，如果想体验流畅那么频率就很小，步长也不能太长，但是会很慢，由于频率高，一秒钟执行三四十次，太耗费资源，于是我这边就使用小程序的animate做了另一种实现主要思路：根据文本的长度设定过渡时间，动画结束后再次滚动即可，直接看代码wxml<view class='marquee_container'> <view id="marquee_wrap" c

好久没来了。架构组本身已经挺多事了，手头上还有个picker的组件没做完善，但是隔壁运营活动组几十个前端忙不过来，产品和场景一口气出了十来个项目，基本都是拉新、节日、社交、小游戏、签到等互动类的活动， 应公司建设需要，领导亲自跟我说不当紧的事可以放一放，去帮同事一把，他跟上面说好了，于是乎我就到了运营活动的小程序组了（运营活动这边分了小程序端和HTML5端），说实话小程序上手虽然快，但是很久没用了，小程序端的那个妹子人也好，让我看几个页面，几个组件，都是比较小的那种，以上为背景有一个连续滚动的的跑马灯组

关于小程序中的target与currentTarget的区别，看了官方的文档说的也是糊糊涂涂但是感觉跟事件冒泡有关系，自己写了一串代码看一为下二者的区别，如下：wxml:<view bindtap='clickEvent' data-id="A">A <view data-id="B">B</view> <view>C</view...

为了避免在小程序开发中使用大量重复且臃肿的代码，一般来说，开发者都会封装一个请求以便于直接调用，这里封装了一个简单简单的请求：let maxLen = 6, // 批量删除图片的最大值responseArr = []; // 存批量删除图片的响应数据// 请求类封装class _nb { constructor () { this.baseURL = "https://l...

小程序中的textarea一直是个坑，使用的是原生的textarea组件，其优先级，官方也没有给出明确的解决方案或者替代品，而且原生组件在开发时有一定的限制。具体可参考：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html我在小程序开发中，产品是在屏幕底栏有一个fix定位的操作栏，其中...

微信小程序中我们可以使用wx.getLocation来获取当前的地理位置，但是某一处地址是原生没有提供的，比如用户输入的地址需要导航过去的，。首先我们需要引入腾讯地图在微信小程序js SDK “qqmap-wx-jssdk.js” 文件可以下载引用，也可以使用npm安装具体请参照这里：https://lbs.qq.com/qqmap_wx_jssdk/index.html地址解析（根据地...

小程序中经常会有批量遍历渲染的列表，如果列表中有图片选项但是无值时或者有值但是图片加载错误时如何处理呢比如像以下这种评论列表： <view class='lists-box rel'> <view class='list-box rel' wx:for="{{commentList}}" wx:if="{{item.comment}}" wx:key="{{...

微信小程序开发中 官方提供了常用组件，但是却没有tab这个组件，当然有可能是官方并不提倡在一个页面加入过多繁杂臃肿的东西，有点尴尬~只好自己动手撸一个。直接进入代码wxml：<view class='bg-blue'> <view class="flex-box-list"> <view class="list " wx:for="{{tab...

小程序html<scroll-view scroll-y="true" bindscrolltolower="ScrollLower"> <view wx:for="{{deviceList}}"></view> <view class="loading" hidden="{{!searchLoading}}">正在载入更多...&lt...

对于滑动删除微信没有提供完整的组件，所以我写了一个小Demo, 希望可以帮助到大家先给大家看看效果：滑动删除所用到了微信提供的方法，touchstart、touchmove 如果大家想了解的更清楚可以查看帮助文档的哦好啦，废话不多说，直接上代码：首先把布局写好，根据自己的需求编写，html代码部分：<view class="container"> <view c...

微信小程序开发过程中，我们在版本迭代后，客户端并不能触发这个自动更新，需要清掉小程序后重新搜索进入才能获取到最新的小程序，但这个是用户所不能感知到的操作，故需要提醒用户如何去get到最新的版本:直接在app.js中的onLaumch钩子函数中添加以下代码即可：onLaunch: function (){ if (wx.canIUse('getUpdateManager')) { ...

小程序迭代时，需要加入一个图片裁剪上传并识别的功能，在PC端调好之后，在移动端不能走通，报了一个奇怪的错误，大概是“wxfile://***”, 翻译过来的意思就是 wx.downloadFile不支持此协议，看了一下发现wx.chooseImage在pc端获取到的地址是http地址，而在移动端是wxfile开头的本地地址，wx.downloadFile只能下载https的资源。而我在开发时...