问题描述： [图片] 如果list是直接在data里定义好的就可以滑动，如果是setData的就不可以移动。

组件地址 https://github.com/jasondu/wx-comp-canvas-drag 实现效果 [图片] 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转，所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放、旋转、删除元素 看起来挺简单的嘛，就把上面这几个问题解决了，就可以实现功能了；接下来我们一一解决。 如何将多个元素渲染到canvas上 定义一个DragGraph类，传入元素的各种属性（坐标、尺寸…）实例化后推入一个渲染数组里，然后再循环这个数组调用实例中的渲染方法，这样就可以把多个元素渲染到canvas上了。 如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层 在DragGraph类中定义了判断点击位置的方法，我们在canvas上绑定touchstart事件，将手指的坐标传入上面的方法，我们就可以知道手指是点击到元素本身，还是删除图标或者变换大小的图标上了，这个方法具体怎么判断后面会讲解。 通过循环渲染数组判断是非点击到哪个元素到，如果点击中了多个元素，也就是多个元素重叠，那第一个元素就是最上层的元素啦。 ###如何实现拖拽元素 通过上面我们可以判断手指是否在元素上，当touchstart事件触发时我们记录当前的手指坐标，当touchmove事件触发时，我们也知道这时的坐标，两个坐标取差值，就可以得出元素位移的距离啦，修改这个元素实例的x和y，再重新循环渲染渲染数组就可以实现拖拽的功能。 如何缩放、旋转、删除元素 这一步相对比较难一点，我会通过示意图跟大家讲解。 我们先讲缩放和旋转 [图片] 通过touchstart和touchmove我们可以获得旋转前的旋转后的坐标，图中的线A为元素的中点和旋转前点的连线；线B为元素中点和旋转后点的连线；我们只需要求A和B两条线的夹角就可以知道元素旋转的角度。缩放尺寸为A和B两条线长度之差。 计算旋转角度的代码如下： [代码]const centerX = (this.x + this.w) / 2; // 中点坐标 const centerY = (this.y + this.h) / 2; // 中点坐标 const diffXBefore = px - centerX; // 旋转前坐标 const diffYBefore = py - centerY; // 旋转前坐标 const diffXAfter = x - centerX; // 旋转后坐标 const diffYAfter = y - centerY; // 旋转后坐标 const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180; const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180; // 旋转的角度 this.rotate = currentGraph.rotate + angleAfter - angleBefore; [代码] 计算缩放尺寸的代码如下： [代码]// 放大 或 缩小 this.x = currentGraph.x - (x - px); this.y = currentGraph.y - (x - px); [代码]

最近在用到小程序的字体，用起是真的有一丝烦躁，各种莫名其妙的bug。下面做一些总结，免得大家犯同样的错误，同样也希望官方能出一个详细的字体解决说明。 问题原因： 首先使用字体无非就是用font-family，在网页上是有很多很好的探讨的文章。但是在小程序中，我们并不知道font-family支持哪些字体，据我这一周的查找，官方也没有详细的说明。 因此如果我们想使用某种字体，最好的方法只有通过font-face外部引入字体。 但是小程序是不支持引入本地的字体文件，即font-face中的src属性的值不能是本地路径。否则会报do-not-use-local-path错： [图片]     因此我所知道的最终的解决方案就有两种     1.引入网络路径     2.通过base64编码引入     ①引入网络路径的方法是将你的字体文件放在服务器中，然后通过网络路径引入，需要注意跨域的问题（可能因为我把字体文件放在腾讯云的对象存储中了，因此没有专门处理跨域也没有问题，但是不排除你可能会遇到跨域问题）。使用这种方法时要注意字体文件不能太大，具体限制我也不清楚。这里我只测试过3M的中文字体，会报ERR_CACHE_MISS[图片]，这个情况下，虽然在开发工具上显示的字体是正确的，但是预览到真机上就直接表现为字体文件没有加载的效果。（另外，即使你的字体文件很小，也会在 清除缓存后第一次编译 报这个错，但这种情况下预览到真机上是没有问题的） ②第二种方式就是通过base64编码引入。使用这种方法时需要注意一点，很多转base64编码的工具（例如我这里使用的font-min）会自动帮你兼容ie，生成的代码像这样：[图片] 在网页上这样用是没有问题的，还兼容其他浏览器。 但是在小程序中是不行的，必须把多余的部分全部删除，只留base64那一行，不然在开发工具上显示直接没有加载字体的效果，像这样： [图片] 另外据说base64编码不能太大，否则也会出错；这里由于我的需求只是需要几个固定文字，因此生成的base64很小，没有遇到这个问题。 以上就是我在处理小程序字体时遇到的问题总结，希望大家遇到时能少走弯路； 总结的不对的地方，欢迎大家讨论指正。

大家好，上次给大家分享了swiper多图片的解决方案：https://developers.weixin.qq.com/community/develop/doc/000068ff25ccf0bae4e76eab156c04 今天再给大家分享一个关于swiper的小技巧，利用swiper仿tab切换。 相信大家在app或浏览器上阅读新闻时，比如今日头条，会有这样一个场景，左右滑动的时候可以切换不同栏目，体验非常好，但是小程序好像没有提供相关组件，如果想实现这种效果该怎么做呢今天就给大家介绍一下在小程序里是怎么实现的。 首先先看下效果 [图片] 实现原理很简单，利用小程序swiper再配合scroll-view就能实现，不过这里面有几点需要注意一下： 1.scroll-view一定要给一个高度，不然会有问题； 2.切换的时候只显示当前的swiper-item里的内容，其它swiper-item里的内容可以先隐藏掉，这是因为如果你的swiper-item里的图片太多的话可能会造成页面回收，因为新闻列表大多是图文列表，而tab经常是不止两个的，可能是7、8个或更多，如果每个tab都显示的话到时上拉加载页面会非常庞大，所以这里我建议不用显示的内容先隐藏，记住是swiper-item里的内容不是swiper-item，到时切换回来时再重新渲染，如果你要保存滚动的位置还要做其它的一些处理，这里就不仔细讲解了； 3.这里适用的是整个页面都是tab切换的，如果只是在页面的某处实现tab切换，还要考虑高度的问题，加载数据的时候根据数据个数长度来计算高度，每次加载数据都要计算高度，切换到不同的tab也是，这部分比较麻烦，因为要计算，不过并不难，只要 计算正确的话是没有问题的； 大概就是这样，基本实现思路，大家可以根据这个思路去拓展，在上面加上自己的功能，over！ 代码片段：https://developers.weixin.qq.com/s/89OO1smX736d                                                                                                                                                                                             系甘先，得闲饮茶

开发工具和iOS测过，android我没测过。。哈哈哈哈哈 https://developers.weixin.qq.com/s/kh8HhjmA7A4D 注释不知道写啥，简单描述了下 [图片]

[图片] [图片] 点击保存图片时拒绝授权的时候，在开发版本、体验版本都能打开重新授权，但是上线之后openSetting就失效了,我也是通过触发bindTap事件吊起openSetting的，请问我的问题出在哪里？

在 wx.getLocation 的 fail 回调里 调 wx.authorize不弹授权弹窗，走到了wx.authorize的fail回调里，打印错误信息是：{errMsg: "authorize:fail auth deny"}

wx.loadFontFace加载官方给的那个ttf文件地址预览都时有时无的，加载个中文family（2.几M）更是不可能，是不是我打开的姿势不对啊，各位大大和官方给解个惑啊，给各位大佬下跪了

1、微信小程序动画有自己的方法：官方链接 但需要自己去写动画效果，比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。 animate.css包含76种动画，使用非常简单。animate.css官网 : https://daneden.github.io/animate.css/ 3、由于小程序对代码大小限制比较大，所以删除了animate.css中 所有@-webkit-部分css，减少了一半体积 再把文件后缀名改为wxss，以后出来的百度小程序、支付宝小程序、今日头条小程序估计修改对应的后缀名就可以直接使用了。 下载地址：http://nodejs999.com/animate.wxss 4、放到小程序代码中，然后@import到app.wxss文件中。 我项目是把animate.wxss文件放在utils文件夹下。 所以在app.wxss中加入 @import './utils/animate.wxss'; 即可。 就可以像animate.css一样使用了。