在聊天室的场景的下和用户进行聊天， 有以下的场景： adjust-position 的属性为true 1、在聊天历史列表比较长，点击底部fixed 定位的输入框弹起手机键盘的时候，输入框上面的内容会自动向上推（涂黑部分是订单的卡片，也是聊天的历史）这个体验是可以接受的。 图一： [图片] 2、在聊天历史列表比较短的时候，点击键盘也会把内容会自动向上推 ，效果如下： 点击输入框之前： [图片] 点击输入框之后： [图片] 想到的解决方案： 能不能使用input组件的bindkeyboardheightchange（监听键盘高度变化）或者 bindfocus(聚焦)+bindblur(失去焦点) 获取键盘的高度来动态改变 adjust-position 属性的值来解决问题 过程： 这里 adjust-position 默认值分别设置两种情况： 一、.adjust-position： true 键盘弹起时，自动上推页面 1. 浏览历史长的时候不做处理，键盘唤起的时候，页面应该自动上推，体验正常 2.浏览历史比较短的时候，唤起键盘的时候， 这个需要计算浏览历史列表的安全距离 根据这个安全距离才能设置adjust-position 的开启，浏览历史的长度会有一个临界值 判断这个临界值，如果浏览历史的长度，小于临界值，则设置 adjust-position： false，唤起键盘不会向上推动页面 先测试只有一个聊天内容时候，第一次唤起键盘是如下的效果： [图片] 为什么还是会把页面的聊天内容挤上去，由于唤起键盘的时候，adjust-position 还是true 唤起键盘之后才能拿到键盘的高度，才能判断是否设置adjust-position为false. 点击第二次就正常了，由于点击第一次已经将adjust-position 设置为false，如图： [图片] 二、.adjust-position： false 键盘弹起时，不自动上推页面 1、聊天历史列表数据短的时候，就不测试了，效果和上图一样是正常的， 2、在聊天历史列表长的时候，在点击唤起键盘的时候，效果如下： [图片] 由于默认是 不自动上推页面 ，弹起键盘获取键盘高度的时候，adjust-position的值还是false 再点击第二次唤起键盘的时候，才能显示正常，如上面图一的截图。 造成这样原因归根到底是 在唤起键盘的时候，adjust-position的属性改变的操作是在 拿到键盘高度之后，键盘高度拿到之前界面就已经 被自动上推或者没有被推上去 第二次唤起键盘才能正常显示，不知道这种场景下如何解决，比如提早获取键盘的高度 计算出安全的聊天历史长度。希望各位大佬指导下。

社区里有不少关于wx.request发送multipart/form-data请求的问题，我看了几个，基本都说wx.request不支持，得用wx.uploadFile来“曲线救国”。我花了些时间研究了一下，找到了如下方法，分享出来，希望能帮助到有需要的人。 首先，服务端，我用的是async-busboy来解析multipart/form-data请求，测试代码直接使用它提供的就可以：https://github.com/m4nuC/async-busboy/blob/master/examples/index.js 小程序端： 如果wx.request中仅指定'content-type'为'multipart/form-data'，服务端会报"no multipart boundary was found"的错误，就像这个帖子里描述的：https://developers.weixin.qq.com/community/develop/doc/000e64476f8d80fd7b9765d5655c00 尽管指定了content-type为'mutipart/form-data'，但是wx.request并不会为我们自动添加boundary，既然如此，我们自己加不就可以了吗？经过测试，确认了这个方法可行，前端示例代码如下： [代码]wx.request({[代码][代码]      [代码][代码]url: [代码][代码]'http://localhost:8080/test/multipart-form'[代码][代码],[代码][代码]      [代码][代码]method: [代码][代码]'POST'[代码][代码],[代码][代码]      [代码][代码]header: {[代码][代码]        [代码][代码]'content-type'[代码][代码]: [代码][代码]'multipart/form-data; boundary=XXX'[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]data: [代码][代码]'\r\n--XXX'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nContent-Disposition: form-data; name="field1"'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nvalue1'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n--XXX'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nContent-Disposition: form-data; name="field2"'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nvalue2'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n--XXX--'[代码][代码]    [代码][代码]})[代码]这里，我向服务端传递了两个参数：field1=value1, field2=value2，服务端得到的结果如下： [图片] 如果对multipart/form-data的请求体格式不了解，可以参考这篇文章：https://ec.haxx.se/http-multipart.html wx.request中的data结构看起来有些复杂，有需要的可以封装一下，封装好的API欢迎跟帖分享出来。

我 微信界的同传扛把子！ 识别你的语音？ Of course！ 我就是你的知己！ 翻译你的中文？ No problem！ 我的英语好着呢！ 听懂她的英文？ So easy！ 你想听我就敢译！ What’s more！ 我还能读给你听！ 如何快速实现语音转文字、文本翻译、语音合成等等能力？ 不用着急，让微信同声传译插件来帮你！ 今天我们的小故事想和大家分享微信同声传译插件的故事。 1 应用场景 大家好，我叫“微信同声传译”插件，是由微信智聆语音团队、微信翻译团队与公众平台联合推出的同传开放接口，可通过语音转文字、文本翻译、语音合成接口，为开发者赋能。下面介绍我的应用场景： 场景1： 英语口语、听力双管齐下，没有外教也能学好英语！ 把我放在小程序里，我既可以将口语转为文字，也可以帮助用户判断发音是否标准纯正，是最佳听众和英语学习道路上的良师益友； 场景2： 出国旅游，英语蹩脚怎么办？ 这时我可以应用到翻译小程序里，说中文，译英文，再也不怕出国交流难。 场景3： 看剧时想要吐槽！可是手里有零食，打字不方便怎么办？ 只要在小程序里有我，用户就可以按住按钮说话，语音转文字，帮你发送弹幕！ [图片] 微信同声传译插件目前开放了以下三个接口——语音识别接口、语音合成接口、文本翻译接口。 通过这个插件，插件使用者可以轻松实现语音读取识别、文本转语音和中英文文本转换，避免这类需求的重复开发工作。 [图片] 2 如何使用插件？ 插件接入流程 >>> 开发者在小程序插件中搜索“同声传译”、“语音识别”可以搜索到微信同声传译，添加使用后按使用文档接入使用，同时小程序开发者还可通过 https://github.com/Tencent/Face2FaceTranslator 查看我们开源的插件使用案例。 [图片] 1 登录小程序后台管理，进入“设置”； [图片] 2 点击第三方服务； [图片] 3 点击添加插件； [图片] 4 输入“同声传译”或者“语音识别”、“翻译”等搜索关键字搜索插件并添加，同时可以点击“查看详情”，获取插件的详细介绍、接入说明和开发文档。 [图片] 3 插件简介 1 插件名称 微信同声传译 2 插件AppID wx069ba97219f66d99 3 插件使用指南 微信同声传译插件设计之初，采用和小程序官方流式录音API、网络请求API类似的javascript调用接口，小程序开发者可以快速接入使用此插件。小程序“面对面翻译”使用了这些接口，并且已经开源 [开源地址]，便于开发者快速开发。 [图片] （面对面翻译小程序） 具体使用接口可以查看微信同声传译插件使用文档。

[图片] [图片] [图片]

Github: https://github.com/alexayan/mina-lazy-image 功能 图片在视口中出现才进行加载显示，优化页面性能 使用方法 安装组件 [代码]npm install --save mina-lazy-image [代码] 在页面的 json 配置文件中添加 mina-lazy-image 使用此组件需要依赖小程序基础库 2.2.2 版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。 [代码]{ "usingComponents": { "mina-lazy-image": "mina-lazy-image/index" } } [代码] WXML 文件中引用 mina-lazy-image [代码]<mina-lazy-image src="{{src}}" mode="widthFIx" image-class="custom-class-name"/> [代码] mina-lazy-image 的属性介绍如下： 字段名 类型 必填 描述 src String 是 图片链接 placeholder String 否 占位图片链接 mode String 否 请参考 image 组件 mode 属性 webp Number 否 请参考 image 组件 webp 属性 showMenuByLongpress Boolean 否 请参考 image 组件 show-menu-by-longpress 属性 styles String 否 设置图片样式 viewport Object 否 默认为 {bottom: 0}，配置图片显示区域 mina-lazy-image 外部样式类 [代码]image-class[代码], [代码]image-container-class[代码]

小程序的视频内容流自动播放 啊啊啊，又解决一个问题 0、起因 这个需求产生的起因，是在做内容流（包含文本，图片，视频）的时候，需要如果流里面有视频，则滚动到一定位置时自动播放视频，类似朋友圈、微博等等的自动播放效果。 [图片] 1、第一版尝试 第一版的思路是： 收集当前所有内容流相对于页面头部的高度，做成一个Array 滚动过程中，监听页面滚动事件，当达到某个高度要求，则播放对应的索引视频 这个操作缺点太多了，捡几个主要的说 缺点： 内容流是一个个的组件，获取距离顶部高度不方便，也不太准。并且组件内需要通过事件传播到列表页，在列表页进行高度Array整理、事件监听、切换索引等等（如果有几种列表页，就要写几遍，很麻烦） 监听滚动事件本身就消耗性能，做了节流也不是那么优秀 2、第二版尝试 突然，就发现了[代码]wx.createIntersectionObserver[代码]这个属性，它的作用是：返回[代码]intersectionObserver[代码]对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见（创建一个目标元素，根据目标元素和视窗的相交距离来判断当前页面滚动的情况。通常这个方案也用于页面图片的懒加载）。参考https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.html 怎么解释呢，就是可以理解为，做一个监听，如果当前被监听的元素，进入了你规定的视界或者离开你规定的视界，就触发。 那么，怎么做到监听呢，参考如下代码： [代码]/** 监控视频是否需要播放 */ let {screenWidth, screenHeight} = this.extData.systemInfo //获取屏幕高度 let topBottomPadding = (screenHeight - 80)/2 //取屏幕中间80的高度作为播放触发区域，然后计算上下视窗的高度 topBottomPadding // 80这个高度可以根据UI样式调整，我这边基本两个视频间隔高度在100左右，超过了两个视频之间的间隔，就会冲突，两个视频会同时播放，不建议过大 const videoObserve = wx.createIntersectionObserver() videoObserve.relativeToViewport({bottom: -topBottomPadding, top: -topBottomPadding}) .observe(`#emotion${this.data.randomId}`, (res) => { let {intersectionRatio} = res if(intersectionRatio === 0) { //离开视界，因为视窗占比为0，停止播放 this.setData({ playstart: false }) }else{ //进入视界，开始播放 this.setData({ playstart: true }) } }) [代码] 其中，[代码]observe[代码] 是对应你需要监听的视频（也就是滚动进入视窗的元素） 那么，为什么选择[代码]relativeToViewport[代码]呢，是因为我们需要对它进入某一个视窗进行监听，而不是对进入整个屏幕视窗监听（因为可能整个视窗里会有多个视频）。 以上，就是整个逻辑思路。 最开始用的[代码]relativeTo[代码]监听视频进入某个元素(如[代码].view-port[代码])，但是后来发现每个页面都要写这个元素，太麻烦，并且容易遮盖操作区域 [代码]// 太麻烦，后来舍弃了这个方案 <view class="view-port" style="height: 100rpx; position: fixed; z-index: 1;width: 100%;letf:0;top:50%;transform: translateY(-50%);"></view> [代码]

问题点： iOS前后台切换等操作会触发‘onNetworkStatusChange’事件 从4G切换到Wi-Fi，系统已经连接到Wi-Fi时，不能及时触发‘onNetworkStatusChange’事件，需要等待一段时间才会触发 接着第二条问题，在连接到Wi-Fi后立马回到微信界面，再扫码进入；会触发‘onNetworkStatusChange’事件 *************************** 复现步骤: 先打开调试模式 使用链接Wi-Fi扫码访问 切换为蜂窝网络，正常能响应‘onNetworkStatusChange’事件 再切换为Wi-Fi网络，无法响应‘onNetworkStatusChange’事件 向右滑动，回到微信界面，在扫码访问，触发‘onNetworkStatusChange’事件

live-player组件拉流成功，code为2004，黑屏

wxml: <view class="box">   <view class="section">     <picker mode="date" value="{{date}}" fields="month" start="2010-01-01" end="{{cy+'-'+cm}}"       bindchange="bindDateChange">       <view class="picker">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>     </picker>   </view>   <view>     <!-- 显示星期 -->     <view class="week color9b">       <view wx:for="{{weeks_ch}}" wx:key="unique">{{item}}</view>     </view>     <view class='days'>       <!-- 行 -->       <view class="rows" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="unique">         <!-- 列 -->         <view class="columns" wx:for="{{7}}" wx:for-index="k" wx:key="unique">           <!-- 每个月份的空的单元格 -->           <view class='cell' wx:if="{{days[7*i+k].date == null}}">             <text decode="{{true}}">&nbsp;&nbsp;</text>           </view>           <!-- 每个月份的有数字的单元格 -->           <view class='cell' wx:else>             <!-- 当前日期已签到 -->             <view wx:if="{{days[7*i+k].isSign == true}}" class='qianbg'>               <text class="colorff">{{days[7*i+k].date}}</text>               <text class="sourse">+{{days[7*i+k].Score}}</text>             </view>             <!-- 当前日期未签到 -->             <view wx:else>               <text>{{days[7*i+k].date}}</text>             </view>           </view>         </view>       </view>     </view>   </view> </view> 简单提下思路，首先默认确定当前年月，cy cm, 初始化：获取days遍历日历的格子，通过获取当前月第一天是星期几来判断前面有几个空格，放入days,再当月天数放入days,然后进行渲染，再通接口去拿签到信息，签到成功的突出显示。这里签到初始化时我默认给了标识isSign，将已签到列表和当前年月日进行比较，符合条件则更新签到状态。切换选择日期，这里我用的是选择器，当然可以写成点击左侧按钮上一月，右侧按钮下一月那种，重新选择日期后，initdata(e) 传入年月，就是当前选择年月的数据。将星期日作为第一日的我也备注上去了。样式根据自己的喜好改就行了，最后看看我写的两个项目效果： [图片][图片] 写了个demo：https://developers.weixin.qq.com/s/SSlwjGmb7Wm9