今天，说一个能为你“拉好感”的改动。 小程序帐号登录功能进行全新的规范升级，包括但不限于手机号登录、邮箱登录等。划重点：从2019年9月1日开始，对于未满足登录规范要求的小程序，我们将会在后续的代码审核环节进行规则提示和修改要求反馈。 用户使用登录功能就像“面基”，第一印象很重要。这几个小改动在提升小程序使用的流畅体验、避免用户对数据采集授权担忧的同时，也将驱动用户更乐意尝试使用小程序服务。来，通过三个问题来解锁正确启用帐号登录的姿势。 跟败好感”的姿势告别 问题一 ： 在用户清楚知悉、了解小程序的功能之前，就要求用户进行帐号登录会怎样？ [图片] （错误示范：在用户打开小程序后立刻弹出授权登录页） 用户好感-1。刚见面就要牵手未免太尴尬，与其打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录，不如把主动权交给用户。 用户体验小程序功能后，可以主动点击登录按钮来触发登录流程，也可以选择不登录。 [图片] Tips： 适用于对外开放用户注册流程、无需验证特定范围用户，且注册后即可提供线上服务的小程序。 有个特例， 为学校系统、员工系统、社保卡信息系统等提供服务的小程序，倒是可以直接引导用户进行帐号登录。 [图片] 问题二 ： 线上仅提供注册功能，服务依赖其他方式提供的小程序，如ETC注册申请、信用卡申请，在用户未获取任何信息时，首页直接弹框要求登录注册会怎样？ [图片] （错误示范：用户进入ETC小程序时立刻弹出授权登录页） 用户好感再-1 。“神秘感”能营造好氛围，但你的小程序都如此优秀了，可以直接告诉用户原因再让他们接受—— 用户在小程序首页了解要求使用帐号登录功能的原因后，可通过登录或注册按钮进行登录操作。 [图片] 问题三 ： 在需要登录环节直接跳转登录页面，只给用户一个登录选项会怎样？ [图片] （错误示范：登录页面只有登录选项） 用户好感再-N。“霸道总裁”不要太用力，多给些温柔的选项，用户会更快爱上你。 在需帐号登录的环节中，用户可以主动点击登录，或点击取消登录，没有强制登录的行为。 [图片] 姿势掌握了吗？我们希望帮助开发者们能根据正确姿势示范，调整小程序的帐号登录功能，优化用户使用帐号登录功能的体验，更好地与用户相处，同时赢得更多用户的青睐。

自定义顶部标题和左上角按钮方法解析及实践 前言 之前有兄台发过设置custom的方法 但是没有具体的实现方法 以至于很多不了解小程序的开发者不能循序渐进的理解制作自定义标题的方法 在这里详细总结了计算各参数的方法 我也写了一个自定义标题组件 只需要引用 直接在页面中调用即可 但因为掺杂了业务代码 需要整理过后会放出来 具体方法 首先在app.json中 将window.navigateionStyle 设置为custom [图片] 使用 wx.getSystemInfoSync 获取系统的属性 其中有顶部状态栏的高度 使用 wx.getMenuButtonBoundingClientRect 获取右上角胶囊菜单的相关属性 包括胶囊菜单的高度、相距上下左右屏幕的绝对位置 [图片] 如上图 我们需要获取四个参数 来确定整个标题栏的各项参数和左侧自定义胶囊的位置 获取顶部状态栏高度sys.statusBarHeight 具体代码 [代码]var sys= wx.getSystemInfoSync() var menu = wx.getMenuButtonBoundingClientRect() var statusHeight = menu.statusBarHeight var titleHeight = menu.height var titleRowWidth = sys.right - menu.right var titleColumnHeight = menu.top - menu.statusBarHeight [代码] 注意 小程序原生组件会遮挡自定义头部组件 如 canvas组件 input textarea的提示信息placeholder 该问题可以使用cover-view将头部定义为原生组件 设置层级解决 20191125后续更新 wx.getMenuButtonBoundingClientRect()返回undefined的情况 wx.getMenuButtonBoundingClientRect()在安卓和IOS端均会出现获取不到值的情况（返回undefined） 官方给出的答案是已经修复了该问题 但实际测试还是会出现类似问题 该问题与 平台 和 微信基础库 （随微信版本更新）无关 导致我们无法获取胶囊按钮的属性 进而无法计算header的高度 该问题极难复现 我在自己的真机上遇到过2次 在我的应用中出现概率不到1% 应对方法1: 官方建议延迟100MS 或 在返回undefined的情况下 重新获取一次 应对方法2: 判断平台 给与预估的默认值 IOS端和不同安卓端 IOS各机型的高度为44px 安卓端我测试最多的情况是48px 但安卓端实际情况需要具体测试 做进一步兼容 代码如下 [图片] 这里wx.getMenuButtonBoundingClientRect()方法在低版本微信中是不能用的 而且低版本的微信中不能使用wx.canIUse方法判断该方法是否存在 因此用捕获错误的方式兼容 在menu的属性返回undefined时 用我们预估的值去兼容 另外github.com有一个通过手机型号 返回手机各项参数的库 其中一项就是头部状态栏的高度 如果你想更准确的适配更多机型 可以使用这个库 无论哪种方法都不是最优的解决方案 大家酌情按照场景进行适配

受平台多年压榨，很多小商家鼓起勇气把微信小程序这种性价比超高的自有渠道建搭建好。各种认证、资料上传、熟悉小程序业务流程。好不容易忙完了，而下一步该干什么？ [图片] 其实这时你最应该做的就是把现有客流导入小程序。让客户下次从自有渠道小程序下单。慢慢改变客户在平台的下单习惯。这是重中之重！ 下面通过3个小步骤应用在酒店行业，轻松把客户一网打尽： 1、客户进店扫码上网，自动关注小程序。 因为上网是住客的刚需，扫码就能一键连接WiFi。比传统要输入密码的方式方便多了！ 除了连接WiFi，在连接过程中还有WiFi红包可领。方便锁定客户下次再来。 [图片] 2、入住后店内点餐、购买日用品或特产，自动关注小程序。 入住后，每个房间都贴有点餐码。除了点餐，还可以购买其它日用品、饮料、特产等。 [图片] 这也是住客的刚需。不用外出，所需物品直接送到房间。 3、离店时再次提醒领红包，自动关注小程序。 办理离店手续时，前台可以再次提醒领WiFi红包。方便下次使用。 [图片] 最后再送出一个让住客无法拒绝的大招： 这个大招是在客户有部分余款未结算的时候使用，让住客把钱充进小程序。付款马上9折！剩下的钱还保留在小程序。下次可用，又一个锁定客户的理由。

欢迎进入微信的“码上世界”！ 作者丨Tsai [图片] 最近微信两大动作引爆了话题讨论，一个是前天微信新版上线的“超级浮窗”，另一个是同一天官宣正式开放的“一物一码”能力。 前者，一定程度解决了用户先前在微信内无法进行“多任务操作”的痛点；后者，意图借助小程序开启“连接万物”的时代，并且加速商家全链数字化的进程。 01链接万物 据微信官方介绍，“一物一码，就是让每个商品都有一个自己的专属码。”而且由于“微型码”作为腾讯专利码制，无法被破解和仿制，因此它在某种意义上可以视作商品的入网ID，具有唯一性，并且与商品一一对应。 [图片] 按照这样的理解，“一物一码”似乎只是连接了商品这一维度，称之为开启“连接万物”的时代未免过分夸大了。事情显然没那么简单，通过在商品上“赋码”的方式，“一物一码”可以实现消费者扫码跳转小程序、跳转公众号、参与营销互动等，将“人”与“货”紧密相连。 而这，才是“一物一码”真正令人心动的地方，也是腾讯智慧零售目前正在解决的，解决大部分零售企业目前所处的“人货割裂”状态。 [图片] 当“人”与“货”不再割裂时，商家的可操作空间也就能大大提高。借助“一物一码”，商家不仅可以通过多样的营销玩法与用户进行高效互动、获得流量，还能够利用其大数据支持了解自家的营销效果，及时调整营销策略，真正帮助商家读懂用户。 不过，我们前面这些还停留在理论层面，商家具体该怎么使用，用完又能达到怎样的效果？而这，或许才是商家真正关心的。于是我们带着这些问题，对微信“一物一码”首批合作商之一的“蒙牛”进行案例拆解（蒙牛成为2018年FIFA世界杯全球官方赞助商），为大家尽可能地剖析“一物一码”的应用场景和运营玩法。 [图片] 02 庖丁解牛（蒙牛） 正式拆解前，我们先把“一物一码”和“蒙牛世界杯”的合作效果数据抛出来：此次活动线下扫码参与人次2.2亿，总参与人数7165万人，人均复购频次3次，6.18当天小程序访问量达到顶峰：2072万次，小程序日均PV量85万次。 这样的数据是不是很诱人，是不是很想知道微信“一物一码”究竟是如何给到“蒙牛”支持的？话不多说，下面我们赶紧来看一下： 1）多样化的跑码支持——不止瓶盖码 微信“一物一码”，不止支持瓶盖码，还支持一包一码、箱码、棒签码等，并且每个产品的唯一码都会附上数据信息。 这种多样化的跑码支持，使得蒙牛全品线都能参与此次世界杯活动，并且品牌在整个活动过程中，还能够根据数据对品线搭配进行及时的策略调整。 [图片] 2）丰富的接口能力支持——“一物一码+” “一物一码”的强大还在于微信能够提供的丰富接口能力，当时蒙牛就主打“腾讯云+小程序”的组合拳，运用到卡券、微信运动、自定义组件、红包、扫码、登录、获取用户信息、获取用户GPS等接口功能，丰富了整个小程序的交互体验。 以当时推出的“全民集牛卡”活动为例，消费者通过购买蒙牛世界杯指定包装产品，打开微信，使用“扫一扫”功能扫描包装二维码，即进入蒙牛FIFA世界杯小程序，领取红包的同时获得定制版虚拟牛卡。 [图片] 不仅如此，消费者还可以通过微信运动步数兑换、好友分享索要获得更多牛卡，而这些积攒下来的牛卡都将用于最后的抽奖活动。“一物一码”就像个综合枢纽，它将微信众多的工具能力进行聚合，然后以最合适的组合方式进行搭配发射出去，赋能商家更强的营销互动能力。 3）场景多变的互动玩法——让用户动起来 如果把“一物一码”比作一台计算机，那微信提供的丰富接口能力就是硬件设施，不过再好的硬件也需要软件来支撑，放到商家身上，这里的“软件”就是基于接口能力的运营玩法。 在蒙牛世界杯活动中，除了前面提到的“集牛卡”，蒙牛还推出“全民竞猜 瓜分百万红包”、“优益C-吃货来找茬”、“活力优益C 喝彩FIFA世界杯”等多变的互动活动，通过提高消费者的互动粘性，进而刺激他们参与消费。 [图片] 比如在“优益C-吃货来找茬”活动中，蒙牛为用户设计了一个小游戏：15秒内要躲避餐桌上的食物并且收集优益C，每成功收集一瓶优益C，即可获得10活力值，另外，针对已经购买蒙牛产品的用户，进入游戏即可获得额外的500活力值（目的还是刺激用户消费），当然，这些活力值最后也可以参与抽奖； 还有“活力优益C 喝彩FIFA世界杯”的活动，用户进行对应的活动专区后，可以通过拍照/上传靓照并选择心仪的球队元素服饰，生成专属喝彩海报，并且将活动分享给好友还将获得更多电商优惠（本质还是利诱用户分享进行裂变传播）。 [图片] 4）专业的运营服务支持——你的运营“大管家” 前面我们提到，“一物一码”的微型码是腾讯专利码制，无法被破解和仿制，因此它能够用于消费者进行商品溯源，增强消费者对商品及品牌的信任，这是一方面。 另一方面，由于微信“一物一码”以小程序为活动载体，能够将商家活动数字化，因此非常方便商家追踪多品线、地域和城市的参与情况。 [图片] 这还不是全部，“一物一码”还给蒙牛提供一系列细致的运营服务，比如上线后优化活跃度的活动策划、多维度的数据运营报告、页面优化解决方案等，可以给商家提供消费者参与互动扫码的及时数据，一旦出现活动相关异常波动，系统可以发出告警给到活动相关负责人，及时介入解决。 03全链数字化是未来 可以看到，“一物一码”的开放，能够给予商家极大的营销助力，它以小程序为互动抓手，借助微信卡包、公众号、积分等级等能力，对消费进行持续触达和运营的同时，助力商家构建自主可运营的数字化资产，从而提升复购转化。 谈到微信“一物一码”，其实我们很难绕开“腾讯优码计划”。作为“一物一码”的全新升级，“优码”的目的就是融合腾讯全平台能力，通过为商家提供一站式解决方案，从而帮助商家实现与消费者真正“零距离”。 [图片] 对此，腾讯公司副总裁林璟骅也于今年4月份指出，移动社交对零售业的最大帮助在于让零售回归以人为本。但随着行业向数字化的深水区迈进，线上营销和线下渠道割裂仍然困扰着零售人。 “未来的生意是全链路数字化，品牌必须沉淀自有的数字化资产。”这会是未来，也将会是商家无法逃脱的变革，即使这变革它有点残酷。

要求Adoba Photoshop CC 2017或以上版本。 [图片] 使用步骤： 1、从链接："https://share.weiyun.com/5x0ZOEI"下载“PSD2MINI_APP_UI.zip”并解压，， 把“Script/PSD2MINI_APP_UI.jsxbin”拷贝Photoshop的脚本目录下： Mac OS: Applications\Adobe Photoshop [Photoshop_version]\Presets\Scripts Windows 32 bit: Program Files (x86)\Adobe\Adobe Photoshop [Photoshop_version]\Presets\Scripts Windows 64 bit: Program Files\Adobe\Adobe Photoshop [Photoshop_version](64 Bit)\Presets\Scripts 2、打开文件菜单。 [图片] 3、如果是第一次使用，会弹出注册界面，否则会弹出步骤7的界面。 [图片] 4、把“机器码”全部选中，然后右键单击“复制”，把“机器码”和订单号发给邮箱“rakusideline@foxmail.com”，等邮件回复。 [图片] 5、把邮件发回的注册码拷到“输入注册码”输入框。 [图片] 6、单击“注册”会弹出“注册码成功”提示，如果是其他提示，说明机器码错误。 [图片] 7、注册成功以后就可以使用该插件工具了，输入目录。 [图片] 使用例子： [图片] 对于可以滚动的列表，可以手动复制几项，看看实际的效果。 [图片] 淘宝链接：https://item.taobao.com/item.htm?spm=a230r.1.14.82.45d679e9tqT1No&id=599004393185

小程序列表拖拽排序 [图片] wxml [代码]<view class='listbox'> <view class='list kelong' hidden='{{!showkelong}}' style='top:{{kelong.top}}px'> <view class='index'>?</view> <image src='{{kelong.xt}}' class='xt'></image> <view class='info'> <view class="name">{{kelong.name}}</view> <view class='sub-name'>{{kelong.subname}}</view> </view> <image src='/images/sl_36.png' class='more'></image> </view> <view class='list' wx:for="{{optionList}}" wx:key=""> <view class='index'>{{index+1}}</view> <image src='{{item.xt}}' class='xt'></image> <view class='info'> <view class="name">{{item.name}}</view> <view class='sub-name'>{{item.subname}}</view> </view> <image src='/images/sl_36.png' class='more'></image> <view class='moreiconpl' data-index='{{index}}' catchtouchstart='dragStart' catchtouchmove='dragMove' catchtouchend='dragEnd'></view> </view> </view> [代码] wxss [代码].map-list .list { position: relative; height: 120rpx; } .map-list .list::after { content: ''; width: 660rpx; height: 2rpx; background-color: #eee; position: absolute; right: 0; bottom: 0; } .map-list .list .xt { display: block; width: 95rpx; height: 77rpx; position: absolute; left: 93rpx; top: 20rpx; } .map-list .list .more { display: block; width: 48rpx; height: 38rpx; position: absolute; right: 30rpx; top: 40rpx; } .map-list .list .info { display: block; width: 380rpx; height: 80rpx; position: absolute; left: 220rpx; top: 20rpx; font-size: 30rpx; } .map-list .list .info .sub-name { font-size: 28rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #646567; } .map-list .list .index { color: #e4463b; font-size: 32rpx; font-weight: bold; position: absolute; left: 35rpx; top: 40rpx; } [代码] js [代码]data：{ kelong: { top: 0, xt: '', name: '', subname: '' }, replace: { xt: '', name: '', subname: '' }, }, dragStart: function(e) { var that = this var kelong = that.data.kelong var i = e.currentTarget.dataset.index kelong.xt = this.data.optionList[i].xt kelong.name = this.data.optionList[i].name kelong.subname = this.data.optionList[i].subname var query = wx.createSelectorQuery(); //选择id query.select('.listbox').boundingClientRect(function(rect) { // console.log(rect.top) kelong.top = e.changedTouches[0].clientY - rect.top - 30 that.setData({ kelong: kelong, showkelong: true }) }).exec(); }, dragMove: function(e) { var that = this var i = e.currentTarget.dataset.index var query = wx.createSelectorQuery(); var kelong = that.data.kelong var listnum = that.data.optionList.length var optionList = that.data.optionList query.select('.listbox').boundingClientRect(function(rect) { kelong.top = e.changedTouches[0].clientY - rect.top - 30 if(kelong.top < -60) { kelong.top = -60 } else if (kelong.top > rect.height) { kelong.top = rect.height - 60 } that.setData({ kelong: kelong, }) }).exec(); }, dragEnd: function(e) { var that = this var i = e.currentTarget.dataset.index var query = wx.createSelectorQuery(); var kelong = that.data.kelong var listnum = that.data.optionList.length var optionList = that.data.optionList query.select('.listbox').boundingClientRect(function (rect) { kelong.top = e.changedTouches[0].clientY - rect.top - 30 if(kelong.top<-20){ wx.showModal({ title: '删除提示', content: '确定要删除此条记录？', confirmColor:'#e4463b' }) } var target = parseInt(kelong.top / 60) var replace = that.data.replace if (target >= 0) { replace.xt = optionList[target].xt replace.name = optionList[target].name replace.subname = optionList[target].subname optionList[target].xt = optionList[i].xt optionList[target].name = optionList[i].name optionList[target].subname = optionList[i].subname optionList[i].xt = replace.xt optionList[i].name = replace.name optionList[i].subname = replace.subname } that.setData({ optionList: optionList, showkelong:false }) }).exec(); }, [代码]

样例参考（瑞幸咖啡小程序） [图片][图片][图片] 需求分析 服务器端会返回不确认的图片资源到前端 前端将返回的每张图片都要贴上小程序码 将贴上小程序码的图片使用 swiper 组件轮播 用户点击保存时，将图片保存至相册。 至于点击保存如何保存至相册（wx.saveImageToPhotosAlbuml 了解一下，注意一下授权问题即可） 碰到的问题 canvas为原生组件, 而原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 [代码]采用方法: 通过定位，将其移除到不在可视范围，如iphone6 .canvas { position: relative; left: -375px; } [代码] 绘制多张图片时, 一个canvas 标签只能对应画一张图片 (目前我测试的是这样，如有其它方法，欢迎评论交流) [代码]采用方法: 1. html端循环要生成的图片张数，对应循环出多个 canvas 组件，分别设置不同的 canvasId 区分 2. 封装一个绘制海报的函数，返回一个Promise对象，用于后面绘制完所有的图片，统一赋值渲染，避免多次触发数据更新 3. js端 循环执行一次 绘制海豹函数，存于一个数组列表 4. 使用 Promise.all 函数，统一绘制完毕将生产图片路径赋值 html: <canvas v-for="u in m.urlList" :key="u" :canvas-id="'poster'+index" class="canvas" style="width:100%; height:100%;"> </canvas> <swiper :indicator-dots="true" :circular="true" :autoplay="true" indicator-color="rgba(255,255,255,.2)" indicator-active-color="#fff" class="swiper"> <swiper-item v-for="f in m.filePaths" :key="index"> <image :src="f"> </swiper-item> </swiper> js: // 数据 (mpvue 开发) function data(){ return { m : { urlLIst: [ // 图片资源 '/static/poster0.jpg', '/static/poster1.jpg' ], filePaths: [], // 生成图片（贴上小程序码） } } } try { let res = wx.getSystemInfoSync(); // 同步获取系统信息 let w = res.windowWidth; // 手机可用区域宽度 let h = res.windowHeight; // 手机可用区域高度 let codeUrl = '/static/code.jpg'; // 小程序码 let drawList = []; // 用于保存绘制海报图Promise对象 m.urlList.forEach( (u, i)=> { // 传入canvas组件ID，图片路径（测试使用的是本地路径） drawList.push(drawPoster('poster'+i, u, codeUrl)); }) // 统一更新数据 Promise.all(drawList).then((valuse)=>{ m.filePaths = valuse; }); // 封装绘制图片函数 function drawPoster(canvasId, bgUrl, codeUrl){ return new Promise( (resolve, reject) => { // 创建画布实例 let ctx = wx.createCanvasContext(canvasId); // 绘制背景图: 图片路径，x坐标，y坐标，宽，高 ctx.drawImage(bgUrl, 0, 0, w, h); // 绘制小程序码 ctx.drawImage(codeUrl, w-120, h-120, 100, 100); // 绘制 ctx.draw(false, ()=>{ // 该通过函数将canvas绘制导出为图片 wx.canvasToTempFilePath({ x: 0, y: 0, width: w, height: h, canvasId: canvasId, success(res){ resolve(res.tempFilePath); } }); }); } }catch(e){ // 自己封装了一成 wx.$toast(e); } [代码] 最终demo效果图 [图片][图片] 在社区中暂未看到多张海报实现的方案，如果有更好的实现方案，欢迎交流