我登录小程序后台也是需要300元年审费用，之前是复用公众号认证，如果公众号进行年审，现在还可以用小程序复用年审吗？不用交300元 [图片]

各位亲，面对帐号注销是不是束手无策呢？帐号如何注销，怎么注销，注销需要提供什么信息内容呢？请仔细往下看看 小程序 关于小程序注销的条件，若未冻结的个人帐号和组织类帐号就不 一 一 细讲，详情请参腾讯客服文档：https://kf.qq.com/product/wx_xcx.html#hid=2826 1：小程序注销之政府无对公账户： 详细流程请参考：https://kf.qq.com/faq/190104YnQbYN190104RzaYba.html 政府的有一致主体是提供一致的主体证件和公章，如果有变更请提供4项材料：因机构改革、单位合并、撤一建一等情况，导致机构主体名称有变更，提供以下材料申请注销： 1、更名相关的红头文件（有鲜章）； 2、主体名称变更情况说明书（加盖新主体公章）； 3、变更后新主体的主体证件；（原件拍照或加盖公章的复印件） 4、注销申请函（加盖新主体公章）； 2：小程序注销之个体工商户 若个体工商户存在对公账户，请使用对公账户小额打款注销 若个体工商户类型无对公账户注销小程序工单指引流程如下 工单所需材料 1、小程序绑定邮箱/原始ID： 2、主体证件材料（营业执照/组织机构代码证等）： 3、小程序绑定的法人身份证原件正反面的清晰扫描件或照片： 4、小程序的注销书面申请，申请书必须加盖公章。（若个体户没有公章可支持法人手写签名） 附注：注销申请书模板（https://kf.qq.com/faq/200306R7N3mI200306I3aEBz.html） 材料提交链接：https://kf.qq.com/touch/bill/200306selfqaafe6c551.html（手机端打开） 3：小程序注销之帐号主体已注销 主体已注销小程序工单指引流程如下， 1、小程序绑定邮箱/原始ID： 2、主体注销证明： 3、小程序绑定的法人身份证原件正反面的清晰扫描件或照片： 4、小程序的注销书面申请，企业账号的申请必须有加盖公章的函件（公章被收的请法人手写签字）附注：注销申请书模板（https://kf.qq.com/faq/200306R7N3mI200306I3aEBz.html） 材料提交链接：https://kf.qq.com/touch/bill/200306selfqaafe6c551.html（手机端打开） 4:小程序注销之门店小程序 门店小程序依附于公众号，不支持单独注销，公众号注销门店小程序才支持注销 5:公众号正常运营，门店小程序如何释放昵称 如果需要释放该小店小程序昵称，发送邮件到“miniprogram@tencent.com”，标题格式【关于XXX名称释放请求】，需提供以下材料： 1、小程序帐号（原始ID）； 2、绑定的管理员微信号； 3、小程序主体营业执照等主体证件； 4、小程序所有者的书面申请，申请书需加盖小程序主体公章；（个体户无公章：申请书需要加上法人签名）； 邮件内容：需包含背景、释放请求原因。 6:复用公众号资质快速注册的小程序如何注销 复用资质申请的小程序是独立存在的，请按照正常流程注销即可 7:注册小程序选择微信认证，若未完成微信认证如何注销呢？ 小程序30天未认证或认证失败且7天内未发起认证不会释放邮箱，但该邮箱支持重新注册小程序，会释放主体信息、管理员信息、昵称。 公众号 关于公众号若未冻结的个人帐号和组织类帐号就不一一细讲，详情请参考腾讯客服文档：https://kf.qq.com/product/weixinmp.html#hid=2267 1：公众号注销之政府无对公账户： 详细流程请参考：https://kf.qq.com/faq/190531qyuuiY190531BjyyEv.html 政府的有一致主体是提供一致的主体证件和公章，如果有变更请提供4项材料：因机构改革、单位合并、撤一建一等情况，导致机构主体名称有变更，提供以下材料申请注销： 1、更名相关的红头文件（有鲜章）； 2、主体名称变更情况说明书（加盖新主体公章）； 3、变更后新主体的主体证件；（原件拍照或加盖公章的复印件） 4、注销申请函（加盖新主体公章）； 2：公众号注销之个体工商户 若个体工商户存在对公账户，请使用对公账户小额打款注销 若个体工商户类型无对公账户，请使用法人扫脸注销公众号 详情请参考：https://kf.qq.com/faq/220309bUvmIB220309BbAjMz.html 3:公众号注销之帐号主体已注销 主体已注销公众号工单指引流程如下， 1、公众号绑定邮箱/原始id/微信号：  2、主体注销证明： 3、公众号绑定的法人身份证原件正反面的清晰扫描件或照片： 4、公众号的注销书面申请，企业账号的申请必须有加盖公章的函件（公章被收的请法人手写签字） 附注：注销申请书模板（http://kf.qq.com/faq/171018R3IVBF171018INjUvA.html ） 材料提交链接：https://kf.qq.com/touch/bill/180227selfqa9ab6ac55.html（手机端打开） 4:未注册成功的帐号如何注销 若帐号当时没有走完注册流程且长期没有登录该帐号，到期会被系统注销。没有走完注册流程的帐号不占用个人信息，也不支持找回，建议重新注册 5:注册公众号选择微信认证，若未完成微信认证如何注销呢？ 若公众号注册时选择微信认证，自注册日起30天内未进行认证（第30天仍在认证中不算），点击“重新提交材料”，帐号角色变为注册失败，不会释放帐号邮箱，但该邮箱支持重新注册公众号，会释放主体信息、管理员信息、昵称， 6:小程序公众号注销确认期 注销确认期的7天内每天会发送一次确认注销的通知，若管理员一直未点击确认注销则默认取消注销，注销失败。因此管理员请关注公众平台安全助手！！！

想要在自己的电商小程序中增加商品介绍视频，但自己搭建视频服务开发成本太大？ 想要在餐饮服务中添加菜品视频，但苦于带宽成本过高？ 想要在门票预订服务中用视频打动用户，但视频资质申请流程太长？ 腾讯视频插件来帮你~ 今天，我们跟大家分享腾讯视频插件的故事。   腾讯视频插件提供了完整视频播放能力，方便开发者可以给用户提供更好的视频体验。 插件基于腾讯视频的CDN节点和成熟视频方案，可以做到为不同地点的用户提供更流畅的播放服务，更清晰的视频，更稳定的播放质量。只需要视频的vid，开发者即可直接在小程序内播放腾讯视频上的内容！ 腾讯视频插件使用场景 场景一：电商类小程序 除了对商品的语言描述，实惠的价格，精美的图片，也需要生动直观、360度动态介绍商品，比单一的图片更能引起消费者的好感。   现在，在商品介绍里直接链入相关商品视频。比如，买衣服的电商小程序，可以把电视或电影中明星穿过的同款视频链入，在满足用户感官享受的同时，提升转化率。 场景二：文娱推荐类小程序 不局限于苍白的文字描述，推荐类小程序也可在小程序中添加电影视频、预告片，为用户带来完美的购票、观影体验。开发者无需独立开发视频功能，直接使用“腾讯视频”插件，即可实现视频播放功能。 [图片] 场景三：资讯类小程序 “腾讯视频”插件还可以是内容创作者的一大利器，以游戏攻略类小程序为例。小程序就可以直接用视频的形式展现，一方面清晰明了地展示攻略流程，同时也增加了用户在小程序内的停留时长，进一步引导用户做更多动作。   或者生活居家小技巧类的小程序，比如想教大家一种打结的方式，纯文字的形式即很难说清楚，又浪费内容运营者的时间，这时候直接使用插件链入视频，就能很快地教会大家，给予用户更好的内容体验。 轻松接入腾讯视频插件  “腾讯视频”提供了这么多的功能，使用起来也同样很方便：  1   在“小程序管理后台→设置→第三方服务→插件管理”中查找插件名称“腾讯视频”，并申请使用。 [图片]  2   参考详情页中的 [开发文档]，在小程序代码中使用插件。 了解完“腾讯视频”插件后，还想看看其他小程序是如何实际运用的？一起来体验一下 腾讯+ ！ [图片] 页面视频服务是由腾讯视频插件提供

更新时间：2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题，对于来自低于2.27.1版本的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称。 更新时间：2022年9月28日考虑到近期开发者对小程序用户头像昵称获取规则调整的相关反馈，平台将接口回收的截止时间由2022年10月25日延期至2022年11月8日24时。 调整背景在小程序内，开发者可以通过 wx.login 接口直接获取用户的 openId 与 unionId 信息，实现微信身份登录，支持开发者在多个小程序或其它应用间匿名关联同一用户。 同时，为了满足部分小程序业务中需要创建用户的昵称与头像的诉求，平台提供了 wx.getUserProfile 接口，支持在用户授权的前提下，快速使用自己的微信昵称头像。 但实践中发现有部分小程序，在用户刚打开小程序时就要求收集用户的微信昵称头像，或者在支付前等不合理路径上要求授权。如果用户拒绝授权，则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下，用户的微信昵称与头像并不是用户使用小程序的必要条件。为减少此类不合理的强迫授权情况，作出如下调整。 调整说明自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整： 自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。自生效期起，插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回：生效期后发布的插件新版本，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响，但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。「头像昵称填写能力」支持获取用户头像昵称：如业务需获取用户头像昵称，可以使用「头像昵称填写能力」（基础库 2.21.2 版本开始支持，覆盖iOS与安卓微信 8.0.16 以上版本），具体实践可见下方《最佳实践》。小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.27.1 以下版本的头像昵称获取需求：对于来自低版本的基础库与微信客户端的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称，开发者可继续使用以上能力做向下兼容。对于上述 3，wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表： [图片] *针对低版本基础库，兼容处理可参考 兼容文档 请已使用 wx.getUserProfile 接口的小程序开发者和已使用 wx.getUserInfo 接口的插件开发者尽快适配。小游戏不受本次调整影响。 最佳实践小程序可在个人中心或设置等页面使用头像昵称填写能力让用户完善个人资料： [图片] 微信团队 2022年5月9日

1、登录公众号-小程序-管理小程序-添加 2、管理员扫码确认 3、输入需要绑定的小程序appID，查找小程序并发送绑定邀请 4、小程序管理员接收邀请 5、绑定完成 关联小程序后系统将自动向公众号粉丝推送关联成功消息，点击消息即可跳转至小程序。 [图片]

小程序推荐 1、在平时 开发，我们经常会遇到内容安全监测的服务，推荐官方小程序 如需体验、接入安全能力，请扫一扫如下小程序二维码进行详细了解。 珊瑚内容安全助手 [图片] 2、在测试小程序时，时常遇到手机兼容性问题，可以扫码获取手机具体信息 [图片] 具体扫码截图如下所示 小程序查名称 [图片] 客服小程序 [图片] 1

我很想问一下一下如果app，网站，微信小程序接入微信支付的话，是否有icp证和经营型网站的资质呢？谢谢！ 是不是只有网站需要icp证而其他两个不需要呢？ 参考： [图片] [图片]

课程概述 微信支付是腾讯公司开发的应用程序微信内置的支付功能，由财付通运营和提供支付牌照，用户可以通过微信完成支付。该功能以绑定银行卡的快捷支付为基础。微信支付商户平台支持线下场所、公众号、小程序、PC网站、APP、企业微信等经营场景快速接入微信支付。 通过本课程的学习，可以掌握如何使用云开发云调用快速接入微信支付。 课程目标 掌握使用云开发云调用快速接入微信支付 使用对象 适用于小程序开发者 课程大纲 使用云开发云调用快速接入微信支付：微信支付简介、小程序接入微信支付、接入的准备工作、代码实现 课程内容 [视频]

微信云开发实战——云调用·内容安全 [视频]

基于 [代码]Flurl.Http[代码] 的微信支付 API v3 版 .NET SDK。 注意：本库仅支持 v3 版 API，如需 v2 版 API 请移步 SKIT.FlurlHttpClient.Wechat.TenpayV2。 [图片] [图片] [图片] [图片] [图片] GitHub 项目地址：https://github.com/fudiwei/DotNetCore.SKIT.FlurlHttpClient.Wechat Gitee 项目地址：https://gitee.com/fudiwei/DotNetCore.SKIT.FlurlHttpClient.Wechat NuGet 项目地址：https://www.nuget.org/packages/SKIT.FlurlHttpClient.Wechat.TenpayV3 前言 目前网络上还没有基于微信支付 v3 版 API 完整封装的 .NET 客户端（大部分只提供了基础的如支付、退款一类 API 封装），遑论开源了；这都 2021 年了，官方本身提供的示例代码还只能运行在 .NET Framework on Windows 上；就连 RSA 签名这么基础的东西都没有人封装（确切的说是因为 RSA 有很多种分块模式和填充模式，网上能找到的往往只封装了其中一种，但却未必符合微信支付的要求）。 于是萌生了自己封装一个库的想法，打算解决这几个痛点，同时也是推广一下微软官方的 [代码]System.Text.Json[代码]。 特性 基于 [代码]Flurl.Http[代码]，可与 [代码]IHttpClientFactory[代码] 集成。 支持 .NET Framework 4.6.1+、.NET Standard 2.0+、.NET Core 2.0+、.NET 5、.NET 6。 支持 Windows / Linux / macOS 多平台部署。 支持 [代码]System.Text.Json[代码]（默认）和 [代码]Newtonsoft.Json[代码] 两种序列化方式。 异步式编程。 强类型接口模型。 支持拦截器功能。 完整、完善、完全的微信支付 API 封装，支持目前（截至 2021-12-01）微信支付提供的全部 v3 版 API。 支持直连商户、服务商两种模式。 请求时自动生成签名，无需开发者手动干预。 提供了微信支付所需的 RSA、AES、SHA-256 等算法工具类。 提供 SourceLink，方便项目无源码调试。 提供了生成 JS-SDK/APP 调起支付参数及签名、加密请求敏感数据、解析响应敏感数据、解析回调通知事件敏感数据等扩展方法。 基础用法 安装： [代码]# 通过 NuGet 安装 > Install-Package SKIT.FlurlHttpClient.Wechat.TenpayV3 # 通过 dotnet-tools 安装 > dotnet add package SKIT.FlurlHttpClient.Wechat.TenpayV3 [代码] 你也可通过 Visual Studio NuGet 管理器图形化界面安装（注意搜索时需勾选“包括预发行版”）。 初始化： [代码]using SKIT.FlurlHttpClient.Wechat; using SKIT.FlurlHttpClient.Wechat.TenpayV3; /* 平台证书管理器，具体用法请参见文档的高级技巧 */ var manager = new InMemoryCertificateManager(); /* 仅列出必须配置项。也包含一些诸如超时时间、UserAgent 等的配置项 */ var options = new WechatTenpayClientOptions() { MerchantId = "微信商户号", MerchantV3Secret = "微信商户 v3 API 密钥", MerchantCertificateSerialNumber = "微信商户证书序列号", MerchantCertificatePrivateKey = "-----BEGIN PRIVATE KEY-----微信商户证书私钥-----END PRIVATE KEY-----", PlatformCertificateManager = manager }; var client = new WechatTenpayClient(options); [代码] 请求 & 响应： [代码]using SKIT.FlurlHttpClient.Wechat.TenpayV3; using SKIT.FlurlHttpClient.Wechat.TenpayV3.Models; /* 以 JSAPI 统一下单接口为例 */ var request = new CreatePayTransactionJsapiRequest() { OutTradeNumber = "商户订单号", AppId = "微信 AppId", Description = "订单描述", ExpireTime = DateTimeOffset.Now.AddMinutes(15), NotifyUrl = "https://example.com", Amount = new Models.CreatePayTransactionJsapiRequest.Types.Amount() { Total = 100 }, Payer = new Models.CreatePayTransactionJsapiRequest.Types.Payer() { OpenId = "用户 OpenId" } }; var response = await client.ExecuteCreatePayTransactionJsapiAsync(request); if (response.IsSuccessful()) { Console.WriteLine("PrepayId：" + response.PrepayId); } else { Console.WriteLine("HTTP 状态：" + response.RawStatus); Console.WriteLine("错误代码：" + response.ErrorCode); Console.WriteLine("错误描述：" + response.ErrorMessage); } [代码] 验证响应签名： [代码]/* 一般情况下可以跳过验证响应的签名 */ bool valid = client.VerifyResponseSignature(response); [代码] 生成客户端 JS-SDK 调起支付所需参数： [代码]/* 字典结构，包含客户端 JS-SDK 调起支付所需的完整参数 */ var paramMap = client.GenerateParametersForJsapiPayRequest(request.AppId, response.PrepayId); [代码] 验签、解析并解密微信回调通知中的敏感信息： [代码]string callbackJson = "{ 微信商户平台发来的 JSON 格式的通知内容 }"; string callbackTimestamp = "微信回调通知中的 Wechatpay-Timestamp 标头"; string callbackNonce = "微信回调通知中的 Wechatpay-Nonce 标头"; string callbackSignature = "微信回调通知中的 Wechatpay-Signature 标头"; string callbackSerialNumber = "微信回调通知中的 Wechatpay-Serial 标头"; bool valid = client.VerifyEventSignature(callbackTimestamp, callbackNonce, callbackJson, callbackSignature, callbackSerialNumber); if (valid) { /* 将 JSON 反序列化得到通知对象 */ /* 你也可以将 WechatTenpayEvent 类型直接绑定到 MVC 模型上，这样就不再需要手动反序列化 */ var callbackModel = client.DeserializeEvent(callbackJson); if ("TRANSACTION.SUCCESS".Equals(callbackModel.EventType)) { /* 根据事件类型，解密得到支付通知敏感数据 */ var callbackResource = client.DecryptEventResource<Events.TransactionResource>(callbackModel); string outTradeNumber = callbackResource.OutTradeNumber; string transactionId = callbackResource.TransactionId; Console.WriteLine("订单 {0} 已完成支付，交易单号为 {1}", outTradeNumber, transactionId); } } [代码] 更多使用说明请阅读项目仓库中的开发文档。 项目仓库中还包含了一个示例项目，以供开发者快速掌握本库的使用方法。 高级技巧 点此查看完整文档。

公司打算用小程序（别人开发的模板）做网上商城，只卖自己公司和另一家公司的产品，请问需要ICP备案、ICP经营许可证吗？ 之前有打电话问政务服务中心，说是小程序就不需要申请ICP经营许可，只要一份“不予受理的通知”就行，但在网站搜了一下，又感觉好像需要。 请问这个到底是怎么算的？

效果演示地址：点击这里 静态图： [图片] 步骤： 1.点击评论，输入一点文字。 2.复制下方代码。 3.光标对着评论框里的文字右键-检查。 4.对着控制台里的标签右键-Edit as HTML 5.粘贴刚才的代码。 6.发布评论即可查看效果。 [代码]<p style=" display: flex; text-align: left; border-top: 0.5px solid rgba(0, 0, 0, 0.06); padding: 25px; margin-top: 15px; " > <span style=" position: relative; font-size: 10px; height: 50px; width: 50px; align-items: center; justify-content: center; display: inline-flex; animation: rotate 2s linear infinite; color: #777272; background-color: rgb(240, 251, 239); border: 1px solid rgb(183, 237, 177); " >微</span > <span style=" position: relative; font-size: 10px; height: 50px; width: 50px; align-items: center; justify-content: center; display: inline-flex; animation: rotate 2s linear infinite; color: #777272; background-color: rgb(246, 241, 254); border: 1px solid rgb(205, 178, 250); " >信</span > <span style=" position: relative; font-size: 10px; height: 50px; width: 50px; align-items: center; justify-content: center; display: inline-flex; animation: rotate 2s linear infinite; color: #777272; background-color: rgb(255, 245, 235); border: 1px solid rgb(254, 212, 164); " >小</span > <span style=" position: relative; font-size: 10px; height: 50px; width: 50px; align-items: center; justify-content: center; display: inline-flex; animation: rotate 2s linear infinite; color: #777272; background-color: rgb(254, 241, 241); border: 1px solid rgb(251, 191, 188); " >尾</span > <span style=" position: relative; font-size: 10px; height: 50px; width: 50px; align-items: center; justify-content: center; display: inline-flex; animation: rotate 2s linear infinite; color: #777272; background-color: rgb(240, 244, 255); border: 1px solid rgb(186, 206, 253); " >巴</span > </p> [代码]

快递100“快递跟踪”微信小程序插件上线啦！ 帮助所有小程序解决快递物流查询问题，现面向所有第三方小程序、小程序开发服务商（包括个体小程序）免费开放。 目前已经有1000家小程序申请接入了快递100【快递跟踪】插件， 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件（添加时请从电脑端打开链接） 公开数据显示，今年上半年微信小程序数量已超过430万。 随着小程序生态不断发展，越来越多商家和开发者在小程序上建立自有商城。大到京东这样的巨型平台，小到一个公众号、博主自己开的店铺，用户都可以在小程序上下单。业务逐渐壮大后，物流却成为困扰不少商家和开发者的一大难题。 大平台有大量的资金和人力来调配资源，自主开发接入物流公司系统，给顾客及时物流反馈；而对于那些中小店铺的小程序商家们来说，没有足够人力、财力支撑，无法自主开发接入。 近日，中国领先的快递物流信息服务商快递100宣布，正式上线“快递跟踪”小程序功能插件，开放快递物流信息查询模块，允许第三方小程序 免费 接入。 “快递跟踪”小程序插件整合了快递100快递查询能力，支持全球1000+快递物流公司信息查询，对全行业的小程序免费开放接入，包括电商平台、商家、医药寄送、信息查询或本地生活服务平台等 任何有物流查询需求的小程序开发者，为企业、商家、个体小程序赋能。 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件 01 无门槛免费接入 无论是电商商城，还是社群团购、回收类等任何有涉及快递物流环节的小程序，物流信息查询是必须重视的一项服务。卖家是否能提供及时的物流信息更新服务，会影响到用户的二次购买决策。 “快递跟踪”小程序插件，是免费接入。接入插件后，用户只要在小程序内点击快递单号，就可以查看最新物流信息，有效提升用户的购物体验，提高小程序的回访率和复购转化率。 02 原生体验，无第三方跳转 快递100“快递跟踪”插件依托微信小程序生态，第三方小程序接入后无需任何跳转，在自己的小程序内即可直接查看物流信息，简化用户操作流程。 [图片] 接入方式也非常简单快捷，模板化快速接入，无需再次开发，几个小时即可完成接入，大大降低开发和运营成本。 快递100“快递跟踪”插件开放接入，不仅能够帮助小程序开发者降低物流服务的开发门槛和成本，同时也为小程序商家提供了更好服务用户的方式。 03 支持国内外1000+家快递公司物流查询 通过快递100“快递跟踪”小程序插件，支持全网快递物流查询，可查看国内、国际1000+快递物流公司的信息，同时还提供官方客服热线。 “快递跟踪”插件服务稳定，让商家、开发者管理更加方便。 除了常见的电商场景，“快递跟踪”插件同样非常适合有特定物品物流信息查询需求的机构和企业接入 —— 例如医院类公众号，病历档案预约寄出后的进度查询；驾校机构，寄出驾照后的进度查询；校园机构的报到证、档案等资料的快递查询等。 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件 另外，快递100也可提供快递信息推送、实时快递、地图轨迹API等服务，点这里→https://api.kuaidi100.com/ 了解详情 快递100是中国领先的快递物流信息服务商，国家高新技术企业、新基建代表企业。 快递100目前拥有个人注册用户1.6亿，企业客户60万+，日均查询量3亿次，是国内查询量最大的快递物流信息查询平台；年寄件量超8亿单，寄件功能官方合作京东、邮政、德邦、圆通、韵达、DHL、TNT、UPS等多家国内外快递公司。 快递100致力构建中国最大的物流信息服务枢纽，始终秉承开放态度与快递行业共创共赢，为用户、商家、企业提供专业、可靠的服务，实现互联互通互动。 点链接→https://fuwu.weixin.qq.com/service/detail/00008caeab84c07c17dcdabf55b815，立即添加插件

目的：不使用组件，生成海报图片。 效果：[图片][图片] 代码如下：wxml： <view style="width:100%;height:{{canvasHeight}}px;">     <canvas wx:if="{{!showImg}}" type="2d" id="myCanvas" style="width:100%;height:100%;"></canvas>     <image wx:else src="{{imgSrc}}" style="width: 100%;height: 100%;" show-menu-by-longpress="true"></image> </view> js： data: {     name: "Sun",     sign: "靡不有初，鲜克有终。",     posterUrl: "", // 海报地址     photoUrl: "", // 头像地址     qrcodeUrl: "", // 二维码     photoDiam: 50, // 头像直径     qrcodeDiam: 80, // 小程序码直径     infoSpace: 13, // 底部信息的间距     bottomInfoHeight: 100, // 底部信息区高度     tips: "长按或扫码了解更多", // 提示语     canvasWidth: 0, // 画布宽     canvasHeight: 0, // 画布高     canvasDom: null, // 画布dom对象     canvas: null, // 画布的节点     ctx: null, // 画布的上下文     dpr: 1, // 设备的像素比     posterHeight: 0, // 海报高     imgSrc:'',     showImg: false, }, 其实也就是看文档，踩了一些坑，也看了社区的一些问答，但总的来说官方文档可以满足使用。 主要使用方法如下 ctx.drawImage(pic, 0, 0, res.width, res.height) // 绘制大图，头像和二维码 到 canvas ctx.fillText(this.data.name, 0, 0) // 绘制文字  ctx.fillRect(0, this.data.canvasHeight - this.data.bottomInfoHeight, this.data.canvasWidth, this.data.bottomInfoHeight) // 底部白色背景 // 把canvas 绘制成 图片 wx.canvasToTempFilePath({   canvas: that.data.canvas,   fileType: 'jpg',   success: function (res) {   console.log(res.tempFilePath)   that.setData({    imgSrc:res.tempFilePath,    showImg:true, }) } }) 拓展阅读： painter组件生成海报 完。

海外地址解析有多种方案： 1、腾讯地图海外地址解析； 2、HERE地图解析； 3、Google地图解析（被墙，放弃） 以下重点介绍第1、第2种地址解析方案。 方案一：腾讯地图海外地址解析 步骤如下： 1、lbs.qq.com登录自己的账户； 2、控制台--工单--创建工单 3、选择：特色产品--海外位置服务 4、认真填写工单信息； 5、等待回复 6、腾讯工作人员回信，内容为： 七天的测试期，可以尽情测试你的代码接口了； 如果需要申请正式服务，最低配套餐为3万CNY，（我们嫌贵，果断放弃） 7、云函数实现地址解析的简单代码如下： const rp = require('request-promise') exports.main = async (event) => { let opt = { uri: 'https://apis.map.qq.com/ws/geocoder/v1', qs: { address: event.address, oversea: 1, language: 'en', // country: "Australia", key: 'HCDBZ-OHMA3-IMQ3R-*****-EW366-YNBVU' }, json: true } return await rp(opt) } 代码简单吧？哈，就是这么简单，果然，返回了某地址event.address的正确信息，包含GPS坐标； 我们猜测腾讯海外位置服务可能调用的是HERE接口，立马转向HERE本尊，直接连HERE地址解析接口。 方案二：HERE地址解析 1、打开官网here.com 2、点击Delevoper 3、注册开发者账号，登录； 4、右上角头像--Projects 5、Projects里应该此时只有一个免费Freemium套餐，免费的，真香；点击进入；另外还有两个套餐可选，价格能接受。 6、在REST里Create APP创建一个应用，并创建一个API key；[图片] 7、这样就可以使用HERE的接口了，云函数里访问HERE的代码如下： const rp = require('request-promise') exports.main = async (event) => { if (event.address) { } else return 'wrong address' let opt = { uri: 'https://geocode.search.hereapi.com/v1/geocode', qs: { q: event.address, apiKey: 'x656fsEiUvnz************0MrcC4COBA8SVk' }, json: true } return await rp(opt) } 哈，是不是更简单？没错，就这几行代码就全部搞定通过地址信息查询地图坐标的功能了。 到此，海外地址功能搞定，其他HERE接口，照此编写代码即可。

你好，咨询一个问题。模板消息提示发送成功，但是服务号没有接收到。[图片]

微信支付目前在我们每天处理客户的问题中是最多的，大家经常是弄不清楚到底哪里出了问题，我想应该是没有时间静下心来好好看一下文档，研究一下。接下来我将分三个部分，把微信支付的三大块整理出来，大家如果有时间，耐下心来可以看一下，我如果有一段时间不用，有些功能也会忘，但是只要记住基本的框架，学习起具体内容来还是不难的。 我们会从微信支付的三大模块来具体说下微信支付有哪些具体的应用。 今天第一篇主要介绍微信支付的接入指引 一、在哪些情况下需要接入微信支付 1.我有线下场所需要接入微信支付 具体的线下场所一般有商超、便利店、餐饮、医院、学校、电影院和旅游景区等具有明确经营地址的实体场所。 微信支付一般可以接入的支付有三种。 A、付款码支付 [图片] B、JSAPI支付 [图片] C、微信收款商业版 [图片] 2、我有公众号需要接入微信支付 当我们微信公众号有一定粉丝时，我们会进行公众号运营，和粉丝之间产生互动，比如打赏等，这个时候我们就需给我们的公众号接入微信支付的JSAP支付，从而完成粉丝从微信公众号支付的需求。 微信支付支持在公众平台注册并完成微信认证的服务号，政府或媒体订阅号接入支付功能。 公众号接入支付后，可以通过JSAPI支付产品来完成在公众号、朋友圈、聊天窗口等微信内的收款需求。 3、我有小程序需要接入微信支付 我们知道，很多商家都做了微信小程序，比如酒店预订小程序，餐馆点餐小程序等，这些商家开通小程序是为了更方便用户在小程序端下单，但是，一但下单，就需要付款，小程序可以接入的微信支付是小程序支付，具体示例如下： [图片] 4、我有PC网站需要接入微信支付 我有自己的官网商城，在上面进行产品的展求和售卖，那么用户需要用微信来付款怎么办? 我们的微信支付支持完成域名ICP备案的网站接入支付功能。PC网站接入支付后，可以通过JSAPI支付或Native支付，自行开发生成二维码，用户使用微信“扫一扫”来完成支付。 A.JSAPI支付 B.Native支付 [图片] 5、我有APP需要接入微信支付 很多商家都制作开发了自己的手机APP，这也是公司自己产品展示及销售的一个平台，只是将这个平台从电脑端转移动手机端，那么产生交易用户需要微信付款时APP支付肯定要接入微信支付。 我们的微信支付完全支持在开放平台注册并完成认证的移动端应用APP接入支付功能。 APP接入支付后，商户通过微信提供的SDK调用微信支付模块完成收款需求。 目前微信支付支持手机系统有：IOS（苹果）、Android（安卓）和WP（Windows Phone）。 [图片] 6、我有企业微信需要接入微信支付 很多人不理解为什么企业微信需要接入微信支付。我们知道企业微信是企业统一管理员工和客户非常有效及时，功能强大的沟通工具，目前越来越多的企业都开通了企业微信，用企业微信来和公司所有员工做上上下下的管理和沟通。如果企业微信接入了微信支付，我们就可以通过企业微信向员工发红包向员工付款、向员工收款，这是实实在在的一个需求，肯定要开通微信支付。 所以，我们的微信支付支持在企业微信平台注册并完成认证的企业接入支付功能。企业微信是微信团队专为企业打造的专业通讯工具，它为企业提供与微信一致的沟通体验，连接微信生态的能力；丰富的办公应用等。 企业微信接入支付后，可完成向员工发红包、向员工付款以及向员工收款需求。 A.向员工发红包 [图片] B.向员工付款 [图片] C.向员工收款 [图片] 二、接入微信支付的申请材料 1.个体工商户微信支付申请材料 A、营业执照：彩色扫描件或数码照片 B、对公银行账户/法人对私账户：包含开户行省市信息，开户账号 C、法人身份证：彩色扫描件或数码照片 2.企业微信支付申请材料 A、营业执照：彩色扫描件或数码照片 B、组织机构代码证：彩色扫描件或数码照片，若已三证合一，则无需提供 C、对公银行账户：包含开户行省市信息，开户账号 D、法人身份证：彩色扫描件或数码照片 3.党政、机关、事业单位、民办非企业、社会团体、基金会微信支付申请材料 A、营业执照：彩色扫描件或数码照片 B、组织机构代码证：彩色扫描件或数码照片，若已三证合一，则无需提供 C、对公银行账户：包含开户行省市信息，开户账号 D、法人身份证：彩色扫描件或数码照片 [图片] 三、申请微信支付的申请费用 申请接入微信支付不收取任何申请费用； 商户交易按费率收取服务费，一般与商家选择的经营类目有关，为0.6%-1%不等； 商户类目对应资质、费率、结算周期详情通过下面微信官网链接查看。 https://kf.qq.com/faq/140225MveaUz1501077rEfqI.html 四、申请微信支付的具体流程 1.提交资料 在线提交营业执照、身份证、银行账户等基本信息，并按指引完成账户验证。 2.签署协议 微信支付团队会在1-2个工作日内完成审核，审核通过后请在线签约，即可体验各项产品能力。 3.绑定场景 如需自行开发完成收款，需将商户号与APPID进行绑定，或开通微信收款商业版（免开发)完成收款。 [图片] 以上就是微信支付的接入指引，我把他整理出来，有时不清楚方便查看。 我们来一间是专业做旅游在线，智慧酒店和智慧景区的，目前已深耕与此6年了，行业需求不断更新迭代，尤其是受疫情影响，帮助酒店旅游景区实现了小程序端在线预订，私域流量的建立，慢慢一点点解决行业问题。 有需求的商家可以微信搜索公众号“来一间”或者登录我们的官网“www.laiyijian.com”试用并体验。 下一篇：微信支付内容梳理产品篇——从入门到精通（2） 下一篇：微信支付内容梳理行业应用篇——从入门到精通（3）

微信小程序API近期又做了调整，之前用的好好的getUserInfo做了重大调整，无法直接获取用户信息了，比如昵称头像等等，当然2021年4月13日上线前的小程序不受影响，如果想要再次升级新版本，即必须涉及到更换获取用户授权的修改，将getUserInfo改成getUserProfile接口。 [图片] 这就代表着之前用的获取授权信息的方法要做调整了，先看看哪些模块受到影响。 之前使用如下代码，可以获取用户的相关信息： 之前：(使用上面的方式，会出现授权弹窗，同意后可以直接获取到nickName昵称及avatarUrl用户头像) [图片] 现在：（不会弹窗，直接获取用户信息nickName变成了匿名，avatarUrl用户头像变成了灰色头像） [图片] 授权过后鉴定是否授权同样也无法使用了，下面是app.js中的代码同过wx.getSetting获取scope.userInfo判断是否授权，现在获取不该参数，所有这个在app.js中的写法就无法判断用户有没有登录了。 [图片] 针对上面的文字，下面开始来介绍下我的实现方式，如何用好新接口getUserProfile。 先来看看wx.getUserProfile怎么用：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html 上面是官方地址，里面有详细的说明。 getUserProfile不像之前的getUserInfo一样必须放在按钮button上，而且要使用open-type="getUserInfo"，新接口直接可以应用在任何标签上，使用点击时间或者其他触发事件直接执行getUserProfile接口，如下所示： 注：desc属性必须填写，不填写可能获取不到数据； 如下图所示，将会出现弹窗授权 [图片] 每次点击都会获取一次授权，这样有个好处就是之前getUserInfo时候拒绝了之后再想同意需要操作很大一圈代码，这个的话，每次点击都会重新弹窗一次这样倒是解决了一大难题。 [图片] 正确的用户信息，包含了昵称及头像等等... 存在的问题： 如果每次点击都授权的话用户体验非常的不友好，比如做了一个博客系统，每次用户想要给某一条信息点赞，点赞前都要授权一次，用户肯定很烦，所以，获取授权第一次的时候就要存储下来，然后再做表单提交或者点赞评论时候，判断数据库中用户信息是否存在就好了。 解决方案： user页面，提醒客户点击登录授权，默认头像及文字提醒，授权过后显示头像及昵称；[图片] user.wxml页面                       {{userInfo.nickName}}     {{userInfo.country+userInfo.province+userInfo.city}}                           点击登录          user.js页面 //没有授权过的话，不要在当前页面存储用户信息，直接跳转到login页面同意处理用户信息 goLogin(){   wx.navigateTo({     url: '/pages/login/login'   }) } login登录页面的操作，点击确认授权弹出授权浮窗。[图片] login.wxml页面           确认授权     暂不授权    login.js页面 //获取授权信息 clickUserProfile(){   wx.getUserProfile({     desc: '业务需要',     lang:'zh_CN',     success:res=>{               this.saveUserInfo(res.userInfo)     }   }) }, //保存用户信息 saveUserInfo(userInfo){   app.globalData.userInfo=userInfo //使用页面栈的方式，获取了授权信息接着更改用户页面的userInfo属性   var page=getCurrentPages()[getCurrentPages().length-2];   page.setData({     userInfo   }) //使用云函数saveuser将用户信息存储到云数据库中   wx.cloud.callFunction({     name:"saveuser",     data:{       userInfo     }   }).then(res=>{           wx.showToast({       title: '授权成功'     })           setTimeout(()=>{       this.noLogin();     },1500)   }) } saveuser云函数页面 // 云函数入口函数 exports.main = async (event, context) => {   const openid = cloud.getWXContext().OPENID   const {userInfo}=event;   userInfo.openid=openid;   //获取数据库中有没有当前用户的信息   var res= await db.collection("userAll").where({     openid:openid   }).count()   if(res.total>0){     return await db.collection('userAll').where({       openid     }).update({       data: userInfo     })   }else{     return await db.collection('userAll').add({       data: userInfo     })   } } 一旦获取了用户信息，自动会从login页面跳转到user页面，同理user页面中的userInfo就变成了最新的用户数据，user页面也就变成了这样； [图片] 首次进入user页面时候需要从数据库判断是否已经存在该用户信息 app.js页面 //定义hasUserInfo函数，发送云函数，同过返回true和false判断是否已经授权 async hasUserInfo(){   if (this.globalData.userInfo && this.globalData.userInfo.nickName && this.globalData.userInfo.avatarUrl) return true   var res= await wx.cloud.callFunction({     name:"getuser"   })   if(res.result.code==200){     this.globalData.userInfo=res.result.data[0]     return true   }else{     return false   } } getuser云函数页面 // 云函数入口函数 exports.main = async (event, context) => {   const openid = cloud.getWXContext().OPENID   var res=await db.collection("userAll").where({     openid   }).get();   if(res.data.length){     return {data:res.data,code:200}   }else{     return {code:400}   }   } 在需要的位置就可以使用app.js中的hasUserInfo方法了，比如user页面 user.js页面 //页面载入时 onLoad:async function (options) {       await app.hasUserInfo()   this.setData({     userInfo:app.globalData.userInfo   }) } 比如对一个点赞按钮操作时候先判断有没有用户信息时候： //点赞操作 async clickZan(){   if(await app.hasUserInfo()){     console.log("可以点赞");   }else{     wx.navigateTo({       url: '/pages/login/login'     })   } } 还有一种不保存用户信息，只负责在页面中展现的可以直接使用open-data组件，不用授权就可以轻松获取用户信息； 组件地址如下： https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html 演示代码如下：                                                                      最终效果 [图片] 如果文章没有看懂，还有视频的介绍 https://www.bilibili.com/video/BV1s64y1i7Rw

先看官方的最新通知 周知：getUserInfo 开发版和体验版 已对齐 getUserInfo 匿名表现，正式版将于 4月13日 正式对齐 getUserInfo 匿名表现。 请开发者使用 getUserProfile 获取用户信息。 小程序登录、用户信息相关接口调整说明：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801 原先的getUserInfo能力 原先的 getUserInfo 的能力，具体看这里：https://developers.weixin.qq.com/community/develop/doc/000c2424654c40bd9c960e71e5b009?highline=getUserInfo [图片] [图片] 我对 getUserInfo 的理解 我们一般开发者，会用 wx.getUserInfo 来实现 openId 和 用户信息的获取，是非常的便捷的。 并且还能通过 wx.getSetting 获取 "scope.userInfo" 判断用户用户是否已经授权。 wx.getSetting + wx.getUserInfo 能近似完美解决用户登陆授权场景 华丽的分割线 2021-02-04 官方要对小程序登录、用户信息相关接口调整说，具体链接：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?blockType=1 这样我们开发者会面临的用户登陆授权的调整，会比较痛，但也必须要去改，因为没办法。 怎么改呢 先不要着急去适配 getUserProfile，先要弄清楚自己的小程序用 getUserInfo 获取那些能力？实现哪些能力？ 我的理解，如果是用 wx.getSetting + wx.getUserInfo 来实现获取用户的openId(unioinId) 和用户头像昵称信息的话，可以这样去调整？ wx.login 可以拿到用户的 openId，流程如下： [图片] 如果绑定了开发平台，还可以通过 wx.login 静默获取用户的 uninonId [图片] 这个过程是静默的，不需要用户参与。 然后对于需要用户头像信息的时候，在使用 wx.getUserProfile 能力即可。 小结 1.wx.login + wx.getUserProfile 能实现 wx.getUserInfo 的能力，也能满足我们的业务场景。 2.看到官方的调整，先不要着急去调整，先弄清楚要我们的业务场景使用了那些API获取那些能力 3.关于wx.getSetting 返回 "scope.userInfo" 为 undefined。我记得社区有人提问了，等官方回复就好，其实我们可以不依赖这个，原因留给你 4.用户头像更新不及时的问题，我们看看微信聊天记录，当你好友更新头像，当你不点击时，有时候展示的还是老头像，当你点击时，会显示新头像（我们何不借鉴一下，提供给用户更新的能力即可）

getUserProfile 的事在社区里已经闹得沸沸扬扬。 我的项目用的是云开发，处理下来，发现不用调整太多。 小程序端： const fetchOpenId = (userInfo) => {   const success = (openId) => {     // 到这一步处理用户登录     console.log({       ...userInfo,       openId     })   }   wx.cloud.callFunction({     name: 'getOpenId',     success: (r) => {       if (r.errMsg === 'cloud.callFunction:ok') {         success(r.result)       }     }, fail: (err) => { console.error(err) }   }) } const fetchUserProfile = () => {   const success = (res) => {     fetchOpenId(res.userInfo)   }   // 兼容性判断   if (wx.getUserProfile) {     wx.getUserProfile({       desc: '用于完善会员资料',       success     })   } else {     wx.getUserInfo({       success     })   } } 调用： fetchUserProfile() 云函数 getOpenId const cloud = require('wx-server-sdk') cloud.init() exports.main = async () => {   const { OPENID } = cloud.getWXContext()   return OPENID } 这样处理会有一个现象：如果用户退出了登录，每次重新登录都会弹出授权。 想了想，这样也挺合理，否则每次登录都没有感知。 记得做好本地存储。

用户打开了web-view，在里面多次点击后，点击左上角返回按钮，结果是一层一层页面的返回。 如何做到点击左上角返回，一次性返回到小程序中？

前言 这是在做《#小程序云开发挑战赛#-情侣券-想做就做》这个项目过程中学习到了一个新知识。 能够优雅的调用云函数，极大程度的减少维护成本。 在此之前我都是业务代码层面直接调用云函数，而且一个云函数就一个方法。 如下： 首页 [代码]wx.cloud.callFunction({ name: 'login' }).then(res => { wx.setStorageSync('openid', res.result.openid) }) [代码] login 云函数 [代码]const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) exports.main = (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, env: wxContext.ENV, } } [代码] 这种代码写起来很爽，但是要维护起来的时候就很头疼，云函数越写越多，找起来就比较麻烦，无法快速定位。 如何解决呢？ 从两个维度来解决： 从小程序代码来说，可以加一个api层来管理所有云函数的调用。 从云函数代码来说，可以在一个云函数里面做个简单路由写多个方法。 1.云函数调用统一管理 从之前的顺序：小程序业务层=>云函数 改成 小程序业务层=>API层=>云函数 业务层：调用API [代码]// 先导入api的user类 import { login } from 'api/user.js' login().then(res => { wx.setStorageSync('openid', res.result.openid) }) [代码] API层：调用云函数 [代码]async function login() { return wx.cloud.callFunction({ // 云函数名称 name: 'user', // 传给云函数的参数 data: { action: 'login' } }); } module.exports = { login:login } [代码] 上面案例中我们只用了login方法，其实在实战中user里面会有所有的相关操作，引入也可以引入多个方法。 所有的云函数都会在api层进行管理，这样改云函数就不需要去业务代码里面去找了。 业务层只负责传参与回调，调用过程不需要关心，同时还可以支持多个页面复用api方法。 2. 一个云函数多个方法 从上面api层的案例不难看出，data里面传入了一个action参数，这个参数就是你要调用的方法名称。 云函数： [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init(); // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() // 简单路由 if (event.action && userHelper[event.action]) { const result = await userHelper[event.action](wxContext, event) return result } return { message: 'This action was not found', error: -1, } } const db = cloud.database(); const userHelper = { async getOpenId(context, params) { return { openid: context.OPENID, } } } [代码] 通过userHelper来管理所有的方法，你如果需要添加方法可以直接在userHelper下面添加即可，action传入方法名称就可以调用了。 这样便于查找与管理，同一类业务之需要创建一个云函数即可。 还有一点就是减少云函数数量，云开发不同的收费套餐是有云函数数量限制的。 套餐配合可见：配额说明 总结 全部写完了，如果觉得不错就给我的《#小程序云开发挑战赛#-情侣券-想做就做》点个赞，谢谢。

[图片]

image组件使用云上传图片返回的Id，加载图片不能显示，在工具端和手机端真机调试都不能显示[图片] [图片]

在社区文章里看到老哥分享的。尝试使用了下。

一个认证的企业微信号能发布几个小程序？

小程序示例 这里面包含了小程序的所有能力，能让你快速知道小程序能做什么。 [图片] [图片] 源码地址：https://github.com/wechat-miniprogram/miniprogram-demo 小程序助手 可以帮助小程序相关成员在手机端更方便、及时地管理小程序，扫描下方小程序码即可立即体验。 1 版本查看：使用者可以根据自己的角色，查看小程序的线上版、体验版或开发版。 2 成员管理：支持通过搜索微信号添加小程序项目成员或体验成员，其中项目成员包括运营者、开发者。 [图片] [图片] 小程序数据助手 当前功能模块包括数据概况、访问基础分析（用户趋势、来源分析、留存分析、时长分析、页面详情）、实时统计和用户画像（年龄性别、省份城市、终端机型），数据与小程序后台常规分析一致。 [图片] [图片] 引用： https://developers.weixin.qq.com/miniprogram/analysis/assistant/ https://developers.weixin.qq.com/miniprogram/dev/devtools/mydev.html https://github.com/wechat-miniprogram/miniprogram-demo

前言 生成海报这个需求非常常见，一般用于分享朋友圈，自定义分享到群，开发者为了生成写了很多绘制代码。绘制代码看上去都差不多，有不得不写，很难受。 直到我遇见了它！ 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

目前，小程序中支持使用async/await有三种模式： 1、不勾选es6转es5，不勾选增强编译；该模式是纯es7的async/await，需要基础库高版本。 2、勾选es6转es5，勾选增强编译；一般是因为调用了第三方的es5插件，通过增强编译支持async/await。 3、勾选es6转es5，不勾选增强编译；手工引入runtime.js支持async/await。 据最近更新情况，原生的函数已经大部分同时原生支持同步化了，不需要本方案转化了，直接加上await即可；比如wx.chooseImage、wx.showModal。。。具体有哪些，可以自己试。 如果只是wx.request的同步化，可参考： https://developers.weixin.qq.com/community/develop/article/doc/0004cc839407a069f77a416c056813  app.js代码： function promisify(api) {   return (opt, ...arg) => {     return new Promise((resolve, reject) => {       api(Object.assign({}, opt, { success: resolve, fail: reject }), ...arg)     })   } } App({   globalData: {},   chooseImage: promisify(wx.chooseImage),   request: promisify(wx.request),   getUserInfo: promisify(wx.getUserInfo),   onLaunch: function () {   }, }) 某page的index.js代码： const app = getApp() testAsync: async  function(){   let res = await app.chooseImage()   console.log(res)   res = await app.request({url:'url',method:'POST',data:{x:0,y:1}})   console.log(res) }, [图片]

我想申请开店，但仅限内测用户？怎样成为内测用户？

在小程序后台配置了一个业务域名，因业务调整，需要删除这个业务域名，也不再添加新的业务域名。但是在小程序后台 业务域名配置模块中，发现只有一个业务域名的时候无法进行删除。我需要删除这个业务域名该怎么办？

  许多小程序中都有显示富文本的需求，但现有的方案都有着或多或少的缺陷。[代码]WxParse[代码]包的大小过于臃肿，且存在超过12层无法显示，部分样式解析和显示不正确，无法显示表格等问题；官方的[代码]rich-text[代码]组件也有图片无法预览，链接无法点击，不支持视频和一些常用标签等各类问题。   为解决这些问题，这里提出了一种新的思路，对于节点下有图片、视频、链接等的，采用[代码]WxParse[代码]中模板循环的方式显示，否则直接使用[代码]rich-text[代码]组件显示（超过一定层数的也直接使用[代码]rich-text[代码]显示），这样可以取两者之长，实现了无层数限制，显示效果好，支持各类标签，可以预览和点击等；通过优化解析脚本，其还具有一些独特的优势，如容错性强，解析效率高，轻量化等；包装成自定义组件，非常简便易用；欢迎大家体验和使用。   GitHub链接：https://github.com/jin-yufeng/mp-html   文档链接：https://jin-yufeng.gitee.io/mp-html

好的经验必须要分享：chooseImage后转base64 现在网上各种帖子的解决方案存在各种各样的问题，不说了，直接贴代码，手机亲测，没有问题 const fileManager = wx.getFileSystemManager(); [图片]

前言 距离1月10日模板消息下架只有2天了，在社区里经常能看到有帖子在问关于怎么记录订阅次数的问题，这里在这里介绍一下自己用的简单方案，仅供参考。 误区一 [图片] 上面这个图大家应该都比较熟悉了，很多人总是误以为勾选“总是保持以上选择，不再询问”，就可以无限发送订阅消息，这个是错误的想法，勾选和不勾选唯一的区别就是每次触发订阅的时候会不会弹授权窗口而已。 误区二 订阅消息不能通过bindsubmit的方式触发，必须通过bindtap的方式触发。 误区三 触发订阅窗口后，不管用户点击了允许还是取消，都会进入订阅消息的success回调中，所以通过这个来判断用户是否订阅是错误的。 订阅次数的维护 先看下官方的文档： [图片] 那么我们该如何使用呢？ 我们通过 wx.requestSubscribeMessage 接口发送的时候是知道需要让用户订阅哪几个模板的，就是 tmplIds 这个参数填的数组。那么根据官方文档的回调内容，我们就可以直接在success内去获取对应的key所返回的状态。把获取到的状态分别存入自己的数据库里。发送的时候去数据库里查询需要发送的模板并且状态为accept的去发送，如果发送成功则删除一条记录（因为没有过期一说，所以随便删除哪一条记录都不影响）。 参考代码 [图片] 查询模板订阅状态 需要基础库大等于2.10.0才支持。 wx.getSetting({ withSubscriptions: true, success (res) { console.log(res) } }) 官方文档 补充 如果用户选择了不再接收消息会清空之前的订阅次数，但是这个不会主动告诉开发者，所以发送订阅消息失败后，需要根据返回内容自行清空记录，重新计算。 相关文章 「笔记」订阅消息-订阅次数维护（2020年3月更新改动） 「笔记」订阅消息体验踩坑

每到周六日，关于微信登录环境异常，本次登录失效，请重新登录等问题一堆接着一堆。下面以个人经验汇个总： 1、尽量不要群发消息打扰别人，如果非要群发，请自行建群。假设我接收到了你的群发消息，我心情不好，或者其他原因觉得你打扰到我了，我直接就会举报你骚扰。微信的审核机制是基于用户体验的，你打扰到用户，被举报肯定跑不了。 2、不要频繁的去添加别人好友，和第一条一样，你打扰到我了，尤其是名字开头带个“A”的。下图：有人加好友骚扰我 [图片] 3、控制每天添加好友数量，正常的陌生社交，每天添加好友也就不过10来个。 4、不要频繁的阅读公众号文章、关注公众号，（存在刷虚假流量嫌疑）正常的用户每天取关都来不及。 5、凌晨0点-6点，不要加好友和群发消息。加好友和群发等操作，尽量避免间隔过快，尽量避免发过多垃圾信息被投诉或者官方封号； 6、每天进群建议不超过50个，进群太快，会提示操作频繁，暂停1小时左右即可； 7、避免发黄赌毒，恶意广告链接，避免被好友或者同行投诉； 8、如果您的微信本身已经收到风险提示，比如发消息对方看不到，或者收不到消息，登录环境异常，本次登录失效，请重新登录等问题等，请适当降低频率，在自己手机端登录即可，不要去其他设备登录。提示：一端多微信操作才致命，都是大数据时代，根本不用人工去封你号，机器就做到了。 9、目前出现最多的情况就是，什么都没做就被强退了。自己好好想想吧，第三方社群软件没用？为什么大部分人都不被强退，就强退你们几个？（我也在使用社群，我也被强退） 以上均为个人使用微信经验总结，不代表官方数据。 [视频] 结束语：请遵守微信使用规则，并规范个人行为，谢谢！

配置： 1、进入商户平台 在产品中心找到小程序红包 开通小程序红包功能 2、开通后在左边的APPID授权管理中关联该小程序APPID 3、进入小程序后台 在功能==》微信支付中确认关联并授权 4、回到商户平台APPID授权管理中确认关联 5、这是最容易忽略的一点 在商户平台 产品中心 小程序红包的产品设置中 拉到最下面 小程序红包权限中开通该小程序的红包功能 到此小程序红包配置完成 开发： 发送红包  var mdhbhe = Convert.ToInt32(fee * 100);                                 string mch_billno = mdminihb.Mch_id + DateTime.Now.ToString("yyyyMMdd") + GenerateNonceStr();                                 WxPayData hb = new WxPayData();                                 hb.SetValue("act_name", mdminihb.Act_name);//活动名称                                 hb.SetValue("mch_billno", mch_billno);//单号                                 hb.SetValue("mch_id", mdminihb.Mch_id);//发送红包的商户号                                 hb.SetValue("nonce_str", GenerateNonceStr());                                 hb.SetValue("notify_way", "MINI_PROGRAM_JSAPI");                                 hb.SetValue("re_openid", openid);                                 hb.SetValue("remark", mdminihb.Remark);                                 hb.SetValue("send_name", mdminihb.Send_name);//商户名称                                 hb.SetValue("total_amount", mdhbhe);//红包金额 单位分                                 hb.SetValue("total_num", 1);//红包数量                                 hb.SetValue("wishing", mdminihb.Wishing);//祝福语                                 hb.SetValue("wxappid", mdminihb.Wxappid);//绑定在商户的小程序的appid 不是公众号的                                  hb.SetValue("scene_id", mdminihb.Scene_id);                                 var sign = hb.MakeSign2(mdminihb.Mch_key);//商户秘钥                                 hb.SetValue("sign", sign);                                 string xml = hb.ToXml();                                 string response = HttpService.HbPost(xml, url, true, 6, mdminihb.Mch_path, mdminihb.Mch_certkey);                                 WxPayData result = new WxPayData();                                 result.FromXml(response);//将xml格式的结果转换为对象以返回                                 var package = "";                                 if (result.GetValue("return_code").ToString() == "SUCCESS" && result.GetValue("result_code").ToString() == "SUCCESS")                                 { //这边是成功后返回的代码 具体逻辑判断自己处理  package = result.GetValue("package").ToString();//成功后返回的                                     package = HttpUtility.UrlEncode(package); //这是用于领取红包的代码   WxPayData inputObj = new WxPayData();                                     inputObj.SetValue("appId", mdminihb.Wxappid);//这边是小程序的appId   这个appId 一定要记住 I要大写                                     inputObj.SetValue("timeStamp", timeStamp);                                     inputObj.SetValue("nonceStr", nonceStr);                                     inputObj.SetValue("package", package);                                     var paySign = inputObj.HBMakeSign(mdminihb.Mch_key);//商户秘钥 } 签名方法： public string MakeSign2(string key)         {             //转url格式             string str = ToUrl();             //在string后加入API KEY             str += "&key=" + key + "";             var rd = Md5.md5(str, 32);                 // 所有字符转为大写             return rd.ToUpper();         } 还有记得带证书 写的比较笼统 有不清楚的再补充 补充说明1：目前小程序红包仅支持用户微信扫码打开小程序，进行红包领取。（场景值1011,1025,1047,1124，小程序场景值详情参见文档 这个条件一定要注意 所以特别注意一定要通过wx.getLaunchOptionsSync()先看下场景值对不对 特别说明 体验版的二维码是无法领取红包的（第三方的要注意） 补充说明2：第二次领取红包的签名不需要大写

调侃 某萌新：为什么我在社区提问的问题都没人回答啊 某大佬：社区的问题质量是越来越低了，真不想看社区的问题了 如何提问 今天，在下就来告诉大家如何优雅的提问： 在提问之前，先想好自己遇到的问题是什么，让想要帮助你的人，知道你的问题所在 提问语言简洁明了，详细说明重现步骤及可能存在的问题 附上问题截图，比如调试工具报错信息、提审被驳回信息 写明代码环境，如工具版本、手机版本、基础库版本等 如果调用接口报错，请直接把接口的官方文档地址贴出来，标明调用接口地址，附上请求的参数以及返回的数据 必要时请提供代码截图或代码片段 点击查看如何创建代码片段 最重要的一点：提问时请务必注意礼貌。这一点特别重要，因为这关乎到回答者决定要不要回答以及以怎么样的态度来回答 依然是重要的一点：请务必给认真回答协助解决问题的回答者一个“赞”，这会更加激起他们回答的积极性 千万不要投机，把问题提到“文章”版块，这样会被直接隐藏。不仅不会加快被解答的速度，还会耽误解答机会 示例 （仅为示例，不代表该问题实际存在） 标题：picker组件多级联动会出现选项为 null 的情况？ 内容： 使用picker组件，设定为多级联动，仅滚动一级栏后确定，后面的栏目获取到的值为 null，能麻烦帮忙看下吗？最新版开发者工具，基础库版本 2.9.2 代码片段：xxxxxxxxxxxxxxxx 继续调侃 某萌新：诶？真的诶，这样提问，好多问题都被解决了 某大佬：这问题问得是真的好，多来点这样的问题，回答也舒坦

时间格式化是很常见的需求，即便是微信开发者工具初始化的极简项目里，[代码]util.js[代码] 也写了一个公用方法 [代码]formatTime()[代码]，其格式是固定的。 如果需要灵活的格式化，moment 是不错的选择，但小程序单包（主包/分包）大小不能超过 2M，这限制了我们不能导入太多功能库。当然，另一方面也提醒我们精简代码。 如果只是为了显示，不操作日期，以下方法可满足一般的需求，直接上代码 [代码]/** * @param {String} fmt eg: yyyy-MM-dd hh:mm * @author meizz * https://blog.csdn.net/meizz/article/details/405708 */ Date.prototype.Format = function (fmt) { const o = { 'M+': this.getMonth() + 1, 'd+': this.getDate(), 'h+': this.getHours(), 'm+': this.getMinutes(), 's+': this.getSeconds(), 'q+': Math.floor((this.getMonth() + 3) / 3), S: this.getMilliseconds() } if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) for (let k in o) if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr((o[k] + '').length)) return fmt } [代码] 这个方法来自 meizz，以下是简单的几个栗子 [代码]// 最常用的格式 new Date().Format('yyyy-MM-dd hh:mm') // 2020-05-20 13:14 const log = console.log const date = new Date('2020-05-20 13:14:20:233') log(date.Format('yyyy-MM-dd')) // 日期：2020-05-20 log(date.Format('yy-MM-dd')) // 年份显示后两位：20-05-20 log(date.Format('yy-M-d')) // 个位数时不补0：20-5-20 log(date.Format('yyyy年M月d日')) // 自定义分隔符：2020年5月20日 log(date.Format('M/d/yyyy')) // 自定义顺序：5/20/2020 log(date.Format('h:m:s')) // 时间：13:14:20 log(date.Format('hh:mm:ss S')) // 毫秒：13:14:20 233 // 随便你写，有出现 y M d h m s q S 字符的都可以 log(date.Format('现在是yyyy年M月份，第q季度')) // 现在是2020年5月份，第2季度 [代码] [代码]Format()[代码] 方法是为了处理格式化显示，如果需要对时间进行一丢丢加减操作呢（如使用 localStorage 缓存数据常需要设置过期时间），于是我写了个方法 [代码]/** * @param {Number} num * @param {String} unit enum: y,M,d,h,m,s */ Date.prototype.Add = function (num, unit) { const s = 1000, m = s * 60, h = m * 60, d = h * 24, M = d * 30, y = M * 12 const obj = { s, m, h, d, M, y } if (!Object.keys(obj).includes(unit)) throw new Error(`Invalid param unit`) return new Date(this.getTime() + num * obj[unit]) } [代码] 简单使用的栗子🌰 [代码]const log = console.log const date = new Date('2020-05-20 13:14:20:233') // 加两小时 log(date.Add(2, 'h')) // 2020-05-20T07:14:20.233Z // 减 10 分钟 log(date.Add(-10, 'm')) // 2020-05-20T05:04:20.233Z // 返回为 Date 对象，可配合 Format() 链式调用 log(date.Add(1, 'd').Format('明天是M月d日')) // 明天是5月21日 [代码]

两个方案： 1、wxparse，本文采用该方案 2、html2wxml 最近项目上遇到在微信小程序里需要显示新闻内容，新闻内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过上面方案完成 首先我们在github上下载wxParse https://github.com/icindy/wxParse [图片] 下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下　　 下面是具体的使用步骤 [图片] 就开始展示富文本了 遇到一个问题，富文本里面的图片展示，有时候展示不出来，这个地方还 要跟进下。 [图片]

目前在搜索场景中，平台会根据小程序开发者填写的相关信息，推算出小程序主营类目并展示。同时类目文案，也会优化成对用户更易理解的叫法。 同时，后续也会向开发者开放反馈渠道，方便大家反馈类目显示问题。

因为没有一个公众号的板块，所以暂借贵地记录下 今天关于公众号开发的收获 ----- 说来话长，长话多说，之前在知乎发过一个帖子，用来介绍公众号内部排版去除两张图片之间缝隙的问题，陆陆续续有人找我 其中就有今天对我来说的贵人，人一生之中有几次贵人呢 ---------- 后来这位朋友给我长期合作了一些需求包括下面这个 --------- 公众号的自动回复功能，比如对于多门店线下连锁企业来说，回复门店关键词自动回复活动链接或者发放购物券，这种需求在平时是非常常见的， 几年前做过这种需求，拿出之前的代码把appid、appsecret、token 更新后，竟然不运行了，今天在网上找了很多资料，参考了很多代码，下面这份代码是切实可行的。 ----- 接下来谈谈这种功能怎么测试 我们总不能能服务商的公众号直接开测的，因为开启了开发者模式，微信公众号后台设置的关键词回复、自定义菜单均失效了，今天中午就犯了这么一个错误。 我们需要申请个测试公众号，这个公众号的权限跟企业公众号是一样的，具体链接如下所示： https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Requesting_an_API_Test_Account.html [图片] 公众号内自动回复，具体演示截图如下所示： [图片] 之前记得微信公众号官方是有示例代码的，找了下官方下找不到了，第三方网站上有相关资源，均不能正常运行。 wx_sample.php 官方文档 微信公众号开发：被动回复用户消息 https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Passive_user_reply_message.html 码云代码自取 https://gitee.com/xiaofeiyang3369/wxtest

先上效果图(无图无真相) [图片] 1. 第一步准备表情包素材 我这里用的微博的表情包可以点击下面的链接查看具体JSON格式这里不展示 表情包文件weibo-emotions.js 2. 第二步编写表情组件(基于wepy2.0) 如果不会 wepy 可以先去了解下如果你会vue那非常容易上手 首先我们需要把表情包文件weibo-emotions.js中的JSON文件转换成我们需要的格式 [代码]emojis = [ { id: 编号, value: 表情对应的汉字含义 例如:[偷笑], icon: 表情相对图片路径, url: 表情具体图片路径 } ] [代码] 具体转换方法 [代码]function () { const _emojis = {} for (const key in emotions) { if (emotions.hasOwnProperty(key)) { const ele = emotions[key]; for (const item of ele) { _emojis[item.value] = { id: item.id, value: item.value, icon: item.icon.replace('/', '_'), url: weibo_icon_url + item.icon } } } } return _emojis } [代码] 编写组件的html代码 [代码]<template> <div class="emoji" style="height:{{height}}px;" :hidden="hide"> <scroll-view :scroll-y="true" style="height:{{height}}px;"> <div class="icons"> <div class="img" v-for="img in emojis" :key="img.id" @tap.stop="onTap(img.value)"> <img class="icon-image" :src="img.url" :lazy-load="true" /> </div> </div> <div style="height:148rpx;"></div> </scroll-view> <div class="btn-box"> <div class="btn-del" @tap.stop="onDel"> <div class="icon icon-input-del" /> </div> </div> </div> </template> [代码] html代码中的height变量为键盘的高度，通过props传入 编写组件的css代码 [代码].emoji { position: fixed; bottom: 0px; left: 0px; width: 100%; transition: all 0.3s; z-index: 10005; &::after { content: ' '; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 0.4px solid rgba(235, 237, 245, 0.8); color: rgba(235, 237, 245, 0.8); } .icons { display: flex; flex-wrap: wrap; .img { flex-grow: 1; padding: 20rpx; text-align: left; justify-items: flex-start; .icon-image { width: 48rpx; height: 48rpx; } } } scroll-view { background: #f8f8f8; } .btn-box { right: 0rpx; bottom: 0rpx; position: fixed; background: #f8f8f8; padding: 30rpx; .btn-del { background: #ffffff; padding: 20rpx 30rpx; border-radius: 10rpx; .icon { font-size: 48rpx; } } } .icon-loading { height: 100%; display: flex; justify-content: center; align-items: center; } } [代码] 这里是使用less来编写css样式的,flex布局如果你对flex不是很了解可以看看 这篇文章 组件JS代码比较少 [代码]import { weibo_emojis } from '../common/api'; import wepy from '@wepy/core'; wepy.component({ options: { addGlobalClass: true }, props: { height: Number, hide: Boolean }, data: { emojis: weibo_emojis, }, methods: { onTap(val) { this.$emit('emoji', val); }, onDel() { this.$emit('del'); } } }); [代码] 表情组件基本已经编写完成是不是很简单 那么编写好的组件怎么用呢？ 其实也很简单 第一步把组件引入到页面 [代码]<config> { "usingComponents": { "emoji-input": "../components/input-emoji", } } </config> [代码] 第二步把组件加入到页面html代码中 [代码]<emoji-input :height="boardheight" @emoji="onInputEmoji" @del="onDelEmoji" :hide="bottom === 0" /> [代码] 第三步编写onInputEmoji，onDelEmoji方法 [代码] /** * 选择表情 */ onInputEmoji(val) { let str = this.content.split(''); str.splice(this.cursor, 0, val); this.content = str.join(''); if (this.cursor === -1) { this.cursor += val.length + 1; } else { this.cursor += val.length; } this.canSend(); }, /** * 删除表情 */ onDelEmoji() { let str = this.content.split(''); const leftStr = this.content.substring(0, this.cursor); const leftLen = leftStr.length; const rightStr = this.content.substring(this.cursor); const left_left_Index = leftStr.lastIndexOf('['); const left_right_Index = leftStr.lastIndexOf(']'); const right_right_Index = rightStr.indexOf(']'); const right_left_Index = rightStr.indexOf('['); if ( left_right_Index === leftLen - 1 && leftLen - left_left_Index <= 8 && left_left_Index > -1 ) { // "111[不简单]|23[33]"left_left_Index=3,left_right_Index=7,leftLen=8 const len = left_right_Index - left_left_Index + 1; str.splice(this.cursor - len, len); this.cursor -= len; } else if ( left_left_Index > -1 && right_right_Index > -1 && left_right_Index < left_left_Index && right_right_Index <= 6 ) { // left_left_Index:4,left_right_Index:3,right_right_Index:1,right_left_Index:2 // "111[666][不简|单]"right_right_Index=1,left_left_Index=3,leftLen=6 let len = right_right_Index + 1 + (leftLen - left_left_Index); if (len <= 10) { str.splice(this.cursor - (leftLen - left_left_Index), len); this.cursor -= leftLen - left_left_Index; } else { str.splice(this.cursor, 1); this.cursor -= 1; } } else { str.splice(this.cursor, 1); this.cursor -= 1; } this.content = str.join(''); }, [代码] 好了基本就完成了一个表情组件的编写和调用 如果你想看完整的代码请点击这里 如果你想体验可以扫下面的二维码自己去体验下 [图片] 下篇 我们写写怎么实现一个简单的富文本编辑器

[图片] 首先，根据官网文档可以知道 只有非个人 的小程序才可以使用web-view组件，如果你的个人开发者，可以跳过这篇文章。 [图片] 一、使用web-view以及它的好处 1、己方账号（第三方）与小程序openId/UnionId的关联绑定，实现免登陆 比如你是某门户网站S，你要识别自己小程序上的用户与网站用户的关系，你可以通过三种方法绑定关系，公众号，小程序源生，小程序web-view内嵌跳转三种方法 2、内嵌H5的富文本，减少重复开发 比如你是门户网站，社区，以往有大量的新闻和帖子，里面带了各种css样式的富文本，小程序源生是无法直接读取的，需要大量转化，这时候直接内嵌这些H5新闻，大大降低开发成本 3、热更新，减少发布审核 某些需要经常更新的内容、公告、活动页，内嵌H5可以减少频繁提交小程序审核 二、小程序功能赋权 为H5提供各种小程序才有的功能，比如录音，扫一扫等。 注意事项 多场景判断，建议使用官方API： wx.miniProgram.getEnv H5唤醒一些小程序API有一定的延时，0.3~1秒 请调用小程序专用的JSSDK，同一个jssdk，但是webview的功能收到限制，和之前微信打开H5有所不同 小程序自动获取加载H5的title H5中iframe的url必须也是业务域名 web-view一定是撑满全屏的，自定义顶部菜单，悬浮的都没用 三、小程序和H5之前的互相通讯 1、 从小程序 ==>> h5 小程序控制H5，可以直接用src路径传参的形式，比如 [代码]<!-- 小程序端 HTML --> <web-view src="//URL?a=param1&b=param2"></web-view> [代码] 避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。 2、 从 H5 ==>> 小程序 [图片] 这里我们知道bindmessage是小程序用来监听H5的推送的内容，但是这里不大不小的坑！就是它的三个出发场景： 小程序后退：使用接口名 wx.miniProgram.navigateTo，wx.miniProgram.navigateBack，wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会出发 分享：这个就是当你点分享小程序的时候，会接受到H5之前发送的postMessage 组件销毁，web-view组件销毁，类似 wx.miniProgram.redirectTo 都会触发。 [代码]<!-- 小程序端 HTML --> <web-view bindmessage="handleGetMessage" src="{{openUrl}}"></web-view> [代码] [代码]// 小程序端 JS --> Page({ /** * 页面的初始数据 */ data: { openUrl: "", }, /** * 获取请求数据 */ handleGetMessage: function (e) { console.log(e.detail.data); } }, }) [代码] [代码]<!-- h5端 HTML和JS --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> wx.miniProgram.postMessage({ data: { link: "//test.com", title: "一起学习，一起进步" } }); //wx.miniProgram.redirectTo({ // url:"/pages/inner/index?source=123" //}) wx.miniProgram.navigateBack({delta: 1}) </script> [代码] 注意事项 那些H5控制小程序的跳转路径必须是“/”开头，如 “/pages/xxx/xxx”，且路径必须在app.json里有，地址错误的话，有时不报错。 postMessage的json必须是data开始，不然接收不到数据。 [图片] 四、bindmessage接收到消息有3个重要特性(重点) 接收可以是H5之前几分钟前发送postMessage，不一定是即刻发出的。 之前发出的 postMessage的DATA信息会累加，当触发bindmessage接收的时候是一个数组。 [图片] 当bindmessage 再次 接收到数据，之前发送的数据不会被清空，将累加一起返回，获取时要判断好数组的角标 [图片] 五、Tips 1、在IDE工具中如何调试H5 [图片] 可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。 2、内嵌H5缓存问题 web-view加载的H5具有很重的缓存，如果需要调试，可以通过在url后面加时间戳的方式解决。 3、小程序关闭，H5背景音乐仍然在播放问题 小程序已经关闭，但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性： visibilitychange：页面可见性状态 简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。 [代码]var statusBeforeHide = true; //初始化页面的状态 var music = document.getElementById("xxx"); // 更改音乐播放状态 function setChangeMusic() { if (document[hiddenProperty]) { // 页面隐藏 if (statusBeforeHide) { music.pause(); // 暂停 } } else { // 页面显示 if (statusBeforeHide) { music.play() //如果statusBeforeHide是true, 继续播放 } } } let hiddenProperty = ('hidden' in document) ? 'hidden' : ('webkitHidden' in document) ? 'webkitHidden' : ('mozHidden' in document) ? 'mozHidden' : null; if (hiddenProperty) { let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); let onVisibilityChange = () => { //console.log('visibilityChange'); setChangeMusic(); }; document.addEventListener(visibilityChangeEvent, onVisibilityChange); } else { console.log("不支持这个api"); } [代码] 总结，web-view还是非常实用的组件，且用且珍惜~ 往期回顾： 小程序自定义头部导航栏“完美”解决方案 小程序Canvas生成海报（一） 小程序新版订阅消息+云开发实战与跳坑