我想在小程序内，设置一个按钮跳转至我自己的公众号图文“合集”，目前支持吗？ 【现状】我们目前设置公众号文章链接是可以跳转，但链接换成“公众号图文合集”就不行了，跳转显示如下图所示。 合集类似下面这个地址，此合集链接仅作示例~ https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzA4MjEzOTQ4Mw==&action=getalbum&album_id=2319833331364184066&scene=173&from_msgid=2650819466&from_itemidx=1&count=3&nolastread=1#wechat_redirect 目前我试了是显示这样的 [图片] [图片]

小程序有没有可以长按识别外部网页生成的二维码

用了show-menu-by-longpress="true"，但是没有展示出识别二维码

如题，小程序中的图片长按后无法识别二维码。而且已经添加show-meun-by-longpress。 [图片][图片]

查阅了很多文章，大多还停留在页面嵌入webview识别二维码的时代。 [图片] 下面我发表一下小程序支持长按识别二维码的方法 只需要在image标签里添加 如下属性 小程序版本： show-menu-by-longpress="{{true}}" uniapp版本： :show-menu-by-longpress="true" 例如： 小程序版本： <image class="pic" show-menu-by-longpress="{{true}}" :src="src" mode="widthFix" /> uniapp版本： <image :src="src" mode="widthFix" :show-menu-by-longpress="true"></image> 即可长按识别，快去试试吧！

约定：     某一级专用WebView：WebView1     通用WebView：WebView2 小程序中一个一级页面使用WebView实现，即WebView1，在WebView1链接的web页面中，跳转至WebView2，但WebView1的load中，从Storage取出了“cookie”数据，而在WebView2的load中，无法获取该数据，疑似两个WebView对应的是不同的Storage，请问有没有办法让两个WebView共享Storage数据

公众号的 摇一摇周边 是被取消了吗？ 功能入口没有了，所有的 ibeacon设备都不起作用了

如题，这2种方式除了IOS和安卓上打开小程序的体验不同以外，还有其他区别吗？

[图片] 比如说这样的，我点击打开的时候发起授权 我点关闭的时候实现关闭订阅消息，该怎么实现？ 通过设置将订阅消息关闭之后，再点击授权，返回用户关闭了总开关 难道订阅了之后，就只能通过设置来打开或关闭吗？ 请知道的大佬回答一下 谢谢！！

想知道目前有多少人订阅小程序的通知消息

如图所示，wxml中设置textarea的auto-focus为true，ios端用户首次点击时键盘会快速弹起并落下，这是通过wx.onKeyboardHeightChange监听发现的，当用户再次点击时就可以正常弹起 [图片]

[图片]

示例图： [图片][图片] wxml: <!-- 顶部自定义导航样式 --> <!-- 样式1、2 黑色胶囊 白色胶囊--> <view class='nav' style="height:{{navH}}px;{{background? background:''}}" wx:if="{{styles==1 || styles==2}}">   <!-- 页面标题 -->   <view class='nav-title' style="height:{{navTitle}}px;">     <view class="nav-back2" style="width:{{menuW}}px;height:{{menuH}}px;"  wx:if="{{!isTab}}">       <text class="icons icons-zuojiantou" style="color:{{styles==1? '#000':'#fff'}};" data-type="back" catchtap="goback"></text>       <text class="nav-shu" style="background:{{styles==1? '#2F2F2F':'#fff'}};"></text>       <view data-type="index" catchtap="goback"><image mode="widthFix" src="img/{{styles==1? 'index1':'index2'}}.png"></image></view>     </view>     <text style="color:{{styles==1? '#000':'#fff'}};width:{{titleWidth}}px;" class="line1">{{title}}</text>   </view> </view> <!-- 样式3、4 只有返回按钮或回到主页 黑色 白色--> <view class='nav' style="height:{{navH}}px;{{background? background:''}}" wx:if="{{styles==3 || styles==4}}">   <view class='nav-title' style="height:{{navTitle}}px;">     <view class="nav-back2" style="border:0;width:{{menuW}}px;height:{{menuH}}px;" wx:if="{{!isTab}}">       <text class="icons icons-zuojiantou icons2" style="color:{{styles==3? '#333':'#fff'}};" data-type="back" catchtap="goback" wx:if="{{getCurrentPages.length>1}}"></text>       <image wx:else style="width:56rpx;height:56rpx;" mode="widthFix" src="img/{{styles==3? 'indexs':'index'}}.png" data-type="index" catchtap="goback"></image>     </view>     <text style="color:{{styles==3? '#333':'#fff'}};width:{{titleWidth}}px;" class="line1">{{title}}</text>   </view> </view> <view style="height:{{navH}}px;" wx:if="{{bot}}"></view> wxss: @font-face {   font-family: "icons"; /* Project id 3500499 */   src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKcAAsAAAAABlQAAAJRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApMXwE2AiQDCAsGAAQgBYRnBzQbnwXInpo8beAx5Q1RfAAXGAghgvr9yp733wGAQtSA+jjALuqESlgCGX2rQ8KnIlR2XQCF/YM390zOBZltBK9jFyyjEXU9SxNqazrWPo+KUF2yljHV9H9t/rvDhZRh/BIK47GGBkQYO+3zfz/5F9AHviD0a5UU1ZT4gDYfyD7osi2KcGc+9Bksr/xq9k2+RKDZCgftz7eHyuhcSVEZI5zeIK+O89ioSkeHZJlmG4V6dGUWb9WRnqXPeBN/Pv5Yi0jqCk7d0d1ZWPl9X3HHFEoUXz1droWel1CHAguATJz1pw7URRuPNbsaxmhjFnxfKcvQKQ5tE+qvcypbwSgVnkn0pUfNJnisgboBg5MeQHTn38rTfm0+Ty+e94bPJ334+vbYuen/WrmoVGeTvOr1pTZTC9ZWbaugfFwfrBMz/uLdX97pWP/Xz6D264oXB8rHDZiHxn24gh9iuAkSswmTcpuou5Puc2ib3Sglx9ftnWruOXEuNOqZ4GkwkqPQaIzK3BzqtFhDvUYbaDbPr2/RY1AXuQlTVoLQqSJp9wmFThuVuQd1+n2o1+lHs8vRtluLqdiEUQmGEB/QB1RozySx2h2aMlPcFD8hX2IaBWs51ewCC+Q55sxX4y2ioWHKIcjzMMsIBqYEA7E6kbOvbd32FitRXplgSBEoBKIH0AuQgg7JUv6+HWSUMgqD1CnFLmKqHliKAaiFvoA6HuSa2ZXhWQgNNBjJgaCHoUyGgKF9WAIFhKWbkDjzaZfUoHpre2P+a/ugmWNJ4S4qNN8rKYlVIVRWKgA=') format('woff2'),url('iconfont.woff?t=1656989362799') format('woff'),url('iconfont.ttf?t=1656989362799') format('truetype'); } .icons {   font-family: "icons" !important;   font-size: 16px;   font-style: normal;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; } .icons-zuojiantou:before {   content: "\e630"; } .flex1{   flex:1; } /* 字体显示一行 */ .line1{   text-overflow: ellipsis;   overflow: hidden;   display: -webkit-box;   -webkit-line-clamp: 1;   -webkit-box-orient: vertical; } /* 自定义头部 */ .nav{   width: 100%;   overflow: hidden;   position: fixed;   top:0;left:0;   z-index: 50;   background-repeat: no-repeat;   background-size:100% auto;   transition: all 0.3s;   background-position:top left; } .nav-title{   width: 100%;   position: absolute;   bottom: 0;   left: 0;   z-index: 10;   color:#fff;   font-size: 32rpx;   font-weight: 500;   padding-left:0;   display: flex;   align-items: center;   justify-content: center;   text-align: center; } .nav .back{   width: 22px;   height: 22px;   position: absolute;   bottom: 0;   left: 0;   padding: 10px 15px; } .nav-back{   width:76rpx;   position: absolute;   bottom: 0;   left: 0;   text-align: left;   padding-left: 20rpx;   z-index: 11;   display: flex;   align-items: center; } .nav-back .iconfont{   font-size: 32rpx;   color: #fff; } .nav-back image{   width:56rpx;   height:56rpx;   border-radius: 50%;   display: block; } .nav-back2{   border-radius: 32rpx;   position: absolute;   left:14rpx;   top:0;bottom:0;   margin: auto;   z-index:10;   display: flex;   flex-wrap: nowrap;   align-items: center;   border:1px solid #EDEDED; } .nav-back2>.icons{   font-size:30rpx;   flex:1;   display: flex;   align-items: center;   justify-content: center;   height:100%;   line-height: normal; } .nav-shu{   width: 1px;   height: 60%;   background: #2F2F2F;   display: block; } .nav-back2>view{   flex:1;   height:100%;   display: flex;   align-items: center;   justify-content: center; } .nav-back2>view>image{   width:30rpx;   height:32rpx;   display: block;   vertical-align: unset;   margin:0; } .nav-title2>view>image{   width:56rpx;   height:56rpx; } .itemcenter{   display: flex;   flex-wrap: nowrap;   align-items: center;   justify-content: center; } .nav-back2 .icons2{   justify-content: left;flex:unset;width:56rpx;height:56rpx; } js: const systemInfo = wx.getSystemInfoSync(); // 获取系统信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect();// 胶囊按钮位置信息 const getTopInfo={   statusBarHeight:systemInfo.statusBarHeight,//状态栏高度   navBarHeight: systemInfo.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2, // 导航栏高度   menuWidth: menuButtonInfo.width, // 胶囊宽度   menuHeight: menuButtonInfo.height, // 胶囊高度   menuRight: systemInfo.screenWidth - menuButtonInfo.right, // 胶囊距右方间距（方保持左、右间距一致）   menuTop: menuButtonInfo.top, //胶囊距离顶部的距离 }; Component({   properties: {     // 是否是tab页 false不是  true是     isTab:{       type:Boolean,       value:false,     },     // 导航栏样式 1:黑色胶囊  2:白色胶囊  3黑色 4白色     styles:{       type:String,       value:"1"     },     // 占位块是否显示  默认显示     bot:{       type:Boolean,       value:true,     },     // 页面标题     title:{       type:String,       value:"页面标题"     },     // 导航栏背景色,支持所有css样式，也可以是背景图，渐变色     background:{       type:String,       value:"background:#fff;"     }   },   data: {     navH: getTopInfo.navBarHeight, //导航栏高度     navTitle: getTopInfo.navBarHeight - getTopInfo.statusBarHeight, //导航栏标题高度     titleWidth: systemInfo.screenWidth - (getTopInfo.menuWidth + getTopInfo.menuRight * 2) * 2, //导航栏标题宽度      menuW: getTopInfo.menuWidth,//胶囊宽度     menuH: getTopInfo.menuHeight,//胶囊高度     menuRight:getTopInfo.menuRight,     getCurrentPages:getCurrentPages(),//判断是否有上级页面   },   methods: {     // 返回上一页     goback(e) {       // 返回上一级       if (e.currentTarget.dataset.type == 'back') {         wx.navigateBack({           delta: 1,         })       } else { // 回首页         wx.switchTab({           url: '/pages/index/index',         })       }     },   } }) json: {   "component": true,   "usingComponents": {} }

一、地理位置接口新增说明 由于精确地理位置接口只允许部分类目的小程序申请使用，为了满足开发者在更多场景使用地理位置接口，自 2022 年 7 月 14 日起，新增获取模糊地理位置接口（wx.getFuzzyLocation）。同时为保障用户合法权益，该接口调用前需进行准入开通申请，该接口准入规则与 wx.chooseLocation 一致。 wx.getFuzzyLocation 接口说明： 1、该接口返回的是经过模糊处理的经纬度坐标； 2、该接口支持返回 wgs84 或 gcj02 两种类型的坐标； 3、该接口需要用户授权 scope.userFuzzyLocation。 二、app.json 的配置指引 为了开发者能够正常使用获取模糊地理位置等接口，以及后续对于代码提审环节的优化（见「三、地理位置接口使用流程」），自 2022 年 7 月 14 日起，开发者在使用地理位置相关接口时（共计 8 个，见表1），需要提前在 app.json 中进行配置。 1、需配置的接口列表 [图片] 表1 2、配置规则 1）在代码中使用的地理位置相关接口（共计 8 个，见表1），开发者均需要在 app.json 中 requiredPrivateInfos 配置项中声明，代码格式如下： [图片] 2）表1中模糊位置信息（序号1）和精确位置信息（序号2-5）是互斥的，即声明了模糊位置信息就无法声明精确位置信息。若同时声明模糊位置信息和精确位置信息，则在编译代码时出现错误； 3）注意：自 2022 年 7 月 14 日后发布的小程序，如果未在 app.json 中声明表1中的相关接口，则小程序调用这些接口（表1）时会出现错误，在 2022 年 7 月 14 日之前发布的小程序不受影响； 4）对于第三方开发者，需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口，配置规则和普通小程序的配置规则相同。 三、地理位置接口使用流程 自 2022 年 7 月 14 日起，开发者如需在最新版本发布后使用地理位置相关接口，除需完成接口权限开通外，还需在 app.json（或ext.json）配置环节，具体如下： 1、接口权限开通 以下 8 个接口需完成准入开通流程：wx.getFuzzylocation、wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.choosePoi、wx.chooseLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground 1）普通开发者：需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请； 2）第三方开发者：可通过 apply_privacy_interface 接口完成权限申请。 2、app.json（或 ext.json）配置 1）普通开发者：需在 app.json 中声明其需调用的地理位置相关接口，具体配置流程见「二、app.json 的配置指引」； 2）第三方开发者：需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口（配置方式：可通过 commit 接口配置）。 同时，为了提升开发者体验，平台在代码提审环节会协助开发者对地理位置接口进行检测，如检测出代码中包含未完成准入开通的地理位置接口，平台将再次提醒开发者确认是否需使用相关接口。 1）普通开发者：若无需使用，开发者可在提审时确认不使用该接口，即可正常进行代码提审。小程序审核通过且新版本发布完成后，平台将对小程序确认不使用的接口关闭使用权限； 2）第三方开发者：若无需使用，可在提审时通过参数声明不使用该接口（声明方式：可通过 submit_audit 接口配置），即可正常进行代码提审，审核通过后发布上线，将对其声明不使用的接口关闭使用权限。 以上调整将仅对所有小程序生效。 微信团队 2022年6月1日

为进一步规范开发者调用涉用户信息相关接口或功能，保障用户合法权益，平台将对如下地理位置相关接口调用实行准入开通： wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.chooseLocation、wx.choosePoi 自2022年4月18日开始，如使用以上接口，在代码审核环节将检测该接口是否已完成准入开通（申请路径：小程序管理后台 -「开发」-「开发管理」-「接口设置」），如未开通，将在代码提审环节进行拦截，请涉及相关接口的开发者尽快进行接口权限申请，第三方开发者申请方式：可通过 apply_privacy_interface 接口完成。 请广大涉及相关接口的开发者尽快进行相关接口准入申请，如未申请，后续将影响线上小程序相关接口的使用。

更新时间：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日

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813

[图片] 为什么要做这个？ 主要是在项目中，智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后，没有直接可以点击去首页的，需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题，在最近的微信版本更新中已经优化了，通过 小程序模板消息 过来的，系统会自动加上home按钮，但对于其他的访问方式则没有支持~ 一个不大不小的问题：两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法，发现有一个问题，就是现在手机屏幕太多种多样，有 传统头部、宽/窄刘海屏、水滴屏等等，无法八门，很多解决方案都无法解决特殊头部，系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题（强迫症的噩梦）。 下面分享下一个相对比较完善的解决方案： [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段，方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部，需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能，具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持，通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性，这样无论是水滴屏、刘海屏、异形屏，都能完美对齐右边系统默认的胶囊bar，完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中，可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结： 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中，一次计算全局使用，爽YY~ ​ 往期回顾： [填坑手册]小程序PC版来了，如何做PC端的兼容？！ [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

需求是tabbar的其中一个页面需要自定义navigationBar，不知道系统默认的navigationTitle的字体大小，在真机情况下tabbar之间切换时，标题大小不一致。

前言 navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。 思路 隐藏原生样式 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。 [代码]"window": { "navigationStyle": "custom" } [代码] 让我们看看隐藏后的效果： [图片] 可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。 二、准备工作 1.获取胶囊按钮的布局位置信息 我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点： [代码]const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); [代码] width height top right bottom left 宽度 高度 上边界坐标 右边界坐标 下边界坐标 左边界坐标 下面是官方给的示意图，方便大家理解几个坐标。 [图片] 2.获取系统信息 用wx.getSystemInfoSync()【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。 [代码]const systemInfo = wx.getSystemInfoSync(); [代码] 三、计算公式 我们先要知道导航栏高度是怎么组成的， 计算公式：导航栏高度 = 状态栏高度 + 44。 实例 【源码下载】 自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子： app.js [代码]App({ onLaunch: function(options) { const that = this; // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏高度 + 44 that.globalData.navBarHeight = systemInfo.statusBarHeight + 44; that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; that.globalData.menuHeight = menuButtonInfo.height; }, // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器 globalData: { navBarHeight: 0, // 导航栏高度 menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuBotton: 0, // 胶囊距底部间距（保持底部间距一致） menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致） } }) [代码] app.json [代码]{ "pages": [ "pages/index/index" ], "window": { "navigationStyle": "custom" }, "sitemapLocation": "sitemap.json" } [代码] 下面为组件代码： /components/navigation-bar/navigation-bar.wxml [代码]<!-- 自定义顶部栏 --> <view class="nav-bar" style="height:{{navBarHeight}}px;"> <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view> <!-- 内容区域： 自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距 --> <view class="content" style="margin-top:{{navBarHeight}}px;"></view> [代码] /components/navigation-bar/navigation-bar.json [代码]{ "component": true } [代码] /components/navigation-bar/navigation-bar.js [代码]const app = getApp() Component({ properties: { // defaultData（父页面传递的数据-就是引用组件的页面） defaultData: { type: Object, value: { title: "我是默认标题" }, observer: function(newVal, oldVal) {} } }, data: { navBarHeight: app.globalData.navBarHeight, menuRight: app.globalData.menuRight, menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight, }, attached: function() {}, methods: {} }) [代码] /components/navigation-bar/navigation-bar.wxss [代码].nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;} .nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;} [代码] 以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml [代码]<navigation-bar default-data="{{defaultData}}"></navigation-bar> [代码] /pages/index/index.json [代码]{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } } [代码] /pages/index/index.js [代码]const app = getApp(); Page({ data: { // 组件参数设置，传递到组件 defaultData: { title: "我的主页", // 导航栏标题 } }, onLoad() { console.log(this.data.height) } }) [代码] 效果图： [图片] 好了，以上就是全部代码了，大家可以文中复制代码，也可以【下载源码】，直接到开发者工具里运行，记得appid用自己的或者测试哦！ 下面附几张其它小程序的效果图，大家也可以尝试照着做： [图片][图片] 总结 本文写了自定义navigationBar的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。 由于测试环境有限，大家在使用时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的人！ 大家有什么疑问，欢迎评论区留言！

[图片][图片][图片] ios内，固定高度scroll-view内包裹一个组件内的固定高度的scroll-view，切换多次后，外层的scroll-view可滚动告诉被撑开，外层scroll-view的最后一个元素会被划上去，底部留下一块空白区域，这块空白区域不能确定是什么。

组件 scroll-view 微信版本 7.0.20 基础库版本 2.12.2 问题描述： 一个scroll-view的列表，scroll-view高度不管是固定的还是计算自适应的，展示内容的时候底部总会有一大部分空白，奇怪的是 真机调试没问题，但是预览版本和体验版本都是有问题的。 [图片][图片][图片]