- 当前 Bug 的表现（可附上截图） - 预期表现 - 复现路径 - 提供一个最简复现 Demo 做这个canvas的功能做了半个月，一直出现bug，现在遇到一个比较特殊的bug 就是我在真机上面测试是没有问题的下载也可以下载到手机相册，但是我把代码上传到体验版就出现了一个bug ，手机打开体验本，[图片]如果没有打开这个调试的，下载到手机的图片就只有文字没有图片。就是这样[图片]但是我把调试打开就行，求助各位大佬呀，欢迎评论给方法，感觉再做不出来这个功能都要离职了。 saveImg: function (e) { var that = this; const ctx = wx.createCanvasContext('secondCanvas'); let path1 = this.data.img1; let path2 = this.data.img2; let path3 = this.data.img3; console.log(path1); console.log(path2); console.log(path3); ctx.rect(0, 0, 650, 910); ctx.fillStyle = "#ffffff";//设置的背景颜色 ctx.fill(); // ctx.fillRect(20, 20, 150, 100);//边框 ctx.drawImage(path1, 20, 20, 335, 180); ctx.drawImage(path2, 140, 238, 100, 90); ctx.setFontSize(12);//设置字体 ctx.fillStyle = "#888888"; ctx.fillText(this.data.tip, 140, 349, 220);//提示 ctx.drawImage(path3, 150, 388, 80, 80); ctx.setFontSize(14);//设置字体 ctx.fillStyle = "#ffa42b"; ctx.fillText(this.data.user_name, 168, 475, 100);//名字 ctx.setFontSize(14);//设置字体 ctx.fillStyle = "#666666"; ctx.fillText(this.data.tuijian, 158, 520, 120);//推荐 ctx.setFontSize(14);//设置字体 ctx.fillStyle = "#333333"; ctx.fillText(this.data.courseInfo.course_name, 108, 540, 220);//课题 // ctx.fillText(this.data.className, 108, 540, 220);//课题 ctx.draw(false, () => { wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片    x: 0, y: 0, destWidth: 375 * 2,//输出图片宽度            destHeight: 663 * 2,//输出图片高度            canvasId: 'secondCanvas', //画布标识            fileType: 'png', //保存的图片格式，默认是png            success: function (res) {  //接口调用成功的回调函数      console.log(res) console.log(res.tempFilePath); let imgUrl = res.tempFilePath; // if (imgUrl.indexOf("https")==1){ //   imgUrl = imgUrl.replace(/^http/,"https") // } if (!res.tempFilePath) { wx.showToast({ title: '图片绘制中，请稍后重试', duration: 1500 }) } // wx.saveImageToPhotosAlbum({ //   filePath: res.tempFilePath,//返回的临时文件路径，下载后的文件会存储到一个临时文件 //   success: function (res) { //     wx.showToast({ //       title: '成功保存到相册', //       icon: 'success' //     }) //   } // }) wx.saveImageToPhotosAlbum({ filePath: imgUrl,  // 此为图片路径 success: (res) => { console.log(res) wx.showToast({ title: '成功保存到相册', icon: 'success' }) }, fail: (err) => { wx.getSetting({ success(res) { // 进行授权检测，未授权则进行弹层授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { wx.saveImageToPhotosAlbum({ filePath: imgUrl,  // 此为图片路径 success: (res) => { console.log(res) wx.showToast({ title: '成功保存到相册', icon: 'success' }) } }) }, // 拒绝授权时，则进入手机设置页面，可进行授权设置 fail() { wx.openSetting({ success: function (data) { console.log("openSetting success"); }, fail: function (data) { console.log("openSetting fail"); that.toAuthorize() } }); } }) } else { // 已授权则直接进行保存图片 wx.saveImageToPhotosAlbum({ filePath: imgUrl,  // 此为图片路径 success: (res) => { console.log(res) wx.showToast({ title: '成功保存到相册', icon: 'success' }) } }) } }, fail(res) { console.log(res); } }) } }) // that.saveImage(imgUrl); // that.saveImageToPhotos(imgUrl); } }) }) }, // 按钮点击触发 clickSave() { this.saveImg(function (res) { this.saveImageToPhotos(res) }) },

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

简介 作为前端er，我们的工作与web是分不开的，随着HTML5的日益壮大，浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍，分别介绍其用法、用处以及浏览器支持度，同时我也分别为这几个api都做了一个简单的demo（真的很简单，样式等于没有~）这几个api分别是： page lifecycle onlineState 利用deviceOrientation制作一个随着手机旋转的正方体 battery status custom event 利用execCommand完成一个简单的富文本 page lifecycle(网页生命周期) 介绍 我们可以用document.visibitilityState来监听网页可见度，是否卸载，但是在手机和电脑上都会现这种情况，就是比如说页面打开过了很久没有打开，这时你看在浏览器的tab页中看着是可以看到内容的，但是点进去却需要加载。chrome68添加了 freeze和 resume事件，来完善的描述一个网页从加载到卸载，包括浏览器停止后台进程，释放资源各种生命阶段。从一个生命周期阶段到另外一个生命周期阶段会触发不同的事件，比如onfocus，onblur，onvisibilitychange，onfreeze等等，通过这些事件我们可以响应网页状态的转换。具体的教程推荐大家看看阮一峰大神的教程。 用法 [代码]window.addEventListener('blur',() => {}) window.addEventListener('visibilitychange',() => { // 通过这个方法来获取当前标签页在浏览器中的激活状态。 switch(document.visibilityState){ case'prerender': // 网页预渲染 但内容不可见 case'hidden': // 内容不可见 处于后台状态，最小化，或者锁屏状态 case'visible': // 内容可见 case'unloaded': // 文档被卸载 } }); [代码] 用处 大家可以看下这个demo [图片] 所以说，这个API的用处就是用来响应我们网页的状态，比如说我们的页面是在播放视频或者是一个网页的游戏，你可以通过这个API来去做出对应的响应，暂停视频，游戏暂停等等。 浏览器支持度 page visibilituState [图片] online state（网络状态） 这个API就很简单了，就是获取当前的网络状态，同时也有对应的事件去响应网络状态的变化。 用法 [代码]window.addEventListener('online',onlineHandler) window.addEventListener('offline',offlineHandler) [代码] 用处 比如说我们的网站是视频网站，正在播放的时候，网络中断了，我们可以通过这个API去响应，给用户相应的提示等等。 浏览器支持度 [图片] Vibration（震动） 让手机震动~~~ 嗯，就这么简单。 用法 [代码]// 可以传入一个大于0的数字，表示让手机震动相应的时间长度，单位为ms navigator.vibrate(100) // 也可以传入一个包含数字的数组，比如下面这样就是代表震动300ms，暂停200ms，震动100ms，暂停400ms，震动100ms navigator.vibrate([300,200,100,400,100]) // 也可以传入0或者一个全是0的数组，表示暂停震动 navigator.vibrate(0) [代码] 用处 用来给用户一个提示，比如说数据校验失败，当然震动不止这点作用，大家自己去扩展吧~~~ 浏览器支持度 [图片] device orientation（陀螺仪） 通过绑定事件来获取设备的物理朝向，可以获取到三个数值，分别是： alpha：设备沿着Z轴的旋转角度 [图片] beta：设备沿着X轴的旋转角度 [图片] gamma：设备沿着Y轴的旋转角度 [图片] 用法 [代码]window.addEventListener('deviceorientation',e => { console.log('Gamma:',e.gamma); console.log('Beta:',e.beta); console.log('Alpha:',e.Alpha); }) [代码] 用处 这种自然是web VR 中的使用场景会相对较多。这是我写的一个小demo [图片] 浏览器支持度 [图片] battery status 这个API就使用来获取当前的电池状态 用法 [代码]// 首先去判断当前浏览器是否支持此API if ('getBattery' in navigator) { // 通过这个方法来获取battery对象 navigator.getBattery().then(battery => { // battery 对象包括中含有四个属性 // charging 是否在充电 // level 剩余电量 // chargingTime 充满电所需事件 // dischargingTime 当前电量可使用时间 const { charging, level, chargingTime, dischargingTime } = battery; // 同时可以给当前battery对象添加事件 对应的分别时充电状态变化 和 电量变化 battery.onchargingchange = ev => { const { currentTarget } = ev; const { charging } = currentTarget; }; battery.onlevelchange = ev => { const { currentTarget } = ev; const { level } = ev; } }) } else { alert('当前浏览器不支持~~~') } [代码] 用处 用来温馨的提示用户当前电量~~~ 浏览器支持度 这个浏览器的支持度很低。。。。 [图片] execCommand 执行命令 当将HTML文档切换成设计模式时，就会暴露出 execcommand 方法，然后我们可以通过使用这个方法来执行一些命令，比如复制，剪切，修改选中文字粗体、斜体、背景色、颜色，缩进，插入图片等等等等。 用法 用法也很简单，这里简单介绍几个，详细的介绍大家可以去MDN上看看。 这个API接受三个参数，第一个是要执行的命令，第二个参数mdn上说是Boolean用来表示是否展现用户界面，但我也没测试出来有什么不同，第三个参数就是使用对应命令所需要传递的参数。 [代码]// 一般不会直接去操作我们本身的HTML文档，可以去插入一个iframe然后通过contentDocument来获取、操作iframe中的HTML文档。 let iframe = document.createElement('ifram'); let doc = iframe.contentDocument; // 首先要将HTML文档切换成设计模式 doc.designMode = 'on'; // 然后就可以使用execCommand 这个命令了； // 执行复制命令，复制选中区域 doc.execCommand('copy') // 剪切选中区域 doc.execCommand('cut') // 全选 doc.execCommand('selectAll') // 将选中文字变成粗体，同时接下来输入的文字也会成为粗体， doc.execCommand('bold') // 将选中文字变成斜体，同时接下来输入的文字也会成为斜体， doc.execCommand('italic') // 设置背景颜色，，比如设置背景色为红色，就传入 'red'即可 doc.execCommand('backColor',true,'red') [代码] 用处 我用这些命令简单的写了一个富文本的demo，大家可以看一下Demo，效果如下： [图片] 浏览器支持度 CustomEvent （自定义事件） 大家都知道各种事件是如何绑定的，但是有时候这些事件不够用呢，custom event就可以解决这样的问题。 用法 [代码]let dom = document.querySelector('#app'); // 绑定事件， 传递过来的值可以通过ev.detail 来获取 dom.addEventListener('log-in',(ev) => { const { detail } = ev; console.log(detail); // hello }) // 派发事件，需要传入两个参数，一个是事件类型，另外一个是一个对象，detail就是传递过去的值 dom.dispatchEvent(new CustomEvent('log-in',{ detail:'hello' })) [代码] 用处 绑定自定义事件，最近很火的框架Omi，其中的自定义事件就是基于customEvent实现的。 浏览器支持度 [图片] 最后 就先介绍到这些，web api越来越多，当然每个人不可能全都熟记于心，这篇文章也只是简单介绍一下，还有很多有意思而且很重要的API，比如：web components， service worker，genric sensor等等，不过这些都有很多人在钻研，同时文档相对较多。 相信你看完这些至少已经知道这些API的大概用法了，如果有兴趣了解用法的话，可以去看下我写的demo，也可以去看看MDN文档去深入研究一下。 参考 MDN文档 阮一峰大神的博客 web-api-you-dont-know 视频演讲 http://www.zhangyunling.com/725.html Omi WeElement源码

[图片] 「起点购物」主打本地生鲜市场，小程序上线一个月，便实现用户总量40%的增长，订单总额高达50W+。在竞争如此激烈的生鲜零售市场，它是如何做出这样的成绩的？下面我们来听听它的创始人杨先生（应受访者要求匿名）的分享。 [图片] Q：您一开始做的是传统生鲜零售，是什么原因促使您向新零售转型？ A：一方面，零售业这两年发生了巨大的变革，每一种模式的零售业都在寻求变革，大的从阿里打造盒马鲜生，京东推出7FRESH，腾讯与永辉、家乐福等零售巨头合作，小的到各类生鲜超市、生鲜便利店在全国遍地开花。我会发现自己不知不觉间已置身新零售潮流中，我不可能背离大势抽身开来。 [图片] 另一方面，由于在内蒙古，特别是在冬天零下20°的环境里，很多客户因为天气寒冷而不愿意出门购买，导致客户稀少，加之生鲜的产品保质期短、鲜度要求高的特性，导致其物流和配送成本高，新零售或许可以成为打开本地市场的一个契机。 也是从那时候，我开始广泛关注传统零售向新零售转型的一些运营模式，为接下来的转型做准备。 Q：在转型新零售的过程中您做过哪些尝试，期间遇到过哪些问题？ A：说实话，我一开始对新零售还一知半解，不清除该借助哪种工具才能实现完美转型。当时是了解到有很多同行入驻美团，所以我也抱着尝试的心态入驻其中，把美团作为当时线上营销的主要工具。 [图片] 经过一个月的运营，我发现效果并不理想。首先，入驻美团网需要一定的费用，平台会抽取入驻商家15%的佣金，也就是说在客户下单购买产品后所结算的款项是先到美团账户的，等扣去佣金后才会到商家账户； 其次，因为我们是以生鲜为主，对货品的新鲜度要求很高，因此很容易收到用户投诉、差评等问题，加之美团特别注重口碑，导致用户的反馈影响了很多客户流失。 在这种高佣金低盈利的情况下，我果断放弃了美团，决定另寻出路。 Q：您放弃美团后，为什么会选择转向小程序，并且现在还成为它的坚定支持者？ A：其实在入驻美团的同时，我有在持续关注周边很多同行，包括超市、便利店的动态，然后发现他们很多都在使用小程序，自己当然会开始关注小程序这样一个新事物。 通过对小程序的深入了解，我发现它能够将线上流量和线下服务很好地结合起来，对我们传统零售的转型有着非常大的帮助。 但我们怎么开发是个问题。后来，在一些周边商家的推荐以及自己的筛选后，我选择跟一个小程序服务商合作，推出了这款名为「起点购物」的小程序。 [图片] 令我们意料不到的是，这款小程序在上线一个多月的时间里，使我们的用户总量提高了40%，订单总额更是高达50W+，用户留存率与复购率也得到了大幅提升。正是小程序取得的这些成绩，让我坚定它在未来会爆发出更大的商机。 Q：小程序上线一个月，便取得如此佳绩，您有哪些经验可以给我们分享？ A：我主要是结合小程序的特点，对商品陈列进行调整，推出了两种消费模式： 第一种是线上预售，线下备货。我们会引导顾客通过小程序线上预售商品，当他们在商品备注上标明需求量，我会马上安排线下进行备货以及送货上门，客户可选择线上直接下单付款，也可以选择货到付款，等待送货上门收款。 第二种主要是进行活动营销。我们在小程序上设置秒杀活动，刺激客户通过小程序参与抢购，当客户抢购到所需商品时，可选择到店自提或配送。 [图片] 通过这两种模式，满足现在顾客在家购物的需求，通过服务C端客户的同时进行B端配送，实现线上线下一体化，解决了生鲜严重耗损、顾客稀少等问题，提高顾客的生鲜购物体验的同时，提高了顾客消费频率，所以店铺的订单总额才能在短时间内突破50W。 Q：「起点购物」留存率和复购率挺高的，关于这两方面您有哪些心得？ 在我看来，生鲜零售的成败在于供应链是否完善，因此我特别注重产品采购、鲜度管理、仓储分拣、物流配送等环节。我的超市都是自己到产地直接采购，获得第一手货源。同时承诺用户“30分钟内完成配送”，比如顾客在当天早上订购，我可以将当天最新鲜的货品及时进行备货配送；如果在晚上订购的话，我会在第二天早上进行备货配送，从而保持产品新鲜。 [图片] 另外，我还将服务范围从1公里扩展到10公里内，吸引了很多足不出户的客户以及餐厅使用小程序订购。正是这种简单又实用的方法与良好的服务得到很多客户的信赖，进而提高了用户留存率和复购率。 Q：您目前一共有4名员工，面对如今不断扩张的业务需求明显是人手不足的，你是如何应对的？ A：的确如此，超市目前有4名员工，1个采购、1个驻店以及2个配送员，人手非常不足。为了突破这种困境，我充分利用小程序的分销功能，去发展线下销售业务，通过“自己购买省钱，客户购买赚钱”的口号鼓励内部员工参与以及拓招兼职员工。 [图片] 如果员工介绍客户下单购物，完成订购后员工也可获得奖励，同时客户也可以获得购物券直接抵扣现金，而且客户的每一次购物，相应的员工都可得到对应的提成。通过这种佣金方式，刺激员工的工作积极度，增强与客户之间的互动，提高店铺营业额。 当然，随着消费者需求的变化，店铺的经营模式也需要随之而变。在未来，我会通过分销功能的不断完善，吸引更多员工参与销售业务来增加用户量。 小编寄语： 在巨头带动下，目前生鲜新零售的行业格局基本已经确定，中小生鲜创业者该何去何从，是他们亟待解决的问题。 而杨先生「起点购物」小程序的成功，给众多中小生鲜创业者注入强心剂的同时，也给他们提供了一套可借鉴甚至可复制的方案：以线下门店承载生鲜超市和前置仓的功能，以小程序平台辅以一定的营销活动将线下客户引流到线上，同时不断完善产品采购、鲜度管理、仓储分拣、物流配送等环节，给消费者更好的消费体验。 “小而美”是他们未来的机会所在，而如何解决消费者购买生鲜时面临的品质、距离、时间等痛点，则是他们必须接受的挑战。 [图片]

作者：王隐 2012年5月12日，广东江门一条名叫江边里的小巷，诞生了第一家喜茶店。 如今已过去七年，喜茶也走出那个只有20平方米的小店，在全国26个城市拥有177家门店，一线/新一线城市覆盖率达到90%。 芝士茗茶、鲜茶水果、波波茶，喜茶除了口感令人印象深刻之外，一年365天的排队人潮也同样让人感到惊讶。 [图片] 2018年6月，喜茶上线「喜茶GO」小程序，进军线上，不到一年时间，积累600万用户，小程序订单占比35%。 量子程序请到了「喜茶GO」的增长负责人徐金焕和CTO陈霈霖，在他们眼中，「喜茶GO」早已不只是一个简单的小程序，更是一个数字化引擎入口。 [图片] 2018年春节后，陈霈霖开始着手研发「喜茶GO」。 他把研发过程分为三个阶段：咨询调查、执行开发与最后的运营落地。开发产品其实并不难，难的是前后期涉及到很多的流程习惯，以及运营方式的改变。 准备近半年后，「喜茶GO」在2018年6月全面推广。 喜茶增长负责人徐金焕回忆，小程序冷启动时并没做太特别的处理，只是在有400万粉丝的喜茶公众号上发了一篇文章，通知用户可以通过小程序线上点单。 除此之外，喜茶的各个门店也会张贴二维码，告诉用户使用小程序可以在线点单。 当时，小程序第一波流量也多是这种线下的自然流量。 [图片] 「喜茶GO」杀死排队了吗？ 不到一年积累600万用户，或许是因为人们对「喜茶GO」抱有很高的期待，希望它能缓解一下排队难的问题。解决了吗？ [图片] 答案是：没有。 “说实话没有，但用户量却在持续增长，小程序出来前，很多人想喝喜茶，但每次一看到排队人多就放弃了。而有了线上途径之后，有更多的人来尝试喝喜茶。所以小程序在线下实现了用户增长，但并没有解决实际性的线下排队问题。” 徐金焕告诉我们，工作日大部分用户会用小程序点单，等做好了到时去取。而到了周末，逛商场的人多，这时候大家都不愿意用小程序，反而更愿意排队。 徐金焕和用户交流时发现，他们觉得周末排队就是换个地方玩手机，换个地方跟闺蜜站在那里聊天而已。换句话说，周末逛街本来就是来杀时间的，所以排队也是乐趣之一，也就不在乎提前点单节省那几分钟。 有意思的是，虽然周末排队的人很少用小程序，但小程序的使用量却不减。 为什么？ 在看过整体大盘营收和外部参考数据后，徐金焕发现，2018年下半年到现在，选择“宅”的人越来越多了。周末，就成为这些御宅族在小程序上点外卖的高峰期。 [图片] 在这种情况下，喜茶的外卖走势越来越高，而这种外卖增长可以补偿甚至拉升逛街用户减少的小程序使用量。 总体来说，工作日时「喜茶GO」确实能一定程度缓解排队，周末则不能，尽管周末的小程序用户量要比平时更高。至此，此前媒体报道中“「喜茶GO」杀死排队”的结论或许有些以偏概全，过于夸大了。 尽管小程序并没有完全“杀死”排队，但回归总体营收来看，小程序不仅可以带来线下增量，还可以叠加外卖，对营收的贡献在不停上升。 如果小程序不能“杀死”排队，那谁可以？ 目前，喜茶排队的根本原因还是需求大于供给，想喝喜茶的人很多，而线下门店数量有限、产能也跟不上。 [图片] 徐金焕也向我们解释了出茶产能上的制约性，目前做一杯茶饮的时间大概在15到18分钟之间。其中为了水果口感保留了很多手工流程，比如葡萄、车厘子都需要员工现场手工剥，制作时间较长。 所以解决排队问题，主要还是要靠开更多店以及制茶产能上的提升。 [图片] 「喜茶GO」的真正价值：经营数据化引擎 尽管没有“杀死”排队，但对喜茶来说，小程序是一个很好的数据化引擎入口。 小程序之前，喜茶只有线下数据，用户买一杯茶饮，没有留下多少交易痕迹。有了小程序以后，线上线下打通，喜茶可以对用户购买情况进行数据化资产打包，从而做更精准化分析和营销。 [图片] “我们会根据整体数据，看线上、线下成交量，整体营收如何，线上成交中预约占了多少，实际点单占了多少，外卖占了多少，平均客单价走势如何，哪一家门店销量不好，区域打点对不对，打通线上线下后可以给公司内部经营情况做分析和指导，这才是小程序的最大价值，而不是说简单的缓解排队。 ” 对于传统餐饮企业来说，无论是开门店还是做决策，很多靠拍脑袋。但随着门店越来越多、用户基数越来越大以及对经营复杂性的上升，就需要更强的数据支撑做决策参考。 喜茶目前主要覆盖城市集中在一二线城市，这也是线下门店的“重堵区”。“杀死”排队本质上需要多开门店来精准分流。而小程序提供了数据参考，保证分流“精准度”。 「喜茶GO」积累的复购数据可以帮助喜茶看到热力图，知道哪些门店销量好，人流密集，也就可以在附近开一家分店分流。 不仅如此，「喜茶GO」提供的定位数据还可以看到哪个区域的会员更集中，然后继续试点和投放新的GO店。 [图片] 除了在中心商圈开大店外，喜茶还会选择一些写字楼开轻量级GO店（GO店取消收银员，完全依赖小程序点单）。 喜茶开在北京和深圳的GO店就完全参照了线上数据，即开店区域尽可能多的覆盖会员热力图，然后再去打点，这样的开店成功率就高很多。 [图片] 喜茶小程序不一样的烦恼 目前，「喜茶GO」小程序，平均日活24万，月复购率超过36%。 小程序的增长还在继续，但徐金焕对放开线上流量仍十分谨慎。因为线上流量涌入线下，可能造成更严重的排队。甚至，在「喜茶GO」小程序中，当门店人流过于繁忙时，会显示“本店繁忙”。 [图片] 徐金焕说：“喜茶还是一个偏传统的实业，但线上能做的动作其实很多，我可以打包成不同类型的活动来让会员增长。但如果说我派发出去的优惠券，会员增长量太大，其实会给门店造成压力，明明现在门店处于饱和的状态，我线上持续去发力，就有更多的人去涌到门店。” 根据线下门店的数量以及整个喜茶当月大盘走势，对应的做一些线上活动才是正解。 换句话说，门庭若市已经证明了喜茶的受欢迎程度。所以对「喜茶GO」而言，如何合适地增长线上流量就显得尤为重要，喜茶面临的是和其它线下实体小程序截然不同的烦恼。 再回到「喜茶GO」的根本价值：小程序一定程度上为开新店选址做数据决策，而等到出茶产能上来之后，小程序就成为吸引线上用户反哺线下的利器。 徐金焕也为我们描绘了整合数据化资产后，在服务场景上为顾客带来的体验提升： “如果你是喜茶会员，你买茶的时候，店员就会知道说王先生您好，您还是喝上次的多肉葡萄，是不是还是去冰少糖1/2芝士？” 在徐金焕看来，这样的服务会更有尊贵感，顾客会自发推荐给自己的朋友，这种自然增长流量，远比做活动砸钱来的用户更有价值。一味追求用户增量，门店产能又饱和，则很难为顾客提供优质的服务。 [图片] 新兴茶饮开始迈向新阶段，但培养用户忠诚度不仅需要优惠政策，还需在产品品质和服务上多磨合。这才是「喜茶GO」未来的用武之地。 徐金焕告诉我们，喜茶最大的目标是增加品牌势能，其次是提供优质服务与产品，接下来才是加增量。 [图片] App已在计划中，未来还将开展to B业务 中国新兴茶饮市场已进入下半场，喜茶也在完善自己的线上会员体系，延长品牌生命线，试图打破网红茶饮短命魔咒。 付费会员体系是喜茶的其中一种尝试。用户办理“星球会员”后可以获得相应福利和权益。今年1月初，喜茶开展了9.9元体验15天会员的推广活动，目前已有8万星球会员。接下来，喜茶还会在会员体系中加入任务中心，用户可以通过完成任务来获得回报，比如购买5种指定饮品可以获得优惠券等，从而增加用户粘性和复购。 [图片] 今年除了不断扩店以外，上线App也在计划之列。 徐金焕认为，原生App有更高的稳定性和开发自由度： “一方面原生App会更稳定，另一方面，App页面层级上也可以有更大的开发空间，比如可以将积分商城页面放进会员俱乐部中。” 随着门店产能的不断释放，喜茶也会利用App开展to B业务。 虽然是一家重线下服务的餐饮企业，但是喜茶目前有近100人的互联网事业部，研发、运营、产品一应俱全，堪比一家小型互联网创业公司。 在问到喜茶2019的目标时，徐金焕表示仍要顾及线下门店产能，不会大面积线上引流。用户量上，希望小程序+App可以达到1000万。 喜茶真的很努力呀。

前言 大家好，上次给大家讲了函数防抖和函数节流 https://developers.weixin.qq.com/community/develop/article/doc/000a645d8b8ba0d8722863ef45bc13 今天给大家分享一下利用canvas生成朋友圈分享海报 由于小程序的限制，我们不能很方便地在微信内直接分享小程序到朋友圈，所以普遍的做法是生成一张带有小程序分享码的分享海报，再将海报保存到手机相册，有两种方法可以生成分享海报，第一种是让后台生成然后返回图片链接，这一种方法比较简单，只需要传后台所需要的参数就行了，今天给大家介绍的是第二种方法，用canvas生成分享海报。 效果 [图片] 主要步骤 把海报样式用标签先写好，方便画图时可以比对 用canvas进行画图，canvas要注意定好宽高 canvas利用wx.canvasToTempFilePath这个api将canvas转化为图片 将转化好的图片链接放入image标签里 再利用wx.saveImageToPhotosAlbum保存图片 坑点 用canvas进行画图的时候要注意画出来的图的大小一定要是你用标签写好那个样式的两倍大小，比如你的海报大小是400600的大小，那你用canvas画的时候大小就要是8001200，宽高可以写在样式里，如果你画出来的图跟你海报图是一样的大小的话生成的图片是会很模糊的，所以才需要放大两倍。 画图的时候要注意尺寸的转化，如果你是用rpx做单位的话，就要对单位进行转化，因为canvas提供的方法都是经px为单位的，所以这一点要注意一下，px转rpx的公式是w/750z2，w是手机屏幕宽度screenWidth，可以通过wx.getSystemInfo获取，z是你需要画图的单位，2就是乘以两倍大小。 图片来源问题，因为canvas不支持网络图片画图，所以你的图片要么是固定的，如果不是固定的，那就要用wx.downloadFile下载后得到一个临时路径才行 小程序码问题，小程序需要后台请求接口后返回一个二进制的图片，因为二进制图片canvas也是不支持的，所以也是要用wx.downloadFile下载后得到一个临时路径，或者可以叫后台直接返回一个小程序码的路径给你 这里保存的时候是有个授权提醒的，如果拒绝的话再次点击就没有反应了，所以这里我做了一个判断是否有授权的，如果没有就弹窗提醒，确认的话会打开设置页面，确认授权后再次返回就行了，这里有个坑注意下，就是之前拒绝后再进入设置页面确认授权返回页面时保存图片会不成功，官方还没解决，我是加了个setTimeOut处理的，详情可以看这里 https://developers.weixin.qq.com/community/develop/doc/000c46600780f0fa68d7eac345a400 代码实现 [图片] 这里图片我先用的是网上的链接，实际项目中是后台返回的数据，这个可以自行处理，这里只是为了演示方便，生成临时路径的方法我这里是分别定义了一个方法，其实可以合成一个方法的，只是生成小程序码时如果要传入参数要注意一下。 绘图方法是drawImg，这里截一部分，详细的可以看代码片段 [图片] 不足 由于在实际项目中返回的图片宽高是不固定的，但是canvas画出来的又需要固定宽高，所以分享图会有图片变形的问题，使用drawImage里的参数也不能解决，如果各位有比较好的方案可以一起讨论一下。 代码片段 https://developers.weixin.qq.com/s/3pcsjDmS7M5Y

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813