- 当前 Bug 的表现（可附上截图） [图片] - 预期表现 点击输入框没有聚焦 ，在目标点上面20个像素点击会获取焦点 - 复现路径 <input type="text" maxlength="20" data-name="addName" placeholder="请输入名称"   placeholder-class="phClass" :value="addInvoice.name" />提问

废话不多说，直接上代码 <input placeholder='想对他说点什么' id='a' confirm-hold="true" maxlength="-1" cursor-spacing="12" confirm-type='send' focus='{{focus}}' value='{{value}}' bindinput='inputClick' ></input> <input  value='发送' bindtap='faClick'></input> //js //获取输入内容 inputClick:function(e){ // console.log(e) var that = this var value = e.detail.value this.setData({ value : value }) }, //发送 faClick:function(){ var that = this var value = that.data.value console.log(value) var obj = {} obj.id = that.data.id obj.himg = "../images/header_0" + that.data.id + ".png" obj.con = value var chatArr = that.data.chatArr chatArr.push(obj) var value = "" var focus = true that.setData({ chatArr: chatArr, value:value, focus: focus }) that.bottom() }, 简单的说  就是发送也是一个input   点击发送的时候 触发了发送input 的软键盘 这时候让焦点回到 输入input 大佬如果有更好的办法   求分享

我一直希望只用小程序的原生框架进行开发，之前为Nike和沃尔玛开发过小程序，发现大多数小程序在功能上也不会像web前端那样复杂，所以再引入一个开发框架难免会觉得是在增加复杂度。 而用原生框架开发时，我觉得唯一缺少的就是一个全局的状态管理框架，所以我自己写了一个，使用风格上有点偏向mobx，大家如果有想法和意见，欢迎告诉我。 Github: https://github.com/wwayne/minii 举个栗子如何使用：(只有两个api，mapToData 和 observe) [图片]

1、微信小程序动画有自己的方法：官方链接 但需要自己去写动画效果，比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。 animate.css包含76种动画，使用非常简单。animate.css官网 : https://daneden.github.io/animate.css/ 3、由于小程序对代码大小限制比较大，所以删除了animate.css中 所有@-webkit-部分css，减少了一半体积 再把文件后缀名改为wxss，以后出来的百度小程序、支付宝小程序、今日头条小程序估计修改对应的后缀名就可以直接使用了。 下载地址：http://nodejs999.com/animate.wxss 4、放到小程序代码中，然后@import到app.wxss文件中。 我项目是把animate.wxss文件放在utils文件夹下。 所以在app.wxss中加入 @import './utils/animate.wxss'; 即可。 就可以像animate.css一样使用了。

现在要做自定义的导航栏，有一排导航按钮需要跟那个原生的胶囊按钮对齐 找到了官方的设计指导： https://developers.weixin.qq.com/miniprogram/design/image/13titlebar.jpg?t=18082920 [图片] 然后按图上给出的尺寸做了一个方块： [图片][图片] 可以看到，只有右边的7pt是准确的，其他尺寸全都没对上。 我的问题是，这个胶囊尺寸的大小和位置究竟是怎样的？

自定义导航栏的一些常见问题： 1、怎么适配手机状态栏高度，使导航栏与胶囊按钮对齐？ 2、写了导航栏组件但是用了fixed定位，脱离普通文档流，要麻烦的去每个页面加padding-top。 3、怎么让导航栏跟page融合到一起，跟随page滚动，这样就不用在这个页面单独适配状态栏了。 4、怎么自动识别非首页启动的小程序，在自定义导航栏加个返回首页的引导？ 使用案例可导入代码片段【现在导入】查看。 子页面 [图片][图片] [图片] 非首页启动的小程序 [图片] 跟随页面，不置顶。 [图片] 监测滚动切换导航栏的显示或隐藏。 [图片] -----------------------------------------------------------------------------------------------------------------------------------------

- 需求的场景描述（希望解决的问题） 分享普通二维码，识别普通二维码跳转h5

[图片] 请大佬指点下这种效果怎么做

参考：http://www.soswen.com/article/10 一、先到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标，并下载下来，找到ttf格式文件 [图片] 二、到这个平台https://transfonter.org/，把字体文件转化成base64格式 [图片]三、在wxss文件中引入 [图片] [图片] 四、在wxml加入字体 [图片] 五、显示效果 [图片]

开发文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=61191740&lang=zh_CN 插件功能 语音转文字 语音合成 文本翻译 具体使用案例可以查看面对面翻译小程序开源项目：  https://github.com/Tencent/Face2FaceTranslator                   简单DEMO实现： step 1：添加插件 在使用前，需要登录官网 设置 → 第三方服务 → 添加插件 搜索 【微信同声传译】并添加 [图片] 在需要使用插件的小程序 app.json 中指明需要使用的插件版本等信息 [代码]// app.json {  ...  "plugins": {    ...    "WechatSI": {      "version": "0.0.6",      "provider": "wx069ba97219f66d99"  } }[代码] 接下来，在index.js引入插件，获取全局唯一的语音识别管理器recordRecoManager [代码]// index.js const plugin = requirePlugin("WechatSI") const manager = plugin.getRecordRecognitionManager() [代码] step 2：语音输入 希望做到的效果是按住某个按钮，开始识别语音，松开按钮就结束识别 [代码][代码][代码]<view  catchtouchstart="streamRecord" catchtouchend="endStreamRecord">中文view> [代码] [代码]// index.js Page({  data: {},  streamRecord: function() {    manager.start({      lang: 'zh_CN',    })  },  streamRecordEnd: function() {    manager.stop()  } }) [代码] step 3：绑定录音回调事件 [代码][代码][代码] <view>语音识别内容：{{currentText}}view> [代码] [代码]// page.js Page({  data: {    currentText: '',  },  initRecord: function() {    //有新的识别内容返回，则会调用此事件    manager.onRecognize = (res) => {      let text = res.result      this.setData({        currentText: text,      })    }    // 识别结束事件    manager.onStop = (res) => {      let text = res.result      if(text == '') {        // 用户没有说话，可以做一下提示处理...        return      }      this.setData({        currentText: text,      })      // 得到完整识别内容就可以去翻译了      this.translateTextAction()    }  },  translateTextAction: function() {},  onLoad: function() {    this.initRecord()  } }) [代码] step 4：文本翻译 [代码][代码][代码]<view>翻译结果：{{translateText}}view> [代码] [代码]// page.js Page({  data: {    currentText: '',    translateText: '',  },  translateTextAction: function() {    let lfrom =  'zh_CN'    let lto = 'en_US'    plugin.translate({      lfrom: lfrom,      lto: lto,      content: this.data.currentText,      tts: true, // 需要合成语音      success: (resTrans)=>{        // 翻译可以得到 翻译文本，翻译文本的合成语音，合成语音的过期时间        let text = resTrans.result        this.setData({          translateText: text,        })        // 得到合成语音让它自动播放出来        wx.playBackgroundAudio({          dataUrl: resTrans.filename,          title: '',        })      },    })  }, }) [代码] step 5：语音合成 plugin.translate得到的语音文件是有过期时间，可以download到本地使用。 如果像面对面翻译一样需要存比较多历史记录的话，也可以选择过期之后调用plugin.textToSpeech接口再去重新合成一次。 [代码]  plugin.textToSpeech({    lang: 'zh_CN',    content: '我想重新进行语音合成',    success: resTrans => {      // 可以重新得到语音合成文件和过期时间    }, }) [代码]

1、checkbox checkbox .wx-checkbox-input{     border-radius:50%;     width:20px;height:20px; } checkbox .wx-checkbox-input.wx-checkbox-input-checked{     border-color:#F0302F !important;     background:#F0302F !important; } checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{     border-radius:50%;     width:20px;     height:20px;     line-height:20px;     text-align:center;     font-size:15px;     color:#fff;     background:transparent;     transform:translate(-50%, -50%) scale(1);     -webkit-transform:translate(-50%, -50%) scale(1); } 2、radio radio .wx-radio-input{     border-radius:50%;     width:20px;height:20px; } radio .wx-radio-input.wx-radio-input-checked{     border-color:#F0302F !important;     background:#F0302F !important; } radio .wx-radio-input.wx-radio-input-checked::before{     border-radius:50%;     width:20px;     height:20px;     line-height:20px;     text-align:center;     font-size:15px;     color:#fff;     background:transparent;     transform:translate(-50%, -50%) scale(1);     -webkit-transform:translate(-50%, -50%) scale(1); } 如果上面的代码对您有帮助，麻烦抖一抖小手点下赞，谢谢

建议小程序支持横屏。 由于小程序不支持横屏，所以使用了 transform的 rotate将页面最外层的 view 组件 旋转了90度实现横屏效果。 再使用swiper时遇到左右滑动swiper时，子项上下滚动，设置上下滚动时，swiper子项左右滚动。 事实上页面还是竖屏，只是把页面内容旋转了而已。 手势↕️滑动，swiper↔️切换了。手势↔️滑动，swiper↕️切换了。 [图片]

也许有人会问，小程序中都是竖直app形态，要横竖屏判断有什么用？即使判断出了横屏状态，你能把小程序横过来？答案是不能的，但是判断当前设备处于横屏或者竖屏状态来实现一些友好的用户体验交互方式的需求确实存在。例如手机横屏，让视频播放自动全屏，手机竖屏，让视频切换回来小屏。 然而，截止至目前，小程序官方的API中并没有提供这样的横竖屏判断的方法。那么我们只能自己想办法实现这样的判断。小程序的设备API中提供了加速度计的监听方法，使用方法如下： [代码]wx.onAccelerometerChange([代码][代码]function[代码][代码](res) {[代码] [代码]  [代码][代码]console.log(res.x)[代码] [代码]  [代码][代码]console.log(res.y)[代码] [代码]  [代码][代码]console.log(res.z)[代码] [代码]})[代码] 加速度计的三轴以下是一般移动设备的加速度计三轴坐标系示例图： [图片] 以手机竖直面向用户为例，加速计的三轴坐标系统的X、Y、Z轴定义如下： 沿着手机屏幕顶部向上是Y轴正方向，向下是Y轴负方向； 当手机顶部朝上时，沿着手机屏幕向右是X轴正方向，向左是X轴负方向； 正对手机时，垂直屏幕向外是Z轴正方向，垂直屏幕向里是Z轴负方向； 当手机处于静止状态时，手机此时只受一个重力加速度(1g=9.8m/s²)的作用，加速度计返回的res.x、res.y、res.z的值就是设备的三轴受到的加速度的值，取值范围从[-1g,1g]。设备以不同方式放置时，x/y/z的值如下： [图片] 计算姿态角在stackoverflow上找到了根据加速度计三轴的值计算姿态角公式（https://stackoverflow.com/questions/3755059/3d-accelerometer-calculate-the-orientation），经过结合设备的三轴坐标方向对公式进行调整，最终得出了公式： [代码]Pitch = atan2(Y, Z) * 180/M_PI;Roll = atan2(-X, sqrt(Y*Y + Z*Z)) * 180/M_PI;[代码] [代码][代码]Roll = atan2(-X, sqrt(Y*Y + Z*Z)) * 180/M_PI;[代码][代码] Roll（绕Y轴旋转的角度） 当设备绕着自身Y轴旋转时（表示手机左侧或右侧翘起的角度），该角度值将会发生变化，取值范围是-90到90度。 Pitch（绕X轴旋转的角度） 当手机绕着自身的Y轴旋转（表示手机顶部或尾部翘起的角度），该角度会发生变化，值的范围是-180到180度。 [图片] 接下来就是根据自己对横竖屏角度的观测，再结合微信小程序中，视频全屏只能以手机向左旋转方式全屏的特性，只对用户左侧横屏判断为横屏状态，实现代码片段如下： [代码]  // 0为竖屏，1为横屏[代码][代码]  [代码][代码]let lastState = 0;[代码][代码]  [代码][代码]let lastTime = Date.now();[代码] [代码]  [代码][代码]wx.startAccelerometer();[代码] [代码]  [代码][代码]wx.onAccelerometerChange((res) => {[代码][代码]    [代码][代码]const now = Date.now();[代码][代码]    [代码] [代码]    [代码][代码]// 500ms检测一次[代码][代码]    [代码][代码]if[代码] [代码](now - lastTime < 500) {[代码][代码]      [代码][代码]return[代码][代码];[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]lastTime = now;[代码] [代码]    [代码][代码]let nowState;[代码] [代码]    [代码][代码]// 57.3 = 180 / Math.PI[代码][代码]    [代码][代码]const Roll = Math.atan2(-res.x, Math.sqrt(res.y * res.y + res.z * res.z)) * 57.3;[代码][代码]    [代码][代码]const Pitch = Math.atan2(res.y, res.z) * 57.3;[代码] [代码]    [代码][代码]// console.log('Roll: ' + Roll, 'Pitch: ' + Pitch)[代码] [代码]    [代码][代码]// 横屏状态[代码][代码]    [代码][代码]if[代码] [代码](Roll > 50) {[代码][代码]      [代码][代码]if[代码] [代码]((Pitch > -180 && Pitch < -60) || (Pitch > 130)) {[代码][代码]        [代码][代码]nowState = 1;[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]nowState = lastState;[代码][代码]      [代码][代码]}[代码] [代码]    [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码]((Roll > 0 && Roll < 30) || (Roll < 0 && Roll > -30)) {[代码][代码]      [代码][代码]let absPitch = Math.abs(Pitch);[代码] [代码]      [代码][代码]// 如果手机平躺，保持原状态不变，40容错率[代码][代码]      [代码][代码]if[代码] [代码]((absPitch > 140 || absPitch < 40)) {[代码][代码]        [代码][代码]nowState = lastState;[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](Pitch < 0) { [代码][代码]/*收集竖向正立的情况*/[代码][代码]        [代码][代码]nowState = 0;[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]nowState = lastState;[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]else[代码] [代码]{[代码][代码]      [代码][代码]nowState = lastState;[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码]// 状态变化时，触发[代码][代码]    [代码][代码]if[代码] [代码](nowState !== lastState) {[代码][代码]      [代码][代码]lastState = nowState;[代码][代码]      [代码][代码]if[代码] [代码](nowState === 1) {[代码][代码]        [代码][代码]console.log([代码][代码]'change:横屏'[代码][代码]);[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]console.log([代码][代码]'change:竖屏'[代码][代码]);[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]});[代码] 然后就可以在横竖屏切换的状态下，去切换视频的横竖屏了 [代码]if[代码] [代码](state === 1) {[代码][代码]  [代码][代码]video.requestFullScreen();[代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]  [代码][代码]video.exitFullScreen();[代码][代码]}[代码] 其他 另外，在这里发现小程序的一个小bug，就是当进入一个页面，马上就调用requestFullScreen()方法去拉起视频全屏时，会破坏整个页面的布局，并且再调用全屏方法时，视频就无法再全屏了，像这样： [图片] 所以为了防止用户直接以横屏的状态进入一个视频播放页，而我们的横屏判断检测生效立即触发全屏引发bug，我将监听横竖屏的事件通过setTimeout(listener, 3000)延迟3s监听，这样横屏才不会触发bug。 最后 文中的很多知识点很多都是从网络文章学来，可能存在错误的理解，如有错误，欢迎各位指正。 最后再打个广告，欢迎喜欢看游戏直播的小伙伴来试用我们的《TG电竞》直播小程序，这里聚合各大平台的知名主播，总有一款适合你哦。 [图片]

- 需求的场景描述（希望解决的问题） 我在父级A调用子组件B，B数据的request方法是写在自身ready里的。 这样我就遇到了一个问题。我在其他页面修改了这份数据。再回到父级A进行刷新，其实B中ready里的方法并不会执行。页面无法实时更新。 - 希望提供的能力 在不改变页面结构的前提下，有解决问题的方法吗? ps 我并不希望通过A传值给B这一方法