起因 H###s：#满，微信小程序有模态弹窗吗？ #满：有啊，喏。wx.showModal（随手甩出一个链接） 短暂的几十秒后… H###s：不对啊，我要的不是这种 #满：那你要哪种？ H###s：就是那种组件，可以自己在里面写wxml代码的。 #满：组件？那没有 H###s：那难顶哦，有这个需求 祺##：自己写一个呗，又不难 因为我一般使用 kbone - vue ，所以这里也拿 vue 做示例。另外，使用 typescript 语法，请使用 javascript 的童鞋自行理解～ 最终效果 [图片] 编写过程 我们先创建一个空的 vue 组件，我这里命名为 Modal [图片] [图片] 组件创建好了，随便写点东西，然后引入到页面，看看对不对吧 组件： [图片] 页面： [图片] 实际效果： [图片] OK，组件引入正确，但是这也只是一个组件，并不是模态弹窗。众所周知，模态弹窗，是一个弹出框，应该浮动到最上层，那就加一点 css 吧 组件： [图片] 实际效果： [图片] emmmm，有点丑，不过意思是这个意思，接下来，让弹出框水平垂直居中，再给点宽度高度吧 组件： [图片] 实际效果： [图片] 是不是有内味儿了？但毕竟是模态弹窗组件，显示什么内容应该由页面来决定，所以，slot 走起！ 组件： [图片] 页面： [图片] 实际效果： [图片] OK，那既然是模态弹窗，那就代表可以关闭打开，其实我个人推荐的是在页面里面使用 v-if / v-show 来控制，让组件干净一点 页面： [图片] 实际效果： [图片] [图片] OK，既然打开有了，接下来就是关闭了 组件： [图片] 页面： [图片] 行了，关闭打开也有了，再搞点小东西 组件： [图片] 页面： [图片] 实际效果： [图片] 完成 简单的模态框做完啦！怎么样？似8似很简单！ **考虑到会有一些组件的层级，并且设置 z-index 无效，组件的外部标签可修改为 [代码]cover-view[代码] ** [图片] 结束 H###s：真的诶！超简单的，感谢你的组件了（白嫖成功）！

以下代码不一定都是本人原创，很多都是借鉴参考的（模仿是第一生产力嘛），有些已忘记出处了。以下分享给大家，供学习参考！欢迎收藏补充，说不定哪天你就用上了！ 一、第一种效果 [图片] [代码]//index.wxml <view class="zr"> <view class='user_box'> <view class='userInfo'> <open-data type="userAvatarUrl"></open-data> </view> <view class='userInfo_name'> <open-data type="userNickName"></open-data> , 欢迎您 </view> </view> <view class="water"> <view class="water-c"> <view class="water-1"> </view> <view class="water-2"> </view> </view> </view> </view> //index.wxss .zr { color: white; background: #4cb4e7; /*#0396FF*/ width: 100%; height: 100px; position: relative; } .water { position: absolute; left: 0; bottom: -10px; height: 30px; width: 100%; z-index: 1; } .water-c { position: relative; } .water-1 { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-1 3.5s infinite linear; animation: wave-animation-1 3.5s infinite linear; } .water-2 { top: 5px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-2 6s infinite linear; animation: wave-animation-2 6s infinite linear; } .water-1, .water-2 { position: absolute; width: 100%; height: 60px; } .back-white { background: #fff; } @keyframes wave-animation-1 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } @keyframes wave-animation-2 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } .user_box { display: flex; z-index: 10000 !important; opacity: 0; /* 透明度*/ animation: love 1.5s ease-in-out; animation-fill-mode: forwards; } .userInfo_name { flex: 1; vertical-align: middle; width: 100%; margin-left: 5%; margin-top: 5%; font-size: 42rpx; } .userInfo { flex: 1; width: 100%; border-radius: 50%; overflow: hidden; max-height: 50px; max-width: 50px; margin-left: 5%; margin-top: 5%; border: 2px solid #fff; } [代码] 二、第二种效果 [图片] [代码]//index.wxml <view class="waveWrapper waveAnimation"> <view class="waveWrapperInner bgTop"> <view class="wave waveTop" style="background-image: url('https://s2.ax1x.com/2019/09/26/um8g7n.png')"></view> </view> <view class="waveWrapperInner bgMiddle"> <view class="wave waveMiddle" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGZ38.png')"></view> </view> <view class="waveWrapperInner bgBottom"> <view class="wave waveBottom" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGuuQ.png')"></view> </view> </view> //index.wxss .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; height: 300px; top: 0; margin: auto; } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); } .bgTop { z-index: 15; opacity: 0.5; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 500%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveTop { background-size: 50% 100px; } .waveAnimation .waveTop { animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .waveMiddle { background-size: 50% 120px; } .waveAnimation .waveMiddle { animation: move_wave 10s linear infinite; } .waveBottom { background-size: 50% 100px; } .waveAnimation .waveBottom { animation: move_wave 15s linear infinite; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } [代码] 三、第三种效果 [图片] [代码]//index.wxml <view class="container"> <image class="title" src="https://ftp.bmp.ovh/imgs/2019/09/74bada9c4143786a.png"></image> <view class="content"> <view class="hd" style="transform:rotateZ({{angle}}deg);"> <image class="logo" src="https://ftp.bmp.ovh/imgs/2019/09/d31b8fcf19ee48dc.png"></image> <image class="wave" src="wave.png" mode="aspectFill"></image> <image class="wave wave-bg" src="wave.png" mode="aspectFill"></image> </view> <view class="bd" style="height: 100rpx;"> </view> </view> </view> //index.wxss image{ max-width:none; } .container { background: #7acfa6; align-items: stretch; padding: 0; height: 100%; overflow: hidden; } .content{ flex: 1; display: flex; position: relative; z-index: 10; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding-bottom: 450rpx; background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); opacity: 0; transform: translate3d(0,100%,0); animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards; } @keyframes rise{ 0% {opacity: 0;transform: translate3d(0,100%,0);} 50% {opacity: 1;} 100% {opacity: 1;transform: translate3d(0,450rpx,0);} } .title{ position: absolute; top: 30rpx; left: 50%; width: 600rpx; height: 200rpx; margin-left: -300rpx; opacity: 0; animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards; } @keyframes show{ 0% {opacity: 0;} 100% {opacity: .95;} } .hd { position: absolute; top: 0; left: 50%; width: 1000rpx; margin-left: -500rpx; height: 200rpx; transition: all .35s ease; } .logo { position: absolute; z-index: 2; left: 50%; bottom: 200rpx; width: 160rpx; height: 160rpx; margin-left: -80rpx; border-radius: 160rpx; animation: sway 10s ease-in-out infinite; opacity: .95; } @keyframes sway{ 0% {transform: translate3d(0,20rpx,0) rotate(-15deg); } 17% {transform: translate3d(0,0rpx,0) rotate(25deg); } 34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); } 50% {transform: translate3d(0,-10rpx,0) rotate(15deg); } 67% {transform: translate3d(0,10rpx,0) rotate(-25deg); } 84% {transform: translate3d(0,15rpx,0) rotate(15deg); } 100% {transform: translate3d(0,20rpx,0) rotate(-15deg); } } .wave { position: absolute; z-index: 3; right: 0; bottom: 0; opacity: 0.725; height: 260rpx; width: 2250rpx; animation: wave 10s linear infinite; } .wave-bg { z-index: 1; animation: wave-bg 10.25s linear infinite; } @keyframes wave{ from {transform: translate3d(125rpx,0,0);} to {transform: translate3d(1125rpx,0,0);} } @keyframes wave-bg{ from {transform: translate3d(375rpx,0,0);} to {transform: translate3d(1375rpx,0,0);} } .bd { position: relative; flex: 1; display: flex; flex-direction: column; align-items: stretch; animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards; opacity: 0; } @keyframes bd-rise{ from {opacity: 0; transform: translate3d(0,60rpx,0); } to {opacity: 1; transform: translate3d(0,0,0); } } [代码] wave.png（可下载到本地） [图片] 在这个基础上，再加上js的代码，即可实现根据手机倾向，水波晃动的效果 wx.onAccelerometerChange(function callback) 监听加速度数据事件。 [图片] [代码]//index.js Page({ onReady: function () { var _this = this; wx.onAccelerometerChange(function (res) { var angle = -(res.x * 30).toFixed(1); if (angle > 14) { angle = 14; } else if (angle < -14) { angle = -14; } if (_this.data.angle !== angle) { _this.setData({ angle: angle }); } }); }, }); [代码] 四、第四种效果 [图片] [代码]//index.wxml <view class='page__bd'> <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;"> <view class="cu-bar"> <view class="content text-bold text-white"> 悦拍屋 </view> </view> </view> <view class="shadow-blur"> <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image> </view> </view> //index.wxss @import "colorui.wxss"; .gif-black { display: block; border: none; mix-blend-mode: screen; } [代码] 本效果需要引入ColorUI组件库

第一篇博文主要目的不是分享，是用来警醒自己。 17 年为一个写了 154 行糟糕的代码来实现一个需求，而别人用 16 行实现了。 为什么用文章功能写博客 准备找个地方写写个人博客，懒得自己搭，因为以后和现在大部分的工作经验都会和小程序有关，打算用开发者社区的文章功能试一下。 顾虑 为了给大家创造一个良好的经验分享交流平台，我们新增了“文章分享”的模块，希望大家可以将设计、开发和运营的小程序经验分享给更多的用户，将大家平时积累的经验分享出来，也沉淀下来。 官方对文章的定义是围绕小程序的，会有很多文章是和小程序不相关的，不知道官方对这样的文章是怎样的态度，不行请告知。 154 行和 16 行代码 问题，把下面的数据生成树形结构 [代码]const all = [ 'unarchive/', 'unarchive/dsa/', 'unarchive/dsas/', 'unarchive/dsa/dsfgdf/', 'unarchive/dsa/fdsf/', '新建文件夹/', '/546d573777106.cdr', '/546d573867eeb.jpg', '/unarchive/546d57377710.cdr', '/unarchive/546d573867ee.jpg', '/unarchive/dsa/546d5737771.cdr', '/unarchive/dsa/546d573867e.jpg', '/unarchive/dsa/dsfgdf/546d573867eeb.jpg', '/unarchive/dsa/fdsf/546d573777106.cdr', '/unarchive/dsa/fdsf/546d573867eeb.jpg', '/新建文件夹/zip.js', ]; [代码] 17 年刚学 js 写的 154 行代码 [代码]//把地址炸开,炸成数组 function bangData(src){ var back_src = []; var arr = Array.from(src); var index_arr = []; var str; //去头部的“/” if(src.indexOf("/") == 0){ back_src.push("/"); arr.shift(); } //去尾部的“/” if(src.lastIndexOf("/") == src.length - 1){ arr.pop(); // console.log("into",arr); } //创建下面切片会使用的下标的数组 index_arr.push(-1); arr.forEach(function(c,i){ if(c == "/"){ index_arr.push(i); } }) index_arr.push(arr.length); //给返回数组创建元素 for(var i = 0; i < index_arr.length - 1; i ++){ // console.log("into",index_arr,back_src); str = arr.slice(index_arr[i] + 1,index_arr[i + 1]).reduce(function(p,c){ return p + c; }); back_src.push(str); } return back_src; } //取得地址中的最大长度 function getMostLen(data){ var most_len = 0; data.forEach(function(c,i){ if(c.length > most_len){ most_len = c.length; } }) return most_len; } //判断是否为文件夹 function isDirctory(src){ var value = false; if(src.lastIndexOf("/") == src.length - 1){ value = true; } return value; } //json 传入数组对象以添加children function creatClass(json,data,len,all){ var class_dirc_data = []; var class_data = data.filter(function(c,i){ if(c.length == len){ var value = isDirctory(all[i]); class_dirc_data.push(value); } return c.length == len; }); if(len == 1){ class_data.forEach(function(c,i){ json[json.length] = { label : c[0], isdirctory : class_dirc_data[i], children : [], } }); var value = data.some(function(c){ return c[0] == "/"; }); if(value) { json[json.length] = { label : "/", isdirctory : true, children : [], } } }else{ class_data.forEach(function(current,index){ addJsonObj(json,current,index,len,class_dirc_data); }) } return json; } function addJsonObj(json,current,index,len,class_dirc_data){ var parent_src;//用以暂时保存某一级的地址,记录下一次的父地址 var haveIt ; var obj; json.some(function(c,i){ var value = c.label == current[0]; if(value){ parent_src = c; haveIt = true; } return value; }); for(var j = 1; j < len - 1; j++){ haveIt = parent_src.children.some(function(c,i){ var value = c.label == current[j]; if(value){ // console.log("into",parent_src); parent_src = c; } return value; }); if(!haveIt){ break; } } if(haveIt){ obj = { label : current[len-1], isdirctory : class_dirc_data[index], children : [], } // console.log("into1",obj,current,parent_src); parent_src.children.push(obj); } else { obj = { label : current[j], isdirctory : true, children : [], } // console.log("into",obj); //对象不存在时进行创建，之后再次调用 parent_src.children.push(obj); addJsonObj(json,current,index,len,class_dirc_data); } } //创建json_data function creatJson(data){ var return_json = []; var bang_all = data.map(function(c,i){ return bangData(c); }); console.log(bang_all); var most_len = getMostLen(bang_all); console.log(most_len); for(var i = 1; i <= most_len; i++){ // return_json = creatClass(return_json,bang_all,i,all); creatClass(return_json,bang_all,i,data); } console.log(return_json); } creatJson(all); [代码] 老师的 16 行代码 [代码] var files = {}; function formatFloder(path) { var cur = files; path.split("/").slice(1).forEach(function(elem, index) { if (elem) { cur[elem] = cur[elem] || {isDir: elem.indexOf(".") == -1,name: elem}; cur = cur[elem]; } }); } all.forEach(function(path) { path = path[0] != "/" ? "/" + path : path; formatFloder(path); }) [代码] 现在（2019-03-10）的 22 行代码 [代码] function buildPathTree (pathArray) { const treeData = pathArray.reduce((prev, c) => { const rawNodes = c.split('/') const rawNodes2 = c.startsWith('/') ? rawNodes.slice(1) : rawNodes const nodes = c.endsWith('/') ? rawNodes2.slice(0, -1) : rawNodes2 // 修改 prev 添加节点 nodes.reduce((prevNode, name) => { if (prevNode[name]) { return prevNode[name] } else { const isDir = name.includes('.') prevNode[name] = { isDir, name } return prevNode[name] } }, prev) return prev }, {}) return treeData } [代码] 期望 希望这篇文章能让自己在偶尔得意的时候谦逊起来。

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

事情是这样的。 我司一小破程序，打开时类似这样，显示一个logo，一个标题 [图片] 经过一个2秒的动画效果，logo和标题就移动到上面部分了，同时渐显出来一个loading组件，这些都是使用小程序的Animation API实现的。 [图片] [图片] 现在需求来了。 我们想在首屏渲染后。在图标往上移的动画执行周期中，将背景色缓慢从蓝色变为白色。 (别问为什么要变背景色，我们准备待会加完班拿上弹弓组团去打设计师家玻璃了) [图片] 有朋友会说了，这不是很简单嘛，弄个定时器去替换class不就行了？ 我只想说，no no no。朋友，我们搬砖就要有搬砖的样子嘛。 什么时间搬，搬多少，什么时间停，都要严谨嘛。 天真的我，想当然的就拍着胸脯向BOSS表示小意思啦。 [图片] naive的我心里想着 肯定会有动画执行开始和结束一个callback接口的嘛 然鹅,、翻遍了小程序文档里关于动画的各个段落之后才发现 [图片] 神马?? 我不信！一定是我的眼刚刚瞎了，我要再看一遍。 [图片] [图片] [图片] [图片] [图片] PS 看，多么言简意赅的文档！ 在看多了外面那些"妖艳贱货"的文档后，如此小清新的文档，还真让我这老司机虎躯一震。 // TODO 我当即在心里暗暗发誓，我一定要强烈建议我司将此文档规范引进并在我司大范围实践，太他【文明用语】高效了。 END PS 在我不懈的努力下 在某毒找到了一篇关于动画重置的实例 [图片] [图片] 哦也，三七三十一，一定是我聋了才没看见这么大个接口 同事心里还在做自我批判，怎么能轻易的就甩锅给腾讯爸爸。 祭出我的Ctrl+F大法 [图片] 果然。还是我太天真。竟然没有搜到 0/0？ 在经过了一番苦苦的某毒搜索之后，猛然意识到，或许是我姿势不对？ [图片] 谢天谢地，博客园诚不我欺。确实有这个东东。 我默默的打开了唯一的一条搜索结果学习了起来。你猜怎么着？ [图片] 我发现了腾讯爸爸藏起来的彩蛋。 哇，没想到小程序团队这么调皮。 在动画相关的所有文档里，竟然半个字都没提有这几个事件。保密工作做的很到位。表扬。5星好评。 [图片] 根据文档，照猫画虎。 [图片] [图片] 控制台没有任何反应 [图片] 一定是我姿势不对，我换换姿势。 [图片] [图片] 一顿操作猛如虎，然鹅发现并没有什么卵用。 [图片] [图片] [图片] 我盯着这条说明，默默的给自己点上了一根烟后陷入了痛苦的沉思。 期间我尝试了各种姿势，都没有找到关于WXSS animation到底是个什么鬼。 我只知道有Animation这个动画API。或许他俩是一个东西？ 但是为什么Animation里没有关于它的只言片语？ [图片] 既然Animation里没有写，肯定是另外一套体系吧？ 灵光一闪， oh no，别又是腾讯爸爸调皮了把文档藏起来了吧。 [图片] [图片] 经过地毯式的搜索及换遍了各种姿势想要跟我的小程序互动一把后。 [图片] [图片] [图片] 我选择死亡。 [图片] [图片] 我想起那天夕阳下调的微信小程序，那是我逝去的青春。。。 IDE: v1.02.1901230 Library: 2.4.2

今年开始各路刘海和全面屏手势的手机已经开始霸占市场，全面屏和刘海屏的适配也必须提上日程。 相信大家也一定会有第一次将未适配的小程序放到全面屏或刘海屏手机上的尴尬体验。 尤其是在导航栏设置为custom时，标题与胶囊对不齐简直逼死强迫症。。 微信官方也没有出一个官方的指导贴帮助开发者。 这里仅总结一下个人关于这个问题的一些处理方式，如有疏漏烦请指正补充。 适配的关键在两个位置即额头和下巴，头不用说自然是关于刘海的。 小程序的头的高度主要分为2个部分 1.statusBarHeight 该值可以在app onLaunch 调用wx.getSystemInfoSync() 获取到     a）刘海 高度44     [图片]     b）无刘海 ios高度20 安卓各不相同     [图片] 2.胶囊高度 即下图高度          [图片]     在查阅社区问答后了解到小程序给到的策略是ios在模拟器下统一是44px，ios在真机下统一是40px（感谢指正@bug之所措 ），而安卓下统一是48px，因此我们又可以在wx.getSystemInfoSync() 中获取到系统之后得到胶囊高度。     总的导航栏高度即这两个高度之合。本人项目中是将导航做成组件并给到slot，方便各个页面配置。 开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段，在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。     目前小程序还支持在单个页面配置custom，也可以配合使用~ 另一个需要关注的则是底部，参考的文章是 https://www.jianshu.com/p/a1e8c7cf8821 重点是在于在全面屏的手机的底部需要流出34px的空白给到全面屏返回手势操作，此外由于全面屏屏幕圆边还可能使一些按钮或功能无法正常使用。 那么首先如何判断是否是全面屏呢？个人的做法是判断屏幕高度是否大于750，iphone的plus系列高度在736，正好在这个范围之内，当然750不一定准确，如果出现疏漏烦请补充。 涉及到底部的主要是弹出的操作菜单、tabBar和底部定位的按钮等。这里做了一个简单的代码片段。 https://developers.weixin.qq.com/s/fnU0n8mv7o5M 希望能够帮助到大家，也欢迎交流~