小程序性能优化课程基于实际开发场景，由资深开发者分享小程序性能优化的各项能力及应用实践，提升小程序性能表现，满足用户体验。

现在小程序可以在多个app中打开，那么如何判断是在什么app中打开的呢？经过社区提示和我的测试可以判断出一下几种情况，请自行验证： var systemInfo = wx.getSystemInfoSync(); // 宿主应用 var parasitifer = '微信'; if(systemInfo && systemInfo.host && systemInfo.host.appId){   switch(systemInfo.host.appId){     case 'wxf0a80d0ac2e82aa7':       parasitifer = "QQ";       break;     case 'wx4706a9fcbbca10f2':       parasitifer = "企业微信";         break;     case 'wx64f9cf5b17af074d':       parasitifer = "QQ浏览器";         break;     case 'wx5cd60c5d4817a188':       parasitifer = "电脑管家";         break;     default:       parasitifer = '微信';       break;   } }

一、能力背景 近年来，国家在医疗挂号、APP注册、快递收寄、客运、运营商等多领域规定，需要用户实名才可办理业务，预计后续也会有越来越多的此类法规。因此，微信参照公安部“互联网+”可信身份认证服务平台标准，依托腾讯公司及微信的生物识别技术，建立微信“实名实人信息校验能力” ，即通过人脸识别+权威源比对，校验用户实名信息和本人操作（简称微信人脸核身）。 目前接口限定主体及行业类目开放公测，提供给资质符合要求的业务方，在合适的业务场景内使用。目前仅支持持二代身份证的大陆居民。 由于人脸核身功能涉及到用户的敏感、隐私信息，因此调用此接口的小程序，需要满足一定的条件。即：小程序的主体以及类目，需要在限定的类目范围内，且与小程序的业务场景一致。开展的业务也需要是国家相关法规、政策规定的需要“实名办理”的相关业务（其他未在范围内的业务，则暂不支持）。 以下为接口接入及开发的详细内容。如开发中遇到任何疑问，可以点击此处通过社区反馈，将有工作人员跟进回复。 文档第四部分【再次获取核验结果api】，有助于提高业务方安全性，请务必接入！ 现阶段微信人脸核验能力，针对小程序，开放的主体类目范围包含： 小程序一级类目 小程序二级类目 小程序三级类目 使用人脸核验接口所需资质 物流服务 收件/派件 / 《快递业务经营许可证》 物流服务 货物运输 / 《道路运输经营许可证》（经营范围需含网络货运） 教育 学历教育（学校） / （2选1）：1、公立学校：由教育行政部门出具的审批设立证明 或 《事业单位法人证书》；2、私立学校：《民办学校办学许可证》与《民办非企业单位登记证书》 医疗 公立医疗机构 / 《医疗机构执业许可证》与《事业单位法人证书》 医疗 互联网医院 / 仅支持公立医疗机构互联网医院（2选1）：1、卫生健康部门的《设置医疗机构批准书》；2、 《医疗机构执业许可证》（范围均需含“互联网诊疗”或名称含“互联网医院”等相关内容 医疗服务 三级私立医疗机构 / 仅支持三级以上私立医疗机构，提供《医疗机构执业许可证》、《营业执照》及《医院等级证书》 政务民生 所有二级类目 / 仅支持政府/事业单位，提供《组织机构代码证》或《统一社会信用代码证》。 金融业 银行 / （2选1）：1、《金融许可证》； 2、《金融机构许可证》。 金融业 信托 / （2选1）：1、《金融许可证》； 2、《金融机构许可证》。 金融业 公募基金 / （4选1）：1、《经营证券期货业务许可证》且业务范围必须包含“基金”；2、《基金托管业务许可证》； 3、《基金销售业务资格证书》；4、《基金管理资格证书》。 金融业 证券/期货 / 《经营证券期货业务许可证》 金融业 保险 / （8选1）：1、《保险公司法人许可证》；2、《经营保险业务许可证》；3、《保险营销服务许可证》；4、《保险中介许可证》；5、《经营保险经纪业务许可证》；6、《经营保险公估业务许可证》或《经营保险公估业务备案》；7、《经营保险资产管理业务许可证》 ；8、《保险兼业代理业务许可证》。 金融业 消费金融 / 银监会核准开业的审批文件与《金融许可证》与《营业执照》 金融业 汽车金融/金融租赁 / 仅支持汽车金融/金融租赁主体，同时提供：1、《营业执照》（公司名称包含“汽车金融” /“金融租赁”；营业范围包含“汽车金融”/“金融租赁”业务）；2、《金融许可证》或银保监会及其派出机构颁发的开业核准批复文件。 交通服务 网约车 快车/专车/其他网约车 （自营性网约车）提供《网络预约出租汽车经营许可证》。（网约车平台）提供与网约车公司的合作协议以及合作网约车公司的《网络预约出租汽车经营许可证》。 交通服务 航空 / （航司）提供《公共航空运输企业经营许可证》。（机场）提供《民用机场使用许可证》或《运输机场使用许可证》。 交通服务 公交/地铁 / 提供公交/地铁/交通卡公司《营业执照》 交通服务 水运 / （船企）提供《水路运输许可证》。（港口）提供《港口经营许可证》 交通服务 骑车 / 仅支持共享单车，提供共享单车公司《营业执照》 交通服务 火车/高铁/动车 / 仅支持铁路局/公司官方，提供铁路局/公司《营业执照》 交通服务 长途汽车 / （2选1）：1、《道路运输经营许可证》（经营范围需含客运）；2、官方指定联网售票平台（授权或协议或公开可查询文件）。 交通服务 租车 / 运营公司提供《备案证明》与对应公司《营业执照》，且营业执照中包含汽车租赁业务 交通服务 高速服务 / 仅支持ETC发行业务，（2选1）：1、事业单位主体，需提供《事业单位法人证书》；2、官方指定的发行单位（一发单位），需提供“官方授权或协议，或公开可查询的文件”； 生活服务 生活缴费 / （供电类）提供《电力业务许可证》与《营业执照》，且《营业执照》且经营范围含供电。（燃气类）提供《燃气经营许可证》与《营业执照》，且《营业执照》且经营范围含供气。（供水类）提供《卫生许可证》与《营业执照》。（供热类）提供《供热经营许可证》与《营业执照》，且《营业执照》且经营范围含供热。 IT科技 基础电信运营商 / （2选1）：1、基础电信运营商：提供《基础电信业务经营许可证》；2、运营商分/子公司：提供营业执照（含相关业务范围）。 IT科技 转售移动通信 / 仅支持虚拟运营商，提供《增值电信业务许可证》（业务种类需含通过转售方式提供移动通信业务） 旅游服务 住宿服务 / 仅支持酒店，提供《酒店业特种行业经营许可证》 商业服务 公证 / 仅支持公证处，提供《公证处执业许可证》或《事业单位法人证书》 社交 直播 / （2选1）：1、《信息网络传播视听节目许可证》；2、《网络文化经营许可证》(经营范围含网络表演）。 如对以上类目或资质有疑问，可点击参考小程序“非个人主体开放的服务类目”，详细了解小程序开放的服务类目及对应资质。 二、准备接入 （请在小程序发布后，再提交人脸核身接口申请） 满足第一节中描述的类目和主体的小程序，可申请微信人脸核验接口。目前微信人脸核身接口已改为线上自助申请方式，需按照如下图例指引，进行接口申请： 第一步：请通过mp.weixin.qq.com登录小程序账号在后台“功能-人脸核身”的路径，点击开通按钮—— [图片] 第二步：仔细查阅《人脸识别身份信息验证服务条款》后，点击“同意并下一步”—— [图片] 第三步：请正确填写服务信息，并上传该小程序类目下所要求的资质—— [图片] 第四步：请按照业务实际需求填写使用人脸接口的场景和用途—— [图片] 第五步：请完善测试信息和联系人—— [图片] 第六步：提交后请耐心等待1-3个工作日的审核期，审核结果将以站内信通知—— 如申请期间遇到问题，可联系腾讯工作邮箱 wx_city@tencent.com，将会有相关工作人员进一步指引。 三、接口文档： (一)接口描述 名称: wx.startFacialRecognitionVerify(OBJECT) 功能：请求进行基于生物识别的人脸核身 验证方式：在线验证 兼容版本： 一闪：android 微信7.0.22以上版本, iOS 微信7.0.18以上版本 建议在微信官网升级至最新版本 (二)参数说明 1、OBJECT参数说明： 参数 类型 必填 说明 name String 是 姓名 idCardNumber String 是 身份证号码 success Function 否 调用成功回调 fail Function 否 调用失败回调 complete Function 是 调用完成回调（成功或失败都会回调） 2、CALLBACK返回参数 参数 类型 说明 errMsg String 错误信息 errCode Number 错误码 verifyResult String 本次认证结果凭据，第三方可以选择根据这个凭据获取相关信息 注 1：传递用户姓名和身份证有两种方式 业务方没有用户实名信息，用户需要在前端填写身份证和姓名，那么前端直接通过jsapi 调用传递 name 和 idCardNumber。 业务方已经有用户实名信息，后台通过微信提供的 api（详情见文档后面“上传姓名身份证后台 api”）上传用户身份证姓名和身份证，api 返回 user_id_key 作为凭证传给前端，前端再调用 jsapi，用户姓名、身份证信息不需要经过前端，参数只需要传递 userIdKey。Tips：使用该功能需要小程序基础库版本号>=1.9.3。 3、回调结果说明 回调结果请参考以下释义： [图片] [图片] [图片] 4、示例代码 [图片] [图片] (三)上传用户姓名身份证的后台api 1、API说明 1.1说明 业务方上传用户姓名和身份证，获取用户凭证，把凭证给到前端通过 jsapi 调用。 Tips ：使用该功能需要小程序基础库版本号>=1.9.3。 1.2请求URL https://api.weixin.qq.com/cityservice/face/identify/getuseridkey?access_token={ac cess_token} 1.3请求方式 POST 2、请求数据格式 [代码]Json { "name" : “张三”, "id_card_number" : "452122xxxxxxx43215" } [代码] 请求示例 [代码]#!/bin/bash TOKEN='xxxxxxxxxxxx' URL='https://api.weixin.qq.com/cityservice/face/identify/getuseridkey' JSON='{ "name": "张三", "id_card_number": "452344xxxxxxxxxxxxx234"}' curl "${URL}?access_token=${TOKEN}" -d "${JSON}" [代码] 参数说明 json 字段 中文显示 是否必传 name 姓名 是 id_card_number 身份证号码 是 out_seq_no 业务方唯一流水号 否 3、返回数据 参数 类 型 说明 errcode int 错误码 errmsg string 错误信息 user_id_key string 用于后台交互表示用户姓名、身份证的凭证 expires_in uint32 user_id_key 有效期，过期需重新获取 [代码]{ "errcode" : 0, "errmsg" : "ok", "user_id_key" : "id_key_xxxx", "expires_in": 3600 } [代码] 4、后台消息推送 如果业务方传入out_seq_no，核身完成后会通过消息推送回调给业务方的服务器，如果回调业务方失败，会在5s尽力推送，超过5s不再推送。 参数说明 参数 类 型 说明 ToUserName string 小程序原始ID FromUserName string 事件消息openid CreateTime uint32 消息推送时间 MsgType string 消息类型 Event string 事件类型 openid string 核身用户的openid out_seq_no string 业务方唯一流水号 verify_result string 核身返回的加密key（凭据） 返回示例 [代码]{ "ToUserName": "gh_81fxxxxxxxx", "FromUserName": "oRRn15NUibBxxxxxxxxx", "CreateTime": 1703657835, "MsgType": "event", "Event": "face_identify", "openid": "oRRn15NUibBxxxxxxxxx", "out_seq_no": "test1234", "verify_result": "XXIzTtMqCxwOaawoE91-VNGAC3v1j9MP-5fZJxv0fYT4aGezzvYlUb-n6RWQa7XeJpQo0teKj8mGE4ZcRe1JI3GqzADBYORBu613rKjKAFfEXTXw_bu1bs7MnmPOpguS" } [代码] 四、再次获取核验结果api 此接口是前端完成人脸核身后，基于前端返回的凭据，通过后台api再次进行核验结果和身份信息的校验，有助于提高安全性，请务必接入！ 前端获取结果不可信，存在被篡改的风险，为了保障请求结果安全性，请务必对identify_ret、id_card_number_md5、name_utf8_md5字段进行校验！ (一)API说明 1、说明 人脸核身之后，开发者可以根据jsapi返回的verify_result向后台拉取当次认证的结果信息。 2、请求URL https://api.weixin.qq.com/cityservice/face/identify/getinfo?access_token={access_token} 3、请求方式 POST 4、请求格式 json (二)请求数据说明 1、请求 参数 类型 是否必填 描述 verify_result String 是 jsapi返回的加密key（凭据） 2、数据返回 HTTP 头如下 Date: Mon, 06 Feb 2017 08:12:58 GMT Content-Type: application/json; encoding=utf-8 Content-Length: 85 Connection: close json示例 [代码]{ "errcode" : 0, [代码] [代码]"errmsg" : "ok", "identify_ret" : 0, "identify_time" : 1486350357 "validate_data": "8593" [代码] [图片] (三)返回参数说明 1、返回参数 注：errcode和identify_ret同时为0，代表本次认证成功。 参数 类型 描述 errcode int 错误码, 0表示本次api调用成功 errmsg string 本次api调用的错误信息 identify_ret int 人脸核身最终认证结果 identify_time uint32 认证时间 validate_data string 用户读的数字（如是读数字） openid string 用户openid user_id_key string 用于后台交互表示用户姓名、身份证的凭证 finish_time uint32 认证结束时间 id_card_number_md5 string 身份证号的md5（最后一位X为大写） name_utf8_md5 string 姓名MD5 2、错误码对应信息 errcode 备注 84001 非法identity_id 84002 用户信息过期 84003 用户信息不存在 五、小程序辅助接口：检查设备是否支持人脸检测 1、接口名称 接 口 ：wx.checkIsSupportFacialRecognition(OBJECT) 功能：检查设备是否支持人脸检测 2、接口说明和使用 小程序调用该接口，可以检测当前手机设备是否具备支持人脸检测的能力，可与以上接口分开使用，为了用户体验，建议调用后对手机设备不支持的用户做对应功能处理。 3、接口说明和使用 01 OBJECT 参数说明： 参数 类型 是否必填 描述 success Function 否 调用成功回调 fail Function 否 调用失败回调 complete Function 是 调用完成回调（成功或失败都会回调） checkAliveType Number 否 人脸核验的交互方式，默认读数字（见表 2） 表 2：checkAliveType 的值和对应的解释： 参数 解释 2 先检查是否可以屏幕闪烁，不可以则自动为读数字 02 CALLBACK 返回参数 参数 类型 说明 errMsg Boolean 错误信息 errCode Number 错误码 03 回调结果说明 回调类型 ErrCode 说明 sucess 0 支持人脸采集 fail 10001 不支持人脸采集：设备没有前置摄像头 fail 10002 不支持人脸采集：没有下载到必要模型 fail 10003 不支持人脸采集：后台控制不支持 回调结果说明仅对Android生效，iOS不返回errcode。 04 示例代码 [图片] 六、安全性说明 为保障业务可用性以及安全性，请详细研读微信人脸核身接口相关基础说明及安全说明文档：https://docs.qq.com/doc/DTFB0YWFIdGV6amly 备注：如开发中遇到任何疑问，可以点击此处通过社区反馈，将有工作人员跟进回复。 七、案例展示及补充说明 安徽医科大学第二附属医院，微信人脸核验登录： 安徽医科大学第二附属医院，是三级甲等综合医院。其小程序为用户提供挂号、门诊费用、住院费用、检查报告、体检等医疗服务，同时也提供停车、餐饮等便民服务，是医疗小程序中完整的案例。 小程序使用了微信人脸核验能力作为登录的核验。满足医院管理要求，也满足国家对于实名就医的管理规则。 案例实现的截图效果如下： [图片] [图片] 针对近期少数小程序方面反馈的两类问题，也在本课程进行补充说明。 1、本接口的开放范围，即：可支持的主体类目，是否可以扩大？ 说明：基于本接口整体使用范围的评估、相关法规的参考、监管策略的理解执行等，暂时未立刻进行扩大开放范围的工作。 但我们会持续基于不同行业的法规、政策及监管要求等，逐一进行研究考量，以便确认如何扩大开放范围。 2、小程序如果涉及用户本人的生物特征采集，（如本人人脸照片、人脸视频），或涉及采集用户本人生物特征信息并开展人脸核验功能，则存在被驳回的情况？ 说明：近两年“人脸识别”技术在社会上掀起了热潮。人脸识别虽然作为摆脱“中间媒介”或“承载载体”的一种直接技术手段，解决了部分政务、交通、医疗、零售等证明“操作者是本人”的问题，但也因此，引入了新的更大的安全风险。 一是，虚假安全风险。 身份认证领域的安全三因素包括“我知道什么”、“我拥有什么”、“我的特征是什么”，通用的安全做法，是要双因素认证（2FA），人脸识别技术如仅凭“我的特征是什么”这一个因素，则容易被攻破或利用。表象给用户以安全的感觉，但实际并不能达到安全效果。 二是，信息泄漏的风险。 越来越多的组织或个人，在并非必需用户敏感信息、生物特征的情况下，采集并存储此类信息。在信息加密、传输、存储过程中，容易暴漏更多的网络节点，使得此类信息有更大的风险被网络黑客拦截、窃听、窃取，或直接被脱库。 三是，消除风险的难度大。 以往基于“中间媒介”或“承载载体”的方式，如出现丢失、被冒用、恶意盗用等风险，可以通过挂失、更换、使用新载体或新媒介等方式，快速排除一定的风险。C端主动，B端主动，都能解决一部分问题。但人脸识别做为更直接的方式，一旦出现冒用、盗用，受害者将面临更大的财产及人生安全风险，且C端用户更多时候无法主动消除风险。 基于以上问题风险，加之国家出台《网络安全法》、《用户隐私保护条例》等法律法规标准，网信办、公安部、工信部及市场监管总局等四部委发起的app获取隐私整治，结合平台安全、用户敏感隐私信息保护要求及监管，针对部分暂无相关法规或要求，需要采集或生物认证方式进行身份核验的，或以“追热点”或“尝鲜”为目的，采集用户生物特征或进行身份核验的，进行严格审核，必要时不予以支持。

如何关注公众号以后自动推送小程序？ 这个问题是不是觉得没什么难度？打开配置界面一看你就傻眼了。 [图片] 怎么自动回复里没有跳转小程序选项？自定义菜单里面是有的呀！：（ [图片] 遇到困难先不要慌，办法总是有的！ 不过要做一点点准备工作，首先绑定要跳转的小程序，然后准备好小程序的APPID和跳转路径。 然后，一行代码搞定： <a data-miniprogram-appid="小程序APPID" data-miniprogram-path="跳转路径">点我跳转到小程序</a> 上面准备的小程序APPID和跳转路径编辑一下即可。 <a data-miniprogram-appid="wx3fa5ddf638c664d8" data-miniprogram-path="page/tabBar/index/index">点我跳转到小程序</a> [图片] [图片] 想体验效果，搜索：来一间 公众号体验。关键词自动回复也可以用这个方法配置哦！ [图片] 补充一点： 如何获取小程序页面路径的方法：https://developers.weixin.qq.com/community/develop/article/doc/0008627017cf104da879c3dd25b813

小程序能否实现监听到用户点击小程序顶栏左上角返回后，做挽留弹框提示“资料未保存，是否退出”,如果用户点击弹框上退出按钮则返回上一页，如果用户点击弹框上取消按钮，则停留在当前页面；

代码片段：wx.chooseImage({ count: 1, sizeType: ['compressed'],ourceType: ['camera'],success: function (res) {}}） 安卓手机（ 小米9se,华为mate20,华为mate30pro等）调用拍照接口，点击拍照之后，在点击取消或者遮罩层，之后卡在当前页面点击什么都不会有反应，只能杀进程。判断应该是被一层蒙层给挡住了，点击手机自身的back键即可恢复正常，但明显看到一个透明蒙层消失。 http://osptest.newchinalife.com/ydbq/fly/#/airSignOne 复现视频链接：https://v.qq.com/x/page/g3051z40idf.html 微信号：wxid_8sq7w17p0h7v22 时间点：2020/1/15 9:35 已上传日志

[代码]<!DOCTYPE html>[代码][代码]<[代码][代码]html[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]head[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]meta[代码] [代码]charset[代码][代码]=[代码][代码]"utf-8"[代码][代码]>[代码] [代码]    [代码][代码]<[代码][代码]meta[代码] [代码]http-equiv[代码][代码]=[代码][代码]"Content-Type"[代码] [代码]content[代码][代码]=[代码][代码]"text/html; charset=utf-8"[代码][代码]/>[代码][代码]    [代码][代码]<[代码][代码]meta[代码] [代码]http-equiv[代码][代码]=[代码][代码]"X-UA-Compatible"[代码] [代码]content[代码][代码]=[代码][代码]"IE=edge,chrome=1"[代码][代码]/>[代码][代码]    [代码][代码]<[代码][代码]meta[代码] [代码]content[代码][代码]=[代码][代码]"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"[代码] [代码]name[代码][代码]=[代码][代码]"viewport"[代码][代码]/>[代码][代码]    [代码][代码]<[代码][代码]meta[代码] [代码]name[代码][代码]=[代码][代码]"apple-mobile-web-app-capable"[代码] [代码]content[代码][代码]=[代码][代码]"yes"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]meta[代码] [代码]name[代码][代码]=[代码][代码]"apple-mobile-web-app-status-bar-style"[代码] [代码]content[代码][代码]=[代码][代码]"black"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]meta[代码] [代码]name[代码][代码]=[代码][代码]"apple-mobile-web-app-title"[代码] [代码]content[代码][代码]=[代码][代码]""[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]meta[代码] [代码]name[代码][代码]=[代码][代码]"format-detection"[代码] [代码]content[代码][代码]=[代码][代码]"telephone=no"[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]title[代码][代码]></[代码][代码]title[代码][代码]>[代码][代码]  [代码][代码]</[代码][代码]head[代码][代码]>[代码][代码]  [代码][代码]<[代码][代码]body[代码][代码]>[代码][代码]    [代码][代码]<[代码][代码]div[代码] [代码]id[代码][代码]=[代码][代码]"app"[代码][代码]>[代码][代码]        [代码][代码]<[代码][代码]div[代码] [代码]class[代码][代码]=[代码][代码]"main"[代码][代码]>[代码][代码]            [代码][代码]<[代码][代码]div[代码] [代码]class[代码][代码]=[代码][代码]"part"[代码][代码]>[代码][代码]            [代码][代码]<[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]id[代码][代码]=[代码][代码]"p1"[代码] [代码]class[代码][代码]=[代码][代码]"part page2"[代码] [代码]style[代码][代码]=[代码][代码]"min-height: 667px;"[代码][代码]><[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]class[代码][代码]=[代码][代码]"login"[代码][代码]><[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]class[代码][代码]=[代码][代码]"phone"[代码][代码]><[代码][代码]span[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码][代码]>+86</[代码][代码]span[代码][代码]> <[代码][代码]input[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]type[代码][代码]=[代码][代码]"tel"[代码] [代码]maxlength[代码][代码]=[代码][代码]"11"[代码] [代码]placeholder[代码][代码]=[代码][代码]"请输入手机号"[代码][代码]> <[代码][代码]button[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码][代码]>[代码][代码]          [代码][代码]获取验证码[代码][代码]        [代码][代码]</[代码][代码]button[代码][代码]></[代码][代码]div[代码][代码]> <[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]class[代码][代码]=[代码][代码]"code"[代码][代码]><[代码][代码]span[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码][代码]>验证码</[代码][代码]span[代码][代码]> <[代码][代码]input[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]type[代码][代码]=[代码][代码]"text"[代码] [代码]placeholder[代码][代码]=[代码][代码]"请输入验证码"[代码][代码]></[代码][代码]div[代码][代码]></[代码][代码]div[代码][代码]> <[代码][代码]p[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]class[代码][代码]=[代码][代码]"loginTips"[代码][代码]><[代码][代码]span[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码][代码]>我已阅读并同意</[代码][代码]span[代码][代码]>条款及隐私政策</[代码][代码]p[代码][代码]> <[代码][代码]button[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]class[代码][代码]=[代码][代码]"btn loginBtn"[代码]  [代码]onclick[代码][代码]=[代码][代码]"go(this)"[代码][代码]>[代码][代码]      [代码][代码]快速登录[代码][代码]    [代码][代码]</[代码][代码]button[代码][代码]> <[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]id[代码][代码]=[代码][代码]"mask"[代码] [代码]class[代码][代码]=[代码][代码]"mask"[代码] [代码]style[代码][代码]=[代码][代码]"display: none;"[代码][代码]></[代码][代码]div[代码][代码]> <[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]class[代码][代码]=[代码][代码]"captcha-box"[代码] [代码]style[代码][代码]=[代码][代码]"display: none;"[代码][代码]><[代码][代码]p[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码][代码]>图形验证</[代码][代码]p[代码][代码]> <[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]id[代码][代码]=[代码][代码]"slider-capture"[代码][代码]></[代码][代码]div[代码][代码]> <[代码][代码]div[代码] [代码]data-v-5a4bed13[代码][代码]=[代码][代码]""[代码] [代码]class[代码][代码]=[代码][代码]"none slice-img"[代码][代码]></[代码][代码]div[代码][代码]></[代码][代码]div[代码][代码]></[代码][代码]div[代码][代码]>[代码]  [代码]            [代码][代码]</[代码][代码]div[代码][代码]>[代码][代码]        [代码][代码]</[代码][代码]div[代码][代码]>[代码][代码]    [代码][代码]</[代码][代码]div[代码][代码]>[代码][代码]<[代码][代码]style[代码][代码]>[代码][代码]body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption {[代码][代码]  [代码][代码]padding: 0;[代码][代码]  [代码][代码]margin: 0;[代码][代码]  [代码][代码]list-style: none;[代码][代码]  [代码][代码]font-style: normal;[代码][代码]  [代码][代码]text-decoration: none;[代码][代码]  [代码][代码]border: none;[代码][代码]  [代码][代码]box-sizing: border-box;[代码][代码]  [代码][代码]font-weight: lighter;[代码][代码]  [代码][代码]font-family: "PingFang-SC", Helvetica;[代码][代码]  [代码][代码]-webkit-tap-highlight-color: transparent;[代码][代码]  [代码][代码]-webkit-font-smoothing: antialiased;[代码] [代码]}[代码] [代码]html, body {[代码][代码]  [代码][代码]background-color: #e9e9e7;[代码][代码]  [代码][代码]width: 100%;[代码][代码]  [代码][代码]height: 100%;[代码][代码]  [代码][代码]/*-webkit-user-select: none;[代码][代码]  [代码][代码]user-select: none;*/[代码][代码]}[代码][代码]img {[代码][代码]  [代码][代码]display: block;[代码][代码]  [代码][代码]width: 100%;[代码][代码]  [代码][代码]height: 100%;[代码][代码]  [代码][代码]border: 0;[代码][代码]}[代码] [代码]// 消除输入框和按钮的原生外观[代码][代码]/*input, textarea {[代码][代码]  [代码][代码]-webkit-appearance: none;[代码][代码]}*/[代码] [代码].clear:after {[代码][代码]  [代码][代码]content: '';[代码][代码]  [代码][代码]display: block;[代码][代码]  [代码][代码]clear: both;[代码][代码]}[代码] [代码].clear {[代码][代码]  [代码][代码]zoom: 1;[代码][代码]}[代码] [代码].back_img {[代码][代码]  [代码][代码]background-repeat: no-repeat;[代码][代码]  [代码][代码]background-size: 100% 100%;[代码][代码]}[代码] [代码].left {[代码][代码]  [代码][代码]float: left;[代码][代码]}[代码] [代码].right {[代码][代码]  [代码][代码]float: right;[代码][代码]}[代码] [代码].text-center {[代码][代码]  [代码][代码]text-align: center;[代码][代码]}[代码] [代码].hide {[代码][代码]  [代码][代码]display: none;[代码][代码]}[代码] [代码].show {[代码][代码]  [代码][代码]display: block;[代码][代码]}[代码] [代码].ellipsis {[代码][代码]  [代码][代码]overflow: hidden;[代码][代码]  [代码][代码]text-overflow: ellipsis;[代码][代码]  [代码][代码]white-space: nowrap;[代码][代码]}[代码] [代码].fl {[代码][代码]  [代码][代码]float: left;[代码][代码]}[代码] [代码].fr {[代码][代码]  [代码][代码]float: right;[代码][代码]}[代码] [代码]@wa: 100vw;[代码][代码]@ha: 100vh;[代码][代码]@wu: @wa / 375;[代码][代码]@hu: @ha / 667;[代码] [代码]html, body, #app {[代码][代码]    [代码][代码]width: 100vw;[代码][代码]    [代码][代码]height: 100vh;[代码][代码]    [代码][代码]color: rgb(51,51,51);[代码][代码]    [代码][代码]position: fixed;[代码][代码]    [代码][代码]top: 0;[代码][代码]    [代码][代码]left: 0;[代码][代码]}[代码] [代码].main{[代码][代码]    [代码][代码]width: 100vw;[代码][代码]    [代码][代码]height: 100vh;[代码][代码]}[代码][代码].main .part{[代码][代码]    [代码][代码]width: 100vw;[代码][代码]    [代码][代码]height: 100vh;[代码] [代码]    [代码][代码]position: relative;[代码][代码]}[代码][代码].main .part .login{[代码][代码]    [代码][代码]width: 90.66666667vw;[代码][代码]    [代码][代码]height: 56.53333333vw;[代码][代码]    [代码][代码]border-radius: 2.66666667vw;[代码][代码]    [代码][代码]background-color: rgba(246, 247, 251, 0.9);[代码][代码]    [代码][代码]position: absolute;[代码][代码]    [代码][代码]top: 50vw;[代码][代码]    [代码][代码]left: 4.66666667vw;[代码][代码]}[代码][代码].main .part .loginTips{[代码][代码]    [代码][代码]width: 100vw;[代码][代码]    [代码][代码]text-align: center;[代码][代码]    [代码][代码]font-size: 3.2vw;[代码][代码]    [代码][代码]height: 3.2vw;[代码][代码]    [代码][代码]line-height: 3.2vw;[代码][代码]    [代码][代码]position: absolute;[代码][代码]    [代码][代码]left: 0;[代码][代码]    [代码][代码]bottom: 31.46666667vw;[代码][代码]    [代码][代码]color: #000;[代码][代码]}[代码][代码].main .part .loginBtn {[代码][代码]    [代码][代码]position: absolute;[代码][代码]    [代码][代码]left: 23.2vw;[代码][代码]    [代码][代码]bottom: 16.53333333vw;[代码][代码]    [代码][代码]border: 1px solid #f00;[代码][代码]    [代码][代码]z-index: 9999;[代码][代码]}[代码][代码].main .part .loginBtn :active{[代码][代码]opacity:0.6;[代码][代码]box-shadow: 2px 2px 5px #666;[代码][代码]transform: translateY(2px);[代码][代码]}[代码][代码].main .part .btn{[代码][代码]    [代码][代码]display: block;[代码][代码]    [代码][代码]width: 53.6vw;[代码][代码]    [代码][代码]height: 11.73333333vw;[代码][代码]    [代码][代码]border-radius: 2.66666667vw;[代码][代码]    [代码][代码]background-color: #d3b466;[代码][代码]    [代码][代码]color: #fff;[代码][代码]    [代码][代码]font-size: 4.26666667vw;[代码][代码]    [代码][代码]text-align: center;[代码][代码]    [代码][代码]line-height: 11.73333333vw;[代码][代码]}[代码][代码].main .part .btn:active{[代码][代码]opacity:0.9;[代码][代码]box-shadow: 2px 2px 5px #666;[代码][代码]transform: translateY(2px);[代码][代码]background:#ff0000;[代码][代码]}[代码] [代码]</[代码][代码]style[代码][代码]>[代码][代码]<[代码][代码]script[代码][代码]>[代码][代码]function go(dom){[代码][代码]console.info(dom);[代码][代码]//dom.style.background = '#ff0000';[代码][代码]alert(123);[代码][代码]}[代码][代码]</[代码][代码]script[代码][代码]>[代码][代码]</[代码][代码]html[代码][代码]>[代码] 用vue写的，我把关键 代码 整理出来了， 大概的问题是： 1，一个input  和一个 button, 2， 不点击input 点击button 正常 3,  点击input 弹出输入框，点击键盘上的完成， 再点击button没反应了。要点击偏上一点才有效果。 微信 6.7.3 没问题，6.7.4的问题 演示视频 ： https://share.weiyun.com/50ZQTuR