在之前的文章中，我们知道了新 scroll-view 可以让小程序的长列表做到丝滑滚动～ 也提到了新 scroll-view 提供了很多新能力 sticky、网格布局、瀑布流布局等，这一篇，我们就来看看这些新能力是怎么使用的～ 新 scroll-view 在原来列表模式（type="list"）的基础上，新增了自定义模式（type="custom"） 在自定义模式下，新增了以下新组件供开发者调用 list-view：列表布局容器sticky-section / sticky-header：吸顶布局容器grid-view：网格布局容器，可实现网格布局、瀑布流布局等sticky布局sticky 布局即在应用中常见的吸顶布局，与 CSS 中的 position: sticky 实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。 常见的使用场景有：通讯录、账单列表、菜单列表等等。 与 position: sticky 不同的是，position: sticky 很难实现列表滚动需要的交错吸顶效果，而 sticky 组件则可以帮忙开发者轻松实现交错吸顶的效果。 sticky 的使用非常简单： 将 scroll-view 切换到 custom 模式采用 sticky-section 作为 scroll-view 的子元素sticky-header 放置吸顶内容list-view 放置列表内容             {{item.name}}               ...       我们来看下采用 sticky 布局做出来的通讯录效果～ [视频] sticky 布局也可以通过给 sticky-section 配置 push-pinned-header 来声明吸顶元素重叠时是否继续上推 像下图输入框和标签列表这种类型，标签列表吸顶时还是希望保留输入框吸顶。 [视频] 网格布局网格布局即将列表切割成格子，每一行的高度固定，常见的视频列表、照片列表等通常都采用网格布局。 在此之前，实现网格布局需要开发者自行实现网格切割，再嵌入到 scroll-view 中。 新 scroll-view 直接提供了 grid-view 组件供开发者使用～ 将 scroll-view 切换到 custom 模式采用 grid-view 类型为 aligned 做为直接子节点grid-view 中直接编写列表                   ...       下面是使用网格布局实现的图片列表效果～ [视频] 瀑布流布局瀑布流布局与网格布局类似，不同的是瀑布流布局中每个格子的高度都可以是不一致的，所以在小程序中实现瀑布流布局就比较复杂了。 开发者需要通过计算格子高度，然后再进行瀑布流拼接，当滚动内容过多时还需要处理节点过多导致内存不足等问题。 grid-view 组件直接支持了瀑布流模式供开发者直接使用，grid-view 组件会根据子元素高度自动布局： 将 scroll-view 切换到 custom 模式采用 grid-view 类型为 masonry 做为直接子节点grid-view 中直接编写列表                   ...       下面是使用瀑布流布局实现的图片列表效果～ [视频] 想要立即体验？现在通过微信开发者工具导入 代码片段，即可体验新版 scroll-view 组件能力～

[图片]

备注说明：接口因为监管原因，2021年11月10日起停止开放。 一、接口说明 城市服务实名校验接口（以下称“本接口”），主要实现的功能是，在用户同意情况下，通过微信城市服务去校验用户（或业务方）输入的实名信息，是否正确且与用户在“开通微信支付”时，预留的实名信息一致。也即，校验输入的信息，是否正确且与微信支付绑卡用户的实名信息一致。 二、使用注意事项（接入必读） 1、本接口暂只支持校验基于大陆身份证 “姓名与身份证开通微信支付”的用户实名信息； 2、由于信息较为敏感，使用此接口校验用户（或业务方）输入的实名信息时，需要在页面前端征得用户的同意。因此调用此接口后，会跳转至微信官方的“用户同意”界面。用户点击同意按钮后方可继续后续调用。 3、请根据开放范围、场景所需及信息校验必要性申请本接口，并请谨慎使用。若后期使用过程中，用户举报较多或被发现在不合理使用，微信有权永久回收该小程序的该接口的权限。 三、接口开放范围及申请方式 3.1、接口开放范围 1、本接口目前为内测邀请开放阶段，免费开放给非个人开发者，且完成了微信认证的小程序（不包含境外主体）。 2、接口的开放的场景及必要性，参考国家法规、政策规定的需要“实名办理”的相关业务。具体的开放主体类目范围如下： 政务（政府和事业单位）公立医疗（含公立医疗机构的互联网医院）公立教育机构交通行业的官方企业或单位（含：航空公司、机场、客运、交通市民卡、铁路、公交、地铁、轮渡）基础运营商合规的保险公司官方快递与邮政（实名校验场景需要与支付相关联）水、电、燃、暖等官方生活缴费机构；如你的小程序主体类目所属范围、支付业务场景等，与上述相符，则可以按照对应方式申请。 3.2、申请方式 请发送邮件至官方邮箱，说明所需的场景及校验必要性，申请开通小程序的该接口的权限。官方邮箱地址：wx_city@tencent.com。邮件内容请参照下述列表： 邮件主题：申请开通“城市服务实名信息校验”接口权限+地区+单位名称 邮件内容： 1、小程序appid或原始id 2、小程序名称 3、小程序使用该接口的场景及必要性描述。 4、其他备注说明（如紧急程度、腾讯公司的对接人等） 申请资料： 1、接口申请表 2、与申请商户名称（商户号主体）完全一致的 信息系统安全等级保护三级证书（简称等保三级证书） 或者 ISO27001证的扫描件 3、签署【数据安全评估应答及承诺文件】，落款应答及承诺人为商户号主体，并盖章 4、签署【合作协议】 附：申请资料中（2）（3）（4）涉及资质，申请主体均需由商户号主体提供、签署；（3）（4），审批时请先提供填写完整的Word文档，待审批完成后再返回盖章。 附件1、微信支付实名校验接口申请表 附件2、数据安全评估应答及承诺文件 附件3、合作协议 邮件申请后，针对符合开放范围及场景必要性的小程序，会提供后续流程指引，因此申请后请留意邮件回复情况。 注意：请根据开放范围、场景所需及信息校验必要性申请本接口，并请谨慎使用。若后期使用过程中，用户举报较多或被发现在不合理使用，微信有权永久回收该小程序的该接口的权限。 四、接口文档 具体的接口文档详情，请点击此处查看详细的接口文档，并参照开发。 备注：如在使用中遇到问题，可通过官方邮箱留言，或社区留言，或评论留言方式反馈。本指引内容不定期更新，敬请留意。

微信小程序，如何调用微信支付实名认证获取身份证号？（类“粤事通”）

用云开发来做一个小程序的功能与实战教程，讲解核心能力如何用云开发实现，例如：用户管理、小程序码、短信应用、分享卡片等。

云调用有些接口属于 AI 服务的范畴，比如借助于人工智能来进行智能裁剪、扫描条码/二维码、图片的高清化等图像处理和识别银行卡、营业执照、驾驶证、身份证、印刷体、驾驶证等 OCR，有了这些接口我们也能在小程序里使用人工智能了。接下来我们以小程序的条码/二维码识别和识别印刷体为例来介绍一下云调用。 13.3.1 图像处理使用开发者工具新建一个云函数，如 scancode，然后在 config.json 里添加 img.scanQRCode 云调用的权限，使用 npm install 安装依赖之后，上传并部署所有文件（此时也会更新权限）。 { "permissions": { "openapi": [ "img.scanQRCode" ] } } 然后再在 index.js 里输入以下代码，注意[代码]cloud.openapi.img.scanQRCode[代码]方法和[代码]img.scanQRCode[代码]权限的对应写法，不然会报 604100 的错误。 const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { try { const result = await cloud.openapi.img.scanQRCode({ imgUrl: "https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/qrcodetest.png", //注意二维码必须是条码/二维码，不能是小程序码 }); return result; } catch (err) { console.log(err); return err; } }; 调用该云函数之后，返回的 result 对象里包含 result 对象，在 codeResults 的 data 里可以得到二维码里包含的内容。 codeResults: [{ data: "使用云开发来开发微信小程序可以免费。。。", pos: {leftTop: {…}, rightTop: {…}, rightBottom: {…}, leftBottom: {…}},typeName: "QR_CODE"}] errCode: 0 errMsg: "openapi.img.scanQRCode:ok" imgSize: {w: 260, h: 260} 13.3.2 OCR 人工智能识别使用开发者工具新建一个云函数，如 ocrprint，然后在 config.json 里添加 ocr.printedText 云调用的权限，使用 npm install 安装依赖之后，上传并部署所有文件（此时也会更新权限）。 { "permissions": { "openapi": [ "ocr.printedText" ] } } 调用该云函数之后，返回的 result 对象里包含 result 对象，在 codeResults 的 data 里可以得到二维码里包含的内容。 const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { try { const result = await cloud.openapi.ocr.printedText({ imgUrl: "https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/ocrprint.png", }); console.log(result); return result; } catch (err) { console.log(err); return err; } }; 调用该云函数之后，返回的 result 对象里包含 result 对象，在的 items 里可以返回图片包含的文字内容。 items: Array(4) 0: {text: "JavaScript入门", pos: {…}} 1: {text: "JavaScript是目前世界上最流行的编程语言之一，它也是小程序开发最重要的基础语言。要做出一个功能复杂的小程序，除了需要掌握JavaScript的基本语", pos: {…}} 2: {text: "法，还要了解如何使用JavaScript来操作小程序(通过API接口)", pos: {…}} 3: {text: "过API接口)。", pos: {…}} 13.3.3 图像处理拓展能力图片是小程序非常重要的元素，尤其是旅游照片、社交图片、电商产品图片、相册类小程序、媒体图文等，图片的加载速度、清晰度、图片的交互、图片效果的处理以及图片加载的 CDN 消耗都是一个不得不需要去关注的问题。而云开发图像处理拓展能力结合云存储则可以非常有效的解决很多问题。 强烈建议所有有图片处理需求的用户都应该安装图像处理拓展能力，这个能力大大弥补和增强了云存储在图片处理能力，尤其是图片按照需求的规格进行缩放可以大大减少 CDN 的消耗以及图片的加载速度以及我们可以按照不同的业务场景使用快速缩略模板，而这一切的操作和云存储的结合都是非常实用且易用的。 1、图像处理能力介绍云开发图像处理能力结合的是腾讯云数据万象的图片解决方案，图像处理提供多种图像处理功能，包含智能裁剪、无损压缩、水印、格式转换等，图像处理拓展能力所包含的功能非常丰富，使用如下图片处理的费用是按量计费的，计费周期为月，10TB 以内免费，超出 10TB，按 0.025 元/GB 来计费，省事而便宜： 缩放：等比缩放、设定目标宽高缩放等多种方式；裁剪：普通裁剪、缩放裁剪、内切圆、人脸智能裁剪；旋转：普通旋转、自适应旋转；格式转换：jpg、bmp、gif、png、webp、yjpeg 格式转换，gif 格式优化，渐进显示功能；质量变换：针对 JPG 和 WEBP 图片进行质量变换；高斯模糊：对图片进行模糊处理；锐化：对图片进行锐化处理；图片水印：提供图片水印处理功能；文字水印：提供实时文字水印处理功能；获取图片基本信息：查询图片基本信息，包括格式、长、宽等；获取图片 EXIF：查询图片 EXIF 信息，如照片的拍摄参数、缩略图等；获取图片主色调：获取图片主色调信息；去除元信息：去除图片元信息，减小图像体积；快速缩略模板：快速实现图片格式转换、缩略、剪裁等功能，生成缩略图；管道操作符：对图片按顺序进行多种处理当我们在腾讯云云开发网页控制台(注意要使用微信公众号的方式登录)添加完图像处理的拓展能力之后，我们可以在腾讯云的数据万象存储桶里看到云开发的云存储，而关于图像处理能力的深入使用，也可以参考腾讯云数据万象的技术文档。在小程序云开发里使用图像处理能力的方法有三种： 图像地址的拼接，只需要在图片的下载地址 url 里拼接一些简单的参数（API 管道操作符），就能够使用到图像处理的能力，非常方便易用，这个不会把图片处理的结果存储到云存储，不会占用云存储的空间；在获取图片基本信息、获取图片 EXIF、获取图片主色调等方面非常方便；在前端（小程序端）做持久化图像处理，支持有结果图输出的处理操作，也就是我们可以把缩放、裁剪、格式转换、质量变换等处理之后的图片存储到云存储方便以后使用；在云函数端做持久化图像处理，支持有结果图输出的处理操作 01图像地址的拼接在了解图像处理能力之前，我们需要先了解一下云存储文件的 fileID、下载地址以及下载地址携带的权限参数 sign（图像处理能力的参数拼接就是基于下载地址的），如下图所示： [图片] 在安装了图像处理拓展能力的情况下，我们可以直接拿云存储的下载地址进行拼接，拼接之后的链接我们既可以在小程序里使用，也可以用于图床，比如原始图片下载地址为： https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049 而相关的图像处理能力的拼接案例如下，具体的操作可以看技术文档，实际的效果，可以复制粘贴链接到浏览器或小程序里体验（换成自己的地址），注意拼接方式就是在下载地址后面加了一个[代码]&imageMogr2/thumbnail/!20p[代码]（注意这里由于已经有了一个 sign 参数，所以拼接时用的是[代码]$[代码]，不能写成[代码]?[代码]，否则不会生效），直接就可以啦，非常易用： //将图片等比例缩小到原来的20% https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049&imageMogr2/thumbnail/!20p 后面为了方便，我们将[代码]https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049[代码]简写为 download_url: //缩放宽度，高度不变，下面案例为宽度为原图50%，高度不变 download_url&imageMogr2/thumbnail/!50px //缩放高度，宽度不变，下面案例为高度为原图50%，宽度不变 download_url&imageMogr2/thumbnail/!x50p //指定目标图片的宽度（单位为px），高度等比压缩，注意下面的是x，不是px，p与x在拼接里代表着不同的意思 download_url&imageMogr2/thumbnail/640x //指定目标图片的高度（单位为px），宽度等比压缩： download_url&imageMogr2/thumbnail/x355 //限定缩略图的宽度和高度的最大值分别为 Width 和 Height，进行等比缩放 download_url&imageMogr2/thumbnail/640x355 //限定缩略图的宽度和高度的最小值分别为 Width 和 Height，进行等比缩放 download_url&imageMogr2/thumbnail/640x355r //忽略原图宽高比例，指定图片宽度为 Width，高度为 Height ，强行缩放图片，可能导致目标图片变形 download_url&imageMogr2/thumbnail/640x355! //等比缩放图片，缩放后的图像，总像素数量不超过 Area download_url&imageMogr2/thumbnail/150000@ //取半径为300，进行内切圆裁剪 download_url&imageMogr2/iradius/300 //取半径为100px，进行圆角裁剪 download_url&imageMogr2/rradius/100 //顺时针旋转90度 download_url&imageMogr2/rotate/90 //将jpg格式的原图片转换为 png 格式 download_url&imageMogr2/format/png //模糊半径取8，sigma 值取5，进行高斯模糊处理 download_url&imageMogr2/blur/8x5 //获取图片的基础信息，返回的是json格式，我们可以使用https请求来查看图片的format格式,width宽度、height高度，size大小，photo_rgb主色调 download_url&imageInfo 2、小程序端持久化图像处理当我们希望把缩放、裁剪、旋转、格式变换等图像处理的结果（也就是处理之后的图片）存储到云存储，这个就叫做持久化图像处理，在安装了图像处理能力之后，我们也可以在小程序端做图像处理。 当用户把原始图片上传到小程序端时，我们需要对该图片进行一定的处理，比如图片过大就对图片进行裁剪缩小；比如图片需要进行一定的高斯模糊、旋转等处理，这些虽然在图像处理之前，也是可以使用 js 来做的，但是小程序端图像处理的效果并没有那么好或者过于复杂，使用图像处理的拓展能力就非常实用了。在小程序端构建图像拓展依赖 首先在开发者工具小程序根目录（一般为 miniprogram)，右键“在终端中打开”，然后在终端里输入以下代码，也就是在小程序端安装图像拓展依赖，安装完时，我们就可以在 miniprogram 文件夹下看到 node_modules： npm install --save @cloudbase/extension-ci-wxmp@latest 然后点击开发者工具工具栏里的工具-构建 npm，构建成功之后，就可以在 miniprogram 文件夹下看到 minprogram_npm 里有@cloubase 文件夹，里面有 extension-ci-wxmp，说明图像拓展依赖就构建完成。 在小程序端进行图像处理 使用开发者工具新建一个 imgprocess 的页面，然后在 imgprocess.wmxl 里输入如下代码，我们新建一个 button 按钮： 处理图片button> 然后再在 imgprocess.js 的 Page()函数的上面（外面）引入图像处理依赖，代码如下： const extCi = require("./../../miniprogram_npm/@cloudbase/extension-ci-wxmp"); 然后再在 imgprocess.js 的 Page()函数的里面写一个 imgprocess 的事件处理函数，点击 button 之后会先执行 readFile()函数，也就是获取图片上传到小程序临时文件的结果（是一个对象），然后再调用 imageProcess()函数，这个函数会对图片进行处理，图片会保存为[代码]tcbdemo.jpg[代码]，而处理之后的图片会保存为 image_process 文件夹下的 tcbdemo.png，相当于保存了两张图片： async imgprocess(){ const readFile = async function() { let res = await new Promise(resolve=>{ wx.chooseImage({ success: function(res) { let filePath = res.tempFilePaths[0] let fm = wx.getFileSystemManager() fm.readFile({ filePath, success(res){ resolve(res) } }) } }) }) return res } let fileResult = await readFile(); //获取图像的临时文件上传结果 const fileContent = fileResult.data //获取上传到临时文件的图像，为Uint8Array或Buffer格式 async function imageProcess() { extCi.invoke({ action: "ImageProcess", cloudPath: "tcbdemo.jpg", // 图像在云存储中的路径，有点类似于wx.cloud.uploadFile接口里的cloudPath，上传的文件会保存为云存储根目录下的hehe.jpg operations: { rules: [ { fileid: "/image_process/tcbdemo.png", //将图片存储到云存储目录下的image_process文件夹里，也就是我们用image_process存储处理之后的图片 rule: "imageMogr2/format/png", // 处理样式参数，我们可以在这里写图片处理的参数拼接 } ] }, fileContent }).then(res => { console.log(res); }).catch(err => { console.log(err); }) } await imageProcess() } 可能你的开发者工具会报以下错误：[代码]https://786c-xly-xrlur-1300446086.pic.ap-shanghai.myqcloud.com 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html[代码]，这个要按照参考文档将链接加入到合法域名当中，不然不会生成图片；[代码]action[代码]是操作类型，它的值可以为：ImageProcess 图像处理，DetectType 图片安全审核（后面会介绍），WaterMark 图片忙水印、DetectLabel 图像标签等。[代码]operations[代码]是图像处理参数，尤其是 rule 和我们之前 url 的拼接是一致的，比如[代码]imageMogr2/blur/8x5[代码]、[代码]imageMogr2/rradius/100[代码]等参数仍然有效。上面函数里的 fileContent 不是必要的，也就是说我们可以不在小程序端上传图片，而是直接修改云存储里面已有的图片，并将图片处理后的照片保存，这种情况代码可以写成如下： async imgprocess(){ extCi.invoke({ action: "ImageProcess", cloudPath: "tcbdemo.jpg", // 会直接处理这张图片 operations: { rules: [ { fileid: "/image_process/tcbdemo.png", rule: "imageMogr2/format/png", // 处理样式参数，与下载时处理图像在url拼接的参数一致 } ] }, }).then(res => { console.log(res); }).catch(err => { console.log(err); }) } 3、云函数端持久化图像处理在云函数端的处理和小程序端的处理，使用的方法大体上是一致的，不过云函数的处理图片的场景和小程序端处理图片的场景会有所不同，小程序端主要用于当用于上传图片时就对图片进行处理，云函数则主要用于从第三方下载图片之后进行处理或者对云存储里面的图片进行处理（比如使用定时触发器对云存储里指定文件夹的图片进行处理）。不建议把图片传输到云函数端再来对图片进行处理。 使用开发者工具新建一个 imgprocess 的云函数，然后在 package.json 里添加 latest 最新版的[代码]@cloudbase/extension-ci[代码]，并右键云函数目录选择在终端中打开输入命令 npm install 安装依赖： "dependencies": { "wx-server-sdk": "latest", "@cloudbase/extension-ci": "latest" } 然后再在 index.js 里输入以下代码，代码的具体含义可以参考小程序端的内容讲解： const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); const extCi = require("@cloudbase/extension-ci"); cloud.registerExtension(extCi); async function process() { try { const opts = { rules: [ { fileid: "/image_process/tcbdemo.jpeg", rule: "imageMogr2/format/png", }, ], }; const res = await app.invokeExtension("CloudInfinite", { action: "ImageProcess", cloudPath: "tcbdemo.jpg", fileContent, operations: opts, }); console.log(res); return res; } catch (err) { console.log(err); } }