分别创建屏幕上边框，右边框，下边框，左边框安全距离： safe-area-inset-top， safe-area-inset-right， safe-area-inset-bottom， safe-area-inset-left 使用： iOS 11 padding-top: constant(safe-area-inset-top); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); iOS 11.2 beta及其后 padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); 兼容性写法： padding-top: 10px; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); 与calc合用： padding-top: 10px; padding-top: calc(10px + constant(safe-area-inset-top)); padding-top: calc(10px + env(safe-area-inset-top)); 终！使用sass@mixin： @mixin x-padding-bottom($val:0px) { padding-bottom: $val; padding-bottom: calc(#{$val / 2} + constant(safe-area-inset-bottom)); /* no */ padding-bottom: calc(#{$val / 2} + env(safe-area-inset-bottom)); /* no */ } 注意！！！ 1、默认值为0px，不是0，原因是calc不支持与0计算。 2、小程序单位为rpx，一般都会转换为rpx，但是calc不支持，所以不允许转换，保持px。 参考文档：苹果官方文档

公告更新时间：2021年04月15日考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈，为优化开发者调整接口的体验，回收wx.getUserInfo接口可获取用户授权的个人信息能力的截止时间由2021年4月13日调整至2021年4月28日24时。为优化用户的使用体验，平台将进行以下调整： 2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档：《getUserProfile接口文档》由于getUserProfile接口从2.10.4版本基础库开始支持（覆盖微信7.0.9以上版本），考虑到开发者在低版本中有获取用户头像昵称的诉求，对于未支持getUserProfile的情况下，开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。请使用了wx.getUserInfo接口或<button open-type="getUserInfo"/>的开发者尽快适配。开发者工具1.05.2103022版本开始支持getUserProfile接口调试，开发者可下载该版本进行改造。 小游戏不受本次调整影响。 一、调整背景很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。 二、调整说明通过wx.login接口获取的登录凭证可直接换取unionID 若小程序已在微信开放平台进行绑定，原wx.login接口获取的登录凭证若需换取unionID需满足以下条件： 如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号如果开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用2月23日后，开发者调用wx.login获取的登录凭证可以直接换取unionID，无需满足以上条件。 回收wx.getUserInfo接口可获取用户个人信息能力 4月28日24时后发布的新版本小程序，开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。 具体变化如下表： [图片] 即wx.getUserInfo接口的返回参数不变，但开发者获取的userInfo为匿名信息。  [图片] 此外，针对scope.userInfo将做如下调整： 若开发者调用wx.authorize接口请求scope.userInfo授权，用户侧不会触发授权弹框，直接返回授权成功若开发者调用wx.getSetting接口请求用户的授权状态，会直接读取到scope.userInfo为true新增getUserProfile接口 若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，该接口从基础库2.10.4版本开始支持，该接口只返回用户个人信息，不包含用户身份标识符。该接口中desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认，请开发者妥善保管用户快速填写的头像昵称，避免重复弹窗。 插件用户信息功能页 插件申请获取用户头像昵称与用户身份标识符仍保留功能页的形式，不作调整。用户在用户信息功能页中授权之后，插件就可以直接调用 wx.login 和 wx.getUserInfo 。 三、最佳实践调整后，开发者如需获取用户身份标识符只需要调用wx.login接口即可。 开发者若需要在界面中展示用户的头像昵称信息，可以通过<open-data>组件进行渲染，该组件无需用户确认，可以在界面中直接展示。 在部分场景（如社交类小程序）中，开发者需要在获取用户的头像昵称信息，可调用wx.getUserProfile接口，开发者每次通过该接口均需用户确认，请开发者妥善处理调用接口的时机，避免过度弹出弹窗骚扰用户。 微信团队 2021年4月15日

微信小程序用什么实现弹出窗口，且弹出窗口中的文字可以复制，我用的wx.showModal实现的弹窗，但是文字不能复制，小白求指导，谢谢！

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

概述 微信小程序为了提高小程序的服务质量，提供了客服消息能力，目的是为了让用户快捷地与小程序服务提供方进行沟通。小程序的客服消息回复有两种方式：一种是接入用户消息到微信公众平台网页版客服工具和客服小助手小程序进行客服消息回复，接入后客服可以看到用户留言，根据用户问题进行专门解答。一种是开启消息推送，当客服无法及时回复的时候能够指导用户联系客服人员或者解决问题。 如果需要接入微信公众平台网页版客服工具和客服小助手，只需要在小程序后台->客服里头添加客服人员就可以，客服人员就可以实时接收到用户消息并且与用户沟通。 如果需要开启消息推送可以参考下文的接入过程。 消息推送开发准备条件 在小程序中设置button组件并且把open-type属性设置为contact 前往小程序后台开发->开发设置->消息推送配置相关信息，可在此指定消息加密方式和数据格式。注意当开启了消息推送，普通微信用户向小程序客服发消息时，微信服务器会先将消息 POST 到开发者填写的 URL 上。在此处的填写我选择的是明文模式和JSON数据格式。 开发过程 处理初次验证 填写完消息推送的配置并且提交后，微信服务器将发送GET请求到填写的URL地址进行校验。因此首先要进行的就是针对微信服务器的初次校验做处理。微信官方在消息推送章节已经提出了校验代码此处便不再重复。 [代码]//微信服务器验证处理 if (isset($_GET['echostr'])) { //调用微信提供的校验代码 if ($this->checkSignature() == false) { exit(); } $echoStr = $_GET['echostr']; echo $echoStr; exit; } [代码] 处理消息 校验成功后，微信服务器会将用户在客服会话中的消息转发到开发者的服务器上，针对微信服务器传入的消息的类型，开发者们可以编写不同的业务逻辑处理。以用户在客服会话中写入文本为例：根据选择的数据格式JSON或者XML，微信服务器会传入相应格式的数据包。根据"MsgType"可以分辨微信服务器转发的是何种类型消息，并编写不同的业务逻辑。 [代码]//1接受微信推送消息 $message = $GLOBALS["HTTP_RAW_POST_DATA"]; $message = json_decode($message, true); //2判定用户发送消息的类型 if (!empty($message['MsgType']) && $message['MsgType'] == 'text') { //do something } [代码] 在处理完微信转发的消息之后，开发者可以根需要调用服务端的客服消息发送接口发送消息给用户。 [代码]$fromUsername = $message['FromUserName']; //发送者openid $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=$access_token";//根据需要获取access_token $data = array( "touser" => $fromUsername, "msgtype" => "text", "text" => array( "content" => "客服消息推送测试" ) ); $data = json_encode($data, JSON_UNESCAPED_UNICODE); $result = httpRequest($url, "post", $data); $result = json_decode($result, true); if ($result['errcode'] == 0) { //当处理成功之后返回空字符串或者success都可以防止微信服务器重新发起请求 echo ""; exit; } [代码] 转发客服消息 小程序设置了推送消息之后，还可以接入到网页版客服工具中，只需要设置返回数据的MsgType为transfer_customer_service返回给微信服务器。 [代码]//设置转发数据 $transferData = array( "ToUserName" => $message['FromUserName'],//用户的OpenID "FromUserName" => $message['ToUserName'],//小程序原始id "CreateTime" => $message['CreateTime'],//创建时间 "MsgType" => "transfer_customer_service",//指定为transfer_customer_service 消息将会转发到客服工具中 ); $transferData = json_encode($transferData, JSON_UNESCAPED_UNICODE); [代码] 完整代码演示 [代码]//接受微信服务器转发的请求。 public function getMessage() { // 判断是否为微信验证消息 if (isset($_GET['echostr'])) { if ($this->checkSignature() == false) { exit(); } $echoStr = $_GET['echostr']; echo $echoStr; exit; } //接受微信推送消息 $message = $GLOBALS["HTTP_RAW_POST_DATA"]; if (!empty($message)) { $access_token = $this->getAccess();//根据需要获取小程序对应的 access_token //设置转发客服消息 $fromUsername = $message['FromUserName'];//消息发起用户的open_id $transferData = array( "ToUserName" => $fromUsername,//接收方帐号（用户的OpenID） "FromUserName" => $message['ToUserName'],//小程序原始id "CreateTime" => $message['CreateTime'],//创建时间 "MsgType" => "transfer_customer_service",//指定为transfer_customer_service 消息将会转发到客服工具中 ); $transferData = json_encode($transferData, JSON_UNESCAPED_UNICODE); $message = json_decode($message, true); //判定消息类型并处理 if (!empty($message['MsgType']) && $message['MsgType'] == 'text') { //调用send接口发送相对应的消息 $url = "https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=$access_token"; $data = array( "touser" => $fromUsername, "msgtype" => "text", "text" => array( "content" => "客服消息推送测试" ) ); $data = json_encode($data, JSON_UNESCAPED_UNICODE); $result = httpRequest($url, "post", $data); $result = json_decode($result, true); //回复消息之后 不转发消息到客服系统 返回success 或者空字符串 避免微信提示严重错误 if ($result['errcode'] == 0) { echo ""; exit; } //回复消息之后 转发客服消息到客服系统 将$transferData['MsgType']设置为transfer_customer_service //if ($result['errcode'] == 0) { //echo $transferData; //exit; //} } } } /** * 处理微信验证函数 */ public function checkSignature() { $signature = $_GET['signature']; $timestamp = $_GET['timestamp']; $nonce = $_GET['nonce']; $token = "customer12"; //填写在后台配置的Token(令牌) $tmpArr = array($token, $timestamp, $nonce); sort($tmpArr, SORT_STRING); $tmpStr = implode($tmpArr); $tmpStr = sha1($tmpStr); //加密 if ($tmpStr == $signature) { return true; } else { return false; } } /** * CURL请求 * @param $url 请求url地址 * @param $method 请求方法 get post * @param null $postfields post数据数组 * @param array $headers 请求header信息 * @param bool|false $debug 调试开启 默认false * @return mixed */ function httpRequest($url, $method, $postfields = null, $headers = array(), $debug = false) { $method = strtoupper($method); $ci = curl_init(); curl_setopt($ci, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0); curl_setopt($ci, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.2; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0"); curl_setopt($ci, CURLOPT_CONNECTTIMEOUT, 60); /* 在发起连接前等待的时间，如果设置为0，则无限等待 */ curl_setopt($ci, CURLOPT_TIMEOUT, 7); /* 设置cURL允许执行的最长秒数 */ curl_setopt($ci, CURLOPT_RETURNTRANSFER, true); switch ($method) { case "POST": curl_setopt($ci, CURLOPT_POST, true); if (!empty($postfields)) { $tmpdatastr = is_array($postfields) ? http_build_query($postfields) : $postfields; curl_setopt($ci, CURLOPT_POSTFIELDS, $tmpdatastr); } break; default: curl_setopt($ci, CURLOPT_CUSTOMREQUEST, $method); /* //设置请求方式 */ break; } $ssl = preg_match('/^https:\/\//i', $url) ? TRUE : FALSE; curl_setopt($ci, CURLOPT_URL, $url); if ($ssl) { curl_setopt($ci, CURLOPT_SSL_VERIFYPEER, FALSE); // https请求 不验证证书和hosts curl_setopt($ci, CURLOPT_SSL_VERIFYHOST, FALSE); // 不从证书中检查SSL加密算法是否存在 } curl_setopt($ci, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ci, CURLOPT_MAXREDIRS, 2);/*指定最多的HTTP重定向的数量，这个选项是和CURLOPT_FOLLOWLOCATION一起使用的*/ curl_setopt($ci, CURLOPT_HTTPHEADER, $headers); curl_setopt($ci, CURLINFO_HEADER_OUT, true); $response = curl_exec($ci); $requestinfo = curl_getinfo($ci); $http_code = curl_getinfo($ci, CURLINFO_HTTP_CODE); if ($debug) { echo "=====post data======\r\n"; var_dump($postfields); echo "=====info===== \r\n"; print_r($requestinfo); echo "=====response=====\r\n"; print_r($response); } curl_close($ci); return $response; } [代码]

突然收不到客服消息了 appid： wx31f4475e1d2ac33f 没有启用消息推送配置，已经绑定客服人员。[图片] [图片]

小程序新增推流和拉流组件，之前有video组件。我想了解这些组件目前是否支持对码流的解密和加密？比如使用video组件，是否支持对HLS码流的解密？新增的推流和拉流组件是否支持码流加密和解密？

微信小程序的客服，绑定客服后收不到会话消息（网页版与手机都收不到） [图片] 发了好多信息给客服，如下图： [图片] 但是绑定的客服收不到信息，如下图： [图片]

小程序的客服网页端工具接收不到客户的留言。 小程序已经添加了客服人员，没有开启消息推送，也没有设置任何第三方授权，通过 contact-button进入客服会话和小程序客服消息公众号进入会话的留言，网页端工具都接收不到。小程序appid：wxb8e56b8aceffe791 发送客服消息微信号：pz9042，发送内容：测试消息

AppID(小程序ID)    wxbf58499344bb5d4f 小程序已经设置消息推送，在自己服务器端却收不到点击按钮进入客服user_enter_tempsession事件和用户发的消息数据。试了其他几个小程序，消息推送正常。 自己服务器的代码应该没有问题。请问这是怎么原因，还是哪边的设置有问题。 [图片]

- 当前 Bug 的表现（可附上截图） 在小程序中调用客服功能，发送消息成功。 单网页客户端没有收到 - 预期表现 能接收到消息 [图片] - 复现路径 - 提供一个最简复现 Demo

一、注册登录 1、首次注册 进入腾讯云智服官网yzf.qq.com，点击首页“注册”按钮，使用微信进行扫码，同意腾讯云智服的登录授权。（注：此扫码微信号即超级管理员账号。） Step1：进入官网，点击注册微信扫码，在手机上点击同意授权。 Step2：填写企业相关信息，所有信息均可在后台【设置】→【企业设置】修改，完成后点击下一步。 （温馨提示：腾讯云智服承诺对您填写的信息绝对保密，未经用户许可腾讯不会向第三方公开、透露用户个人和公司信息。腾讯对相关信息采用专业加密存储与传输方式，保障您和企业信息的安全。）             Step3：注册完成后，点击“开始体验”登录，开始设置您的专属客服平台。（每个微信号最多可注册 50 个云智服帐号，可轻松管理多个企业。） 2、登录 使用微信扫码即可登录腾讯云智服。 二、邀请成员加入 服务团队基本成员角色包括：管理员、客服专员、机器人训练师。所有受邀同事的角色和每个角色可用权限均可由管理员修改。 首先设置客服分组和该组客服最大接入用户数量，以保证服务质量。 设置入口：【设置】→【团队设置】→【客服管理】 新建自定义分组，设置分组的名称与最大接入数。            [图片] 客服分组设置完成后，就可以邀请您的同事加入了。 设置入口：【设置】→【客服管理】→【邀请成员】     [图片]             将“邀请成员”页面的二维码或链接发送给同事，让其填写信息后提交申请。 同事完成申请后，管理员进入【申请列表】中审核。选择该同事对应的角色（必选、多选）与组别。 若一开始邀请成员后未设置分组，该同事归入默认分组。可在默认分组中选择该同事，点击【编辑】修改成员姓名、组别和角色。 三、接入渠道 腾讯云智服支持接入渠道有微信渠道（公众号、小程序）和网站渠道，可在以上渠道接入人工服务与机器人服务。 3.1微信渠道接入 接入微信渠道后，可在公众号、小程序中便捷配置在线人工、机器人服务。 设置入口：【设置】→【渠道设置】→【微信渠道】            [图片]    （1）公众号渠道接入 开始之前，您需要有已认证的公众号管理员账号。由于微信限制，仅支持微信认证公众号接入人工服务。详细接入设置 Step1 点击公众号授权，使用管理员微信扫码授权。 Step2 接入微信公众号渠道成功后，默认不接入机器人服务，接入默认分组人工服务，可在【设置机器人】、【设置人工】中修改。 Step3接入成功后可在公众号下留言，测试能否成功发送消息。 （2）小程序渠道接入 开始之前，您需要有小程序管理员账号，且小程序需有客服入口，客服入口需要在小程序内设置好，可参考公众号官方添加小程序按钮的指引。 Step1 点击小程序授权，使用小程序管理员个人微信扫码授权。 Step2 接入小程序渠道成功后，默认不接入机器人服务，接入默认分组人工服务，可在【设置机器人】、【设置人工】中修改。 Step3接入成功后可点击小程序客服入口留言，测试能否成功发送消息。 3.2网站渠道接入 网站提供两种部署方式：网站链接（URL链接）、内嵌插件（Web JS）。开发者通过地址调用或简短代码，可在网站中接入客服。网站详细接入设置 设置入口：【设置】→【渠道设置】→【网站设置】→【新增网站】 新建一个网站渠道，输入网站名称和使用场景。 两种方式接入网站渠道： （1）新建内嵌插件 在新建网站界面，点击【复制】内嵌插件代码粘贴到您的网站的</body>标签之前，即可完成部署。目前暂不支持内嵌插件自定义外观，可使用腾讯云智服内嵌插件默认样式、颜色外观及固定位置，支持自定义网站入口显示位置。 内嵌插件代码，示例如下： uid：为用户唯一标识，如没有可不填写 data：用户传递用户信息，最多支持五个，参数名分别为c1,c2,c3,c4,c5 selector： css选择器，用于替换默认的常驻客服入口 callback(type, data)：回调函数，type表示事件类型，data表示事件相关数据 type支持的类型：newmsg有新消息，error腾讯云智服页面发生错误， close聊天窗口关闭 若您需要传送相关数据，可通过在链接后追加参数，包括用户id（uid）与自定义用户信息参数（c1、c2、c3、c4、c5）传递。 （2）新建网站链接 在新建网站界面，点击【复制】对应链接地址，用户点击该链接即可进入咨询。 若您需要传送相关数据，可通过在链接后追加参数，包括用户id（uid）与自定义用户信息参数（c1、c2、c3、c4、c5）传递。 部署聊天页链接，示例如下：            [图片]             四、开始服务 进入【人工】，切换状态为“在线”后即可接入用户。（需确保当前客服所在组别和渠道设置的人工组别保持一致） 客服人员可使用PC工作台和小程序工作台服务用户。关注公众号：腾讯云智服，在底部菜单【工作台】进入小程序，即可接入用户开始服务。

官网：“当某些特定的用户操作引发事件推送时（如用户向小程序客服发送消息、或者进入会话等情况），微信服务器会将消息（或事件）的数据包以 POST 请求发送到开发者配置的 URL，开发者可以依据自身业务逻辑进行响应”，为什么我配置好了，通过按钮进入客服页面，发送信息，没请求配置时的URL？？？？逗我

我想通过点击H5客服按钮，利用<web-view/>跳到小程序客服页面。所有这个过程，小程序是不设置按钮的，能实现吗？@官方

- 当前 Bug 的表现（可附上截图） 今天5月6号，小程序在线客服功能后台返回错误是 [代码]"msg"[代码][代码]:[代码][代码]"system error hint: [WtzHcA05763114]"[代码][代码],[代码][代码]"isSuccess"[代码][代码]:[代码][代码]false[代码]，是不是跟小程序维护有关啊？求官方答疑谢谢 - 预期表现 - 复现路径 - 提供一个最简复现 Demo

准备工作： 1、首先需要有一个已认证的微信小程序 2、免费注册使用腾讯云智服 一、注册登录（已注册用户直接跳到第三步） 在yzf.qq.com中点击注册，微信扫码，填写企业相关信息后即注册成功。下次登录只要进入官网扫码就可以登录网页端；或者在手机上关注腾讯云智服公众号，点击工作台，就可以使用移动端了。 二、团队设置 1、设置角色权限 团队里有管理员、客服专员、机器人训练师三个角色，所有角色的权限均可由管理员修改。在【设置】→【团队设置】→【角色权限】中修改。[图片] 2. 创建客服分组 （1）新建分组 设置客服分组和该组客服最大接入用户数。该分组内的单个客服人员达到最大接入数之后，系统不再分配用户。【设置】→【团队设置】→【客服管理】[图片]分组设置成功后，可在申请同事审核时，选择该同事的角色与组别。[图片] （2）删除分组 将鼠标移至对应需要删除/编辑的客服分组，点击出现的【删除】图标，可删除客服分组。在删除分组前需清空分组内人员，请谨慎操作以免影响已接入渠道用户正常分派。 3. 邀请员工加入 （1）发送邀请 开始邀请同事加入。点击【设置】→【团队设置】→【客服管理】→【邀请成员】，即可生成二维码和邀请链接发送给同事，邀请72小时内有效。[图片][图片] （2）审批加入 ① 员工完成申请后，管理员在【申请列表】进行审核。[图片] ② 审核员工申请时，选择员工对应的角色和组别。[图片] 三、小程序授权腾讯云智服 通过管理员绑定的个人微信扫码同意授权后可接入小程序，授权完成。 操作路径：点击【设置】è【渠道设置】è【公众号授权】 [图片] 授权流程图如下： [图片] 四、在微信小程序内添加客服按钮 授权完成后，您可联系您企业的开发人员将 button 组件 open-type 的值设置为 contact，当用户点击后就会进入客服会话，如果用户在会话中点击了小程序消息，则会返回到小程序，开发者可以通过 bindcontact 事件回调获取到用户所点消息的页面路径 path 和对应的参数 query。详情请参考官方文档：【客服按钮文档】。 代码示例： <button open-type="contact" bindcontact="handleContact"></button> Page({    handleContact (e) {        console.log(e.detail.path)        console.log(e.detail.query)    } })

小程序通过<button open-type="contact">联系客服</button>可以打开客服会话，想请问一下，打开的客服会话，能直接打开关联的公众号的客服会话吗？