在小程序开发中，1rpx边框随处可见， 像上图UI给的设计稿，如果只是简单使用[代码]border: 1rpx solid red;[代码]的话，在不同的机型上会有不同的表现 [图片] 表现IOS 机型上[图片] Android机型上[图片] 由图片可以看出， IOS机型上会有边框缺失（然而经常出现缺不能稳定复现）， 而Android机型上边框比较粗 原因上面这两种表现形式很难联系到一起 首先先看IOS边框缺失的问题，借鉴网络上前辈们的经验 当父元素的高度为奇数，容易出现上下边框缺失，同理宽度为奇数，容易出现左右边框缺失解决办法是在边框内部添加一个1rpx的元素或者伪元素， 撑开内部使父元素的宽高是偶数。 然而我们发现这种方案在Iphone 6等2倍屏可以生效， 但放在如Iphone X等3倍屏下面就很飘了， 还是经常会出现边框缺失的情况， 这种情况下再去把父元素改为2和3共同的倍数就非常不现实了。 再回过头看导致边框缺失的具体原因是啥。 在这之前需要了解下高分屏的物理像素和虚拟像素的概念 简单来说物理像素是设备的实际像素 虚拟像素是设备的坐标点， 可以简单理解为css像素 而rpx类似rem，渲染后实际转换成px之后可能存在小数，在不同的设备上多多少少会存在渲染的问题。而1rpx的问题就更加明显，因为不足1个物理像素的话，在IOS会进行四舍五入，而安卓好像统一向上取整，这也是上面两种设备表现不同的原因。 解决方法我们采用的方法是采用translate:scale(0.5)的方法对边框进行缩放 具体的代码如下 .border1rpx, .border1rpx_before{ position: relative; border-width: 0rpx !important; padding: 0.5rpx; z-index: 0; } .border1rpx::after, .border1rpx_before::before{ content: ""; border-style: inherit; border-color: inherit; border-radius: inherit; box-sizing: border-box !important; position: absolute; border-width: 2rpx !important; left: 0; top: 0; width: 200% !important; height: 200% !important; transform-origin: 0 0; transform: scale(0.5) !important; z-index: -1; } .border1rpx-full { margin: -1rpx; } 给.border1rpx的元素设置边框宽度为0给::after伪元素宽高为两倍，边框设置2rpx，边框其他样式继承元素的设置然后再缩放0.5来达到边框为1rpx的效果 用法基础用法给相应的元素添加border1rpx的class即可， （.borde1rpx说：我们不生产边框，只是边框的搬运工，要显示边框样式的话还需要在元素上自行设置） 圆角边框圆角边框需要自行设置相应伪元素::before 或 ::after的border-raduis值为预期的2倍， 如原本想要设置10rpx的圆角，需要设置[代码].xxx::after{border-raduis: 20rpx;}[代码] 边框内部填充由于设计原因，目标元素会留1rpx的padding用于显示伪元素的边框，如果内部元素是填充的，正常会看到填充元素和目标元素有小部分间隙，此时需要给填充元素添加.border1rpx_full来解决 注意点此方案默认使用::after伪元素实现边框，如果目标元素的after被占用(如iconfont)，请使用[代码].border1rpx_before[代码]如单独设置边框(如上边框), [代码]border: 1rpx solid red;border-width: 1rpx 0 0 0;[代码]不能被正确继承，请使用简写[代码]border-top: 1rpx solid red;[代码]由于设计原因，目标元素请最少设置1rpx的padding用于显示边框,(上面的样式已经有了默认的padding，不写也可以， 只是不要用padding:0覆盖)请自行测试点击功能是否正常，防止层级关系导致元素区域被伪元素覆盖

page的json文件中如下声明： [图片] 然后模拟器，iphonex，iphone7下面的显示分别如下： [图片] iphonex [图片] iphone 7 [图片] 问题是，iphone x，下系统的状态栏没了 这里导致了很多问题 胶囊由于iphonex的圆边，及其难点击了 iphone x下面没有statusbar了，然而，getSystemInfo却又返回了相关信息： [图片] 导致如果做自定义navbar的话，返回按钮的top计算会出问题的，如果我按照机型去写适配，又不知道哪些机型不显示statusBar。。。 望答复！

[图片] 为什么要做这个？ 主要是在项目中，智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后，没有直接可以点击去首页的，需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题，在最近的微信版本更新中已经优化了，通过 小程序模板消息 过来的，系统会自动加上home按钮，但对于其他的访问方式则没有支持~ 一个不大不小的问题：两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法，发现有一个问题，就是现在手机屏幕太多种多样，有 传统头部、宽/窄刘海屏、水滴屏等等，无法八门，很多解决方案都无法解决特殊头部，系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题（强迫症的噩梦）。 下面分享下一个相对比较完善的解决方案： [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段，方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部，需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能，具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持，通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性，这样无论是水滴屏、刘海屏、异形屏，都能完美对齐右边系统默认的胶囊bar，完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中，可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结： 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中，一次计算全局使用，爽YY~ ​ 往期回顾： [填坑手册]小程序PC版来了，如何做PC端的兼容？！ [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

一、矩阵的应用 矩阵的应用场景主要在图像处理、线性变换及对称、量子态的线性组合、简正模式、几何光电和电子学。 而我们在前端中应用矩阵的场景最为常见的就是：CSS3 中的矩阵、canvas中的矩阵、svg中的矩阵、图像处理…等等一些场景； 二、CSS3中的矩阵 CSS3中的矩阵指的是一个方法，书写为matrix() 和 matrix3d()，前者是元素2D平面的移动变换(transform)，后者则是3D变换。2D变换矩阵为 3x3,3D变换则是 4x4 的矩阵。 大家都知道transform有斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)这几个属性方法 [代码]transform: skew(35deg); transform: scale(1, 0.5); transform: rotate(45deg); transform: translate(10px, 20px); [代码] 那大家有没有想过，这些属性方法其后面运作的机理是什么呢？ [图片] 无论是旋转还是拉伸什么的，本质上都是应用的matrix()方法实现的。 三、transform与坐标系统 transform旋转其默认是绕着中心点旋转的，而这个中心点就是transform-origin属性对应的点，也是所有矩阵计算的一个重要依据点。 [代码]transform-origin: x-axis y-axis z-axis; x-axis： left center right length % y-axis： top center bottom length % z-axis： length [代码] [图片] 通过transform-origin属性进行设置的时候，矩阵相关计算也随之发生改变。反应到实际图形效果上就是，旋转拉伸的中心点变了。 因为这个会影响矩阵的计算所以也顺带提一下！ 1.transform的matrix() [代码]transform: matrix(a,b,c,d,e,f); [代码] 实际上，这6个参数，对应的矩阵就是： [图片] 注意书写方向是竖着的。 其运算过程为： [图片] 其中，x, y表示转换元素的所有坐标（变量）。 那 ax + cy + e 的意义是什么？ ax + cy + e 为变换后的水平坐标，bx + dy + f 表示变换后的垂直位置。 2.偏移（translate） 举一个简单例子： [代码]transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */ [代码] 根据这个矩阵偏移元素的中心点，假设是(0, 0)，即 x=0, y=0。 变换后的x坐标就是 ax + cy + e = 1 * 0 + 0 * 0 + 30 = 30, y坐标就是 bx + dy + f = 0 * 0 + 1 * 0 + 30 = 30。 中心点坐标从(0, 0)变成了 → (30, 30)。好好想象下，原来(0,0)的位置，移到了(30, 30)处，怎么样，是不是往右下方同时偏移了30像素。 实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px); 注意：translate, rotate等方法都是需要单位的，而matrix方法 e, f 参数的单位可以省略。 总结 [代码]transform: matrix(与我无关, 哪位, 怎么不去高考, 打麻将去吧, 水平偏移距离, 垂直偏移距离); [代码] 只需要做偏移操作的，你只要关心后面两个参数就可以了，至于前面4个参数，是牛是马，是男是女都没有关系的。 还不能理解的可以参考下张鑫旭大神的小demo：懵逼请点击 3.缩放(scale) 上面的偏移只要关心最后两个参数，这个缩放也是只要关心两个参数。你们猜是两个呢？ [代码]transform: matrix(1, 0, 0, 1, 30, 30); [代码] matrix(1, 0, 0, 1, 30, 30)的元素比例与原来一样，1:1, 而这几个参数中，有两个1, 这两个1就是缩放相关的参数，第一个缩放x轴，第二个缩放y轴。 用公式就很明白了，假设比例是s，则有matrix(s, 0, 0, s, 0, 0)，套用公式，就有 [代码]x' = ax + cy + e = s * x + 0 * y + 0 = s * x; y' = bx + dy + f = 0 * x + s * y + 0 = s * y; [代码] 也就是matrix(sx, 0, 0, sy, 0, 0)，等同于scale(sx, sy); 4.旋转(rotate) 旋转相比前面两个要更高级些，要用到三角函数。 方法以及参数使用如下（假设角度为θ）： [代码]matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) [代码] 公式推导 结合矩阵公式，就有： [代码]x' = x * cosθ - y * sinθ + 0 = x * cosθ - y * sinθ y' = x * sinθ + y * cosθ + 0 = x * sinθ + y * cosθ [代码] CS-SC的结构这样比较好记： rotate的旋转30度 [代码]transform:rotate(30deg); [代码] matrix表示则还要计算cos, sin值： [代码]transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0); [代码] 5.拉伸(skew) 拉伸也用到了三角函数，不过是tanθ，而且与b, c两个参数相关，书写如下（注意y轴倾斜角度在前）： [代码]matrix(1,tan(θy),tan(θx),1,0,0) [代码] 套用矩阵公式： [代码]x' = x + y * tan(θx) + 0 = x + y * tan(θx) y' = x * tan(θy) + y + 0 = x * tan(θy) + y [代码] 对应于skew(θx + “deg”，θy+ “deg”)这种写法。 其中，θx表示x轴倾斜的角度，θy表示y轴，两者并无关联。 以上就是斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)这些属性的实现原理； 问题来了，有这么简便的方法为啥还需要用matrix？ 确实，对于一般地交互应用，transform属性默认提供的些方法是足够了，但是，一些其他的效果，如果transform属性没有提供接口方法，那我们只能通过矩阵计算自己实现呀。 要知道，matrix矩阵是transform变换的基础，掌握了基础，才可以应付很多高端的效果。 例如：镜像对称效果 任意对称轴都可以用y = k * x表示。则matrix表示就是： [代码]matrix((1 - k * k) / (1 + k * k), 2k / (1 + k * k), 2k / (1 + k * k), (k * k - 1) / (1 + k * k), 0, 0) [代码] 是不是想到了以前数学的给出一个点然后再给一条对称轴求它的对称点 [图片] [代码]一是垂直： (y - y') / (x - x') = -1 / k → ky - ky' = -x + x' 二是中心点在轴线上： (x + x') / 2 * k = (y + y') / 2 → kx + kx' = y + y' 把x'和y'提出来，就有： x' = (1 - k * k) / (k* k + 1) * x + 2k / (k * k + 1) * y y' = 2k / (k * k + 1) * x + (k * k - 1) / (k * k + 1) * y 再结合矩阵公式： x' = ax + cy + e y' = bx + dy + f 推导得到： a = (1 - k * k)/(k * k + 1) b = 2k / (k * k + 1) c = 2k / (k * k + 1) d = (k * k - 1)/(k * k + 1) [代码] 两条垂直的线段的斜率相乘等于-1，大家都还记得吧？ 不记得可以点击详情请点击这里！ 四、3D变换中的矩阵 本质上很多东西都与2D一致的，只是复杂度不一样而已。只是从 3 x 3 的矩阵变成 4 x 4 的矩阵，而且参数从6个参数，变成16个参数。 [代码]transform: matrix3d(x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, 0, 0, 0, 0, 1) [代码] 这个就由大家自己发挥了。 五、其他 其实不仅是CSS3的transform是这样，其实canvas和svg的也是同理，所以我在这里也不再一一列举了，有兴趣的同学就自己去探索吧，网上也很多大神的文章可以去了解下。

可以，但不推荐 云开发是目前个人开发者在开发小程序的时候，用的比较多的后端云解决方案。随着用户越来越多，内容越来越多，智能推荐功能功能的需求就会越来越大。 这时，就会有人想问，有没有一个方式，让我可以在云开发里开发一个推荐引擎呢？ 答案是肯定的，云开发是一个标准的 Node.js 环境，只要你可以在 Node.js 中实现一套推荐系统，那么你就可以在云开发中使用这套推荐系统。 实际上，开源社区也的确提供了这样的 Node.js 方案，就是 likely 项目：Likely 项目是一个基于 Node.js 的推荐系统，有兴趣的可以去 Github 上看看。不过这个项目的代码已经 5 年没有更新了，推荐的有效性有待考量。 [图片] 在实际的生产环境中，我更推荐你使用来自云服务商的推荐系统，原因是他的系统可以提供更多的推荐因子，从而提升推荐的准确度；云服务商的服务器自带的弹性，也可以让你的服务在高度弹性的同时，享受高性能的推荐系统。 这里推荐几个服务(排名不分先后）： 腾讯云智能推荐服务：https://cloud.tencent.com/product/ir 百度智能推荐服务：https://cloud.baidu.com/product/brs.html 阿里云智能推荐服务：https://data.aliyun.com/product/re 扫描下方二维码，关注我的个人微信公众号，获取每日微信开发知识 [图片]

由于小程序内部禁用了eval、Function导致在一些场景下无法动态执行脚本，小程序又只支持JavaScript开发，如果想要在在前端动态执行脚本就得实现对于的脚本解释器。 eval5是完全基于JavaScript编写的JavaScript解释器，支持ECMA5语法 项目地址：https://github.com/bplok20010/eval5 实现原理： 使用acorn或esprima编译器对JavaScript代码进行编译并得到抽象语法树(AST)用JavaScript解析语法树并得到计算结果例如：1+1的解析 一、使用acorn编译后得到的语法树，语法树由不同的节点组成各个节点的type代表着不同的语句或表达式类型： {     "type": "Program",     "body": [         {             "type": "ExpressionStatement",             "expression": {                 "type": "BinaryExpression",                 "operator": "+",                 "left": {                     "type": "Literal",                     "value": 1,                     "raw": "1"                 },                 "right": {                     "type": "Literal",                     "value": 1,                     "raw": "1"                 }             }         }     ],     "sourceType": "script" } 二、得到语法树后，我们可以根据不同的节点类型实现不同的处理函数，例如： function handleBinaryExpression(node) {     switch( node.operator ) {         case '+':             return node.left.value + node.right.value;         case '-':             return node.left.value - node.right.value;     } } 如何使用 一、使用npm安装： npm install --save eval5 二、使用打包好的eval5.js 使用示例： // npm install --save eval5 import {Function,evaluate} from 'eval5'; //or 'path/eval5.js'  const sum = new Function('a', 'b', 'return a+b'); sum(100,200) evaluate('1+1') eval5基于小程序编写的示例：eval5-wx-demo github地址 [图片]

不知道就我一个还是普遍现象？步入1月，流量主各类型广告收入都跌的厉害啊！ 最厉害的插屏，ecpm相比前几个月，跌了2/3都不止。 你们有这个情况么？

前言 距离1月10日模板消息下架只有2天了，在社区里经常能看到有帖子在问关于怎么记录订阅次数的问题，这里在这里介绍一下自己用的简单方案，仅供参考。 误区一 [图片] 上面这个图大家应该都比较熟悉了，很多人总是误以为勾选“总是保持以上选择，不再询问”，就可以无限发送订阅消息，这个是错误的想法，勾选和不勾选唯一的区别就是每次触发订阅的时候会不会弹授权窗口而已。 误区二 订阅消息不能通过bindsubmit的方式触发，必须通过bindtap的方式触发。 误区三 触发订阅窗口后，不管用户点击了允许还是取消，都会进入订阅消息的success回调中，所以通过这个来判断用户是否订阅是错误的。 订阅次数的维护 先看下官方的文档： [图片] 那么我们该如何使用呢？ 我们通过 wx.requestSubscribeMessage 接口发送的时候是知道需要让用户订阅哪几个模板的，就是 tmplIds 这个参数填的数组。那么根据官方文档的回调内容，我们就可以直接在success内去获取对应的key所返回的状态。把获取到的状态分别存入自己的数据库里。发送的时候去数据库里查询需要发送的模板并且状态为accept的去发送，如果发送成功则删除一条记录（因为没有过期一说，所以随便删除哪一条记录都不影响）。 参考代码 [图片] 查询模板订阅状态 需要基础库大等于2.10.0才支持。 wx.getSetting({ withSubscriptions: true, success (res) { console.log(res) } }) 官方文档 补充 如果用户选择了不再接收消息会清空之前的订阅次数，但是这个不会主动告诉开发者，所以发送订阅消息失败后，需要根据返回内容自行清空记录，重新计算。 相关文章 「笔记」订阅消息-订阅次数维护（2020年3月更新改动） 「笔记」订阅消息体验踩坑

网络请求结束后,7.0.10以下版本loading框消失,只有7.0.10loading不消失

所有安卓系统的wx.showLoading的调用在请求的响应中使用wx.hideLoading都无法隐藏，最近才出现的，此API调用数量庞大，望腾讯即时解决此问题，以免影响所有线上小程序在android系统上的使用。

社区可能有其他的方案了，但是再分享下吧，给有需要的童鞋。 效果图： [图片] 额，这个视频转GIF因为社区上传不了大图，所以剪了一部分，具体的效果还是直接工具打开代码片段预览吧～ 第一步：你的页面JSON引入该组件： [代码]{ "usingComponents": { "city-picker": "/components/cityPicker/index" } } [代码] 第二步：你的页面WXML引入该组件 [代码]<city-picker visible="{{visible}}" column="2" bind:close="handleClick" bind:confirm="handleConfirm" /> [代码] 第三步：你的页面JS调用 [代码]// 显示/隐藏picker选择器 handleClick() { this.setData( visible: !this.data.visible }) }, // 用户选择城市后 点击确定的返回值 handleConfirm(e) { const { detail: { provinceName = '', provinceId = '', cityName, cityId='', areaName = '', areaId = '' } = {} } = e this.setData({ cityId, cityName, areaId, areaName, provinceId, provinceName }) } [代码] 组件属性 属性 默认值 描述 visible false 是否显示picker选择器 column 3 显示几列，可选值：1，2，3 values [0, 0, 0] 必填，默认回填的省市区下标，可选择具体省市区后查看AppData的regionValue字段 close function 点击关闭picker弹窗 confirm function 点击选择器的确定返回值 confirm: 属性 默认值 描述 provinceName 北京市 省份名称 provinceId 110000 省份ID cityName 市辖区 城市名称 cityId 110100 城市ID areaName 东城区 区域名称 areaId 110000 区域Id 至于怎么获取你想默认城市的下标，可以滑动操作下选中省市区后，点击确定后查看appData里的regionValue的值。 以上就是一个自定义数据版本的省市区二级、三级联动啦，老规矩，结尾放代码片段。 https://developers.weixin.qq.com/s/F9k9cTmT7LAz

使用手机验证，华为p10会显示上个页面的内容，小米8，小米6当前页面会被截断然后展示空白，IOS没有这种情况，请官方关注这个问题！！ 下图是手机bug页面，上个页面的背景色为灰色，当前背景色黄色 华为P10 [图片] 小米6，小米8类似 [图片]

[图片]

- 当前 Bug 的表现（可附上截图） - 预期表现 - 复现路径 从小程序上一个页面跳转到下个页面，然后点击输入框，底部会闪现上一个页面的内容 - 提供一个最简复现 Demo

众所周知，个人小程序受限于微信的政策，很多内容或者类目无法去做，对于变现，大家的目光基本也就聚焦在广告变现这一条路上。 随着小程序各种广告的开放，个人小程序的变现之路似乎也越来越明朗。然而，现实的情况却是，月底结算的时候，流量主们看着结算单上的两位数，欲哭无泪。 那么，对于个人小程序，广告变现的路子该如何去走？ 如何才能实现收益最大化？ 如何才能广告月入30k，当上CEO，赢取白富美，走上人生巅峰？ **下面是满满的干货，一定要看到最后一行！** 1. 做什么方向？做什么内容？起什么名字？ 以变现为目的的小程序，名字很重要，一定要和其他热门小程序相似、相近、相仿！ 内容？ 内容从来不是重点，只需要记住一点， 什么火做什么，什么话题热做什么！ 以这个小程序为例： [图片] 看明白了吧，短视频现在多火啊，做他准没错！ 说到这里，有人发现问题了，视频类目明明是个人不允许做的啊，这怎么办？  这个问题待会说。 2. 善用广告 目前可用的广告基本有banner，开屏，激励视频，贴片，这几种广告形式一定要在小程序中运用的淋漓尽致！ 仍以此小程序为例： [图片] [图片] [图片] a. 打开小程序就开屏广告，切换tab就开屏广告，没事滚滚屏也给你来一个，不怕你不点，反正不小心也会点到 b. 视频流里面能放多少个就放多少个，万一不小心点到了呢？ c. 视频的贴片广告一定要加的，不然就浪费了 d. 视频下方的相关视频一定要做，想看可以，先看一下激励视频再说。反正客户群体主要是大爷大妈，有的是时间，不在乎这15秒到30秒。 3. 善用分享     凡是目所能及的地方，一定要加上分享，分享朋友圈这种不仅要加还要做动态效，让用户记得去点。 [图片]  4. 善于召回用户   一定要用好小程序的下发通知功能，收集formid，没事就给用户发个通知什么的，不愁他不回头（至于formid怎么收集，不在本教程讨论范畴之内，自行搜索）。   [图片] 6. 绕审（敲黑板！划重点！） 说了这么多，一定有人要说了，你这小程序类目不对，广告乱搞，怎么可能过审啊？ 重点来了，绕审，这个一定要做。 众所周知，微信的审核是 有人工环节的，只需要在提审期间，让审核人员看到你想让他看到的，不就行了么？ 这个也很简单，审核期间，接口返回的数据做点手脚，页面上加个判断不就是了。 [图片] 看到了吧，审核期间所有视频都变成了图片，点击查看大图而已。 完美解决！！ 好了说了这么多，对于月入30K是不是有点心得了？？？如果有兴趣，继续往下看 -------------------- -------------------- -------------------- 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！

作为个人主体来说小程序允许的类目和组件一直以来都有受到严格的限制。 但是有的小程序为什么可以做到很多常人做不了的功能还是说以下功能个人也是能正常做的？ 举个已上线的小程序作为例子。 一、类目：图片、丽人 类目本身没有问题，是个人允许做的，但是这个类目下的内容却涉及社交和视频。 [图片] 二、提供与类目不符内容 页面不复杂，就一个简单的图文列表，但是全部都是短视频。（空白部分为banner广告，某些原因未显示） [图片] 三、违反流量主规范 官方文档明确说明，单屏内不予许出现多个广告位。 [图片] 四、涉及诱导分享 社区里不少人反馈过因为文案上有“分享到朋友圈”被拒绝审核。 [图片] 五、包含社交内容和用户自行发布内容 评论类容内包含大量的其它交友信息（做了规避处理，点开弹层才能看到）。 [图片] 六、滥用模板消息 平均间隔4小时向用户推送一次 [图片] 七、集中跳转 虽然只有4个，但是吃喝玩乐都有了。（也许并不属于集中跳转） [图片] 八、绕审 经过前两天的观察，在小程序审核期间，该小程序内所有的内容均为图片，点开详情也只能看到图片，无任何广告、视频、评论等内容。 《关于小程序恶意对抗平台规则的违规行为公告》

- 当前 Bug 的表现（可附上截图） live-pusher在横屏模式下显示的内容是竖屏显示的内容。orientation只能解决听众侧的横屏显示的问题，无法解决主播侧的显示问题。使用css里面的rotate旋转也无法解决这个问题。 主播侧的视频图像 [图片] 听众侧的视频图像 [图片] - 预期表现 预期在主播侧能够显示和听众侧一致的图像 - 复现路径 - 提供一个最简复现 Demo

- 需求的场景描述（希望解决的问题） 业务是做视频的，有横屏观看的需求，但是目前好像没有方法可以判断出刘海屏（iphoneX以及各种安卓刘海屏）。微信应该有对live-player做横屏适配，播放器没有铺满手机屏幕，但是cover-view的布局边界还是从紧贴手机屏幕边缘的，而不是播放器。希望能对cover-view做同样处理

横屏 模式 rpx 失效 文字变大，元素间距变大 同样的代码，同一手机，微信客户端 6.7.3 则没有问题 [图片] [图片][图片] [图片] [图片]

华为荣耀10横屏状态下获取的状态栏高度statusBarHeight为0 IDE上其他机型横屏可以获取状态栏高度 https://developers.weixin.qq.com/s/XLQ2dAmi7qam

- 当前 Bug 的表现（可附上截图） - 预期表现 - 复现路径 - 提供一个最简复现 Demo 设置 pageOrientation = landscape live-player 与 live-puhser 的 orientation 值一致，但是各自看到对方的画面就是被旋转了。

在做一个制作表情包的小程序，什么也不说先上菊花码 [图片] 先看一下第一个版本，low到不行，简单的一些制作功能 [图片] 接下来做有个更加人性化的制作功能，接下来就有了  支持图片和文字的移动、旋转、缩放、双指缩放，保存编辑状态并生成预览图 [图片] 其实参考了  https://github.com/goolhanrry/Weapp-Demo-LemonJournal  这位兄弟的，我在基础上加入双指缩放功能， 就在touch事件中判断是否双指操作就可以了 [代码]if[代码] [代码](e.touches.length == 2) {[代码][代码]  [代码][代码]// 隐藏移除按钮[代码][代码]  [代码][代码]this[代码][代码].setData({[代码][代码]    [代码][代码]hideRemove: [代码][代码]true[代码][代码]  [代码][代码]})[代码][代码]  [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码]  [代码][代码]var[代码] [代码]xMove = e.touches[1].clientX - e.touches[0].clientX;[代码][代码]  [代码][代码]var[代码] [代码]yMove = e.touches[1].clientY - e.touches[0].clientY;[代码][代码]  [代码][代码]var[代码] [代码]distance = Math.sqrt(xMove * xMove + yMove * yMove);[代码] [代码]  [代码][代码]that.data.newdistance = distance; [代码][代码]//第二次就可以计算它们的差值了  [代码][代码]  [代码][代码]that.data.diffdistance = that.data.newdistance - that.data.olddistance; [代码][代码]//两次差值[代码][代码]  [代码][代码]that.data.olddistance = that.data.newdistance; [代码][代码]//计算之后更新比例  [代码][代码]  [代码][代码]var[代码] [代码]res_scale = that.data.scale + 0.005 * that.data.diffdistance;[代码] [代码]  [代码][代码]if[代码] [代码](res_scale > 4) { [代码][代码]//放大的最大倍数[代码][代码]    [代码][代码]return[代码][代码];[代码][代码]  [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](res_scale < 1) { [代码][代码]//缩小不能小于当前[代码][代码]    [代码][代码]return[代码][代码];[代码][代码]  [代码][代码]}[代码][代码]  [代码][代码]that.setData({[代码][代码]    [代码][代码]scale: res_scale,[代码][代码]  [代码][代码]})[代码] [代码]} [代码][代码]else[代码] [代码]{[代码] [代码]  [代码][代码]// 拖动组件则所有控件同时移动[代码][代码]  [代码][代码]this[代码][代码].setData({[代码][代码]    [代码][代码]stickerCenterX: [代码][代码]this[代码][代码].data.stickerCenterX + diff_x,[代码][代码]    [代码][代码]stickerCenterY: [代码][代码]this[代码][代码].data.stickerCenterY + diff_y,[代码][代码]    [代码][代码]removeCenterX: [代码][代码]this[代码][代码].data.removeCenterX + diff_x,[代码][代码]    [代码][代码]removeCenterY: [代码][代码]this[代码][代码].data.removeCenterY + diff_y,[代码][代码]    [代码][代码]handleCenterX: [代码][代码]this[代码][代码].data.handleCenterX + diff_x,[代码][代码]    [代码][代码]handleCenterY: [代码][代码]this[代码][代码].data.handleCenterY + diff_y[代码][代码]  [代码][代码]})[代码][代码]}[代码]

- 当前 Bug 的表现（可附上截图） 设备：iPhone Xs 问题：数字文本中含有数字1的文本在ios上的表现和安卓不一致，数字未对齐。通过硬编码，对文本数字中含有数字1的文本添加类名，给其数字增加间距，也不行。 [图片] [图片] - 预期表现 以下为安卓机上表现： 安卓表现正常 [图片] - 复现路径 - 提供一个最简复现 Demo

先回顾一下整个事情的经过。 5月27日，客服系统突然收到大量用户的反馈，说是小程序无法搜索到，从收藏列表也无法打开，提示不再提供服务。 当时吓的哥虎躯一震，第一时间打开mp后台查看情况。 意外的发现了一条站内信： [图片] WTF??? 我这小程序都上线了一年多了，名称混淆误认（小程序名称：皇室小蜜， 皇室战争的一款数据查询、工具性质的小程序）？？？ 这种方式的命名在小程序里面太常见了，有木有？ 幸好，本人在社区尚算活跃，也曾有幸获取过社区优秀贡献奖。抱着试试的态度，在社区群中发起了疑问。很快有微信的热心同学帮助答疑，和负责审核的同学进行沟通，确认了这是一起误判、误伤事件。 [图片] 很快，事情得到了解决，小程序可以重新搜索，可以打开正常服务了。 这里我只想表达对微信这种强制下架的一种感慨，对于无违规内容的小程序，仅仅是名字混淆就可以强制下架？ 就连商标混淆，工商局都需要给出一定时间限定整改吧？这样蛮横的强制处理，真的好么？ 看到这里，你以为整个事情结束了么？ 那你天真了！ 惯例分割线分隔一下！！！！ 第二天，打开微信后台，无意发现一个问题： Wtf, 违规记录居然有一条被扣屎盆子的记录？？？ [图片] 看到这个，哥第二次虎躯一震，我艹，这玩意影响很多事情啊。光速打开“小程序”评测，果不其然： [图片] 因为一条莫须有的违规记录，小程序评测综合评定，直接不达标。要知道，自从推出小程序评测以来，从来每个月都是通过的！！！！ ok，急速评测没了，内测资格没了。 抱着忐忑的心理（你没看错，是“忐忑”，在微信爸爸面前你要保持谦逊！），又联系上了群中微信同事。这里首先还是要对群中微信同事表示感谢，起码是本着解决问题的态度在积极协助联系和沟通。 [图片] 然而很伤心，mp后台的违规记录无法删除，至少表明在新功能上线之前无法删除。好吧这个我忍了，等功能上线好了。 那对于评测的影响呢？ [图片] 嗯，似乎还行，只影响了本月的评测，下个月即使我仍然背着这个误判的屎盆子也不影响评测，似乎也能接受。 看到这里，你以为整个事情结束了么？ 那你又天真了！ 惯例分割线再分隔一下！！！！ 几天后，无意打开小程序，查看了一下个人资料， WTFFFFFFFFFFFFFFFFFFF? [图片] 后台给我扣一个莫须有的违规记录我认了，耽误我小程序评测我忍了，这算什么事？直接让用户看到我有一个被你们扣屎盆子莫须有的违规记录？？？ 拜托，处理事情能专业点么？ 再次怀着忐忑和谦逊的心情联系了群中的同事，得到了如下答复 [图片] 好吧，大厂做事情果然有大厂的风格，都是按部就班的，这个我理解，行吧，先这样。 看到这里，你以为整个事情结束了么？ 那你还是太天真了！ 惯例分割线再分隔一下！！！！ 很快，又到了一月一度的小程序评测时间了，打开后台一看，WTFFFFFFFFFFFFFFFFFF， 怎么还是不通过？说好的不影响评测呢？？？ [图片] 已再次怀着忐忑和谦逊的心里在群里寻求帮助，然而得到的结果始终是“跟进中", “有结果答复”。 拜托，已经44天了，你们确实可以再拖一下，反正再过40来天就三个月了，届时，这个屎盆子违规记录也无所谓了，也不会再影响评测了。 然而，我的小程序依然会背着这个屎盆子让用户看，看到我曾经“违规”。 然而他们看不到的是，作为一个开发者的心酸和无数次诚惶诚恐寻求帮助无果的无奈。 以上就是整件事情的经过，拜托审核部门的各位老爷们，拿出点诚意来解决问题，解决点用户的实际问题，不要为了kpi在一些无谓的审核问题上下功夫。自己的错误导致的问题，在任何地方、任何行业难道不是优先处理和解决的么？？ 你们也专业点行不？ 你们拿出点诚意行不？

适用对象 目前更适用于企业内部管理及报单类应用场景 Q no A Q1：您当前是如何实现您的消息推送的？ Q2：您使用模板消息推送是否会遇到： [代码] 1. 需要推送的对象涉及多个场景，需要被提醒多次？ 2. 需要推送的时间点超出操作后7天时间范围？ [代码] Q3: 收集了足够的formId，最终频繁的推送导致客户无法接收到有效信息？ 当然模板消息的推送方式和限制是有问题的么？ 不 没有问题！但是依旧会有一些特殊场景需要突破模板消息的限制。 被动接收： A 提交工单到 B平台 ， B平台安排 C员工处理工单 需及时通知到C 反复提醒： C员工接收到工单， B平台需向A 及时通告处理进度 [已派单 => 已出发 => 已到达 => 已处理 => 待评价 => 已结单 ] 长时间回复： A 所提交工单为特殊工单，需指定于一周后安排上门实施 这种场景下，C未操作平台B的小程序，B很难推送给C ； A只操作一次，B很难推送多条信息 ； 超过有效期 ， B 也很难推送信息给A 。 当然最后您也可以选择收集formId 、 邮件推送、短信提醒的方式。 言归正传 为了在微信小程序下，更好的解决这些问题。我们在小程序内引入了一种新的消息管理方式。通过集中的消息管理让用户自主选择信息。用户可以选择强提醒（app推送，邮件推送，微信推送，立即接收）、弱提醒（消息收取但不提醒，感兴趣再查看）、不提醒（不接收任何消息） [图片] 猝不及防的丢个菊花码给你 是他是他 就是他 干脆再甩个 github吧 强势插入的说明 app为Bark，目前仅支持ios 。是由 Finb 开发并开源的一款软件 Bark是什么？ Bark is an iOS App which allows you to push customed notifications to your iPhone 客户端 https://github.com/Finb/Bark 服务器端 https://github.com/Finb/go-tools AppStore https://itunes.apple.com/cn/app/bark-customed-notifications/id1403753865 暂无android端软件，为更好体验。正在寻求接入一款同类型的android端推送类软件。如果有知道的朋友也可以留言提供。谢谢 PS：目前已支持app推送、邮件推送、微信推送、静默推送等方式。可以无需下载app即可体验 流程演示 下面给个Gif 感受一下， 第三方小程序通过授权接入，主动向授权成功用户推送消息的流程。 整个授权流程还是比较简单的。 [图片] 说明：最后的推送是由申请授权的第三方小程序主动触发的，大家可以搜索“Hacker密码”来体验这一功能。 如何接入 免费接入使用，不收取任何费用。鼓励个人开发者接入 1. 接入 添加至app.json [代码] "navigateToMiniProgramAppIdList":["wx74db71d8a9e3b699"] [代码] 微信小程序代码内跳转至授权页 [代码] wx.navigateToMiniProgram({ appId: "wx74db71d8a9e3b699", path: "/pages/bind/app", extraData: { appName: "Bark Helper", // 必填，修改为您当前小程序名称 openid: "" // 必填，修改为当前用户的openid }, envVersion: "release", success(res) { // 打开成功 } }) [代码] 请填写真实有效的openid，以便于调用接口对指定用户发放。虚假的openid将导致信息发送错乱 接收授权结果 用户授权成功或失败后，Bark助手都将返回源小程序 您需要在[代码]App.onLaunch[代码]或[代码]App.onShow[代码]监听来自[代码]appId: 'wx74db71d8a9e3b699'[代码]的[代码]extraData[代码]数据 数据格式为： [代码] "extraData":{ "key":"", //app的授权key "bind":true, //绑定状态 Boolean "errMsg":"" //错误信息 bind为false是会返回 } [代码] 建议在[代码]App.onShow[代码]内监听 [代码] onShow(event){ if(event && event.referrerInfo && event.referrerInfo.appId === 'wx74db71d8a9e3b699'){ const _extraData = ( event && event.referrerInfo && event.referrerInfo.extraData ) || {} if(_extraData.bind){ //绑定成功 console.log(_extraData.key) }else{ //绑定失败 console.log(_extraData.errMsg) } } } [代码] 当bind为true时，表示授权成功 便捷接入 接口文档：github 用户保护 1. 自由选择接收信息的权利 用户可以自由管理已授权的应用，主动屏蔽和解绑已授权的应用，实现消息免打扰和禁收消息 2. 消息推送分离 所有推送不会在微信消息内被提示，只会在小程序内被提示 对于用户想及时了解的应用可以通过app及时获取 消息免打扰开启后，该应用所有推送不会通过用户绑定的Bark进行推送，但消息仍会被小程序接收。需要打开小程序查看 3. 文本过滤 通过微信内容安全[代码]security.msgSecCheck[代码]接口对所有应用推送信息进行过滤 4. 投诉与处罚 用户可在收到推送后，对推送信息发起投诉。投诉成立后，该应用会受到不同程度的处罚（扣分、临时封禁、永久封禁）。 写在最后 1.为什么我们不参照大多数的推送方式去收集formid来共用？ 我们希望在腾讯的生态上更好的弥补小程序的约束和不足，而不是希望通过破坏规则来实现所谓的“捷径” 2.是否一定需要安装app？ app目前只适配“Bark”，后续将适配更多第三方app。如果您无法或不愿意安装app，也可以选择绑定邮箱。以邮件的形式接收信息

小程序现在能自动弹出“用户授权”页面吗 ？有些说之前可以，现在不可以了，跪求各路大神。

求解答：在小程序后台的设置里修改了头像，但前端不同步更新？已经修改过几次，但都是显示原有的旧头像。 [图片] [图片] [图片]

- 当前 Bug 的表现（可附上截图） onShareAppMessage imageUrl只有第一次请求，连续请求怎么操作？ 小程序 同一个商品第一次分享转发时请求php生成图片的数据正常，但是如果这个商品的价格在后台修改了，小程序再次转发分享时，显示的价格不是最新的价格，还是修改前价格，请问怎么处理？谢谢。[图片]

每次线上版本更新，审核过后发布到线上版本，用户打开之后还是以前的旧版本，非得把小程序删掉，在添加才会是新版本。。求教怎么才能做到版本更替，不让用户自己删除再添加啊，有没有什么方式立即生效，

今年开始各路刘海和全面屏手势的手机已经开始霸占市场，全面屏和刘海屏的适配也必须提上日程。 相信大家也一定会有第一次将未适配的小程序放到全面屏或刘海屏手机上的尴尬体验。 尤其是在导航栏设置为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 希望能够帮助到大家，也欢迎交流~

本插件appid为wx42b95b4509175304， 请在小程序后台设置 > 第三方服务 > 插件中搜索此插件appid并使用。小程序 app.json 中使用插件的样例代码： "plugins": { "wui": { "version": "1.0.1", "provider": "wx42b95b4509175304" } }APIwxc-date-picker(日历选择组件）wxc-date-picker【props 】名称        类型描述                                                                                                          [代码]date[代码]      string[说明]：日期选择期中默认选择的时间，如未传，默认选中当前时间(格式: "yyyy-MM-dd DD:HH:mm")                                                  [代码]enableTime[代码]bool [说明]：是否允许选择时间，由于微信默认 time 的 picker 仅支持到分，这里同样，有兴趣的同学可自行拓展至支持时分秒wxc-date-picker【bind 】名称描述[代码]onselectdate[代码][说明]：选择时间后点击确定会触发此事件，在使用此组件的 Page，或者 Component 中响应此事件即可使用可参见 demo 截图  [图片] APIwxc-checkin-picker(酒店/旅馆等行业用于选择入住/离店日期的日历组件）wxc-checkin-picker【props 】名称        类型描述                                                                                                          [代码]limitDays[代码]      number[说明]：可选择的连续入住天数                                                 [代码]limitMonths[代码]      number[说明]：可接几个月内的预订（显示几个月的日历）                                                  [代码]checkInOn[代码]      number[说明]：默认入住日期（时间戳，毫秒数）[代码]checkOutOn[代码]      number[说明]：默认离开日期（时间戳，毫秒数）[代码]checkInText[代码]      string[说明]：入住文字显示（默认“入住”）[代码]checkOutText[代码]string[说明]：入住文字显示（默认“离店”）[代码]checkedColor[代码]string[说明]：选中日期的背景色[代码]checkedTextColor[代码]string[说明]：选中日期的文字颜色wxc-checkin-picker【bind 】名称描述[代码]onconfirm[代码][说明]：选择入住/离店时间后的trigger事件使用可参见 demo 截图  [图片]

我公司的小程序“小拼课“，已经上线几个月了。产品主要形式是免费为商家提供发布线下课程拼团的平台。 关于ios虚拟支付的问题，产品在立项前也进行了大量的前期调研。特别注意到官方对于虚拟支付的定义： [图片] 同时也参考了社区的同类帖子，关于线上付款，线下提供服务、提供课程培训是否被界定为虚拟支付： https://developers.weixin.qq.com/community/develop/doc/000eec47d58ba0f67d474e1c353400?highLine=%25E8%2599%259A%25E6%258B%259F%25E6%2594%25AF%25E4%25BB%2598%2520%25E7%25BA%25BF%25E4%25B8%258B https://developers.weixin.qq.com/community/develop/doc/00040a754c81087dddb77902a51800?highLine=%25E8%2599%259A%25E6%258B%259F%25E6%2594%25AF%25E4%25BB%2598%2520%25E7%25BA%25BF%25E4%25B8%258B 官方也在上述的帖子中明确提出了，线上付款，线下提供实际服务并非虚拟支付。 昨日突然收到微信通知，有用户举报小程序中有虚拟支付行为，结果今天，ios上的支付就彻底不能用了。 这里就很疑惑了？我们的产品肯定不算虚拟支付，为什么会有告警甚至屏蔽支付？ 难道这里又有所谓的双重标准？（你们去搜一下现在线上的各种搞教育的小程序，里面各种虚拟支付多的去了）怎么我们这个严格执行标准的反而被告警？ 请官方再次确认！！ appid： wx6ac1cba5bd71a219