前言 自从iphoneX问世之后，因为iphoneX、iphoneXR和后续全面屏手机设备，因为物理Home键被底部小黑条代替了，这时候很多前端小伙伴在开发的过程都会遇到 “全面屏”和“非全面屏”的兼容性问题，普遍问题就是底部按钮或者选项卡与底部黑线重叠 解释 根据官方解释： 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。 具体区域如图展示 [图片] 适配方案 当前有效的解决方式有几种 使用已知底部小黑条高度34px/68rpx来适配 使用苹果官方推出的css函数env()、constant()适配 使用微信官方API，getSystemInfo()中的safeArea对象进行适配 使用已知底部小黑条高度34px/68rpx来适配 这种方式是根据实践得出，通过物理方式测出iPhone底部的小黑条（Home Indicator）高度是34px，实际在开发者工具选中真机获取到高度也是34px，所以直接根据该值，设置margin-bottom、padding-bottom、height也能实现。同时这样做要有一个前提，需要判断当前机型是需要适配安全区域的机型。 但是这种方案相对来说是不推荐使用的。比较是一个比较古老原始的方案 使用苹果官方推出的css函数env()、constant()适配 这种方案是苹果官方推荐使用env()，constant()来适配，开发者不需要管数值具体是多少。 env和constant是IOS11新增特性，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area-inset-top：安全区域距离顶部边界的距离 safe-area-inset-bottom ：安全距离底部边界的距离 具体用法如下： Tips: constant和env不能调换位置 [代码] padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/ [代码] 其实利用这个能解决大部分的适配场景了，但是有时候开发需要自定义头部信息，这时候就没办法使用css来解决了 使用微信官方API，getSystemInfo()中的safeArea对象进行适配 通过 wx.getSystemInfo获取到各种安全区域信息，解析出具体的设备类型，通过设备类型做宽高自适应，话不多说，直接上代码 代码实现 [代码] const res = wx.getSystemInfoSync() const result = { ...res, bottomSafeHeight: 0, isIphoneX: false, isMi: false, isIphone: false, isIpad: false, isIOS: false, isHeightPhone: false, } const modelmes = result.model const system = result.system // 判断设备型号 if (modelmes.search('iPhone X') != -1 || modelmes.search('iPhone 11') != -1) { result.isIphoneX = true; } if (modelmes.search('MI') != -1) { result.isMi = true; } if (modelmes.search('iPhone') != -1) { result.isIphone = true; } if (modelmes.search('iPad') > -1) { result.isIpad = true; } let screenWidth = result.screenWidth let screenHeight = result.screenHeight // 宽高比自适应 screenWidth = Math.min(screenWidth, screenHeight) screenHeight = Math.max(screenWidth, screenHeight) const ipadDiff = Math.abs(screenHeight / screenWidth - 1.33333) if (ipadDiff < 0.01) { result.isIpad = true } if (result.isIphone || system.indexOf('iOS') > -1) { result.isIOS = true } const myCanvasWidth = (640 / 375) * result.screenWidth const myCanvasHeight = (1000 / 667) * result.screenHeight const scale = myCanvasWidth / myCanvasHeight if (scale < 0.64) { result.isHeightPhone = true } result.navHeight = result.statusBarHeight + 46 result.pageWidth = result.windowWidth result.pageHeight = result.windowHeight - result.navHeight if (!result.isIOS) { result.bottomSafeHeight = 0 } const capsuleInfo = wx.getMenuButtonBoundingClientRect() // 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度 const navbarHeight = (capsuleInfo.top - result.statusBarHeight) * 4 + capsuleInfo.height // 写入胶囊数据 result.capsuleInfo = capsuleInfo; // 安全区域 const safeArea = result.safeArea // 可视区域高度 - 适配横竖屏场景 const screenHeight = Math.max(result.screenHeight, result.screenWidth) const height = Math.max(safeArea.height, safeArea.width) // 状态栏高度 const statusBarHeight = result.statusBarHeight // 获取底部安全区域高度（全面屏手机） if (safeArea && height && screenHeight) { result.bottomSafeHeight = screenHeight - height - statusBarHeight if (result.bottomSafeHeight < 0) { result.bottomSafeHeight = 0 } } // 设置header高度 result.headerHeight = statusBarHeight + navbarHeight // 导航栏高度 result.navbarHeight = navbarHeight [代码]

[图片] 2023 年国庆节就要到了，有粉丝问到今年是否可以出一款国庆头像生成小程序。 于是想到用微信新渲染引擎 skyline的新 API：Snapshot截图能力来完成 文档：https://developers.weixin.qq.com/miniprogram/dev/api/skyline/Snapshot.html [图片] 完成后，发现真的非常丝滑，它的原理就是先用<snapshot id="target">...</snapshot>将需要截图的区域包括起来，然后定义一个 ID， 接下来在脚本里通过createSelectorQuery()获取。 this.createSelectorQuery().select("#target") .node().exec(res => { const node = res[0].node node.takeSnapshot({ // type: 'file' 且 format: 'png' 时，可直接导出成临时文件 type: 'arraybuffer', format: 'png', success: (res) => { const f = `${wx.env.USER_DATA_PATH}/hello.png` const fs = wx.getFileSystemManager(); fs.writeFileSync(f, res.data, 'binary') 。。 }, fail(res) { console.log("takeSnapshot fail:", res) } }) }) 比比小程序对选择器进行了封装，可搜索核心代码进行学习（全部代码见源码）： getSelectorNodeInfo('#target').then((res) => { console.log('res', res) const node = res[0].node node.takeSnapshot({ type: 'arraybuffer', format: 'png', success: (res:any) => { const savePath = `${wx.env.USER_DATA_PATH}/hello.png` const fs = wx.getFileSystemManager(); fs.writeFileSync(savePath, res.data, 'binary'); //图片保存至本地 wx.showShareImageMenu({ //唤起分享图片的界面 path: savePath }) }, fail(res) { } }) }) 在此项目中也可以借鉴一下微信隐私弹窗的交互 [图片] [图片] 因为此项目仅用了1个小时完成，实在是没有太多的难点，主要是让大家对新的渲染引擎有一个全新的认识。 项目对skyline和webView都做了布局兼容，对于新手学习skyline是个不错的demo。 也可以看看我用 skyline搭建的第一个小程序： 比比轻壁纸：https://developers.weixin.qq.com/community/minihome/article/doc/0004ce2acf8020ac32af1ed5f51813 ----- 附上源码（uniapp+vue3+ts）和 demo: https://github.com/shiheme/skyline-wx-avatar https://gitee.com/h5gallery/skyline-wx-avatar [图片] 喜欢的给个star、点赞、留个评论，谢谢。 喜欢小程序开发的也可以加我微信或者关注我的公众号（github/gitee里扫码）一起学习成长。

为了进一步提升小程序的渲染性能和体验，我们推出了一套新渲染引擎 Skyline，现在，跟随着基础库 3.0.0 发布 Skyline 正式版。 我们知道，小程序一直用 WebView 来渲染界面，因其有不错的兼容性和丰富的特性，且各大厂商也在不断优化 Web 的渲染性能，但 Web 体系相比于原生开发，在性能上仍然有较大差距，并且特性上发展缓慢，使得小程序很难做出类原生的体验。因此，我们开发了一套新渲染引擎 Skyline，旨在替代 WebView 作为小程序的渲染层，以提供更优秀的渲染性能和诸多增强特性，让小程序能达到原生的体验。 以下为你全方位介绍 Skyline 的特点。 提供更好的性能 在渲染流程上，WebView 因其需要向后兼容，积累了较多历史包袱，加之整体设计目标不同，使其渲染流水线更加冗长复杂，而 Skyline 则更为精简，同时只保留更现代的 CSS 特性。在此基础上，我们还进一步实现了很多优化点： 单线程版本组件框架。Skyline 下默认启用了新版本的组件框架 glass-easel，该版本适应了 Skyline 的单线程模型，使得建树流程的耗时有效降低（优化 30%-40%），同时 setData 调用也不再有通信开销。 组件下沉。我们将部分内置组件（如 scroll-view、swiper、picker-view 等）直接在底层实现，以追求更流畅的交互体验。此外，我们也将常用的内置组件（view、text、image）从 JS 下沉到原生实现，相当于原生 DOM 节点，有效降低了创建组件的开销（优化 30%）。 长列表按需渲染。长列表是一个常用的但又经常遇到性能瓶颈的场景，Skyline 对其做了一些优化，使 scroll-view 组件只渲染在屏节点（用法上有一定的约束），并且增加 lazy mount 机制优化首次渲染长列表的性能，后续我们也计划在组件框架层面进一步支持 scroll-view 的可回收机制，以更大程度降低创建节点的开销。 WXSS 预编译。同 WebView 传输 WXSS 文本不同，Skyline 在后台构建小程序代码包时会将 WXSS 预编译为二进制文件，在运行时直接读取二进制文件获得样式表结构，避免了运行时解析的开销（预编译较运行时解析快 5 倍以上）。 样式计算更快。Skyline 通过精简 WXSS 特性大幅简化了样式计算的流程。同时 Skyline 与小程序框架结合也更为紧密，例如： Skyline 结合组件系统实现了 WXSS 样式隔离、基于 wx:for 实现了节点样式共享（相比于 WebView 推测式样式共享更为精确、高效）。 降低内存占用。在 WebView 渲染模式下，一个小程序页面对应一个 WebView 实例，并且每个页面会重复注入一些公共资源。而 Skyline 只有 AppService 线程，且多个 Skyline 页面会运行在同一个渲染引擎实例下，因此页面占用内存能够降低很多，还能做到更细粒度的页面间资源共享（如全局样式、公共代码、缓存资源等）。总体上，由于 Skyline 在渲染流程上更加可控，我们能让小程序的特性尽可能融合进渲染流程中完成，还有很多在细节上的优化（比如对 rpx 的处理、image mode=widthFix 的处理等，都是融入渲染流程中，而避免在 JS 做太多额外的计算）就不再一一介绍。另外，我们也在持续优化中，Skyline 会是之后小程序性能优化的重点。 至于目前整体的性能情况，我们从已上线的小程序数据观测到（基础库 3.0.0 glass-easel 带来的优化暂未体现），启动耗时方面，即点击到完全渲染（LCP）的耗时，WebView 对比 Skyline 为 2492ms vs 2052ms，减少 17.6%；渲染阶段耗时方面，即框架建树到完全渲染（LCP）的耗时，WebView 对比 Skyline 为 626ms vs 312ms，减少 50%。 根除旧有架构的问题 在基于 Web 体系的架构下，小程序的部分基础体验会受限于 WebView 提供的能力（特别是 iOS WKWebView 限制更大一些），使得一些技术方案无法做得很完美，留下一些潜在的问题。 原生组件同层渲染更稳定。iOS 下原生组件同层渲染的原理先前有介绍过，本质上是在 WKWebView 黑盒下一种取巧的实现方式，并不能完美融合到 WKWebView 的渲染流程，因此很容易在一些特殊的样式发生变化后，同层渲染会失效，而在 Skyline 下可以很好地融合到渲染流程中，因此会更稳定。 无需页面恢复机制。iOS 下 WKWebView 会受系统的管理，当内存紧张时，系统就会将不在屏的 WKWebView 回收，会使得小程序除前台以外的页面丢失，虽然在页面返回时，我们对页面做了恢复，但页面的状态并不能 100% 还原，而在 Skyline 下则不再有该问题。 无页面栈层数限制。由于 WebView 的内存占用较大，页面层级最多有 10 层，而 Skyline 在内存方面更有优势，因此在连续 Skyline 页面跳转（复用同一引擎实例）的情况下，不再有该限制。 全新的交互动画体系 我们发现，要达到类原生的体验，渲染性能与交互动画缺一不可，渲染性能能让页面更快渲染出来，而交互动画能让浏览页面的体验更佳。但在 Web 体系下，难以做到像素级可控，交互动画衔接不顺畅，究其原因，在于缺失了一些重要的能力，为此，我们提供一套全新的交互动画能力。 Worklet 动画机制。在原来双线程的架构下，若要对界面元素做逐帧动画是需要频繁在逻辑层和渲染层之间通信的，这会带来较大的延迟，动画也就不会流畅。而 Worklet 动画正是为了解决这类问题而诞生的，其运行机制与 WXS 类似，但比 WXS 更靠近渲染流程而性能更好，而且支持的特性更多，可扩展性更强，这个是 Skyline 交互动画体系的基础。 手势系统。在原生的交互动画里，手势识别与协商是一个很重要的特性，而这块在 Web 体系是缺失的，因此 Skyline 下补全手势系统相关特性，包括常用手势的识别，如缩放、拖动、双击等，还有很重要的手势协商机制，在遇到手势冲突（常见于滚动容器下）时决定让哪个手势生效，以实现更顺畅的动画衔接。 自定义路由与共享元素。页面间的自定义转场动画，在原生应用里也是一个很常见的交互动画。在原来的小程序架构下，每个页面都是独立的 WebView 渲染，互相隔离，其跨页能力是基本不具备的。因此，Skyline 提供了一套自定义路由机制，能实现市面上大多数页面转场动画，同时也提供了共享元素机制，能很方便地做到同一元素在页面间飞跃的效果。此外，对内置组件的扩展也是重要一环，特别是 scroll-view 组件，我们优化了下拉刷新的体验，并且实现“下拉二楼”的交互，也添加很多控制能力，这都是些在 Web 下很难做到又非常重要的特性。总之，这套全新的交互动画体系是 Skyline 能实现类原生交互体验的关键。 释放更多高级能力 除了上面提到的交互动画能力外，Skyline 所能释放的能力还远不止于此，借助 Skyline 的特点，我们还提供以下新的组件 grid-view 瀑布流组件。瀑布流是一种常用的列表布局方式，得益于 Skyline 在布局过程中的可控性，我们直接在底层实现并提供出来，渲染性能要比 WebView 更优。 snapshot 截图组件。大多数小程序都会基于 canvas 实现自定义分享图的功能，但分享图的布局较复杂时，canvas 的方案实现成本会更大，而 Skyline 是具备对 WXML 子树截图的能力的，因此我们直接封装后开放出来，这样能复用更完善的 WXSS 能力，极大降低开发成本。除了新增的组件，还有不少是原有内置组件扩展的小特性，这里就不一一介绍，可 查看文档 或 更新日志。未来，我们还会持续在 Skyline 上开放更多高级功能，如全局跨页面组件，scroll-view 列表节点 builder 模块支持节点可回收等，更多可查看 文档特性状态 一栏，同时，也欢迎开发者在社区给我们提议。 至此，Skyline 的主要特点已基本介绍完毕，更完整的介绍、用法、迁移指引、注意点等等请查阅 文档。建议开发者现在就使用起来，尽早享受到 Skyline 带来的优化和丰富的特性，如果开发中遇到问题，可在开发者社区发贴反馈，我们也会邀请加入沟通交流群。

在小程序中生成海报是一种非常有效的推广方式 用户可以使用小程序的过程中生成小程序海报并分享给他人 通过海报的形式，用户可以直观地了解产品或服务的特点和优势 [图片] 常见绘制海报方式  目前，小程序海报有两种常见的实现方式： · canvas 绘制海报 · 服务端绘制海报 这两种方式各有千秋   canvas 绘制海报使用 canvas 绘制海报主要有以下几个步骤   1、创建 [代码]canvasContext[代码] 2、获取网络图片的本地路径 3、绘制图片、文字等到 [代码]canvas[代码] 4、调用 [代码]wx.canvasToTempFilePath[代码] 导出图片   尽管 canvas 绘制功能强大，但实际使用中，这些操作看似简单，但调试起来却比较麻烦 而且面对一些复杂的排版时，使用 canvas 绘制相较于使用 CSS 绘制来说困难许多 除此之外，canvas 的宽高有最大限制，超出限制则会绘制空白 服务端绘制  小程序也可以通过调用服务端接口，将需要生成海报的数据传递给服务端， 由服务端使用 Canvas API 等第三方库来生成图片。 然而，这种绘制方式需要走网络请求，如果量大会给服务器带来一定的成本压力。 此外，对于复杂排版的实现，使用 Canvas 绘制也有一定的难度。   尽管小程序海报虽然好用，但是当遇到要求比较高的设计稿需要还原海报时，对小程序开发者来说是一个十分让人头疼的问题   考虑到海报在小程序中使用的广泛性，我们把开发者的烦恼交给官方来处理～ 小程序官方推出了 [代码]snapshot[代码] 组件，可以直接将小程序 wxml 导出图片。 snapshot 生成海报 当使用 canvas 或 服务端绘制海报遇到复杂排版时，如 圆角、百分比、自定义字体 等等，实现比较困难。 但是使用 wxml 实现却很简单 👇 下面的例子我们使用 wxml 实现海报 <view class="snapshot-box"> <view class="poster-container"> <view class="poster-header"> <image /> ... </view> <view class="description"> ... </view> <view class="footer"> ... </view> </view> </view> [图片] 接着，我们就可以导出海报啦，使用非常简单：   1、用 [代码]snapshot[代码] 组件包裹海报的 wxml 2、调用 [代码]takeSnapshot[代码] 获取图片数据 3、调用 [代码]fs.writeFileSync[代码] 将海报数据写入本地文件 4、调用 [代码]wx.saveImageToPhotosAlbum[代码] 将海报保存到本地 <snapshot id="view">   <!-- 这里是要海报的 wxml --> </snapshot> <button bindtap="tap">保存海报</button> tap() {   this.createSelectorQuery().select("#view")     .node().exec(res => {       const node = res[0].node              // 保存海报       node.takeSnapshot({         type: 'arraybuffer',         format: 'png',         success: (res) => {           const f = `${wx.env.USER_DATA_PATH}/hello.png`           const fs = wx.getFileSystemManager();                      // 将海报数据写入本地文件           fs.writeFileSync(f, res.data, 'binary')           this.setData({             img: f           })                      // 把海报图片保存到本地           wx.saveImageToPhotosAlbum({             filePath: f           })         }       })     }) } 最后我们来看看使用 [代码]snapshot[代码] 组件生成海报的效果吧～ [图片] 除了普通尺寸分享海报之外，对于 canvas 无法搞定的超长海报，[代码]snapshot[代码] 后续也会支持超长海报的导出～ [图片] 你的小程序也有海报生成需求吗？ 赶紧 mark 下这个 代码片段 来接入使用吧～ 

下拉二楼是一种常见的交互设计，可以为应用中的内容展示提供更多的可能性。 通过下拉操作，开发者可以在二楼展示更丰富、更多样化的内容，从而增加用户的点击量和留存率，例如宣传视频、精选商品、走心故事等等。 在小程序中，下拉二楼一直是一种难以实现的交互设计，即使部分小程序实现了，但效果和性能都很差。 为了丰富小程序的内容展示，提高用户的使用体验，小程序官方近期推出了下拉二楼的能力，方便小程序开发者使用。 效果展示 让我们来看看小程序 scroll-view 实现下拉效果的效果～ [图片] 实现步骤 接下来，我们来看下如何使用 scroll-view 实现下拉二楼 1、配置下拉相关属性 scroll-view 新增了以下接口供开发者配置下拉二楼的能力，开发者可以根据业务需要配置相关的属性 属性 说明 refresher-two-level-enabled 开启下拉二级能力，配置开启需同时配置 refresher-two-level-triggered 设置打开/关闭二级 refresher-two-level-threshold 下拉二级阈值 refresher-two-level-close-threshold 滑动返回时关闭二级的阈值 refresher-two-level-scroll-enabled 处于二级状态时是否可滑动 refresher-ballistic-refresh-enabled 惯性滚动是否触发下拉刷新 refresher-two-level-pinned 即将打开二级时否定住 [代码]<scroll-view type="list" scroll-y // 开启下拉刷新（下拉二级必须开启下拉刷新） refresher-enabled="{{true}}" // 开启下拉二级能力 refresher-two-level-enabled="{{true}}" // 处于二级状态是否可滑动 refresher-two-level-scroll-enabled="{{true}}" > ... </scroll-view> [代码] 2、实现二楼内容 配置完下拉二楼属性之后，接着就是将我们的二楼实现在 scroll-view 中。 在 scroll-view 放置一个子节点，声明 slot=“refresher”，该节点中的内容即为下拉二楼的内容。 [代码]<scroll-view ... > <view slot="refresher"> 这里是二楼的内容 </view> </scroll-view> [代码] 3、根据下拉状态回调进行个性化处理 接着我们需要根据业务小程序自身的诉求，根据下拉状态的回调进行个性化的处理，例如：下来完成跳转页面等。 在 scroll-view 绑定 bind:refresherstatuschange 监听下拉状态，下拉状态有以下几种 属性 说明 Idle 空闲 CanRefresh 超过下拉刷新阈值 Refreshing 下拉刷新 Completed 下拉刷新完成 Failed 下拉刷新失败 CanTwoLevel 超过下拉二级阈值 TwoLevelOpening 开始打开二级 TwoLeveling 打开二级 TwoLevelClosing 开始关闭二级 [代码]<scroll-view bind:refresherstatuschange="onStatusChange" ... > <view slot="refresher"></view> ... </scroll-view> // .js onStatusChange(e) { const status: RefreshStatus = e.detail.status if (status === RefreshStatus.TwoLeveling) { const that = this // 当打开二级之后，跳转到新的页面 wx.navigateTo({ url: '../goods/index', events: { nextPageRouteDone: function(data) { // 新页面打开之后，关闭下拉二楼 that.scrollContext.closeTwoLevel({ duration: 1 }) } } }) } } [代码] 我们来演示一下松手立即跳转（图左）、完全打开二楼后跳转（图右） [图片] 丰富小程序展示内容和形式，欢迎大家使用小程序下拉二楼，为小程序的内容展示提供更多的可能性和创意发挥的空间。 通过下拉二楼，可以展示更丰富、更多样化的内容，也为小程序的发展带来了更多的机会和挑战～ 赶紧 mark 下这个 代码片段 来接入使用吧～

随着小程序生态的发展，越来越多小程序开发者会通过官方接口来给用户提供便捷的服务。如何在提供良好的体验时又能保障用户合法权益，如何正确的进行相关接口准入申请？本文将会从以下方面进行详细说明。 一、可通过相应接口准入申请的小程序 对象：自身已有地理位置相关使用场景或需地理位置相关场景完善服务内容的小程序 申请wx.getLocation接口参考案例1）含有交通服务类目，同时含有代驾服务、租车网点查询服务、查询附近车辆服务、城市共享交通服务等 [图片] [图片] 2）含有餐饮-点餐平台、餐饮-外卖平台类目、餐饮-餐饮服务场所/餐饮服务管理企业，并涉及实际送餐场景 [图片] [图片] 3）含有工具-信息查询、工具-办公、工具-设备管理类目，并涉及与地理位置相关的打卡服务业务，如智能门禁、智能穿戴设备等 [图片] 4）含有汽车服务-维修保养、汽车服务-汽车用品、汽车服务-汽车经销商/4S店、汽车服务-汽车厂商、汽车服务-汽车预售、汽车服务-二手车类目，涉及提供汽车售卖、维保洗美服务、查找附近的维修点/洗车网点等导航服务 [图片][图片] 5）含有电商平台/商家自营类目，涉及提供售卖商品线下发货、收货服务、线下商超导览、导航服务 [图片] 6）含有金融-银行、金融-非金融机构自营小额贷款/融资担保/商业保理类目，涉及银行小程序提供线下网点预约、基于地理位置取号并现场报到、附近网点导航等服 [图片] 7）含有电商平台/商家自营类目，涉及提供售卖商品非即刻交易线下发货、收货服务，比如线下跑腿收货、社区团购线下自提点收货等服务场景 [图片] [图片] 申请wx.onLocationChange接口参考案例1）含有交通服务类目，同时含有代驾服务、城市共享交通服务等 [图片] 2）含有生活服务类目，同时含有线下跑腿、开锁服务、其他上门作业等实际服务内容 [图片] 3）含有旅游-景区服务、旅游-住宿服务，涉及提供景区导航、导览服务、酒店导航服务 [图片] 二、无法通过相关接口准入申请的小程序 1）开发者因涉及营销活动，希望申请wx.getLocation接口便于帮助用户定位所在位置，但根据服务内容可知当前仅需获取用户所在城市/地区，无需通过wx.getLocation获取详细的经纬度定位，使用wx.getFuzzyLocation、wx.chooseLocation或wx.choosePoi接口实现上述场景 [图片] 2）开发者因涉及提供外卖平台服务，希望申请wx.onLocationchange接口监听用户实时地理位置运动轨迹，但根据服务内容可知当前外卖平台服务仅需要获取用户外卖收货地址，并不展示派送员实时位置，无需通过wx.onLocationchange获取用户的实时运动轨迹，使用wx.getFuzzyLocation、wx.chooseLocation或wx.choosePoi接口实现上述场景 [图片] 3) 开发者因涉及提供新闻资讯服务，希望申请wx.onLocationchange接口监听用户实时地理位置运动轨迹，但小程序内未含有相关使用场景，所以暂时不支持 [图片] 4）开发者因涉及线上商城发货服务，需用户提供收货地址，希望申请wx.getLocation接口获取用户当前详细的实时位置，如果需要获取用户的收货地址可以使用wx.chooseAdress接口一键导入。如果需要省去用户手动填写地址的流程，可以使用wx.chooseLocation或wx.choosePoi让用户自行选择当前地理位置，无需获取用户获取用户当前详细的实时位置。 [图片] 5）房地产、餐饮、商家自营等小程序，希望申请wx.getLocation接口获取用户当前实时位置信息，为用户展示附近、周边门店信息，提供推荐营销服务，且小程序内未提供线下门店导航服务，仅在小程序内为用户提供附近、周边门店信息展示服务，该场景不支持使用wx.getLocation、wx.onLocationchange这类高精度位置接口，建议开发者使用wx.getFuzzylocation、wx.chooseLocation或wx.choosePoi实现上述场景。 [图片] 三、接口准入申请的步骤 1）登录微信公众平台：https://mp.weixin.qq.com，进入小程序后台「首页」，左侧导航栏点击「开发管理」模块 [图片] 2）「开发管理」模块下「接口设置」 [图片] 3）找到需要申请的地理位置接口点击「去开通」进入接口申请页面 [图片] 4）进入接口申请页面后，在接口「申请原因」中详细描述申请接口在小程序内的使用场景，或选择性提供小程序的图片视频或网页辅助审核，最后点击「提交申请」即完成该接口申请 [图片] 5）接口申请审核结果可通过「接口设置」模块的接口状态，或「通知中心」站内信进行查看 [图片] [图片]

就是这张表： Collection: material { _id, _openid, createTime, cat,//分类。比如衣服、帽子 tag,//标签。比如产品号等 fileID,//cloud云存储路径 url,//Cloud.getTempFileURL获取的http路径，云存储权限设置为公有读， type,//img, video, file size, name,//上传前文件名 ext,//文件后缀 } 说明： 1、用一张表保存所有云存储文件的信息； 2、文件上传后，将相关信息保存在集合中。 3、任何地方引用图片src，都是使用表中的url，而不是使用fileID， 解决了以下痛点： 痛点一、云存储里有哪些文件，有哪些垃圾文件？ 痛点二、云存储某文件夹下有哪些文件？怎么删除云存储文件夹？不熟悉cloud base node sdk或者manage sdk的同学，一定搞不定这个痛点； 痛点三、图片太大，我想用腾讯云图像处理进行压缩裁剪？fileID不支持，只能用url； 痛点四、跨云环境访问图片，不支持fileID，只能用url; 痛点五、在前端引用url，但是删除图片做不到。即通过url，不知道fileID是什么，删除不了云存储文件； 痛点六、前端可以统一管理图片，素材库，而不是在某流程中上传文件后，完全不管理它； 痛点七、可对所有文件图片，分类、贴标签，按openid检索，按type检索，各种姿势检索。 可能还有其他好处，不多介绍。 总之，无论如何，你应该需要这样一张表。

为进一步提升小程序的安全性和用户体验，目前平台对提审的小程序均需进行安全检测，在检测过程中发现仍有许多小程序存在安全漏洞，其中涉及AppSecret密钥泄露漏洞，希望通过以下相关的漏洞介绍、案例分析和修复建议，开发者能更加了解如何对该漏洞进行防御。 一、漏洞介绍 AppSecret是小程序的唯一凭证密钥，也是获取小程序全局唯一后台接口调用凭证（access_token）的重要参数，需要开发者妥善保管至后台服务器中，并严格保密，不向任何第三方等透露。小程序若存在AppSecret密钥泄露漏洞的情况，会造成身份信息仿冒、敏感数据外泄等严重后果，开发者应及时发现该漏洞并快速修复相应问题。 二、漏洞案例 某小程序因为AppSecret泄露，导致攻击者可以通过调用API获取该小程序敏感数据，如接口调用凭证、用户信息、用户使用数据等，造成了极大的安全风险。 通过以下展示我们可以明晰该小程序敏感数据外泄的原因，测试者先对小程序网络请求进行抓包，发现请求响应中包含了appid和AppSecret敏感信息： [图片]  通过上述获取的appid和AppSecret敏感信息，可以利用接口获取到相应的access_token： [图片] [图片] 最后可以实现使用access_token调用该小程序所有后台接口的目的，后台服务端接口已涵盖数据、运维、消息等多方面场景能力。 [图片] 下面我们再具体举几个利用access_token调用小程序后台接口的例子： 1.获取小程序用户评论 [图片] 2.获取小程序用户访问数据 [图片] 3.冒用小程序身份给用户发送消息 [图片] [图片] AppSecret密钥泄露漏洞其他的危害包括但不限于：冒用小程序身份给用户发送客服消息/模板消息、获取小程序session_key（用于解密微信侧提供的用户敏感数据）、获取小程序运维信息、日志等敏感信息、更改小程序相关的配置等。 三、漏洞修复 若小程序存在相应的AppSecret密钥泄露漏洞问题，请开发者尽快根据以下修复指引进行调整，以便消除风险： 1.后端API接口请勿把AppSecret敏感信息返回给前端（包括前端请求或小程序代码内传输、记录AppSecret）； 2.立即登录小程序管理后台，在【开发-开发管理-开发设置】中对AppSecret进行重置。由于Appsecret存在历史泄露且仍然有效，务必进行重置才可消除风险，以免被攻击者恶意利用，请尽快按指引进行修复； 3.对AppSecret进行重置后，请及时修改后台代码，以免无法使用微信API [图片] 其他常见问题 Q1: 小程序提审不通过，显示小程序AppSecret存在历史泄露且仍然有效，是否需要重置AppSecret？ A1: 需要，请重置AppSecret后再提审，若审核通过，说明该问题已消除，若审核不通过，说明仍存在明文的AppSecret，需进一步排查并去除AppSecret字段及其对应值。 Q2: 重置小程序AppSecret会影响到线上小程序吗？ A2: auth.getAccessToken需要使用AppSecret进行调用入参，重置AppSecret后，如果用新的AppSecret去获取access_token,那么旧的access_token会在5分钟内失效，如果未使用新的AppSecret，旧的access_token会在两小时内失效，故即使重置AppSecret，access_token仍有一定的缓冲期，可及时修改后台代码，不会对线上小程序造成影响。 相关文章 安全课堂｜关于小程序session_key泄露漏洞安全课堂｜关于小程序云AK/SK泄露漏洞  如有其他相关疑问，欢迎随时参与官方社区讨论。

为进一步提升小程序的安全性和用户体验，目前平台对提审的小程序均需进行安全检测，在检测过程中发现仍有许多小程序存在安全漏洞，其中涉及session_key泄露漏洞，希望通过以下相关的漏洞介绍、案例分析和修复建议，开发者能更加了解如何对该漏洞进行防御。 一、漏洞介绍 为了保证数据安全，微信会对用户数据进行加密传输处理，所以小程序在获取微信侧提供的用户数据（如手机号）时，就需要进行相应的解密，这就会涉及到session_key，具体流程可参考开放数据校验与解密开发文档。 session_key指的是会话密钥，可以简单理解为微信开放数据AES加密的密钥，它是微信服务器给开发者服务器颁发的身份凭证，这个数据正常来说是不能通过任何方式泄露出去的。小程序若存在session_key泄露漏洞的情况，则代表微信侧传递的用户数据有被泄露、篡改等风险，开发者应及时发现该漏洞并快速修复相应问题。 [图片] 二、漏洞案例 某小程序因为session_key泄露，导致该小程序可以使用任意手机号进行登录，造成了极大的安全风险。 我们可以很明显地看到，下列请求中的session_key已经被泄露： [图片] 通过获取该session_key，我们可以结合iv解密出密文： [图片] 只需如下脚本即可进行解密，所以攻击者也可利用同样的信息去篡改用户数据，然后加密后返回给服务器，从而达到使用任意手机号进行登录的目的。 [图片] 三、漏洞修复 通过上述案例，我们了解到session_key泄露会对小程序造成的危害，而导致session_key泄露的原因则可能有以下两种： 1.通过auth.code2Session接口获取用户openid时，返回小程序的数据中包含了session_key字段，以泄露的url：/api/get_openid.php?code=xxxx为例，具体的表现如下图所示： [图片] 查看后端get_openid.php的源码，经排查发现$response 变量包含了session_key字段，开发者应去掉变量中的session_key字段，若需获取openid，应只提取该字段返回小程序即可。 [图片] 2.在解密开放数据时，使用了错误的方式，以获取手机号接口为例，通过事件回调获取微信服务器返回的加密数据（encryptedData和iv）后，将服务端中的session_key传送至小程序前端，直接在前端进行解密： [图片] 这种方式是绝对不可取的，正确的流程应该是将加密数据（encryptedData和iv）传至服务端后，结合服务端中的session_key进行解密获取手机号，然后返回给小程序。另外，目前平台已对获取手机号接口进行了安全升级，建议开发者使用新版本，以增强小程序的安全性。 若小程序存在相应的session_key泄露漏洞问题，请开发者尽快自查并修复漏洞： 请尽快在网络请求中，去除请求和响应中的session_key字段及其对应值，后续也不应该将session_key传到小程序客户端等服务器外的环境，以便消除风险。 其他常见问题 Q1: 如何进行相应的修复，是需要把session_key字段更换个名字就可以了吗？ A1: 不是，更换字段名无法从根本上消除风险，session_key这个字段及对应值不应该传到小程序客户端等服务器外的环境，需去除请求和响应中的所有相关信息，才可对该漏洞问题进行修复。 Q2: 解密开放数据的正确方式是什么？ A2: 以获取手机号接口为例，通过事件回调获取微信服务器返回的加密数据（encryptedData和iv），将加密数据传至服务端后，结合服务端中的session_key进行解密获取手机号，然后返回给小程序。而不应将服务端中的session_key传送至小程序前端，直接在前端进行解密。 相关文章 安全课堂｜关于小程序AppSecret密钥泄露漏洞安全课堂｜关于小程序云AK/SK泄露漏洞 如有其他相关疑问，欢迎随时参与官方社区讨论。

微信支付功能首先必须开启以下几项授权 1.登录微信公众平台>点击功能>点击微信支付 确保已经授权微信商户号 [图片] 2.打开微信小程序开发者功具>点击云开发>点击设置>点击其它设置 确保微信支付配置三项已全部授权才能正常使用退款功能，但不影响支付功能[图片] 微信支付功能建议使用云开发，这样就不需要签名。小程序密钥等等！ 接下来就可以开始微信支付以及其他功能了！ 微信支付功能 wxml: <button bindtap="Buy">立即购买</button> js: // 首先在page({})外层声明随机数 var random=Math.floor((Math.random() * 100000) + 1) var random2=Math.floor((Math.random() * 1000000) + 1) page({ data:{ //在data中赋值一个唯一的订单号 outTradeNo:random+"9527"+new Date().getTime()+random2,//随机生成的订单号 }  // 购买套餐     Buy(e){    //调用云函数         wx.cloud.callFunction({             name: 'buy', //填写云函数名             data:{ //data里的数据用于向云函数后台提交数据                 name:"商品名称", //提交商品名称                 totalFee:"商品的金额"*100, // 提交商品的金额，因为单位是(分)所以要*100确保 金额准确性                 outTradeNo, // 提交订单号，这个是自己生成的订单号，确保唯一性             }                       }).then(res=>{ //成功回调             console.log(res)           const payment = res.result.payment //如果回调成功会抛出一些订单信息           var that = this           wx.requestPayment({ //调用微信支付api接口             ...payment, //这里就是上面拿到的订单信息 注意：这个前面是三个点             success (res) { //程序走到这里就是支付成功了               console.log('支付成功', res)              }, fail (err) { //如果取消支付会走这一步               console.error('支付失败', err)                          }             })           })     }, onLoad(){ this.setData({ //当每次进入页面时可以重置data中的随机数，否则随机数会一直保持一个数，当然为了严谨也可以使用雪花算法确保订单信息的唯一 outTradeNo:random+"9527"+new Date().getTime()+random2,//随机生成的订单号 }) } }) 支付云函数代码const cloud = require('wx-server-sdk') cloud.init({   env: cloud.DYNAMIC_CURRENT_ENV //当前云函数的环境id这个值是默认第一个当然自己也可以定义 }) exports.main = async (event, context) => {   const res = await cloud.cloudPay.unifiedOrder({ //注意这里是微信支付的代码和普通使用云函数调用数据库不一样一定要写     "body" : event.name,//商品名称     "outTradeNo" : event.outTradeNo,//订单编号唯一的自己生成的支付订单号     "spbillCreateIp" : "127.0.0.1", //这里是默认地址一般可以不用动     "subMchId" : "商户号",//商户号 这个是授权支付配置的商户号     "totalFee" : event.totalFee,// 订单金额以分为单位，js中已经*100了就直接调用就可以了     "envId": "你的云函数环境id", //当前云函数的环境id     "functionName": "buy" //当前云函数的名称   })   return res //向前端代码抛出订单信息 }

微信退款功能wxml:  订单退款  js: //退款   refund() {     var tk = "T1999" + new Date().getTime() //这个是退款单号和支付的时候支付单号一样 的都是自己生成的一串数字     wx.cloud.callFunction({ //调用云函数       name: 'refund', //填写云函数名称       data: { //向云函数抛出数据         refund: tk ,//商户退款单号         trade: ”商户订单号“,//商户当时支付的订单号，也就是咱们支付功能给他随机生成的数字，填写在这里         total_fee,//商品的订单金额         refund_fee,//申请商品的退款金额       },       success: res => { //退款成功回调         console.log("获取退款参数成功", res)       },       fail: res => { //退款失败回调         console.log("获取退款参数失败", res)       },     })   }, 退款云函数代码// 云函数代码 //申请退款 const cloud = require('wx-server-sdk') cloud.init({   env: 'user-3g8pqkczf4cfb983' }) exports.main = async (event, context) => {        const res = await cloud.cloudPay.refund({  //这个是退款的函数代码一定要写对     "out_refund_no" : event.refund,//商户退款单号自己随机生成的     "out_trade_no" : event.trade,//商户支付订单号，用户支付时候的订单号     "nonce_str" : ""+new Date().getTime(),//随机字符串这个不用管就这么写     "sub_mch_id" : "1559727331",//子商户号这个是授权支付配置的商户号     "total_fee" : event.total_fee,//商品订单的金额     "refund_fee":event.refund_fee,//申请商品退款的金额     })   return res }

源码 点此领取 技术栈 云开发 CloudBase：云端一体化的 Serverless 后端服务解决方案。Taro：一套遵循 React 语法规范的 多端开发 解决方案开发工具 建议提前安装好 微信开发者工具Node LTS 版本VS Code 编辑器CloudBase VS Code 插件需求分析 只考虑基本的功能： 商品列表与下单：展示商品信息，创建订单订单列表：展示订单列表 资源准备 1. 在微信开发者工具中开通云开发，请选择按量付费 如果你的环境是预付费，请到设置中，将支付方式转换为按量付费 [图片] 2. 安装 CMS 系统 （1）更新到最新的 Nightly 版本工具，在工具顶部 Tab 栏中，点击「更多」-「内容管理」。 [图片] （2）点击开通，勾选同意协议后，点击确定。 [图片] （3）开通内容管理需要填写管理员账号，填写账号后，点击「确定」完成。 [图片] （4）开通拓展需要一定时间，请耐心等待。 （5）完成后，点击「更多」-「内容管理」，即可看到内容管理的入口和相关信息。点击访问地址，即可在弹出的窗口中进行内容管理的相关配置。 [图片] 3. 登录 CMS 系统，创建资源 CloudBase CMS 已经部署在当前环境下的静态网站托管中，访问地址的格式如下：云开发静态托管默认域名/部署路径，例如 https://envid.ap-shanghai.app.tcloudbase.com/tcb-cms/（结尾有 / 符号）。默认域名可以访问控制台查看。 打开 CloudBase CMS 后，你需要先登录，账号密码为安装时设置的管理员账号和密码。 在开始管理内容数据前，我们需要先创建一个项目。CloudBase CMS 使用项目划分不同类的内容，便于区分内容数据用途，进行权限管理。 首先，我们需要点击新建项目下方的创建新项目按钮，创建一个名为小商店，Id 为 shop 的项目。 [图片] 创建完项目后，点击项目卡片，进入项目的管理页面，我们会看到项目的欢迎页面。 [图片] 创建商品类型，管理商品信息 创建一个名称为商品的内容模型，数据库名为 goods，即将商品数据存储到 goods 数据集合中。如果新建内容的时候指定的集合不存在，CloudBase CMS 会自动新建集合。 [图片] 在创建完内容模型后，我们会得到一个空的内容模型。接下来，我们需要为商品添加商品名称，商品图片，价格，库存数量等字段。 为商品添加商品名称属性，因为商品名称通常是比较短的文字，所以我们可以选择单行字符串字段，点击右侧的单行字符串卡片，填写商品名称的字段信息。除了基本的名称，数据库字段名之外，我们还可以为此字段添加其他的限制，如最大长度，限制填写商品名称时的最大长度，创建商品时，是否必需填写商品等。 [图片] 类似的，我们可以创建数字类型的价格字段以及库存数量，图片类型的商品图片字段。在创建图片字段时，考虑到商品的图片可能有多张，我们可以打开允许多个内容按钮，表明可以上传多张图片。 [图片] 创建的 goods 数据库集合的结构如下： [图片] 同上，类似的创建一个名称为订单列表，数据库集合名为 order 的内容模型，来管理订单信息。创建的 order 数据库集合的结构如下： [图片] 添加一个商品 [图片] 创建项目 1、拉取模板 # 安装 taro cli 工具 npm install -g @tarojs/cli@2.2.7 # 拉取模板 git clone https://github.com/TencentCloudBase/cloudbase-minishop.git 使用微信开发者工具导入项目，进入 client 目录，安装依赖： npm i 项目目录 cloud/functions 包含写好的微信支付的两个云函数， pay 和接收支付消息推送的 pay-callback 云函数。使用时需使用微信开发者工具上传这两个云函数。 2、项目目录 . ├── client // 小程序源码 │ ├── config │ └── src │ ├── assets │ ├── components │ └── pages │ ├── index │ └── order-list └── cloud // 云开发相关源码 │ └── functions │ ├── pay │ └── pay-callback ├── cloudbaserc.json // 云开发配置 ├── project.config.json // 小程序配置  微信支付下单流程 1、小程序调用云函数，在云函数中调用统一下单接口，参数中带上接收异步支付结果的云函数名和其所在云环境 Id。 const cloud = require("wx-server-sdk"); const res = await cloud.cloudPay.unifiedOrder({ envId: '', subMchId: '', body: "商品名", totalFee: 100, outTradeNo: '订单号', spbillCreateIp: "127.0.0.1", functionName: "pay-callback" }); // 返回 res.payment 支付结果回调的云函数必须返回如下一个对象，否则会视为回调不成功，云函数会收到重复的支付回调。 { errcode: '', errmsg: '', } 2、统一下单接口返回的成功结果对象中有 payment 字段，该字段即是小程序端发起支付的接口（wx.requestPayment）所需的所有信息。 3、小程序端拿到云函数结果，调用 wx.requestPayemnt 发起支付 wx.requestPayment({ ...payment, success (res) { }, fail (res) { }tt })https://docs.cloudbase.net/ 4、支付完成后，在统一下单接口中配置的云函数将收到支付结果通知。 多端支持 - 跨平台 小程序Web 相关文献 云开发文档 云开发微信支付 支付接口

学习 5 节课程，从 0 至 1 做第一个属于你的小程序，深入浅出了解小程序开发。本系列视频，由腾讯课堂 NEXT 学院、微信学堂联合出品。