为更好地保护用户隐私信息，优化用户体验，平台将会对小程序内的帐号登录功能进行规范。本公告所称“帐号登录功能”是指开发者在小程序内提供帐号登录功能，包括但不限于进行的手机号登录，getuserinfo形式登录、邮箱登录等形式。具体规范要求如下： 1．服务范围开放的小程序 对于用户注册流程是对外开放、无需验证特定范围用户，且注册后即可提供线上服务的小程序，不得在用户清楚知悉、了解小程序的功能之前，要求用户进行帐号登录。 包括但不限于打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录，都属于违反上述要求的情况； 以下反面示例，在用户打开小程序后立刻弹出授权登录页； [图片] 建议修改为如下正面示例形式：在体验小程序功能后，用户主动点击登录按钮后触发登录流程，且为用户提供暂不登录选项。 [图片] 2．服务范围特定的小程序 对于客观上服务范围特定、未完全开放用户注册，需通过更多方式完成身份验证后才能提供服务的小程序，可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序；  下图案例为正面示例：校友管理系统，符合规范要求。 [图片] 3．仅提供注册功能小程序 对于线上仅提供注册功能，其他服务均需以其他方式提供的小程序，可在说明要求使用帐号登录功能的原因后，引导用户进行帐号注册或帐号登录。如ETC注册申请、信用卡申请； 如下反面示例，用户在进入时未获取任何信息，首页直接强制弹框要求登录注册ETC，这是不符合规范的。 [图片] 建议修改为如下正面示例所示形式：允许在首页说明注册功能后，提供登录或注册按钮供用户主动选择点击登录。 [图片] 4．提供可取消或拒绝登录选项 任何小程序调用帐号登录功能，应当为用户清晰提供可取消或拒绝的选项按钮，不得以任何方式强制用户进行帐号登录。 如下图所示反面示例，到需要登录环节直接跳转登录页面，用户只能选择点击登录或退出小程序，这不符合登录规范要求。 [图片] 建议修改为下图正面示例形式，在需帐号登录的环节，为用户主动点击登录，并提供可取消按钮，不强制登录。 [图片] 针对以上登录规范要求，平台希望开发者们能相应地调整小程序的帐号登录功能。如未满足登录规范要求，从2019年9月1日开始，平台将会在后续的代码审核环节进行规则提示和修改要求反馈。

简介 上周发布的 新富文本显示组件 收获了许多关注，为方便大家了解和体验，[代码]demo[代码] 小程序上线啦 [图片] 大家可以在这里查看介绍和示例或者进行自定义的测试，发现任何问题都欢迎反馈哦 立即体验 [图片] GitHub链接 Github链接

项目背景 在海外项目中，为了优化用户体验加入了几处微交互动画，实现方式是设计输出合成的雪碧图，前端通过序列帧实现动画效果： [图片] 序列帧： [图片] 动画效果： [图片] 序列帧： [图片] 帧动画的缺点和局限性比较明显，合成的雪碧图文件大，且在不同屏幕分辨率下可能会失真。经调研发现，Lottie是个简单、高效且性能高的动画方案。 Lottie是可应用于Android, iOS, Web和Windows的库，通过Bodymovin解析AE动画，并导出可在移动端和web端渲染动画的json文件。换言之，设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。 [图片] Bodymovin插件的安装与使用 关闭AE 下载并安装ZXP installer https://aescripts.com/learn/zxp-installer/ 下载最新版bodymovin插件 https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp 把下载好的bodymovin.zxp拖到ZXP installer [图片] 打开AE，在菜单首选项->常规中勾选☑️允许脚本写入文件和访问网络（否则输出JSON文件时会失败） [图片] 在AE中制作动画，打开菜单窗口->拓展->Bodymovin，勾选要输出的动画，并设置输出文件目录，点击render [图片] 打开输出目录会看到生成的JSON文件，若动画里导入了外部图片，则会在images中存放JSON中引用的图片 前端使用lottie 静态URL https://cdnjs.com/libraries/lottie-web NPM [代码]npm install lottie-web [代码] 调用loadAnimation [代码]lottie.loadAnimation({ container: element, // 容器节点 renderer: 'svg', loop: true, autoplay: true, path: 'data.json' // JSON文件路径 }); [代码] vue-lottie 也可以在vue中使用lottie [代码] import lottie from '../lib/lottie'; import * as favAnmData from '../../raw/fav.json'; export default { props: { options: { type: Object, required: true }, height: Number, width: Number, }, data () { return { style: { width: this.width ? `${this.width}px` : '100%', height: this.height ? `${this.height}px` : '100%', overflow: 'hidden', margin: '0 auto' } } }, mounted () { this.anim = lottie.loadAnimation({ container: this.$refs.lavContainer, renderer: 'svg', loop: this.options.loop !== false, autoplay: this.options.autoplay !== false, animationData: favAnmData, assetsPath: this.options.assetsPath, rendererSettings: this.options.rendererSettings } ); this.$emit('animCreated', this.anim) } } [代码] loadAnimation参数 参数名 描述 container 用于渲染动画的HTML元素，需确保在调用loadAnimation时该元素已存在 renderer 渲染器，可选值为’svg’（默认值）/‘canvas’/‘html’。svg支持的功能最多，但html的性能更好且支持3d图层。各选项值支持的功能列表在此 loop 默认值为true。可传递需要循环的特定次数 autoplay 自动播放 path JSON文件路径 animationData JSON数据，与path互斥 name 传递该参数后，可在之后通过lottie命令引用该动画实例 rendererSettings 可传递给renderer实例的特定设置，具体可看 Lottie动画监听 Lottie提供了用于监听动画执行情况的事件： complete loopComplete enterFrame segmentStart config_ready(初始配置完成) data_ready（所有动画数据加载完成） DOMLoaded（元素已添加到DOM节点） destroy 可使用addEventListener监听事件 [代码]// 动画播放完成触发 anm.addEventListener('complete', anmLoaded); // 当前循环播放完成触发 anm.addEventListener('loopComplete', anmComplete); // 播放一帧动画的时候触发 anm.addEventListener('enterFrame', enterFrame); [代码] 控制动画播放速度和进度 可使用anm.pause和anm.play暂停和播放动画，调用anm.stop则会停止动画播放并回到动画第一帧的画面。 使用anm.setSpeed(speed)可调节动画速度，而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定帧数，也可结合anm.totalFrames控制进度百分比，比如可传anm.totalFrames - 1跳到最后一帧。 [代码]anm.goToAndStop(anm.totalFrames - 1, 1); [代码] 这样的好处是可以把相关联的JSON文件合并，通过anm.goToAndPlay控制动画状态的切换，如下图例中一个JSON文件包含了2个动画状态的数据： [图片] 图片资源 JSON文件里assets设置了对图片的引用： [图片] 若想统一修改静态资源路径或者设置成绝对路径，可在调用loadAnimation时传入assetsPath参数： [代码]lottie.loadAnimation({ container: element, renderer: 'svg', path: 'data.json', assetsPath: 'URL' // 静态资源绝对路径 }); [代码] 功能支持列表 即使用bodymovin成功输出了JSON文件（没有报错），也会出现动效不如预期的情况，比如这是在AE中构建的形象图： [图片] 但在页面中渲染效果是这样的： [图片] 这是因为使用了不支持的Merge Paths功能 [图片] 因此对设计师而言，创建Lottie动画和往常制作AE动画有所不同，此文档记录了Bodymovin支持输出的AE功能列表，动画制作前需跟设计师沟通好，根据动画加载平台来确认可使用的AE功能。 除此之外，尽量遵循官方文档里对设计过程的指导和建议： 动画简单化。创建动画时需时刻记着保持JSON文件的精简，比如尽可能地绑定父子关系，在相似的图层上复制相同的关键帧会增加额外的代码，尽量不使用占用空间最多的路径关键帧动画。诸如自动跟踪描绘、颤动之类的技术会使得JSON文件变得非常大且耗性能。 建立形状图层。将AI、EPS、SVG和PDF等资源转换成形状图层否则无法在Lottie中正常使用，转换好后注意删除该资源以防被导出到JSON文件。 设置尺寸。在AE中可设置合成尺寸为任意大小，但需确保导出时合成尺寸和资源尺寸大小保持一致。 不使用表达式和特效。Lottie暂不支持。 注意遮罩尺寸。若使用alpha遮罩，遮照的大小会对性能产生很大的影响。尽可能地把遮罩尺寸维持到最小。 动画调试。若输出动画破损，通过每次导出特定图层来调试出哪些图层出了问题。然后在github中附上该图层文件提交问题，选择用其他方式重构该图层。 不使用混合模式和亮度蒙版。 不添加图层样式。 全屏动画。设置比想要支持的最宽屏幕更宽的导出尺寸。 设置空白对象。若使用空白对象，需确保勾选可见并设置透明度为0%否则不会被导出到JSON文件。 预览效果 由于以上所说的功能支持问题会导致输出动画效果不确定性，设计师和前端之间有个动画效果联调的过程，为了提高联调效率，设计师可先进行初步的效果预览，再把文件交付给前端。 方法1：输出预览HTML文件 渲染前设置所要渲染的文件 [图片] 勾选☑️Demo选项 [图片] 在输出的文件目录中就可找到可预览的demo.html文件 方法2：LottieFiles分享平台 把生成的JSON文件传到LottieFiles平台，可播放、暂停生成文件的动画效果，可设置图层颜色、动画速度，也可以下载lottie preview客户端在iOS或Android机子上预览。 [图片] LottieFiles平台还提供了很多线上公开的Lottie动画效果，可直接下载JSON文件使用 [图片] 交互hack Lottie的不足之处是没有对应的API操纵动画层，若想做更细化的动画处理，只能直接操作节点来实现。比如当播放完左图动画进入惊讶状态后，若想实现右图随鼠标移动而控制动画层的简单效果： [图片][图片] 开启调试面板可以看到，lottie-web通过使用<g>标签的transform属性来控制动画： [图片] 当元素已添加到DOM节点，找到想要控制的<g>标签，提取其transform属性的矩阵值，并使用rematrix解析矩阵值。 [代码]onIntroDone() { const Gs = this.refs.svg.querySelectorAll('svg > g > g > g'); Gs.forEach((node, i) => { // 过滤需要修改的节点 ... // 获取transform属性值 const styleArr = node.getAttribute('transform').split(','); styleArr[0] = styleArr[0].replace('matrix(', ''); styleArr[5] = styleArr[5].replace(')', ''); const style = `matrix(${styleArr[0]}, ${styleArr[1]}, ${styleArr[2]}, ${styleArr[3]}, ${styleArr[4]}, ${styleArr[5]})`; // 使用Rematrix解析 const transform = Rematrix.parse(style); this.matrices.push({ node, transform, prevTransform: transform }); } } [代码] 监听鼠标移动，设置新的transform属性值。 [代码]onMouseMove = (e) => { this.mouseCoords.x = e.clientX || e.pageX; this.mouseCoords.y = e.clientY || e.pageY; let x = this.mouseCoords.x - (this.props.browser.width / 2); let y = this.mouseCoords.y - (this.props.browser.height / 2); const diffX = (this.mouseCoords.prevX - x); const diffY = (this.mouseCoords.prevY - y); this.mouseCoords.prevX = x; this.mouseCoords.prevY = y; this.matrices.forEach((matrix, i) => { let translate = Rematrix.translate(diffX, diffY); const product = [matrix.prevTransform, translate].reduce(Rematrix.multiply); const css = `matrix(${product[0]}, ${product[1]}, ${product[4]}, ${product[5]}, ${product[12]}, ${product[13]})`; matrix.prevTransform = product; matrix.node.setAttribute('transform', css); }) } [代码] 进一步优化 看到一个方法，在AE中将图层命名为[代码]#id[代码]格式，生成的SVG相应的图层id会被设置为id，命名为[代码].class[代码]格式，相应的图层class会被设置为class [图片] 试了下的确可以，如下图，因此可通过这个方法快速找到需要操作的动画层，进一步简化代码： [图片] 小结 Lottie的缺点在于若在AE动画制作的过程不注意规范，会导致数据文件大、耗内存和性能的问题；Lottie-web的官方文档不够详尽，例如assetsPath参数是在看源码的时候发现的；开放的API不够齐全，无法很灵活地控制动画层。 而优点也很明显，Lottie能帮助提高开发效率，精简代码，易于调试和维护；资源文件小，输出动画效果保真；跨平台——Android, iOS, Web和Windows通用。 总的来说，Lottie的引用可以替代传统的GIF和帧动画，灵活利用好提供的属性和方法可以控制动画的播放，但需注意规范设计和开发的流程，才可以更高效地完成动画的制作与调试。

古人云:赐子千金,不如教子一艺;教子一艺,不如赐子好名。 在古代名字都如此重要，就不用说我们的微信小程序名称了！尤其微信搜索被如此重视之下，名称的重要性就可想而知了。 下面一间科技为大家总结了小程序起名和搜索方面几个要注意的地方。 一、必须要有自己的品牌证书。 [图片] 这个图大家都很熟悉吧？所以品牌这个话题应该放在第一个最重要的位置。要做自己的品牌，首先你必须有合法的凭证。说得直白一点就是商标证书。 [图片] 2019年商标申请时间范围从以前（1年-1.5年下证）降到（0.5年-1年下证）。没有自己的商标证书赶紧了。可以在国家商标局免费查看到自己的商标在自己的行业有没有被抢注。 有了自己的商标证书，再申请小程序或者公众号就可以发挥更大的作用。比如你的品牌名被别的公司注册小程序名称了。可以通过你的商标证书强行要回来。 切记，商标证书是保护好自己品牌不可缺少的一步。 二、微信搜索注意事项 有了自己的商标后，首先要考虑搜索因素。了解你的客户怎样搜索行为。除了微信搜索，也要考虑百度搜索。可以借助2个工具查看到具体数据：微信指数和百度指数。 [图片] [图片] 这两个搜索都要有数据，而且趋势一致的关键词才是不错的选择。因为百度搜索的数据代表搜索行为，微信指数除了搜索数据还有公众号文章和朋友圈转发的文章。 有了数据基础，然后再考虑取名就非常有科学了。不是拍脑袋做决定了。 比如： 要不要在品牌名前面加个地域名； 要不要在品牌名后面要不要加产品名； 要不要在品牌名后面要不要加行业名。 。。。。。。 三、其它 1、小程序简称。 2019年1月22日小程序简称功能上线，很多同学不知道有什么用途。 [图片] 看看下图，你就知道小程序简称的用途了。 [图片] 上图是小程序下拉的截图，简称最好就是5个汉字。超出5个用三个小点代替！ 2、能否被搜索开关。 [图片] 这个功能很多同学都说，怎么可能关掉？其实还是有很多内部用途的小程序不希望被别人用的。为了避免耗费资源，可以关掉搜索。 最后提醒一下，小程序名称在你没有发布成功之前是可以免费更改的。万一发布了，你还想更改？那就准备300RMB吧！ [图片]

前几天，我们曾推出一篇文章，介绍了「收款小账本」小程序新上线的“朋友会员”功能，并认为这个功能的推出，能让一般的中小商家都拥有会员营销能力。 大家在讨论的同时，也有很多小伙伴来问我们，咨询这个“朋友会员”跟微信收款商业版（原名微信买单）里面的会员功能有什么不同？「收款小账本」和微信收款商业版这两款同为收款工具的产品又该如何选择？ 今天，我们就认真梳理对比一下。 降低门槛是唯一目的 首先，让我们了解一下这两款产品的产生背景。 为门店而生的“微信收款商业版” 当初，在移动支付巨头们的猛攻之下，在线支付已经飞入了寻常百姓家，哪怕是小摊贩、小饭馆都可以挂上一张个人二维码来收款。 [图片] 但这里的问题是，对于有门店的商家而言，如果放店主的个人二维码，店员每次收款都需要找店主核对，十分麻烦，并且跟店主对账也不方便。 所以微信支付开放了一些接口让商家接入，通过这个接口就能生成一个门店专属的收款码，实现一定的经营功能，但当时打通这些接口比较复杂，需要技术开发能力，对于小商家而言是不可承受之重。 因此，2016年，微信支付推出“微信买单”这个工具，商家直接上传相关证件，包括营业执照、法人身份证、组织机构代码证（三证合一的商户可直接上传营业执照）、结算银行账户这四项，就可以直接申请接入微信支付系统，免去了技术开发的困扰。 此后，“微信买单”的功能不断完善，并改名为“微信收款商业版”，更加通俗易懂。 为小商户打造的“收款小账本” “商业版”虽好，但对于许多小商家而言，依旧嫌麻烦，只用个人二维码收款，上述痛点仍然存在。 2018年2月，为了惠及更多的个体商户和小本买卖经营者，微信支付放出大招，推出“中小商家智慧助力计划”，主要产品之一就是「收款小账本」，这款小程序让小商户零门槛拥有一套智慧收银系统。 只要打开自己的微信支付，在“二维码收款”功能中就能找到，或者直接搜索「收款小账本」，使用特别方便。 [图片] 「收款小账本」以个人收款码为基础，并附加上诸多经营功能，比如收款语音播报、经营报表、添加店员等等，可谓麻雀虽小，五脏俱全。 除了经营功能，「收款小账本」还逐渐推出了一些营销功能，比如我们前几天提到的“朋友会员”。 可以说，从两款产品的诞生背景来看，就已经有明显的区别： 微信收款商业版针对于线下门店，以门店为核心，提供丰富的经营与营销功能。 收款小账本针对于用个人二维码收款的小商贩，以个人为核心，提供基础的经营与营销功能。 而两款产品的目的，都是为了降低中小商家接入微信支付的门槛，实现智慧化经营。 「商业版」功能丰富，「小账本」五脏俱全 那么，从具体的功能来看，二者有何区别？ 微信收款商业版的主要功能有： 收款记录、支持信用卡付款、自动提现、多门店/多店员管理、官方营销活动、手机扫码付款、免费官方物料、收款语音播报、经营报表分析、商品货架、积分会员。 收款小账本的主要功能有： 收款语音提醒、添加店员接收通知、免费官方物料、收款记录、经营报表、朋友会员（内测）。 功能对比如下： [图片] 对比之后发现，基本上所有「收款小账本」的功能都被“商业版”涵盖了，并且商业版有许多「小账本」没有的功能，我们一一介绍一下： 信用卡支付：顾客扫描商业版的收款码，就可以使用信用卡支付，个人二维码不行。 [图片] 自动提现：商业版默认资金是自动提现到绑定的结算账户上，一般是1到3个工作日到账。 多门店/多店员管理：拥有多个门店的经营者，可以使用这一功能，为每个门店生成单独的收款码，但都结算到同一账户。还可以为每个门店分配店长/店员，方便管理，老板能够在手机上查看每个门店的收款详情。 [图片] 官方营销活动：商户可以在「微信收款商业版」小程序内创建满减、折扣两个营销活动，并且官方也会经常推出摇一摇免单等活动，官方活动的补贴由官方垫付，商户免费申请使用。 [图片] 手机扫码付款：手机一秒变成POS机，店员可扫描顾客付款码，避免顾客输错付款金额的问题。 商品货架：通过这个功能，门店可以创建自己专属的商品货架，其实就是一个小程序版的线上商城，满足了线上下单的基本需求，可以不用再单独开发小程序。 [图片] 说完了不同点，谈谈相同点，有一个大家关心的问题是，二者都有会员功能，如何选择？让我们看看两种会员功能的具体内容。 商业版以积分制为核心 微信收款商业版的会员功能主要与积分结合，顾客每次消费完，在结算页就可以点击成为会员，之后每次消费都能积累积分，积分直接抵扣现金。 [图片] 这里有一个技巧，一般新加入的会员都会赠送一定积分，这个额度以及消费金额与积分的兑换比都可以手动设定，因此，每个门店就可以根据经营情况动态调整。 比如，想要拉来更多新会员，就将赠送的积分调高，想要促进老会员复购，就把兑换比率抬高，原来是1000积分抵1元，可以调整为500积分抵1元。 [图片] 个人版成为会员心理门槛比较高 而「收款小账本」的“朋友会员”，需要顾客手动扫码，添加店主为好友，之后再消费就能获得折扣，此后店主可以通过朋友圈或者群来进行营销。 但这种方式，顾客需要操作的步骤更多，同时也涉及到一定隐私问题，加入会员的心理门槛比较高。详情可查阅→（点我阅读） [图片] 因此，微信收款商业版的会员功能接入更简单，也更灵活，适合客流量比较大的门店，新客转为会员的概率也比较高；而收款小账本的会员功能，更适合已经有一些老客、熟客的小商贩。 最后，说一下大家最关心的费用问题。 申请微信支付商户并开通微信收款商业版是免费的，但在自动结算时会收取手续费，行业不同，费率也不同，一般是0.6%，即一天收入1000元，需要缴纳6元手续费，实际到账994元。 而收款小账本的使用则是完全免费的，收到的钱直接进入微信钱包。 综上所述，通过背景、功能、费用的对比可以看出：微信收款商业版适合有门店，客流量大，有一定规模的商户；而收款小账本适合规模较小，有固定回头客，灵活性比较强的个体小商贩。 大家对这两款产品还有哪些疑惑，可以在下方留言跟我们讨论。

1、域名必须是https 非https的域名不被微信小程序允许。 2、input组件placeholder字体颜色 卸载placeholder-class里面的color并不生效，需要写在placeholder-style里面就可以了。 3、wx.navigateTo无法跳转到带tabbar的页面 带有tabbar的页面，必须使用wx.switchTab进行跳转。 4、tabbar在切换时页面数据无法刷新 tabbar的实现可能是显示和隐藏view，所以，不会一直调用page.onLoad（）方法，可以尝试把代码逻辑写在page.onShow（）里面。 5、如何获取shareTickets 获取shareTickets需要在app.onLaunch或者app.onShow里面才能获取到，而不是page.onShow，请一定要注意。 注：建议在app.onShow里面去获取，app.onLaunch不是一直会执行。 6、getPhoneNumber获取手机号 目前该接口针对非个人开发者，且完成了认证的小程序开放。个人开发者是没办法调用这个API的。 7、wx.previewImage图片预览 预览图片URL必须是https开头，不能是本地图片。 8、wx.playVoice音频播放 必须保证音频文件已经在本地，比如在wx.startRecord后，可以获取到filePath。或者提前调用wx.downloadFile来下载资源文件，然后再播放。 9、API老版本兼容 可以用wx.canIUse或者wx.getSystemInfoSync来进行判断，老版本给出相应提示即可。 10、获取系统信息 wx.getSystemInfo，可得到系统语言、屏幕宽高、微信版本号、操作系统、设备像素比、客户端甚础库版本等信息。 11、如何去掉自定义button灰色的圆角边框 主要是button的伪元素设置了样式，去掉即可：button::after{ display: none;}。 12、回到页面顶部 主要是button的伪元素设置了样式，去掉即可：button::after{ display: none;}。 13、input textarea是APP的原生组件，z-index层级最高 有做过搜索框的同学，可能会遇到iOS下面，设置icon的z-index后，依然无法显示。建议做显示隐藏效果：点击之前是一个view，点击之后隐藏view，显示input。 14、小程序如何冷启动 小程序的机制，是在退出五分钟内进入，就会显示的是退出前的页面，如果你希望进入小程序都相当于冷启动的方式，直接进入主页面。你可以在page的onUnload里面里面set一个值，然后在app的onShow的时候判断这个值，然后决定是否跳到首页。 15、一段文字如何换行 小程序中唯一可以实现换行的标签组件是text。 注：text中不支持<br>，只能使用n进行换行。 16、设置最外层标签的margin-bottom在iOS下不生效 margin-bottom在安卓和开发工具里面都正常，就是在iOS下不起效，建议改成padding-bottom。 17、小程序中canvas的图片不支持base64格式 base64格式图片，在开发工具里面可以正常显示，真机上没有显示。建议修改成带https开头的url形式。 微信小程序开发视频教程分享：https://www.sucaihuo.com/video/222-0-0