本课程从实践角度，从0开始完成多端应用的开发和上线过程，并介绍一些必要的细节指引，帮助开发者能够轻松开始，课程内容会根据产品演进持续更新。

1、先去腾讯云平台开通人脸核身功能，需要填写正确的小程序APPID [图片] 2、开通后、进入账号信息中->访问管理->访问秘钥，可得到调用API接口的参数： [图片] 3、进入微信小程序中申请类目：政府/明生 申请成功后、可在接口设置授权中使用。 [图片] 4、在小程序设置中关联第三方平台，不要分配开发权限 [图片] 5、下载小程序SDK ，下载位置见步骤1的图。 6、根据文档、在小程序代码中做相应的配置 https://cloud.tencent.com/document/product/1007/31071 7、需要在自己的服务器中接入腾讯接口调用API 、去获取小程序所需的 BizToken [图片] 8、访问链接：https://console.cloud.tencent.com/api/explorer?Product=faceid&Version=2018-03-01&Action=DetectAuth&SignVersion= 如下图1 获取BizToken，2、获取人脸核身后的相关信息 [图片]

一、能力背景 近年来，国家在医疗挂号、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获取隐私整治，结合平台安全、用户敏感隐私信息保护要求及监管，针对部分暂无相关法规或要求，需要采集或生物认证方式进行身份核验的，或以“追热点”或“尝鲜”为目的，采集用户生物特征或进行身份核验的，进行严格审核，必要时不予以支持。

内含开店指引、店铺运营和平台规则，帮你快速掌握小商店经营秘诀。

注：以下资料来自官方文档 相关内容具有时效性 仅适用发文章时点。 官方文档地址：传送门 官方常见备案问题：传送门 一、几个时间点 自2023年09月01日起，新的微信小程序，必须备案后才能上架； 在2024年03月31日前，所有小程序都必须完成备案； 于2024年04月01日起，对未备案小程序进行清退处理。 微信小程序备案系统已于9月4日上线。 二、备案流程 [找备案入口]–[填主体信息]–[填小程序信息]–[初审]–[短信核验]–[通管局审核] 1，在小程序后台找到备案入口 [图片] [图片] （1）新的未上架小程序，可以在小程序首页点击【去备案】进入。 （2）已上架小程序，可以在设置-基本设置中找到【去备案】入口。 或者在小程序后台顶部会出现补充备案的提醒，也可以进入备案。 注：截止文章发稿时，官方后台暂时尚未出现相关入口，应是9月1日后出现。 2，填写备案主体信息 （1）选地区、主办者性质（个人或企业）、相关证件与上传、通讯地址等。 （2）还需要填写主体负责人信息，应急联系人手机号等。 3，小程序信息填写 （1）小程序的APPID、名称，会自动显示，然后需要选服务标识，选择是否包括“互联网信息服务前置审批项”内容。 （2）若存在前置审批项（小程序从事新闻、出版、药品和医疗器械、网约车等），需提供业务对应前置审批文件。 （3）还需要填写小程序负责人信息，包括证件、手机号、应急手机号、邮箱，需要负责人人脸核身。 4，平台初审 平台将会在1-2个工作日内完成初审。 审核结果将以站内信、模板消息等形式通知管理员。 需保持相关人员电话畅通，平台可能会进行核验。 5，工信部短信核验 初审通过后，会收到工信部发送的核验短信（来自12381）； 你需要24小时内登录工信部备案首页完成短信核验。 核验成功后，备案进入通管局审核流程。 6，通管局审核 各省通信管理局将在1~20个工作日内完成审核。 审核结果以站内信、模板消息、短信等形式通知。 7，备案成功 管局审核通过后，将下发的小程序备案号。 三、相关证件与资料 1，个人主体 身份证（正反面上传，大小不超过200K，分辨率不低于15001100，证件有效期大于1个月） *通讯地址 *手机号（会验证码确认） *应急手机号（不得与负责人手机号相同） *人脸核身（背景应为纯白色，不遮挡面部） 2，非个人主体 *营业执照（或组织机构代码证等主体证件） *通讯地址 *负责人身份证 *负责人手机号（会验证码确认） *应急手机号（不得与负责人手机号相同） *负责人 人脸核身（背景应为纯白色，不遮挡面部） *涉及前置审批的，还需准备前置审批相关材料 四、其他 1，与网站ICP备案流程相似，可以参考。 2，小程序备案是免费的。 3，或许社区会出现小程序备案的小主页（然而并没有）。 4，建议关注社区负责备案问题的官方专员：小程序运营专员-wwen 5，存量小程序（即2023年9月4日前已上架发布的）的备案开放时间可能会在10月份，以官方通知为准。 6，当日备案小程序数量存在系统限制，估计备案的太多了。 7，即刻起小程序备案必须先进行微信认证才可以（官方理由是整治虚假备案与提交）。 8，服务商代备案接口：传送门 9，提示手机号不允许被多人使用，这是指同一个人允许为多个小程序备案，可以提交一致的手机号及邮箱，但不能出现不同人共用手机号/邮箱的情况。 10，提示同一主体不能同时备案多个。 是因为若备案主体从未在管局备案过，需首个备案小程序审核通过后才可以进行下一个小程序备案。 11，备案号会出现在小程序更多资料中，无需开发人员自行放置。 12，若近期新建企业，或近期有做信息变更，企业工商数据更新可能有延迟，建议过段时间（5~15天）再试。 13，若个体工商户无公章，需要主体负责人手写日期+签名+盖手印+身份证号码，同时请在主体备注处备注“个体工商户无公章”。 14，当个人主体小程序备案申请人的身份证证件地址与申请小程序备案的省份不一致时，需要提供暂住证或居住证等证明材料。 涉及省份包括：吉林、上海、江苏、浙江、安徽、山东、湖北、广东、四川、贵州、云南。 15，小程序备案主体负责人必须填写法定代表人吗？ [图片] 16，负责人姓名已填写为小程序管理员的姓名，为什么还是提示：负责人与小程序管理员不一致？ 出现这种提示一般都是第三方服务商协助创建的小程序未完善管理员实名信息，需补充管理员实名信息后才能进行备案，补充指引参考： 小程序MP后台-成员管理-管理员-修改。 验证原管理员-填写原管理员身份证信息-扫码验证。 绑定新管理员-填写【原管理员的信息】并提交，即完成管理员实名信息补充。 *请以官方文档、通知为准。 （2023.09.21）

MiniTest 小程序云测是一套由微信测试团队自主研发，联合WeTest云真机能力，共同推出的小程序自动化测试服务。服务基于云真机，支持开发者简单快捷地实现小程序真机自动化测试和性能分析等能力。

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

原因是H5用旧的方式申请JSAPI分享权限，后台返回无权限，因此分享的时候不能自定义，建议开发者接入新的分享方式：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html ，使用新的wx.updateAppMessageShareData和wx.updateTimelineShareData接口来设置分享数据。

测试的是公司的服务号，2021年5月28日认证到期（所有不存在没有认证），申请了测试号，测试扫码登录接入，但是照着官网的教程做，无法显示二维码，而是显示【Scope 参数错误或没有 Scope 权限】。望各位大佬帮看看，到底哪里出了问题。这是测试的url：https://open.weixin.qq.com/connect/qrconnect?appid=wx6faee6259bf9e449&redirect_uri=http%3A%2F%2Fnat300.supwk.top&response_type=code&scope=snsapi_login&state=165415456#wechat_redirect [图片] [图片][图片]

苏茂林, 个人博客, Kevin.Su's Blog, 关于前端技术！ 网址：https://sumaolin.com/ 的blog 通过hexo 生成的blog 然后通过API调用生成blog的json数据，再小程序中展示，可以通过复制链接再浏览器中访问

为规范开发者的用户个人信息处理行为，保障用户合法权益，小程序涉及处理用户个人信息的开发者，均需补充相应用户隐私保护指引；微信会根据小程序版本隐私接口调用情况展示必填项，开发者可自主勾选其他项目。 一、代码提审版本用户隐私保护指引填写入口： 管理—版本管理—提交代码审核—信息填写页面 [图片] 二、常见驳回场景： 隐私接口授权信息描述存在不明确、空白、填写无意义内容、乱填写、填写过于简洁含糊等情况； 示例①：小程序涉及多个隐私信息接口类型，信息类型填写存在不清晰且多个接口原因一致 [图片][图片] 示例②：小程序隐私信息接口类型存在填写无意义的内容，填写“为了收集信息而收集信息”并未清晰描述信息接口原因 [图片] 示例③：小程序隐私信息接口类型存在填写“不清楚、不知道”、“111、AAA、！@#￥”等乱填接口原因 [图片] 示例④：内容过于简洁或含糊，仅填写“使用、定位、开发”等内容，无法清晰了解到使用接口原因 [图片] 【整改建议】： 请清晰补充描述隐私接口调用情况，详细说明用户信息授权目的及信息收集场景，若暂不使用某些隐私接口，请根据隐私接口与对应的处理的信息关系指引，先删除代码中涉及隐私信息的接口，不支持填写“暂未使用、暂不使用、不收集、不获取信息”等内容，若隐私接口暂未使用，建议自查代码，删除隐私接口相关代码，后续需要使用再上架代码并填写具体的使用说明再提审。 三、正确示例 小程序隐私信息接口类型填写需如实地描述获取用户隐私信息的每个接口，具体用于小程序哪一个功能或页面的服务，每一个接口都需完整、规范填写，若目前未使用到的接口需到代码包中自查删除相关接口。 示例： [图片] 本文档为【小程序代码提审用户隐私保护协议修改指引】的常见驳回类型说明，如存在上述问题应及时调整、修整，避免后续存在上诉问题审核失败；若仍有其他疑惑，可以通过以下咨询入口反馈： 1、微信开放社区-交流专区-小程序发帖咨询-提出问题-运营相关问题 2、代码审核驳回站内信通知-客服咨询入口（客服咨询入口目前正在测试开放阶段，若无客服入口，建议前往开放社区发帖咨询）

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

重磅打造的小程序学习路径课，从微信小程序到微信云开发体系化的学习，带来更加顺畅的学习体验。

UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]

//友好展示电话号码 setPhone(){ let Phone = '13245678464'   let phone = Phone.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")   this.setData({     phone: phone   }) } 以下为页面显示效果: [图片]

众所周知目前自开发小程序暂时不支持关联视频号。但是现在甲方爸爸需要真个功能，跟甲方爸爸说微信不支持，甲方爸爸不满意，给甲方爸爸实现这个功能，小程序不支持，掉了三根头发后终于想出了一个折中的办法：借用公众号。 具体思路如下：1，公众号添加一篇文章，插入视频号视频2，小程序webview 加载这篇公众号链接。具体操作： 1，添加公众号文章插入视频号视频 [图片] 2，添加好文章后，微信打开这篇文章，复制该文章链接 [图片] 3，微信小程序用webview 加载该链接，效果如下 [图片]

咨询下官方大大,用户浏览小程序商品可否直接跳转视频号,方便用户查看商品短视频

[视频] 微信十年，你和微信又有哪些故事呢？ 欢迎在评论区分享交流。

需求 一个小程序运营者要通过数据进行优化，这个时候大家第一个会想到的是微信公众平台发布的官方小程序“小程序数据助手”。 “小程序数据助手”当前功能模块包括数据概况、访问基础分析（用户趋势、来源分析、留存分析、时长分析、页面详情）、实时统计和用户画像（年龄性别、省份城市、终端机型），数据与小程序后台常规分析一致。 [图片] 信息以及图片来源小程序助手官方介绍 虽然“小程序数据助手”很强大，但是这些数据能够分析的纬度颗粒度都较大。无法让我们知道那个按钮点击次数以及某一个活动的效果如何，这个时候我们就需要用到埋点来进行业务数据采集，才能达到我们的目的。 自定义埋点分析 这个功能就在小程序管理后台->统计->自定义分析。 [图片] 收集数据 这里的埋点分为两种类型 无需代码埋点-【填写配置】 需要代码埋点-【API上报】 我们进入自定义分析模块点击【新增事件】 [图片] 填写配置 新建详情页面 [图片] 以上三个红框部分要注意： 第一个红框：配置方式决定来是否不需要代码，填写配置就不需要，API上报就需要。 第二个红框：触发条件，默认是点击触发。 第三个红框：锁定埋点目标的必要参数，定位到具体页面的具体元素。 举个🌰： 那我之前做的一个找字小程序来说，我用了填写配置的。我的目的是想知道游戏页面的删除道具用了多少次。 [图片] 首先我们来到来游戏页面，复制这个路径【pages/game/game】，然后定位删除道具的class【.del】。 [图片] 所以就得出来以下配置： [图片] API上报 接下来再介绍一种API上报的方式： [图片] 选择这种模式，可以直接点击生成代码，只需要把代码放到触发事件方法里面即可。 [图片] 这种方式相对更加灵活，只不过修改完成后需要发布审核。 查询数据 上面我们收集到了想要的数据接下来就查询数据。 [图片] 查询数据分为两种： 单个事件的分析-【事件分析】 多个事件的分析-【漏斗分析】 事件分析 刚才收集到了删除功能数据，那么你现在可以从多个纬度来分析。 [图片] 漏斗分析 选择多个事件作为一个漏斗。 如：想看每个页面都流失率，我就会把主页-列表页-答题页都数据做个漏斗。 如流失率比较高，就需要优化，优化后和之前版本对比，通过数据来验证效果。 [图片] 漏斗查询结果： [图片] 每一次查询都会有记录，这样更加便于对比数据。 [图片] 总结 数据能让你的每个功能都有结果，它也是产品迭代依据必不可少的环节。 如果你才知道这个功能，那就赶紧去试试吧！

少啰嗦，看效果 [图片] 洗牌效果：先全面展开，然后合起来，最后再次展开。 代码 布局代码 [代码]<view class="card"> <view wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:key="index" data-index="{{index+1}}" class="currin {{'cinton'+(index+1)}}"> <text class="word">...</text> </view> </view> [代码] 样式代码 [代码] .card { width: 690rpx; height: 835rpx; margin-left: 30rpx; margin-top: -10rpx; padding: 40rpx 10rpx; display: flex; flex-wrap: wrap; justify-content: center; background-image: url(https://7072-pro-0hm6x-1303088679.tcb.qcloud.la/images/random_bg.png); background-size: 100% 100%; z-index: 1; } .currin { margin: 5rpx 5rpx; width: 190rpx; height: 240rpx; float: left; background-image: linear-gradient(45deg, #0081ff, #1cbbb4); color: #fff; text-align: center; line-height: 240rpx; border-radius: 10rpx; position: relative; } .cinton1 { animation: cinton1 alternate linear 2 1s; } @keyframes cinton1 { from { top: 0; left: 0; } to { top: 300rpx; left: 230rpx; } } .cinton2 { animation: cinton2 alternate linear 2 1s; } @keyframes cinton2 { from { top: 0; left: 0; } to { top: 300rpx; left: 0rpx; } } .cinton3 { animation: cinton3 alternate linear 2 1s; } @keyframes cinton3 { from { top: 0; left: 0; } to { top: 300rpx; left: -230rpx; } } .cinton4 { animation: cinton4 alternate linear 2 1s; } @keyframes cinton4 { from { top: 0; left: 0; } to { top: 0rpx; left: 230rpx; } } .cinton6 { animation: cinton6 alternate linear 2 1s; } @keyframes cinton6 { from { top: 0; left: 0; } to { top: 0rpx; left: -230rpx; } } .cinton7 { animation: cinton7 alternate linear 2 1s; } @keyframes cinton7 { from { top: 0; left: 0; } to { top: -300rpx; left: 230rpx; } } .cinton8 { animation: cinton8 alternate linear 2 1s; } @keyframes cinton8 { from { top: 0; left: 0; } to { top: -300rpx; left: 0rpx; } } .cinton9 { animation: cinton9 alternate linear 2 1s; } @keyframes cinton9 { from { top: 0; left: 0; } to { top: -300rpx; left: -230rpx; } } [代码]

效果 [图片] 代码 [代码].animt { animation: turn 1.2s; } @keyframes turn { 0% { transform: perspective(150px) rotateY(0deg); } 50% { transform: perspective(150px) rotateY(0deg); } 100% { transform: perspective(150px) rotateY(179.9deg); } } [代码] 总结 情侣券随机券三篇动画完结了。 回顾一下顺序： 用户进入页面卡片洗牌：效果实现 用户点击卡片进行翻转（本篇） 翻转之后显示卡片内容：效果实现

前言 这是《#小程序云开发挑战赛#-情侣券-想做就做》 的领取动画原理分析 效果 [图片] 分析 信封动效显示 卡券从小到大 卡券从下到上 显示操作按钮 打开信封动效 这个是让设计师提前做好的gif [图片] 动画逻辑 创建一个动画对象 先把卡券大小缩小（默认是透明的，所以看不到缩小动画） 然后卡券大小放大，从透明到不透明 卡券上移 显示按钮 代码如下： [代码]setTimeout(function () { var animation = wx.createAnimation({ duration: 800, timingFunction: 'ease', }) animation.scale(0, 0).step() animation.scale(1, 1).opacity(1).step() animation.translateY(-100).step() that.setData({ animationData: animation.export() }) }, 500) setTimeout(function () { that.setData({ showBtn: true }) }, 2800) [代码] 总结 《参加#小程序云开发挑战赛#技术总结篇》这个系列写完了，后续情侣券会持续迭代同样我也会持续输出在这个过程中到收获。 感觉不错就点赞，收藏一下～

前言 花了3个月，一共输出 40 篇文章，这也算是一个阶段性的总结。在此做个文章分类集合，希望对大家有所帮助。 小程序前端 《专治按钮效果不明显（扩散动画效果）》 《小程序开发必备，这 5 款超实用开源插件！》 《仿抽奖助手奖品详情页面向上翻页效果》 《推荐 5 款高仿知名应用的开源项目！》 《生成海报很复杂？有它轻松搞定！》 《推荐一个自定义导航栏开源库》 《前端开发，必备的学习网站！》 《情侣券-领取动画分析》 《通过玩游戏来学习CSS》 《CSS不规范导致的布局显示问题》 《微信小程序如何引入npm包？》 《情侣券-选中卡片翻转动画》 《CSS：实现卡片洗牌效果》 《情侣券 v2.0 使用的 4 款开源组件》 小程序云开发 《使用聚合函数实现打卡排行榜》 《使用云开发做内容安全检查》 《云开发-实现分页功能》 《云开发-实现维护用户表》 《云开发-实现模糊搜索》 《云开发实战：实现订阅消息推送》 《如何优雅的调用云函数？》 《云开发实战-如何维护用户表？（优化版）》 《推荐 10 款使用云开发的开源项目》 《云开发：CloudBase CMS 实战使用指南》 小程序产品 《如何利用小程序提高10倍活动效果？》 《实战：让数据说话之自定义埋点分析》 《#小程序云开发挑战赛#-情侣券》 《小程序运营必备的 3 款官方小程序》 《小程序云开发挑战赛：情侣券 v1.1 版本迭代》 《云开发挑战赛复赛：情侣券介绍PPT》 《参加#小程序云开发挑战赛#复赛收获》 《云开发挑战赛决赛：情侣券介绍PPT》 通用知识 《如何重构？》 《如何高效学习？》 《如何看懂时序图？》 《为什么优秀的程序员都写博客？》 《我从 Android 转到 微信小程序 的思考》 最后 后续计划会写更多云开发相关的文章以及小程序基础系列学习文章。

前言 生成海报这个需求非常常见，一般用于分享朋友圈，自定义分享到群，开发者为了生成写了很多绘制代码。绘制代码看上去都差不多，有不得不写，很难受。 直到我遇见了它！ Painter：小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片 看效果 [代码]{ background: '#eee', width: '654rpx', height: '400rpx', borderRadius: '20rpx', views: [ { type: 'image', url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q', css: { top: '48rpx', right: '48rpx', width: '192rpx', height: '192rpx', }, } ... ], } [代码] 绘制结果： [图片] 你没看错，就是如此简单，再也不用写绘制代码了！ 功能与优势 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转） 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。 实现原理 [图片] 开发者可以根据需求构建生成图片的 Palette（调色板），然后在程序运行过程中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。 看demo [图片] 从demo我们可以看出支持的样式和组件非常丰富，不仅如此还可以进行拖拽位置、对大家进行调整。 [图片] 具体详细使用方法以及json规范可以点击下方地址项目主页查看。 上地址 地址：https://github.com/Kujiale-Mobile/Painter

看效果 [图片] 上代码 // js Page({ data: { list: [ // scrollList { name: '111' }, { name: '222' } ], catchTouchMoveEvent: 'catchtouchmove', // 禁止滑动事件名参数；当为null的时候，不会禁止滑动； isShort: true, // 翻页时候是否可以抖动 nowIndex: 0 // 当前所在第几页 }, /** * @func 向下滑动，滑动到顶部的回调 * @author zc * @params e 元素对象 */ upper(e) { console.log('到顶了', e) this.setData({ catchTouchMoveEvent: 'catchtouchmove' }) }, /** * @func 向上滑动，滑动到底部的回调 * @author zc * @params e 元素对象 */ lower (e) { console.log('到底了', e) this.setData({ catchTouchMoveEvent: null }) }, /** * @func 向上切换页面的时候，进行抖动 * @author zc * @params e 元素对象 */ touchmove (e) { if (e.target.id === 'blue' && this.data.isShort) { this.setData({ isShort: false }) // 震动 wx.vibrateShort({ success (res) { console.log('成功', res) }, complete (res) { console.log('成功', res) }, fail (res) { console.log('失败', res) }, }) } }, /** * @func 当页面切换临界点，未完全切换时候促发，此时往回滑动还是能还原的；此时屏蔽滑动事件，以防他往回滑动 * @author zc * @params e 元素对象 */ swiperChange () { this.setData({ catchTouchMoveEvent: 'catchtouchmove', }) }, /** * @func 当swiper切换动画完成后的回调函数 * @author zc * @params e 元素对象 */ swiperAnimationfinish (e) { console.log('切换动画结束啦', e.detail.current, this.data.nowIndex) let dataObj = { isShort: true, } // 当前与存储的index页码不一致的时候，表示已经切换了；为了区分滑动一半返回去的情况 if (e.detail.current !== this.data.nowIndex) { let list = this.data.list list.push({ name: Date.parse(new Date()) }) dataObj = { ...dataObj, list, nowIndex: e.detail.current } } this.setData(dataObj) }, /** * @func 禁止滑动 * @author zc */ catchtouchmove () { return false } }) 商品介绍【头部】/view> 商品介绍【内容】/view> 商品介绍【尾部】/view> /scroll-view> /swiper-item> /block> /swiper> /view> 源码地址：https://github.com/firstshow/mina-scroll-swiper

效果 [图片] 需求 背景 由于最近自家小程序用户活跃用户下滑，老板看看自家小程序，发现分享按钮不够明显，于是乎有了下面这段对话。 老板：小明，你过来下，看看这个分享按钮不明显 小明：好的，给它点颜色瞧瞧 小明给按钮来了个红色，发给了BOSS BOSS：还是不明显 小明：好的，给它点放大瞧瞧 小明把按钮从原来的60rpx放大到了230rpx，发给了BOSS BOSS：还是不明显 小明：好的，让它动起来！ 需求：提高分享率，做个扩散动画效果让这个按钮成为整个页面最靓的仔。 思路分析： 从小到大的变化 从颜色从深到浅 反复进行该动作 动画代码 实用 CSS3 的 animation 属性 代码 [代码].share-btn { width: 200rpx; height: 200rpx; } .share-btn::before { // 省略无关代码 animation: wave 1.5s ease-out infinite; } @keyframes wave { 50%, 75% { width: 230rpx; height: 230rpx; } 80%, 100% { opacity: 0; } } [代码] 分析 我们先来看看 animation 参数： animation: wave 1.5s ease-out infinite; animation: 关键帧名称 动画时长 动画形式 播放次数; ease-out：动画以低速结束 infinite：无限次播放 从参数可以得出来使用了wave这个关键帧参数，1.5完成一次扩散的动画，从快到满的速度，无限重复这个动画。 然后我们再来看看 keyframes 参数： 百分比：动画持续时间的百分比。 属性：CSS样式属性 从参数可以得出来 时间 50%->75% 的时候就会改变大小从200rpx-230rpx。 时间 80%->100% 的时候会改变透明度从0-1。 第一步：原始大小（高度：200，宽度：200，透明度：1） [图片] 第二步：改变大小（高度：230，宽度：230，透明度：1） [图片] 第三步：改变透明度（高度：230，宽度：230，透明度：0） [图片] 第四步：回到第一步 总结 做动画先分析步骤，然后设置 animation 参数。如果你觉得CSS比较麻烦的话，还可以使用小程序提供 Animation 对象实现。 css3 的 animation 的所有参数不局限以上这些，了解更多点击传送门 Animation 对象，了解更多点击传送门

小程序基础库的组成 基础库成分 关于基础库的成分，不得不提到我们之前说过的小程序渲染机制，参考 React 的 Virtual DOM。 [图片] 基础库除了处理 VD 的渲染问题，它还包括内置组件和逻辑层API，总的来说负责处理数据绑定、组件系统、事件系统、通信系统等一系列框架逻辑。 小程序的基础库是 JavaScript 编写的，它可以被注入到渲染层和逻辑层运行。在渲染层可以用各类组件组建界面的元素，在逻辑层可以用各类 API 来处理各种逻辑。 同时，小程序的一些补充能力：自定义组件和插件，也有相应的基础代码，当然也需要添加到基础库里。 所以我们可以看到，小程序的基础库主要包括： 提供 VD 渲染机制相关基础代码。（Exparser 框架） 提供封装后的内置组件。 提供逻辑层的 API。 提供其他补充能力（自定义组件和插件等）的基础代码。 [图片] Exparser 框架 Exparser 是微信小程序的组件组织框架，内置在小程序基础库中，为小程序的各种组件提供基础的支持。 小程序内的所有组件，包括内置组件和自定义组件，都由 Exparser 组织管理。 Exparser 会维护整个页面的节点树相关信息，包括节点的属性、事件绑定等，相当于一个简化版的 Shadow DOM 实现。Exparser 的主要特点包括以下几点： 基于 Shadow DOM 模型：模型上与 WebComponents 的 ShadowDOM 高度相似，但不依赖浏览器的原生支持，也没有其他依赖库；实现时，还针对性地增加了其他 API 以支持小程序组件编程。 可在纯 JS 环境中运行：这意味着逻辑层也具有一定的组件树组织能力。 高效轻量：性能表现好，在组件实例极多的环境下表现尤其优异，同时代码尺寸也较小。 基于这个框架，内置了一套组件，以涵盖小程序的基础功能，便于开发者快速搭建出任何界面。同时也提供了自定义组件的能力，开发者可以自行扩展更多的组件，以实现代码复用。 内置组件 小程序基于 Exparser 框架，内置了一套组件，提供了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。 内置组件在小程序框架里的定义是：在小程序架构里无法实现或者实现不好某类功能，使用组件内置到小程序框架里。 常见包括： 开放类组件：如 open-data 组件提供展示群名称、用户信息等微信体系下的隐私信息，有 button 组件里 open-type 属性所提供分享、跳转 App 等敏感操作的能力 视图容器类组件：如 movable-view 这种因双线程模型导致手势识别不好实现的组件（在双线程模型中，触摸事件从渲染层发出，派发到逻辑层，这中间是有一定的延时而导致视图跟随手指运动这类交互变得有些卡顿） API 宿主环境提供了丰富的API，可以很方便调起微信提供的能力。 小程序提供的 API 按照功能主要分为几大类：网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口。 需要注意 API 调用大多都是异步的。 自定义组件 自定义组件是开发者可以自行扩充的组件。开发者可以将常用的节点树结构提取成自定义组件，实现代码复用。 在使用自定义组件的小程序页面中，Exparser 将接管所有的自定义组件注册与实例化。以 Component 为例： 在小程序启动时，构造器会将开发者设置的 properties、data、methods 等定义段，写入 Exparser 的组件注册表中。 这个组件在被其它组件引用时，就可以根据这些注册信息来创建自定义组件的实例。 Page 构造器的大体运行流程与之相仿，只是参数形式不一样。这样每个页面就有一个与之对应的组件，称为“页面根组件”。 在初始化页面时，Exparser 会创建出页面根组件的一个实例，用到的其他组件也会响应创建组件实例（这是一个递归的过程）。 插件 插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用。 插件不能独立运行，必须嵌入在其他小程序中才能被用户使用；而第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。 插件开发者可以像开发小程序一样编写一个插件并上传代码，在插件发布之后，其他小程序方可调用。小程序平台会托管插件代码，其他小程序调用时，上传的插件代码会随小程序一起下载运行。 小程序基础库机制 基础库的载入 在开发网页时，经常会引用很多开源的 JS 库，在使用到这些库所提供的 API 前，我们需要先在业务代码前边引入这些库。 同样道理，我们需要在启动 APP 之前载入基础库，接着再载入业务代码。由于小程序的渲染层和逻辑层是两个线程管理，而我们 一般说起基础库，也通常包括 WebView 基础库（渲染层），和 AppService 基础库（逻辑层）。 显然，所有小程序在微信客户端打开的时候，都需要注入相同的基础库。所以，小程序的基础库不会被打包在某个小程序的代码包里边，它会被提前内置在微信客户端。 将基础库内置在微信客户端，有两个好处： 降低业务小程序的代码包大小。 可以单独修复基础库中的Bug，无需修改到业务小程序的代码包。 小程序的启动 在小程序启动前，微信会提前准备好一个页面层级用于展示小程序的首页。 这里就包括了逻辑层和渲染层分别的初始化以及公共库的注入。 [图片] 在小程序启动时，微信会为小程序展示一个固定的启动界面，界面内包含小程序的图标、名称和加载提示图标。此时，微信会在背后完成几项工作：下载小程序代码包、加载小程序代码包、初始化小程序首页。 [图片] 基础库的更新 小程序的很多能力需要微信客户端来支撑，例如蓝牙、直播能力、微信运动等，可以说，小程序基础库的迭代离不开微信客户端的发布。 为了避免新版本的基础库给线上小程序带来未知的影响，微信客户端都是携带上一个稳定版的基础库发布的。等到微信客户端正式发布后，小程序会开始灰度推送新版本的基础库到微信客户端里，在这个过程需要仔细监控各类异常现象以及开发者和用户的反馈，一般灰度时长为12小时，灰度结束后，用户设备上就会有新版本的基础库。如果存在重大Bug，那此次推送会被回退。 参考 《小程序开发指南——小程序基础库的更新迭代》 《小程序开发指南——6.2 组件系统》 结束语 本节大致结合了小程序的启动来讲了下小程序的基础库。其实很多都能在小程序开发指南里找到，只是文字非常详（fan）细（duo），看一遍未必能记住，但是第二遍又找不到了。 哈哈哈吐槽下小程序的文档，很详细就是有点容易找不到。

为了提供给用户更好的阅读体验，微信安卓版 7.0.10 版本起，网页的字体会跟随微信设置里的字体大小更改而变化。 若调整字体变大或变小后，部分未适配网页的排版会出现显示错乱，建议未进行适配的开发者尽快完成对“ 字体大小” 的适配。 查看网页在字体不同大小下展示效果的方法：    方法1："设置">"通用">“字体大小">进行字体大小修改后查看对应网页显示效果。    方法2：在微信内访问对应网页右上角”…">底部菜单栏选择调整字体">进行字体大小修改后查看对应网页显示效果。    另外，对于现有的显示问题，我们提供以下方案让开发者临时将字体还原标准大小。同时，开发者可以在页面中提示用户在右上角”…”更多菜单中修改字体到合适的大小。 下列方案可以将字体还原标准大小，但我们仍然建议后续做字体适配来提高用户的阅读体验。  『字体还原标准大小』方案：      我们提供了一个  JSAPI 用于设置字体大小，只需将字体大小等级设置为 2 （标准）即可，代码示例如下： document.addEventListener("WeixinJSBridgeReady", function () {   WeixinJSBridge.invoke("setFontSizeCallback", {     fontSize: '2'   }); }, false); 此外，若页面是用 rem 单位进行排版的（目前该做法更容易导致页面不可用），可以反向重置 font-size 的数值达到还原字体标准大小的目的，此方法在效果上也比较理想。代码示例如下： // 以下代码思路来源网络。同时代码放在 body 标签开头位置效果最佳 var $dom = document.createElement('div'); $dom.style = 'font-size: 10px'; document.body.appendChild($dom); // 计算出放大后的字体 var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size')); document.body.appendChild($dom); // 计算原字体和放大后字体的比例 var scaleFactor = 10 / scaledFontSize; // 取 html 元素的字体大小 var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size')); // 由于设置 font-size 后实际会变大，故 font-size 需设置为更小一级 document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';

安卓和IOS版本里部分动画是用lottie实现的，小程序可以使用lottie的json文件吗？

无意中看到了酷家乐的VR页面可以直接跳转到小程序,官方又说不可以H5跳转到小程序?酷家乐是怎么做到的呢 可以使用微信扫一扫下面的二维码体验一下 地址: https://yun.kujiale.com/design/3FO4HR30Y3S0/show 二维码: [图片]

网上不少朋友说，先引入jweixin-1.3.0.js，然后通过wx.miniProgram.navigateTo 方法跳转到指定的小程序页面。 可是，请问，我在哪里告诉微信，我要跳转到哪个小程序里去？在哪里配置目标小程序的信息？ 如果我直接 wx.miniProgram.navigateTo({    url: '/pages/index' }); 那我跳哪个小程序里去？哪里指定？懵逼，急求大神指点。

小程序支持引入tensorflow.js做图像识别相关吗，如果不支持，可以说明理由么

小程序中使用three.js 目前小程序支持了webgl, 同时项目中有相关3D展示的需求，所以考虑将three.js移植到小程序中。 但是小程序里面没有浏览器相关的运行环境如 window，document等。要想在小程序中使用three.js需要使用相应的移植版本。https://github.com/yannliao/three.js实现了一个在 three.js 的基本移植版, 目前测试支持了 包含 BoxBufferGeometry, CircleBufferGeometry, ConeBufferGeometry, CylinderBufferGeometry, DodecahedronBufferGeometry 等基本模型，OrbitControl， GTLFLoader, OBJLoader等。 使用 下载https://github.com/yannliao/three.js项目中build目录下的three.weapp.min.js到小程序相应目录，如： [图片] 在index.wxml中加入canvas组件, 其中需要手动绑定相应的事件，用于手势控制。 [代码]<view style="height: 100%; width: 100%;" bindtouchstart="documentTouchStart" bindtouchmove="documentTouchMove" bindtouchend="documentTouchEnd" > <canvas type="webgl" id="c" style="width: 100%; height:100%;" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" bindlongtap="longTap" bindtap="tap"></canvas> </view> [代码] 在页面中引用three.js 和相应的Loader： [代码]import * as THREE from '../../libs/three.weapp.min.js' import { OrbitControls } from '../../jsm/loaders/OrbitControls' [代码] 在onLoad中获取canvas对象并注册到[代码]THREE.global[代码]中,[代码]THREE.global.registerCanvas[代码]可以传入id, 用于通过[代码]THREE.global.document.getElementById[代码]找到, 如果不传id默认使用canvas对象中的_canvasID, registerCanvas同时也会将该canvas选为当前使用canvas对象. 同时请在onUnload回调中注销canvas对象. 注意: THREE.global 中最多同时注册 5 个[代码]canvas[代码]对象, 并可以通过id找到. 注册的canvas对象, 会长驻内存, 如果不及时清理可能造成内存问题. [代码]THREE.global[代码]为[代码]three.js[代码] 的运行环境, 类似于浏览器中的window. [代码]Page({ data: { canvasId: '' }, onLoad: function () { wx.createSelectorQuery() .select('#c') .node() .exec((res) => { const canvas = THREE.global.registerCanvas(res[0].node) this.setData({ canvasId: canvas._canvasId }) // const canvas = THREE.global.registerCanvas('id_123', res[0].node) // canvas代码 }) }, onUnload: function () { THREE.global.unregisterCanvas(this.data.canvasId) // THREE.global.unregisterCanvas(res[0].node) // THREE.global.clearCanvas() }, [代码] 注册相关touch事件. 由于小程序架构原因, 需要手动绑定事件到THREE.global.canvas或者THREE.global.document上. 可以使用[代码]THREE.global.touchEventHandlerFactory('canvas', 'touchstart')[代码] 生成小程序的事件回调函数，触发默认canvas对象上的touch事件. [代码] { touchStart(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e) }, touchMove(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e) }, touchEnd(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e) }, } [代码] 编写three.js代码, 小程序运行环境中没有requestAnimationFrame, 目前可以使用canvas.requestAnimationFrame之后会将requestAnimationFrame注入到THREE.global中. [代码]const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000); camera.position.z = 500; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xAAAAAA); const renderer = new THREE.WebGLRenderer({ antialias: true }); const controls = new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // controls.dampingFactor = 0.25; // controls.enableZoom = false; camera.position.set(200, 200, 500); controls.update(); const geometry = new THREE.BoxBufferGeometry(200, 200, 200); const texture = new THREE.TextureLoader().load('./pikachu.png'); const material = new THREE.MeshBasicMaterial({ map: texture }); // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); // renderer.setSize(canvas.width, canvas.height); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.width, canvas.height); } function render() { canvas.requestAnimationFrame(render); // mesh.rotation.x += 0.005; // mesh.rotation.y += 0.01; controls.update(); renderer.render(scene, camera); } render() [代码] 完整示例: index.js [代码]import * as THREE from '../../libs/three.weapp.min.js' import { OrbitControls } from '../../jsm/loaders/OrbitControls' Page({ data: {}, onLoad: function () { wx.createSelectorQuery() .select('#c') .node() .exec((res) => { const canvas = THREE.global.registerCanvas(res[0].node) this.setData({ canvasId: canvas._canvasId }) const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000); camera.position.z = 500; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xAAAAAA); const renderer = new THREE.WebGLRenderer({ antialias: true }); const controls = new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // controls.dampingFactor = 0.25; // controls.enableZoom = false; camera.position.set(200, 200, 500); controls.update(); const geometry = new THREE.BoxBufferGeometry(200, 200, 200); const texture = new THREE.TextureLoader().load('./pikachu.png'); const material = new THREE.MeshBasicMaterial({ map: texture }); // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); // renderer.setSize(canvas.width, canvas.height); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.width, canvas.height); } function render() { canvas.requestAnimationFrame(render); // mesh.rotation.x += 0.005; // mesh.rotation.y += 0.01; controls.update(); renderer.render(scene, camera); } render() }) }, onUnload: function () { THREE.global.unregisterCanvas(this.data.canvasId) }, touchStart(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e) }, touchMove(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e) }, touchEnd(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e) }, touchCancel(e) { // console.log('canvas', e) }, longTap(e) { // console.log('canvas', e) }, tap(e) { // console.log('canvas', e) }, documentTouchStart(e) { // console.log('document',e) }, documentTouchMove(e) { // console.log('document',e) }, documentTouchEnd(e) { // console.log('document',e) }, }) [代码] index.wxml [代码]<view style="height: 100%; width: 100%;" bindtouchstart="documentTouchStart" bindtouchmove="documentTouchMove" bindtouchend="documentTouchEnd" > <canvas type="webgl" id="c" style="width: 100%; height:100%;" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" bindlongtap="longTap" bindtap="tap"></canvas> </view> [代码] 其他 全部示例在 https://github.com/yannliao/threejs-example three.js 库 https://github.com/yannliao/three.js loader 组件在 threejs-example 中的 jsm 目录中 欢迎提交PR和issue

目前官方提供小程序基础能力，开发者可以接入第三方引擎，完成小程序AR效果开发。 微信相关的基础能力供参考： -摄像头组件（用户授权下，可获取视频帧数据）： https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.html -WebGL画布： https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html -完整示例代码： https://developers.weixin.qq.com/s/ElC24AmF729W -传感器： https://developers.weixin.qq.com/miniprogram/dev/api/device/compass/wx.onCompassChange.html#accuracy%20%E5%9C%A8%20iOS/Android%20%E7%9A%84%E5%B7%AE%E5%BC%82 -陀螺仪： https://developers.weixin.qq.com/miniprogram/dev/api/device/gyroscope/wx.startGyroscope.html https://developers.weixin.qq.com/miniprogram/dev/api/wx.onGyroscopeChange.html 欢迎开发者/开发平台进驻微信服务平台，成为服务商、提供插件，供更多服务商和品牌合作伙伴了解、联系你们。具体请参考：https://developers.weixin.qq.com/community/develop/doc/000e2ed8e44e98b1916884aa351008 开发者也可以多关注官方微信号"微信公开课"等解读：https://mp.weixin.qq.com/s/4_p2bAcp3OkTQizceFvMkQ

https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/remote.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F 里面的 手工启动方式中是 [代码]miniProgram.connect[代码]应该是 [代码]automator.connect[代码] 相关的文档： https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/automator.html

- 需求的场景描述（希望解决的问题） 小程序appid wx2f138fdd201ae3b7 开放平台接入客户小程序，小程序广告创建数据源接口返回   api unauthorized   - 希望提供的能力 不知道需要怎么授权？ 已解决： 这里提供下思路，通过公众号的广告管理权限去添加数据源，所以这里前提小程序要跟公众号关联 1、开放平台的开发者，权限管理里一定要有  【广告管理权限】，这里func_info里 funcscope_category  是 23，如果没有就没有广告管理权限，就是我上面的 api unauthorized 2、创建数据源   curl -i "https://api.weixin.qq.com/marketing/user_action_sets/add?version=v1.0&access_token=<ACCESS_TOKEN>" -H "Content-Type: application/json" -d '{ "type": "WEB", "name": "wxadtest", "description": "test" }'我这里用的php curl，之前的所有的公众号和小程序的接口都没有设置header头。。。这里如果不设置会报错   JSON string is malformed 3、创建的时候 {     "errcode": 900351000,     "errmsg": "could create only one web action set for 3753071 with existed one : 1108883278" }   这个错误的意思是说  errmsg 里  1108883278 是已经创建好的id，怎么取就不需要我教了。。。取到之后存到数据库或者redis或者其他地方跟该小程序绑定起来就行，下次直接取，不需要创建