背景 小程序插件简介小程序插件是可以被开发者添加到小程序内直接使用的，能为用户提供具体服务的功能组件。 插件开发者可像开发小程序一样开发插件，除了在自己的小程序内使用，还能提供给其他小程序直接使用。 插件使用者无需独立开发小程序内的所有服务，无需理解插件内部逻辑和实现方式，可直接使用别人开发好的插件，为用户提供相应服务。 推出小程序插件的原因小程序的初衷是希望更好地连接用户和服务。自上线以来，越来越多的商户、开发者开发自己的小程序。 早晨起来在小区电梯内，扫小程序码，即可叫个早餐外卖； 走到门口，扫共享单车的二维码，骑车即走； 到了公司，即可打开小程序轻松打卡，开始美好的一天上班生活…… 随着小程序的普及，越来越多的路边小摊、餐饮小店、夫妻店也希望接入小程序。许多商家会给我们留言： “我只会简单开发，不会做复杂的功能怎么办？” “我也想给餐馆小程序做一个预约订餐功能，要怎么搞？” “客户可以在我的小程序里查询快递信息吗？” “我没有数据，可以在小程序里做地图查找功能吗？”…… 我们总结出大家目前遇到的几个难题： 1.开发技术有限，实现复杂功能难度大 2.人力、设备、资源有限，实现服务成本高 3.缺乏某些类目的资质，如电商、打车 小程序插件的应用1.开发共享，避免重复开发 在小程序内使用插件，可免去小程序开发者重复开发，一定程度上减少了开发工作量。 如：在旅游景区的小程序可以使用地图插件，开发者无需在小程序内独立开发地图内导航、出行指引、周边服务推荐等能力，直接使用地图插件即可为用户提供导航服务，免去很大量的开发工作。 2.插件可提供针对行业的完整服务，同时覆盖线上线下 商家希望借助小程序更好地连接用户和服务，包括线上、线下服务。线下服务往往人力成本、硬件设备等要求较高，商家在小程序内提供完整服务的门槛较高。而插件不仅可以解决线下服务的问题，还能针对特定行业提供全套完整服务。 以景区服务小程序为例，使用门票购买插件，用户可在小程序内完成门票线上预订、购买等流程，在到达景区后，通过插件服务提供商提供的移动终端或硬件设备，可完成门票兑换、核销。 而对于餐饮、零售等线下行业而言，插件更是极大降低了商家的成本，商家可以使用预订、排队、外卖等插件，由插件开发者提供线下服务，商家只需在小程序内引用插件，即可使用由插件开发者提供的预订、外卖等服务，节省了成本。 3. 降低服务门槛的问题，实现“服务共享” 具有开发能力及服务资质的开发者，可将自己的服务封装成插件，提供给其他小程序使用，实现“服务共享”。 插件的技术原理插件本身的技术原理并不复杂。插件代码由一些自定义组件和 JS 代码文件构成，插件开发者在发布插件时，这些代码被上传到微信后台保存起来。 当小程序使用插件时，使用者需填写插件的 AppID 和版本号，以便从后台获取相应的插件代码。小程序代码编译时，插件代码会被嵌入到小程序中，与小程序一起编译运行。 小程序与插件的交互根据需要，插件代码可以提供 JS 接口或自定义组件供小程序调用。JS 接口可以用于界面无关的逻辑，自定义组件可以嵌入界面中展示。 对于插件使用者来说，插件的调用方法很简单。 1.使用插件 JS 接口 与普通 JS 文件间 [代码]require[代码] 的方式一样，只需要将[代码]require(FILE_NAME)[代码] 改成[代码]requirePlugin(PLUGIN_NAME)[代码] 这样的调用形式。 2.使用插件提供的自定义组件 与使用普通自定义组件的方法非常相似。在[代码]json[代码]文件的 [代码]usingComponents[代码] 段落中，按照[代码]plugin://PLUGIN_NAME/COMPONENT_NAME[代码] 的形式使用即可。 对于插件开发者而言，这里给出几点建议： 1.提供充分的接口文档和示例，方便插件使用者了解插件的使用方法； 2.注意保持插件不同版本间接口的稳定，使插件使用者能顺利升级插件； 3.计算小程序代码包大小时，插件代码也会一并计算在内，所以应当控制好插件代码的大小。 插件代码运行环境插件代码的运行环境与小程序代码有一定的区别，主要是以下两点： 1.插件可以发起网络请求的域名与小程序不同，因此插件开发者需要注意在插件后台的设置中正确配置网络请求域名。 2.插件可以调用的 API 有一定的限制，并不是所有的接口插件都可以调用，如页面跳转相关的接口是不允许插件调用的。插件开发者在使用一些特殊接口前，请查询文档中的插件可调用接口列表。 此外，目前一个小程序最多可使用5个插件，赶紧将插件用起来，节约开发者成本吧。 详情可参考《小程序插件接入指南》。

SVGA 是一款轻量级的动画导出及播放方案（ https://svga.io ），微信小程序在最近的更新中，增强了 Canvas 组件的能力，为此，我们在 SVGAPlayer-Web 的基础上，建立了 mp 分支，用于支持 SVGA 在微信小程序上的播放。 如需使用，可点击右方链接查看 README。 https://github.com/svga/svgaplayer-weapp

有些节假日活动或者业务需求，需要把H5的用户引导到小程序来，这或许就比较麻烦了， 微信环境还好，可以直接使用微信提供的<wx-open-launch-weapp>来打开小程序，具体如何实现可以参考这篇文章： https://developers.weixin.qq.com/community/develop/article/doc/000c00b4490678f528baf2cf756413 现在谈的是非微信环境打开我们自己的小程序，如何实现？ 我们可以使用微信提供的【URL Scheme】地址来实现跳转。 具体怎么操作，如下： 如何获取【URL Scheme】地址，获取方法有2种？ 1、可以不用通过服务器调接口，通过登录公众平台，小程序管理后台「工具」-「生成URL Scheme」入口可以获取打开小程序任意页面的URL Scheme（位置在登录后右上角），可以填写你需要跳转小程序的页面地址及参数，点击生成即可 [图片][图片] 2、可以通过微信api接口服务器端调取来生成【URL Scheme】地址，使用一个token就可以实现获取，生成的地址及参数和上面一样的，可以配置对应的参数，地址：https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html 怎么正确使用呢？ iOS系统支持识别URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。 Android系统不支持直接识别URL Scheme，用户无法通过Scheme正常打开小程序，开发者需要使用H5页面中转，再跳转到Scheme实现打开小程序，跳转代码示例如下： location.href = 'weixin://dl/business/?t= *TICKET*' 为了兼容苹果和安卓都能使用，我个人建议统一写成脚本执行跳转locataion.href=‘URL Scheme地址’，这可能会出现，有些浏览器会自动拦截脚本自动执行的内容，导致跳转H5页面不能马上调起跳转小程序，所以页面最好保留一个按钮，标明跳转失败可以点击此按钮跳转小程序。 到此已经可以在非微信环境浏览器打开微信小程序了，祝你代码好运没bug（注：企业微信也支持这种【URL Scheme】调起小程序）。

现在微信有了两个新的开放标签wx-open-launch-app，和wx-open-launch-weapp，微信公众号的网页使用这两个标签，可以跳转小程序和APP我的疑问是：小程序的webview页面里，点击某个按钮，也可以使用如上两个标签，跳转其他小程序或者跳转APP吗？

前言 在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。 [图片] 现有方案 WxParse [代码]WxParse[代码] 作为一个应用最为应用最广泛的富文本插件，在很多时候是大家的首选，但其也明显的存在许多问题。 格式不正确时标签会被原样显示 很多人可能都见到过这种情况，当标签里的内容出现格式上的错误（如冒号不匹配等），在[代码]WxParse[代码]中都会被认为是文本内容而原样输出，例如：[代码]<span style="font-family:"宋体"">Hello World!</span> [代码] 这是由于[代码]WxParse[代码]的解析脚本中，是通过正则匹配的方式进行解析，一旦格式不正确，就将导致无法匹配而被直接认为是文本[代码]//WxParse的匹配模式 var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/, endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/, attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; [代码] 然而，[代码]html[代码] 对于格式的要求并不严格，一些诸如冒号不匹配之类的问题是可以被浏览器接受的，因此需要在解析脚本的层面上提高容错性。 超过限定层数时无法显示 这也是一个让许多人十分苦恼的问题，[代码]WxParse[代码] 通过 [代码]template[代码] 迭代的方式进行显示，当节点的层数大于设定的 [代码]template[代码] 数时就会无法显示，自行增加过多的层数又会大大增加空间大小，因此对于 [代码]wxml[代码] 的渲染方式也需要改进。 对于表格、列表等复杂内容支持性差 [代码]WxParse[代码] 对于 [代码]table[代码]、[代码]ol[代码]、[代码]ul[代码] 等支持性较差，类似于表格单元格合并，有序列表，多层列表等都无法渲染 rich-text [代码]rich-text[代码] 组件作为官方的富文本组件，也是很多人选择的方案，但也存在着一些不足之处 一些常用标签不支持 [代码]rich-text[代码] 支持的标签较少，一些常用的标签（比如 [代码]section[代码]）等都不支持，导致其很难直接用于显示富文本内容 ps：最新的 2.7.1 基础库已经增加支持了许多语义化标签，但还是要考虑低版本兼容问题 不能实现图片和链接的点击 [代码]rich-text[代码] 组件中会屏蔽所有结点事件，这导致无法实现图片点击预览，链接点击效果等操作，较影响体验 不支持音视频 音频和视频作为富文本的重要内容，在 [代码]rich-text[代码] 中却不被支持，这也严重影响了使用体验 共同问题 不支持解析 [代码]style[代码] 标签 现有的方案中都不支持对 [代码]style[代码] 标签中的内容进行解析和匹配，这将导致一些标签样式的不正确 [图片] 方案构建 因此要解决上述问题，就得构建一个新的方案来实现 渲染方式 对于该节点下没有图片、视频、链接等的，直接使用 [代码]rich-text[代码] 显示（可以减少标签数，提高渲染效果），否则则继续进行深入迭代，例如： [图片] 对于迭代的方式，有以下两种方案： 方案一 像 [代码]WxParse[代码] 那样通过 [代码]template[代码] 进行迭代，对于小于 20 层的内容，通过 [代码]template[代码] 迭代的方式进行显示，超过 20 层时，用 [代码]rich-text[代码] 组件兜底，避免无法显示，这也是一开始采用的方案[代码]<!--超过20层直接使用rich-text--> <template name='rich-text-floor20'> <block wx:for='{{nodes}}' wx:key> <rich-text nodes="{{item}}" /> </block> </template> [代码] 方案二 添加一个辅助组件 [代码]trees[代码]，通过组件递归的方式显示，该方式实现了没有层数的限制，且避免了多个重复性的 [代码]template[代码] 占用空间，也是最终采取的方案[代码]<!--继续递归--> <trees wx:else id="node" class="{{item.name}}" style="{{item.attrs.style}}" nodes="{{item.children}}" controls="{{controls}}" /> [代码] 解析脚本 从 [代码]htmlparser2[代码] 包进行改写，其通过状态机的方式取代了正则匹配，有效的解决了容错性问题，且大大提升了解析效率 [代码]//不同状态各通过一个函数进行判断和状态跳转 for (; this._index < this._buffer.length; this._index++) this[this._state](this._buffer[this._index]); [代码] 兼容 [代码]rich-text[代码] 为了解析结果能同时在 [代码]rich-text[代码] 组件上显示，需要对一些 [代码]rich-text[代码]不支持的组件进行转换[代码]//以u标签为例 case 'u': name = 'span'; attrs.style = 'text-decoration:underline;' + attrs.style; break; [代码] 适配渲染需要 在渲染过程中，需要对节点下含有图片、视频、链接等不能由 [代码]rich-text[代码]直接显示的节点继续迭代，否则直接使用 [代码]rich-text[代码] 组件显示；因此需要在解析过程中进行标记，遇到 [代码]img[代码]、[代码]video[代码]、[代码]a[代码] 等标签时，对其所有上级节点设置一个 [代码]continue[代码] 属性用于区分[代码]case 'a': attrs.style = 'color:#366092;display:inline;word-break:break-all;overflow:auto;' + attrs.style; element.continue = true; //冒泡：对上级节点设置continue属性 this._bubbling(); break; [代码] 处理style标签 解析方式 方案一 正则匹配[代码]var classes = style.match(/[^\{\}]+?\{([^\{\}]*?({[\s\S]*?})*)*?\}/g); [代码] 缺陷： 当 [代码]style[代码] 字符串较长时，可能出现栈溢出的问题 对于一些复杂的情况，可能出现匹配失败的问题 方案二 状态机的方式，类似于 [代码]html[代码] 字符串的处理方式，对于 [代码]css[代码] 的规则进行了调整和适配，也是目前采取的方案 匹配方式 方案一 将 [代码]style[代码] 标签解析为一个形如 [代码]{key:content}[代码] 的结构体，对于每个标签，通过访问结构体的相应属性即可知晓是否匹配成功[代码]if (this._style[name]) attrs.style += (';' + this._style[name]); if (this._style['.' + attrs.class]) attrs.style += (';' + this._style['.' + attrs.class]); if (this._style['#' + attrs.id]) attrs.style += (';' + this._style['#' + attrs.id]); [代码] 优点：匹配效率高，适合前端对于时间和空间的要求 缺点：对于多层选择器等复杂情况无法处理 因此在前端组件包中采取的是这种方式进行匹配 方案二 将 [代码]style[代码] 标签解析为一个数组，每个元素是形如 [代码]{key,list,content,index}[代码] 的结构体，主要用于多层选择器的匹配，内置了一个数组 [代码]list[代码] 存储各个层级的选择器，[代码]index[代码] 用于记录当前的层数，匹配成功时，[代码]index++[代码]，匹配成功的标签出栈时，[代码]index--[代码]；通过这样的方式可以匹配多层选择器等更加复杂的情况，但匹配过程比起方案一要复杂的多。 [图片] 遇到的问题 [代码]rich-text[代码] 组件整体的显示问题 在显示过程中，需要把 [代码]rich-text[代码] 作为整体的一部分，在一些情况下会出现问题，例如： [代码]Hello <rich-text nodes="<div style='display:inline-block'>World!</div>"/> [代码] 在这种情况下，虽然对 [代码]rich-text[代码] 中的顶层 [代码]div[代码] 设置了 [代码]display:inline-block[代码]，但没有对 [代码]rich-text[代码] 本身进行设置的情况下，无法实现行内元素的效果，类似的还有 [代码]float[代码]、[代码]width[代码](设置为百分比时)等情况 解决方案 方案一 用一个 [代码]view[代码] 包裹在 [代码]rich-text[代码] 外面，替代最外层的标签[代码]<view style="{{item.attrs.style}}"> <rich-text nodes="{{item.children}}" /> </view> [代码] 缺陷：当该标签为 [代码]table[代码]、[代码]ol[代码] 等功能性标签时，会导致错误 方案二 对 [代码]rich-text[代码] 组件使用最外层标签的样式[代码]<rich-text nodes="{{item}}" style="{{item.attrs.style}}" /> [代码] 缺陷：当该标签的 [代码]style[代码] 中含有 [代码]margin[代码]、[代码]padding[代码] 等内容时会被缩进两次 方案三 通过 [代码]wxs[代码] 脚本将顶层标签的 [代码]display[代码]、[代码]float[代码]、[代码]width[代码] 等样式提取出来放在 [代码]rich-text[代码] 组件的 [代码]style[代码] 中，最终解决了这个问题[代码]var res = ""; var reg = getRegExp("float\s*:\s*[^;]*", "i"); if (reg.test(style)) res += reg.exec(style)[0]; reg = getRegExp("display\s*:\s*([^;]*)", "i"); if (reg.test(style)) { var info = reg.exec(style); res += (';' + info[0]); display = info[1]; } else res += (';display:' + display); reg = getRegExp("[^;\s]*width\s*:\s*[^;]*", "ig"); var width = reg.exec(style); while (width) { res += (';' + width[0]); width = reg.exec(style); } return res; [代码] 图片显示的问题 在 [代码]html[代码] 中，若 [代码]img[代码] 标签没有设置宽高，则会按照原大小显示；设置了宽或高，则按比例进行缩放；同时设置了宽高，则按设置的宽高进行显示；在小程序中，若通过 [代码]image[代码] 组件模拟，需要通过 [代码]bindload[代码] 来获取图片宽高，再进行 [代码]setData[代码]，当图片数量较大时，会大大降低性能；另外，许多图片的宽度会超出屏幕宽度，需要加以限制 解决方案 用 [代码]rich-text[代码] 中的 [代码]img[代码] 替代 [代码]image[代码] 组件，实现更加贴近 [代码]html[代码] 的方式 ；对 [代码]img[代码] 组件设置默认的效果 [代码]max-width:100%;[代码] 视频显示的问题 当一个页面出现过多的视频时，同时进行加载可能导致页面卡死 解决方案 在解析过程中进行计数，若视频数量超过3个，则用一个 [代码]wxss[代码] 绘制的图片替代 [代码]video[代码] 组件，当受到点击时，再切换到 [代码]video[代码] 组件并设置 [代码]autoplay[代码] 以模拟正常效果，实现了一个类似懒加载的功能 [代码]<!--视频--> <view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo"> <view class="triangle_border_right"></view> </view> <video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" /> [代码] 文本复制的问题 小程序中只有 [代码]text[代码] 组件可以通过设置 [代码]selectable[代码] 属性来实现长按复制，在富文本组件中实现这一功能就存在困难 解决方案 在顶层标签上加上 [代码]user-select:text;-webkit-user-select[代码] [图片] 实现更加丰富的功能 在此基础上，还可以实现更多有用的功能 自动设置页面标题 在浏览器中，会将 [代码]title[代码] 标签中的内容设置到页面标题上，在小程序中也同样可以实现这样的功能[代码]if (res.title) { wx.setNavigationBarTitle({ title: res.title }) } [代码] 多资源加载 由于平台差异，一些媒体文件在不同平台可能兼容性有差异，在浏览器中，可以通过 [代码]source[代码] 标签设置多个源，当一个源加载失败时，用下一个源进行加载和播放，在本插件中同样可以实现这样的功能[代码]errorEvent(e) { //尝试加载其他源 if (!this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > 1) { this.data.controls[e.currentTarget.dataset.id] = { play: false, index: 1 } } else if (this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > (this.data.controls[e.currentTarget.dataset.id].index + 1)) { this.data.controls[e.currentTarget.dataset.id].index++; } this.setData({ controls: this.data.controls }) this.triggerEvent('error', { target: e.currentTarget, message: e.detail.errMsg }, { bubbles: true, composed: true }); }, [代码] 添加加载提示 可以在组件的插槽中放入加载提示信息或动画，在加载完成后会将 [代码]slot[代码] 的内容渐隐，将富文本内容渐显，提高用户体验，避免在加载过程中一片空白。 最终效果 经过一个多月的改进，目前实现了这个功能丰富，无层数限制，渲染效果好，轻量化（30.0KB），效率高，前后端通用的富文本插件，体验小程序的用户数已经突破1k啦，欢迎使用和体验 [图片] github 地址 npm 地址 总结 以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！ [图片]

写在前面： 大家不要将ICP证和ICP备案搞混了。 ICP证指的是【电信增值业务经营许可证】，这个资质需要企业主体至少100万注金，去工信部办理，比较难办理；社交-交友需要ICP证。 而ICP备案，【非经营性互联网信息服务备案核准】仅仅是指企业主体的域名备案，可以简单的按以下步骤免费办理成功，其他社交类目如社区、论坛、笔记等，只需要ICP备案即可。 1､在腾讯云注册一个账号并认证企业主体（不吹不黑，开发小程序当然首选腾讯云，好用）。http://www.qcloud.com/ 如果你是个人主体，就不要往下看了，没必要折腾了。 2､找到腾讯云免费活动页：https://cloud.tencent.com/act/free?from=10107 3､选择一款云服务器，180天免费试用。 云服务器申请成功后，它的使命就完成了，没用了，让它自生自灭吧。 在整个备案过程中，也不需要部署网站（域名都没有备案，哪来的网站？）。 [图片] 云服务器180天到期后，可以自己决定是否续费，每个月也才99元，促销期甚至更低，完全可以接受吧。 备案成功后，该服务器就没什么作用了，让它180天后自然欠费销毁得了。 服务器销毁后会有什么影响？答：没有任何影响。 但是。。。。。 你备案的域名最后还得指向一个网站，因为腾讯云会应工信部的要求定期检查网站是否合规，所以你还是要建一个简单的网站，（备案期间，可以暂时不管网站的事，等将来需要的时候再管理）。 至于有多简单，答，多简单都行。此时你可以在七牛、腾讯云、阿里云租点免费的对象存储空间，做个简单的网站。 4､在进行ICP备案之前，你需要在腾讯云注册你的域名地址，如果你已有域名，但不在腾讯云，建议先将要域名过户到腾讯云的账号上。 5､进入控制台，开始ICP备案，这个流程就不介绍了，因为完全一看就懂。而且现在使用备案小程序后，不需要幕布或现场拍照了，极其方便，大家跟着流程走就一点问题没有，有人脸识别和在线拍一段小视频。另外，大家可以随便作，随便填，填错或者填得不合适也不用怕，会有专门的备案客服打电话告诉你哪哪要改，还会告诉你应该怎么填才更容易通过工信部的审核，客服的态度好得发指。 仅说一点其中的几个小坑： a､人脸识别的时候，白色背景、白色背景、白色背景，笔者在人脸识别的时候，满世界找白墙，结果还被打回来重拍了3次。 b､网站用途一律写：公司官网，好通过工信部审核。 6､腾讯云提交资料到工信部审核。这是一个漫长的让人无语的等待，20-30天。笔者最近两次都是20天才过审；不要幻想会有可能提前完成审核，这是政府部门在审核，提前完成说明某政府人员的工作安排有问题，会犯错误的。 7､备案成功后，会有短信通知你，但是，你需要去工信部网站查询结果，并将结果切屏拷贝下来，因为小程序类目审核需要上传这张图片。http://beian.miit.gov.cn/publish/query/indexFirst.action [图片] 把上面这张图片保存好，小程序类目审核的时候需要上传。收到通知后，如果在这里查不到结果，也别急，据说需要24小时。 8､接下来是小程序上线审核。 因为ICP备案的小程序内容肯定涉及到社交，最后小程序上线时还要提交到工信部审核，还需要7天左右的时间，加上前面ICP备案的时间，加起来怎么也得30-40天。大家估计时间，别影响小程序上线。这7天也是政府部门在审核，不要幻想会提前。  9､计算一下时间： 腾讯云注册账号和认证：1-3天； 域名备案：腾讯云环节：1-3天； 域名备案：工信部环节：20-30天； 小程序添加服务类目：社交类目审核：1-3天； 小程序上线审核：腾讯环节：1-2天； 小程序上线审核：工信部环节：7+天； 总天数：30-40天； 10、节省时间的一些建议： 在开发小程序之前，就开始备案工作，小程序可以同时开发，相互不影响； 在开发完成之前一、两星期之内，先发布一版小程序，别管功能是不是完整，能通过审核就行，这样会有7天的等待类目审核的时间，这个时间里，小程序可以照常开发，不影响进度； 只要是社交类，基本需要有文字和图片安全检查功能，别忘了加上，别到时审核通过不了。 11、结束。 [图片]

发生了SSL错误，无法建立与该服务器的安全连接。 就iPhone X 有问题，iPhone 6、7 android 都没问题 麻烦技术人员帮忙看下咋回事 [图片] 手机信息： [图片] 补充信息： 1.扫码 [图片] 2.进入页面后点 “分享按钮” [图片] appId： wxa6b92f2c692350cf

api 顾名思义 wx.openMiniProgramHistoryList wx.openMiniProgramProfile wx.openMiniProgramSearch wx.openMiniProgramStarList 不再多BB直接上图 1.隐藏/显示右上角胶囊按钮 [图片] 2.截屏 [图片] 最近玩console有点上头 现在的小程序api已经达到了373个了 我是怎么知道的？看图 [图片] 往下拉一看 373 [图片] 这里边有很多的api 是文档中没写的（也可能永远不会写） 先说下 普通的小程序里边是没有权限的调用会提示 {errMsg: “openUserProfile:fail:access denied”} 或者 {errMsg: “getABTestConfig:fail permission denied”, errCode: 1} 代码片段：https://developers.weixin.qq.com/s/FgIssdmP7jdv 可用的api wx.navigateBackH5 --webview 通过这个api可以返回上一个web页面 更多的BUG等你们去处理 我吃饭去咯 end

wx.canvasToTempFilePath 提示 canvasToTempFilePath: fail canvas is empty，遇到这个问题时搜了好多方案，发现一个都不管用，最后有看了下文档，才发现问题所在。 [图片] 仔细看下，文档中说当使用canvas 2d时 应该应该使用canvas该属性。 这就是问题所在啊。 当使用2d时根本不用传参 canvasId，直接传入canvas实例即可。     wx.canvasToTempFilePath({       x: 0,       y: 0,       width: 300,       height: 200,       destWidth: 100,       destHeight: 100,       canvas:  this.canvas,//这里是重点，获取实例的时候保存为全局变量就行了       complete(res) {         console.log(res)       }     })

// comp router Component({ options: { styleIsolation: 'apply-shared', virtualHost: true, }, externalClasses: ['class'], }) // comp a // js Component({ options: { virtualHost: true, styleIsolation: 'apply-shared', } }); // wxml // flex-center在app.wxss中定义 .../router> // page a 开发者工具中解析出来是，并非取的page.wxss的flex-center而是取组件wxss的flex-center 直接在页面中使用router组件是符合预期的

- 需求的场景描述（希望解决的问题） wxss中可以直接修改包括page在内的节点的样式，但是wxml中没有page节点，所以page不能像其他节点那样动态修改样式，而且也没有什么api可以用 现在折中的方法是在page里加一个view模拟page，感觉多此一举啊 - 希望提供的能力 能有api可以动态修改page节点的样式

老早以前发过类似的需求：动态修改page节点的样式 内容如下： - 需求的场景描述（希望解决的问题） wxss中可以直接修改包括page在内的节点的样式，但是wxml中没有page节点，所以page不能像其他节点那样动态修改样式，而且也没有什么api可以用 现在折中的方法是在page里加一个view模拟page，感觉多此一举啊 - 希望提供的能力 能有api可以动态修改page节点的样式 官方最近推出了page-meta组件来回应这个需求，但是这个组件是将部分可用的样式变成了一个一个独立的属性来设置，还是不够灵活 我这边追加两个建议需求 1、（这条删掉，有个page-style属性）page-meta组件可以和其他组件一样用下面这种方式来动态设置样式 [代码]<[代码][代码]page-meta[代码] [代码]style[代码][代码]=[代码][代码]"background: {{red?'red':'white'}};padding: {{pagePadding}}rpx;{{otherPageStyle}}"[代码][代码]>[代码]2、增加类似 wx.setPageStyle （名字可以官方决定，我这个是建议）这样一个统一的api来设置page的样式

[图片] 苹果手机在项目里面location.href打开pdf链接后，点击右上角3个点后出现上图，怎么没有转发、收藏、用其他浏览器打开文件的那些功能了

响应官方公告，做wx.getUserInfo适配 wx.getUserProfile。 在wx.getUserProfile 唤起的弹框中点击了一次拒绝按钮 [图片]之后，wx.getUserInfo就不能用了[图片]。 使用wx.getSetting、wx.openSetting都不能重新打开这个授权。 补充说明： 1、开发者工具、真机都不行 2、本来可以正常使用的小程序，为了验证这个问题，点了一次拒绝，也不能用了 3、开发者工具版本：[图片]，基础库： 2.15.0

提到ios系统的橡皮筋效果，作为开发者是又爱又恨，有想要这个效果又有不想要的，无奈的是却没有一个简单的开关来设置这个效果是否开启。 最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题，这里分两部分（取消橡皮筋回弹效果和因为这个效果遇到的坑）和大家分享一下。   取消IOS橡皮筋回弹效果的解决方案 1) 页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]{ "disableScroll":true } [代码] 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1   2) 页面有滚动区域，滚动区域通过view模拟实现，然后在页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。 [代码]json文件配置 { "disableScroll":true } view元素模拟实现滚动样式 { height: calc(100vh - 120rpx); //高度必须是固定的值 overflow-y: auto; } [代码] 不足之处在于view元素模拟的滚动区域滚动时不够连贯，没有scroll-view那种原生丝滑般的感觉。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2   3) 页面有滚动区域，滚动区域使用scroll-view,这时通过disableScroll则无法实现，尝试设置一下scroll-view的scroll-y="{{false}}"，上拉或下拉时居然不再触发橡皮筋的回弹啦，当然滚动区域也不能滚动。 小脑袋动一动，解决方法有啦！ 通过设置一个变量scrollY动态控制滚动区域的滚动从而阻止回弹。 监听bindscrolltoupper\bindscrolltolower当scroll-view区域滚动到顶部或底部时候设置scrollY:false来关闭页面滚动，从而阻止回弹。 监听bindtouchstart\bindtouchmove 当用户反方向滑动的时候设置scrollY:true，再次开启页面滚动。 [代码]wxml滚动区域属性和事件处理，具体实现请点击测试代码链接 <scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5" bindscrolltoupper="bindscrolltoupper" bindscrolltolower="bindscrolltolower" bindtouchstart="touchstart" bindtouchmove="touchmove"> <view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view> </scroll-view> [代码] 相对view模拟实现滚动区域，scroll-view滚动更丝滑，不过每次滚动到底部或顶部的时候，再反向滑动时由于再次开启scroll-view滚动会有操作卡顿的感觉，暂时没想到好的解决方法，有解决的大佬希望提供一下想法，一起学习下。 测试代码：https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3   IOS橡皮筋效果遇到的坑 1) 操作左滑删除组件时上下移动，会触发橡皮筋效果导致页面抖动的问题 这个坑的严重程度看设计师的意愿了，反正我们团队目前是需要解决的，方案类似取消橡皮筋解决方案的第三种 在左滑的时候关闭scroll-view的滚动，取消时再次开启滚动   2) 如果页面顶部有置顶的横向滚动区域scroll-view，当页面滚动到底部时继续上拉会导致置顶头部消失，松开回弹后头部又会出现。 坑是社区里的朋友提出来的，我借了个iphone x 一预览，我嚓，还是真是个奇坑！ 微信官方回复已复现正在解决中… 不想继续等下去的，暂时解决方法是 监听页面的滚动区域，当滚动到底部时设置顶部横向滚动scroll-view的scroll-x=false来解决。   写在最后 以上便是我在小程序开发中有关于ios橡皮筋回弹效果的分享，示例代码已上传github,可自行下载体验。 https://github.com/YuniorZen/minicode-debug/tree/master/minicode01 目前微信官方虽说已经着手解决(已两年)此类bug，但哪吒说 我命由我不由天，所以还是我们开发者多分享些解决方案自救来的快。 分享方案如有问题还望不吝指出，没有涉及到的坑也欢迎评论提出，一起学习和解决，后续也会基于此篇不断更新总结。

最近小程序上线了一个超级流量的新入口：URL Scheme。通过小程序页面的URL Scheme，可以在短信、邮件或微信外部的网页中打开小程序。 那么如何实现呢？官方文档已经写的很清楚啦，这里简单介绍一下。 首先，获取URL Scheme，通过服务端接口可以获取打开小程序任意页面的URL Scheme，支持生成到期失效和永久有效的URL Scheme。 [图片] 然后，通过短信群发平台将获取的URL Scheme + 营销文案发送到用户的手机上。 最后，用户收到短信后，直接点击URL Scheme唤起微信，跳转到对应小程序页面，就是这么简单。 除此之外，还可以通过邮件或外部浏览器打开跳转小程序。 由于部分操作系统仍不支持直接识别URL Scheme，因此直接将Scheme发送给用户可能存在无法打开小程序的情况。 为此，我们可以先准备一个H5页面，再从H5页面跳转到URL Scheme实现打开小程序。 [代码]location.href = 'weixin://dl/business/?ticket= *TICKET*' [代码] H5的示例代码我已经更新到Github，可以复用起来，基于官方的案例做了些改动，增加PC端打开时生成二维码方便手机扫码使用。 这次新能力的更新将使微信小程序不再局限于微信内部的流量，天花板被掀开啦。 而且短信和邮件营销的触达成本非常低，营销成本的压低也会催生出很多新的流量玩法，我们敬请期待吧。

企业微信小程序端，解析返回的json对象时，如果对象属性中有字符串，且该字符串中含有换行符时，无法将该json识别成对象，只能识别成字符串，而微信端则是正常的。

Android企业微信小程序 webview中img src是base64图片无法长按识别，图片的src是http/https是可以正常长按识别的

下载了demo,根据教程成功激活设备和加载自己绑定的小程序，但是当我把appType改为2，想打开体验版的时候却无法成功运行。期间有成功运行体验版的过程，但重启设备后，就无法打开体验版。appType改为0就能成功打开正式版，但改为2的时候几乎无法打开体验版。 注:如果成功打开体验版后，重启设备几乎无法打开体验版，只能切换为正式版