- 小程序web-view打开公众号文章,文章内嵌h5能否正常访问?
小程序web-view打开公众号文章,文章内嵌h5能否正常访问?有的文章能正常打开,有的提示浏览器打开,什么类型的才能正常打开,需要做什么配置吗,h5比如第三方的,也没有校验文件之类的。
06-11 - webview 陀螺仪有问题
https://4382.tupiancunchu.com/tour/926a66935dc02334 这个地址在手机浏览器上打开是没问题的 在小程序webview中打开有明显的抖动
2018-12-07 - 基础库版本3.0.0报很多js错误
2023/08/09-2023/08/09 · 业务代码错误 · 全部版本 错误人数 1 错误次数 1 Cannot assign to read only property \'name\' of object \'Error: 6291456000 does not fit into a 32-bit signed integer. Timeout duration was set to 1.\' TypeError: Cannot assign to read only property \'name\' of object \'Error: 6291456000 does not fit into a 32-bit signed integer. Timeout duration was set to 1.\' at createWarningObject (node:internal/process/warning:182:16) at process.emitWarning (node:internal/process/warning:151:15) at new Timeout (node:internal/timers:172:17) at setTimeout (node:timers:163:19) at t.setTimeout (<anonymous>:464:54765) at globalThis.setTimeout (https://lib/WAServiceMainContext.js:1:149867) at p (https://lib/WAServiceMainContext.js:1:161648) at https://lib/WAServiceMainContext.js:1:162091 at https://lib/WAServiceMainContext.js:1:149877
2023-08-09 - 内网开发企业微信小程序无法安装企业微信小程序模拟器插件?
因公司内网限制,需要在内网进行开发,已配置如下外网防火墙访问权限 登录 https://mp.weixin.qq.com 登录 https://open.weixin.qq.com 主服务器 https://servicewechat.com 动态配置 https://dldir1.qq.com 云开发 https://tcb.cloud.tencent.com 云开发 https://scf.tencentcloudapi.com 云开发 https://flexdb.tencentcloudapi.com 云开发 https://tcb.tencentcloudapi.com 帧同步服务器 https://long.wxagame.weixin.qq.com 真机调试 wss://wxagame.weixin.qq.com 多维监控上报 https://cube.weixinbridge.com 但是在安装企业微信模拟器插件时,依旧报错“插件添加失败”,请问原因如何排查? [图片]
2022-01-29 - 在内网开发企业微信小程序无法选择企业?
因公司内网限制,需要在内网进行开发,已配置如下外网防火墙访问权限 登录 https://mp.weixin.qq.com 登录 https://open.weixin.qq.com 主服务器 https://servicewechat.com 动态配置 https://dldir1.qq.com 云开发 https://tcb.cloud.tencent.com 云开发 https://scf.tencentcloudapi.com 云开发 https://flexdb.tencentcloudapi.com 云开发 https://tcb.tencentcloudapi.com 帧同步服务器 https://long.wxagame.weixin.qq.com 真机调试 wss://wxagame.weixin.qq.com 多维监控上报 https://cube.weixinbridge.com 内网在安装插件时,显示不出来可以安装的模拟器插件,所以是直接将外网的qywx_simulator_plugin.wxvpkg文件,复制进内网的,但切换企业微信小程序开发时,还是获取不了企业列表,是不是还差什么步骤? [图片] [图片]
2022-01-27 - 有什么途径或者方法可以单独下载企业微信小程序模拟器?
内网开发屏蔽了微信插件市场的服务,没法安装企业微信小程序模拟器,请问还有什么方式可以下载安装企业微信小程序模拟器?
2023-03-21 - window.navigator.userAgent 判断当前环境是否是微信小程序?
目前手机端最新版本的微信根据 window.navigator.userAgent.toLowerCase(),来判断当前是否在微信小程序的返回值里是miniProgram/wx 老版本的微信返回值是通过miniProgram来进行判断的,是在微信哪个版本更新时更换了window.navigator.userAgent的返回值?
2022-06-10 - 小程序app.onLaunch与page.onLoad异步问题的最佳实践
场景: 在小程序中大家应该都有这样的场景,在onLaunch里用wx.login静默登录拿到code,再用code去发送请求获取token、用户信息等,整个过程都是异步的,然后我们在业务页面里onLoad去用的时候异步请求还没回来,导致没拿到想要的数据,以往要么监听是否拿到,要么自己封装一套回调,总之都挺麻烦,每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案,公司内部已接入两年很稳定: 1.可完美解决异步问题 2.不污染原生生命周期,与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现,接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景,以下有部分是伪代码,请勿直接粘贴使用,具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = { // 是否已拿到token token: '', // 用户信息 userInfo: { userId: '', head: '' } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({ 'Login':{ name:'Login', watchKey: 'token', onUpdate(token){ //有token则触发此钩子 return !!token; } }, 'User':{ name:'User', watchKey: 'userInfo', onUpdate(user){ //获取到userinfo里的userId则触发此钩子 return !!user.userId; } } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }) //关键点来了 //Page.js,业务页面使用 Page({ onLoadLogin() { //拿到token啦,可以使用token发起请求了 const token = getApp().globalData.token }, onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo }, onReadyUser() { //页面初次渲染完毕 && 拿到用户信息,可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) }, onShowUser() { //页面每次显示 && 拿到用户信息,我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github:https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快,记得star哦
2023-04-23 - 社区每周 | 规范使用wx.login接口获取登录凭证的通知、上周问题反馈(11.28-12.02)
各位微信开发者: 以下是关于规范使用小程序 wx.login 接口获取登录凭证 (code) 的通知以及上周我们在社区收到的问题反馈的处理进度,希望与大家一同打造更好的小程序生态! 关于规范使用小程序 wx.login 接口获取登录凭证 (code) 的通知 根据平台设计,开发者通过 wx.login 接口获取 code 后需要调用 服务端接口 auth.code2Session ,将 code 换取 openid、unionid、session_key 等信息。但目前存在部分开发者不规范使用 code,通过在小程序中获取的 code 换取 网页授权 access_token。 为规范接口使用,自 2023 年 1 月 8 日 14 时起,开发者通过小程序中获取的 code 将无法换取网页授权 access_token ,返回错误码为 40242 。请存在不规范使用的开发者关注并及时调整,避免对业务造成影响。 上周问题反馈和处理进度(11.28-12.02) 已修复的问题iOS input 组件手动聚焦时,光标结束位置不在文字最右边的问题 查看详情 使用 uniapp 开发小程序时,运行结果显示页面无渲染的问题 查看详情 微信客服登录失败的问题 查看详情 创建公众号视频合集但找不到已发表视频的问题 查看详情 微信团队 2022.12.09
2022-12-09 - 小程序用户头像昵称获取规则调整公告
更新时间: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日
2023-09-26 - 新出的URL Link有什么应用场景呢?
昨天看到微信文档更新了 URL Link的功能,这个功能和URL Scheme功能类似,只不过生成的链接不一样。我们之前就是用自己的H5页面承接然后在获取URL Scheme码进行跳转的,那是不是这2个功能对我们来说是一样的?大家对于新的URL Link有什么业务想法呢? https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-link/urllink.generate.html
2021-05-01 - URL Scheme和URL Link 有什么区别?
URL Scheme 不是所有设备都可以跳转到小程序,不兼容的问题,用URL Link 可以得到解决吗
2022-11-16 - URL Scheme和URL Link在应用场景上有什么区别?
翻阅了文档,发现对于短信外链跳转微信小程序有上述两种实现方式,想请问各位大佬,两者同时存在的原因是什么?两者实现的业务场景有什么不一样? 希望各位大佬能帮忙解答上述的疑问,指导后续对接或开发应该用哪个接口。 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
2022-05-24 - 一种优雅的引导下载APP的方式
一种优雅的引导下载APP的方式 ~ 小程序开发笔记来啦,为你们加油ヾ(◍°∇°◍)ノ゙每天进步一点点, ~ 相关介绍大家都知道在小程序是不能直接下载APP的,那么如何引导用户下载APP呢 我总结了几种方式 1)通过二维码,引导用户扫码下载; 2)通过客服消息,通过固定的数字回复来推送具体的下载链接; 在实际的调研过程中,发现也是上面两种方式居多,今天我们分享的是第二种方式,具体见下面的截图 界面截图~ [图片] [图片] [图片] [图片] 相关总结做产品我们是认真的,但是小程序生态毕竟有其局限性,很多功能都不会开放,这样引导到APP平台便是其中一个号的方式。 参考文章 【利诱和强制分享下载】规则修改指引? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0004e81f00cba068abfdd0e8356809
2022-08-14 - eslint --cache 和 lint-staged 是不是用一个就可以了?
eslint --cache 调用就只针对缓存修改内容了。 lint-staged 是针对staged区 是不是功能重复了? 那么再husky hook里是不是就不用调用 lint-staged的配置,直接调用eslint --cache 就行了??? 有点乱,请大神指点下!!
2021-03-04 - 使用miniprogram-ci上传代码失败报错
https://servicewechat.com/wxa/ci/getrandstr Error: tunneling socket could not be established, cause=connect EINVAL 0.0.31.144:80 - Local (0.0.0.0:0) 20001 'Error: tunneling socket could not be established, cause=connect EINVAL 0.0.31.144:80 - Local (0.0.0.0:0)' 20003 'Error: Error: tunneling socket could not be established, cause=connect EINVAL 0.0.31.144:80 - Local (0.0.0.0:0)' (node:428) UnhandledPromiseRejectionWarning: Error: Error: Error: tunneling socket could not be established, cause=connect EINVAL 0.0.31.144:80 - Local (0.0.0.0:0)
2022-04-12 - 小程序顶部自定义导航组件实现原理及坑分享
为什么使用自定义导航 对比默认导航栏,我们会更需要: 统一Android、IOS手机对于页面title的展示样式及位置 更丰富的导航栏定制效果,如添加home图标等 左上角返回事件的监听处理 统一实现双击返回顶部功能 自定义导航组件实现思路 自定义导航组件实现的核心是需要计算导航栏的真实高度 这里以官方文档->扩展能力中的Navigation组件为例分析实现思路。当使用"navigationStyle": "custom"时,默认导航被移除,页面的开始位置变成了屏幕顶部,这时我们需要实现的导航栏是在状态栏下面。 导航栏的真实高度=状态栏高度+导航栏内容。 [图片] 使用wx.getSystemInfo获取到statusBarHeight便是导航栏的高度,但是导航栏内容高度呢? 有人可能觉得导航栏内容高度顾名思义就是导航栏内容高度啊,内容撑起还用管嘛!要,必须要! 因为右上角胶囊按钮是原生加载的,我们的导航栏内容需要正好贴在胶囊的下方且垂直居中。 导航栏内容高度=(胶囊按钮的顶部距离 - 状态高度)*2 + 胶囊高度 [图片] 如何计算胶囊的数据呢?幸运的是我们有 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的布局位置信息,那么动态计算导航栏的内容高度就很方便啦。 好了,以上就是动态计算的核心思路,我们再来看官方Navigation组件高度是怎么实现的 [代码]page{--height:44px;--right:190rpx;} .weui-navigation-bar .android{--height:48px;--right:222rpx} .weui-navigation-bar__inner{ position:fixed;top:0;left:0;z-index:5001;display:flex;align-items:center; height:var(--height);padding-right:var(--right);width:calc(100% - var(--right)) } [代码] 导航栏内容的高度是通过- -height这个css变量提前声明好的,安卓机型会重新覆盖为新的css变量值,目前没发现有适配问题。 官方就是官方啊,具体尺寸都知道,那就不用一番计算周折啦,直接拿来主义即可。 导航的布局位置已经搞定啦,剩下就是写具体的内容,不同业务实现需求不同这里就不一一赘述了。 完善官方顶部导航组件 本着拿来主义,直接使用官方Navigation组件,但在实际业务开发中还是遇到不少需要自定义的需求,就比如: loadding样式没实现 标题内容超出没有出现省略号 和原生顶部的样式不兼容,导致单个页面引入时跳转有明显差异出现 没有双击返回顶部功能开关功能 引入页面需要获取导航栏的高度,来控制其他元素距离顶部的位置, 不能根据页面栈数据动态显示隐藏back按钮, 针对以上需求,我们对官方的组件进行二次完善开发,满足常规的自定义需求绰绰有余,直接引入开箱即用。 源码使用示例 https://github.com/YuniorZen/minicode-debug/tree/master/minicode02 [图片] 使用说明 [代码]/*自定义头部导航组件,基于官方组件Navigation开发。*/ <navigation-bar title="会员中心" bindgetBarInfo="getBarInfo"></navigation-bar> [代码] 组件属性列表 属性 类型 描述 bindgetBarInfo function 组件实例载入页面时触发此事件,首参为event对象,event.detail携带当前导航栏信息,如导航栏高度 event.detail.topBarHeight bindback function 点击back按钮触发此事件响应函数 backImage string back按钮的图标地址 homeImage string home按钮的图标地址 ext-class string 添加在组件内部结构的class,可用于修改组件内部的样式 title string 导航标题,如果不提供为空 background string 导航背景色,默认#ffffff color string 导航字体颜色 dbclickBackTop boolean 是否开启双击返回顶部功能,默认true border boolean 是否显示顶部导航下边框分割线,默认false loading boolean 是否显示标题左侧的loading,默认false show boolean 显示隐藏导航,隐藏的时候navigation的高度占位还在,默认true left boolean 左侧区域是否使用slot内容,默认false center boolean 中间区域是否使用slot内容,默认false Slot name 描述 left 左侧slot,在back按钮位置显示,当left属性为true的时候有效 center 标题slot,在标题位置显示,当center属性为true的时候有效 自定义顶部导航目前存在的坑 弹窗的背景蒙层无法覆盖原生胶囊按钮 页面下拉刷新的圆点会被自定义导航遮盖 如果要自定义顶部导航,以上问题避免不了,只能忍着接受。 目前还没遇到完美的解决方案,针对下拉刷新圆点被遮挡的问题微信官方还在需求开发中,如果你有好的想法欢迎留言反馈,一起学习交流。
2019-10-31 - 输入框文字上移 安卓机子文字弹出输入框
输入框文字上移问题 wxlm [代码]<input autoFocus="true" bindconfirm="confirmSearch" bindinput="search" class="srch-ipt" confirmType="search" placeholder="搜索内容" placeholderClass="ipt-placeholder" type="text" value=""></input> [代码] wxss [代码].srch-ipt { /* prettier-ignore */ height: 32PX; text-align: left; /* prettier-ignore */ font-size: 15PX; } .ipt-placeholder { /* prettier-ignore */ font-size: 15PX; color: #bebebe; text-align: left; } .lxy-nav-bar-search__input { flex: 1; } [代码] 上方代码可以完美解决ios文字上移问题,对于Android会降低偏移大小,因为此问题是微信原生组件所带来的,所以此套方案较为合适 Android机子文字弹出输入框 在 Android 机子会出现文字被键盘弹起顶出 input 框,解决方案为页面设置一个死的高度不要高于 windowHeight,最好是设置一个固定高度或者动态计算高度赋值 小程序自定义导航栏(完美适配所有手机) Taro组件gitHub地址详细用法请参考README 原生组件npm构建版本gitHub地址详细用法请参考README 原生组件简易版gitHub地址详细用法请参考README
2019-08-19 - 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android、IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果 左上角的事件无法监听、定制 路由导航单一,只能够返回上一页,深层级页面的返回不够友好 探索 小程序自定义导航栏已开放许久>>了解一下,相信不少小伙伴已使用过这个功能,同时不少小伙伴也会发现一些坑: 机型多如牛毛:自定义导航栏高度在不同机型始终无法达到视觉上的统一 调皮的胶囊按钮:导航栏元素(文字,图标等)怎么也对不齐那该死的胶囊按钮 各种尺寸的全面屏,奇怪的刘海屏,简直要抓狂 一探究竟 为了搞明白原理,我先去翻了官方文档,>>飞机,点过去是不是很惊喜,很意外,通篇大文尽然只有最下方的一张图片与这个问题有关,并且啥也看不清,汗汗汗… 我特意找了一张图片来 [图片] 分析上图,我得到如下信息: Android跟iOS有差异,表现在顶部到胶囊按钮之间的距离差了6pt 胶囊按钮高度为32pt, iOS和Android一致 动手分析 我们写一个状态栏,通过wx.getSystemInfoSync().statusBarHeight设置高度 Android: [图片] iOS:[图片] 可以看出,iOS胶囊按钮与状态栏之间距离为:4px, Android为8px,是不是所有手机都是这种情况呢? 答案是:苹果手机确实都是4px,安卓大部分都是7和8 也会有其他的情况(可以自己打印getSystemInfo验证)如何快速便捷算出这个高度,请接着往下看 如何计算 导航栏分为状态栏和标题栏,只要能算出每台手机的导航栏高度问题就迎刃而解 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度 注:由于胶囊按钮是原生组件,为表现一致,其单位在各种手机中都为px,所以我们自定义导航栏的单位都必需是px(切记不能用rpx),才能完美适配。 解决问题 现在我们明白了原理,可以利用胶囊按钮的位置信息和statusBarHeight高度动态计算导航栏的高度,贴一个实现此功能最重要的方法 [代码]let systemInfo = wx.getSystemInfoSync(); let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息 wx.getMenuButtonBoundingClientRect(); let navBarHeight = (function() { //导航栏高度 let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距 return 2 * gap + rect.height; })(); [代码] gap信息就是不同的手机其状态栏到胶囊按钮间距,具体更多代码实现和使用demo请移步下方代码仓库,代码中还会有输入框文字跳动解决办法,安卓手机输入框文字飞出解决办法,左侧按钮边框太粗解决办法等等 胶囊信息报错和获取不到 问题就在于 getMenuButtonBoundingClientRect 这个方法,在某些机子和环境下会报错或者获取不到,对于此种情况完美可以模拟一个胶囊位置出来 [代码]try { rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null; if (rect === null) { throw 'getMenuButtonBoundingClientRect error'; } //取值为0的情况 if (!rect.width) { throw 'getMenuButtonBoundingClientRect error'; } } catch (error) { let gap = ''; //胶囊按钮上下间距 使导航内容居中 let width = 96; //胶囊的宽度,android大部分96,ios为88 if (systemInfo.platform === 'android') { gap = 8; width = 96; } else if (systemInfo.platform === 'devtools') { if (ios) { gap = 5.5; //开发工具中ios手机 } else { gap = 7.5; //开发工具中android和其他手机 } } else { gap = 4; width = 88; } if (!systemInfo.statusBarHeight) { //开启wifi的情况下修复statusBarHeight值获取不到 systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20; } rect = { //获取不到胶囊信息就自定义重置一个 bottom: systemInfo.statusBarHeight + gap + 32, height: 32, left: systemInfo.windowWidth - width - 10, right: systemInfo.windowWidth - 10, top: systemInfo.statusBarHeight + gap, width: width }; console.log('error', error); console.log('rect', rect); } [代码] 以上代码主要是借鉴了拼多多的默认值写法,android 机子中 gap 值大部分为 8,ios 都为 4,开发工具中 ios 为 5.5,android 为 7.5,这样处理之后自己模拟一个胶囊按钮的位置,这样在获取不到胶囊信息的情况下,可保证绝大多数机子完美显示导航头 吐槽 这么重要的问题,官方尽然没有提供解决方案…竟然提供了一张看不清的图片??? 网上有很多ios设置44,android设置48,还有根据不同的手机型号设置不同高度,通过长时间的开发和尝试,本人发现以上方案并不完美,并且bug很多 代码库 Taro组件gitHub地址详细用法请参考README 原生组件npm构建版本gitHub地址详细用法请参考README 原生组件简易版gitHub地址详细用法请参考README 由于本人精力有限,目前只计划发布维护好这2种组件,其他组件请自行修改代码,有问题请联系 备注 上方2种组件在最下方30多款手机测试情况表现良好 iPhone手机打电话和开热点导致导航栏样式错乱,问题已经解决啦,请去demo里测试,这里特别感谢moments网友提出的问题 本文章并无任何商业性质,如有侵权请联系本人修改或删除 文章少量部分内容是本人查询搜集而来 如有问题可以下方留言讨论,微信zhijunxh 比较 斗鱼: [图片] 虎牙: [图片] 微博: [图片] 酷狗: [图片] 知乎: [图片] [图片] 知乎是这里边做的最好的,但是我个人认为有几个可以优化的小问题 打电话或者开启热点导致样式错落,这也是大部门小程序的问题 导航栏下边距太小,看起来不舒服 搜索框距离2侧按钮组距离不对等 自定义返回和home按钮中的竖线颜色重了,并且感觉太粗 如果您看到了此篇文章,请赶快修改自己的代码,并运用在实践中吧 扫码体验我的小程序: [图片] 创作不易,如果对你有帮助,请移步Taro组件gitHub原生组件gitHub给个星星 star✨✨ 谢谢 测试信息 手机型号 胶囊位置信息 statusBarHeight 测试情况 iPhoneX 80 32 281 369 48 88 44 通过 iPhone8 plus 56 32 320 408 24 88 20 通过 iphone7 56 32 281 368 24 87 20 通过 iPhone6 plus 56 32 320 408 24 88 20 通过 iPhone6 56 32 281 368 24 87 20 通过 HUAWEI SLA-AL00 64 32 254 350 32 96 24 通过 HUAWEI VTR-AL00 64 32 254 350 32 96 24 通过 HUAWEI EVA-AL00 64 32 254 350 32 96 24 通过 HUAWEI EML-AL00 68 32 254 350 36 96 29 通过 HUAWEI VOG-AL00 65 32 254 350 33 96 25 通过 HUAWEI ATU-TL10 64 32 254 350 32 96 24 通过 HUAWEI SMARTISAN OS105 64 32 326 422 32 96 24 通过 XIAOMI MI6 59 28 265 352 31 87 23 通过 XIAOMI MI4LTE 60 32 254 350 28 96 20 通过 XIAOMI MIX3 74 32 287 383 42 96 35 通过 REDMI NOTE3 64 32 254 350 32 96 24 通过 REDMI NOTE4 64 32 254 350 32 96 24 通过 REDMI NOTE3 55 28 255 351 27 96 20 通过 REDMI 5plus 67 32 287 383 35 96 28 通过 MEIZU M571C 65 32 254 350 33 96 25 通过 MEIZU M6 NOTE 62 32 254 350 30 96 22 通过 MEIZU MX4 PRO 62 32 278 374 30 96 22 通过 OPPO A33 65 32 254 350 33 96 26 通过 OPPO R11 58 32 254 350 26 96 18 通过 VIVO Y55 64 32 254 350 32 96 24 通过 HONOR BLN-AL20 64 32 254 350 32 96 24 通过 HONOR NEM-AL10 59 28 265 352 31 87 24 通过 HONOR BND-AL10 64 32 254 350 32 96 24 通过 HONOR duk-al20 64 32 254 350 32 96 24 通过 SAMSUNG SM-G9550 64 32 305 401 32 96 24 通过 360 1801-A01 64 32 254 350 32 96 24 通过
2019-11-17