补充一点：因为城市选择的数据是从cloud下来的，如果想跑起来需要在配置文件（aotoo.config.js）把cloud设置为true,而且云数据那也要导入相应的数据 [代码]// saui { name: 'saui', type: 'mp', startup: true, src: path.join(ROOT, 'src/saui'), options: { cloud: true, appid: 'xxxxx' } }, [代码] 这次的更新，主要是基于城市选择来扩展的。主要是上一次有人问过我，如果数据过大的话 我这个东西 还能用么~所以才有了这一次的更新，也欢迎大家，对我所做的东西 进行评分，及提意见，问题等… 1，把业务上的部分交互提取出来，封装成组件。分别写了两个页面，一汽车品牌（数据较多，存放本地）二城市选择（数据过大，需要请求cloud）目前实现了传对应的数据，就可以有基本的界面。例如 [代码]1）: 基础数据 { "id": 117, "cname": "AC Schnitzer", "cfrl": "A", "logo": "https://car3.autoimg.cn/cardfs/series/g27/M01/B0/62/40x40_f40_autohomecar__ChcCQFs9vBKAO3YSAAAW0WOWvRc555.png" }, { "id": 276, "cname": "ALPINA", "cfrl": "A", "logo": "https://car3.autoimg.cn/cardfs/series/g27/M05/AB/2E/40x40_f40_autohomecar__wKgHHls8hiKADrqGAABK67H4HUI503.png" } ... 2）: 组件提供两种更新（update，updateItems），分别对应的两种数据结构，第一种是循环单个更新 ，第二种是一次性更新所有数据。 a: 单个更新，适用于数据过大，以下是**汽车品牌**的适配方法 const selectionAdapter = (data, imgsCache) => { let output = [] let outputIdf = [] data.map( (item, ii) => { let cfrl = item.cfrl.toUpperCase() if(JSON.stringify(outputIdf).indexOf(JSON.stringify(cfrl))==-1){ outputIdf = { title: cfrl, itemClass: 'color-primary ss-block ss-sticky ptb-20-r bg-fff ml-20-r' } } output.push({ title: [ { img: item.logo, itemClass: 'pic-80-r' }, { title: item.cname, itemClass: 'color-active size18 lhei-60-r ml-40-r' }, ], titleClass: 'flex-row-start-center', idx: cfrl, //此处的id只为了重新排序 itemClass: 'ptb-20-r bb-default ', }) }) return { dot: [ { title: outputIdf, li: output, liClass: 'pl-default-r' } ] } } b:全部更新 const selectionAllAdapter = (data, data2, imgsCache) => { //data 是菜单字母的数据， //data2 是所有数据 return data.map(item => { const kk = data2.filter(itemx => { if (itemx.cfrl == item.title) { return itemx } }) return { title: selectionAdapter(kk, imgsCache), id: item.title } }) } [代码] 在onload的时候 先把基础数据 ，转到组件需要的数据结构。在onready的时候，去更新这个组件。这是一种实现方法。还有一种类似的，基础数据是cloud请求过来的，但由于cloud的条数限制，我们可以先请求到表的总数量，再除于一次能请求的最高条件，通过for去全部请求我们需要的。 2，组件提供的交互分别有，a: 点击字母菜单，改变状态，及弹出提示框，并跳转到对应的数据上去。b:滚动时切换字母菜单的状态（目前这个功能是需要手动去开启的。主要是因为从cloud请求的数据过多，速度太慢，会影响整体的效果） 3，两个页面，我自己评分是60分吧。实现了基本功能，但是页面仍然存在着问题，在数据完全加载好之前，页面会出现卡顿，如果是请求回来的大量数据 会更慢。所以大家的看界面的时候，请留点耐心~~~ 4，对于上面的问题，我也会在考试后进一步的去完善。哈哈 我是要考试的人~~~ 持续的更新，完善是我所坚持的。谢谢大家~ [图片] [图片] [图片]

根据自己从零开始做「字节加工厂」这个小程序的经验，我计划写一个《微信小程序开发实战》的课程，当前已经完成了**「入门篇」**，介绍微信小程序开发，从 0 到 1 这个过程。 虽然说是入门篇，但是涉及的内容还是挺多的，也并不基础。有些内容涉及到 Web 前端的知识点，还有些内容涉及到 Node 知识点，例如「使用云函数开发」这篇，示例代码中还涉及到了 Node 中 https API 的使用。 技术相关的内容，基础大抵都是类似的。看似形形色色的不同形态，不同语言，不同架构，其实只是应用层面的使用方法不同而已。 最重要的还是基本功，越是基础的东西，越难习得，当然它的价值也最高。 这仅仅指的是技术层面，技术层面虽然很难，但还不是最难的，最难的是思路，也就是「产品能力」。 很多时候，我们学会了很多技术，却不知道用来做什么。 这个课程，我也没有办法去解决这个问题。 能够解决的是，帮助你将官方文档窜起来，从实际问题出发，去解决问题。文档终归是文档，它只是罗列出使用说明，我希望通过这个课程，带你学会实际解决问题的能力。 按照我的学习路径，《入门篇》我总结了 12 篇文章，如下目录： 了解小程序的页面逻辑 从写一个完整的页面开始 使用 Map API，完成一个页面交互 使用 Storage API，实现数据持久化保存 使用 Canvas API，做一个分享卡片 页面传参的几种方式 学会使用第三方 NPM 扩展包 使用 request API，调用第三方接口数据 使用云函数开发，绕过设置合法域名信息 学会云函数的本地测试以及云端测试 聊一聊小程序的服务端开发 学会使用云开发数据库能力 根据我的经验，假如你真的学会了上述文章中提到的知识点，微信小程序开发肯定是入门了，如果再深入一点，可能往「全栈开发」也踏入了半只脚。 当然，这个入门篇并非适合所有「新人」，它是根据我的学习路径而成，我本身是具备 Web 前端 以及 Node 开发经验的。 所以，如果你正好也有类似的开发经验，那么，这个入门篇的内容，对于你而言，可能要容易得多了，至少也能帮你节省一些时间，少走一些弯路。 写完《入门篇》之后，又花了点时间，整理成了 PDF 电子书，欢迎加入我的免费知识星球「字节加工厂」，获取电子书。 [图片] 写完「入门篇」，后面计划开始整理「效率篇」，文章将会同步更新在 GitHub 上，仓库地址：https://github.com/pengloo53/miniprogram-articles 欢迎 star

趁着最近有时间，又搞了个经常会用到的城市选择器起来啦~~ 以下是tabs的页面图片 [图片] 主要实现了： tab的切换，这里需要注意一个问题，当你滚动一个tab页到某个位置的时候 再切换tab，另一tab的scroll也会定位在那里。所以在点击时，我作了处理。 [代码] scroll-into-view [代码] 滚动时，经过指定的父位置时 会有fixed。这里用到了新的样式类型 [代码] position: sticky; [代码] 3.点击右边的菜单，给出了提示框以及左边可以快速，准确的定位到相对的位置，需要注意的事scroll-into-view对应的是id [代码] scroll-into-view [代码] 4.点击右边菜单时，应该给上对应的选中类才是，这里漏了… 以上是携程所有的功能。同时也想添加新的功能，就是滚动左边的列表，同时切换右边的菜单，这里是目前还差的，待更新一版…

上一篇，我们学会了如何制作简单的分享卡片，并保存在相册中。示例中，我们单独创建了 canvas 页面，卡片内的数据是直接在页面中写死的，当然这只是作为示例，实际情况中，我们的数据应该是从其他页面传输过来。所以，今天就来谈谈小程序页面之间传参的方式都有哪些？ 下面就接着上一篇的例子，继续完善程序，我们在 pages 目录下，新建 days 目录，然后在 days 目录下，新建 Page index 用来显示日期列表，目录结构如下图： [图片] index 页面的代码实现，就不多介绍了，它就是一个显示日期的列表，大概样子如下： [图片] 建议你能够照着上面这个样子，把代码写出来，不要认为看着简单，就不想动手，写出来才是自己的。 这里只贴出 wxml 的代码如下： [代码]<view class="list" bindtap='goto' data-title="新中国成立 70 周年" data-date="2019-10-01" data-isPast="{{ true }}" data-number="26"> <view class="title">新中国成立 70 周年</view> <view class="danger">26</view> <view class="date-desc">还剩天数</view> <view class="desc">2019-10-01</view> </view> [代码] 数据是写死在页面中的，这里先不用管，重点看数据的传输，这里的数据传输有两层： 第一层，是从视图层传输到逻辑层，采用的方法，前面已经介绍过，就是通过 [代码]data-*[代码] 属性的方式，例如上面例子中，[代码]data-title[代码]、[代码]data-date[代码]、[代码]date-isPast[代码]以及[代码]date-number[代码]，分别将 [代码]tilte[代码]、[代码]date[代码]、[代码]isPast[代码]、[代码]number[代码] 字段传输到逻辑层。 逻辑层如何获取呢？看 js 中 [代码]goto[代码] 函数的代码： [代码]goto: function(e){ let date = e.currentTarget.dataset.date; let title = e.currentTarget.dataset.title; let isPast = e.currentTarget.dataset.ispast; // 注意这里的参数名 let number = e.currentTarget.dataset.number; console.log(e.currentTarget.dataset); // 打印出来试试 wx.navigateTo({ url: '../canvas/canvas?title=' + title + '&date=' + date + '&isPast' + isPast + '&number=' + number }) }, [代码] 上面这个函数做的事情，就是参数的「一收一发」，获取页面传过来的参数，然后转发出去。需要注意的一点是，[代码]data-*[代码] 参数名的一些规则，如果 [代码]*[代码] 中有大写字母，将自动转成小写；如果出现短横杠，会自动转成驼峰变量，例如：[代码]data-is-past[代码] 变成 [代码]isPast[代码]，记不住没关系，打印出来试试就知道了。 第二层，是从 A 页面传输到 B 页面，页面的跳转，官方提供了以下几种 API： [图片] 具体用法看文档，这里我们使用的是 [代码]wx.navigateTo[代码]，在 URL 后面加上 [代码]?key1=value1&key2=value[代码] 的方式，就可以将参数传输到下一个页面。 紧接着的问题就是，下一个页面如何接收参数，答案是：通过页面的 onLoad 事件函数。 打开 canvas 页面的 js 文件，编辑 onLoad 函数如下： [代码]onLoad: function (options) { let title = options.title; let date = options.date; let isPast = options.isPast; let number = options.number; if(title && date){ this.setData({ title, date, isPast, number }) } }, [代码] 看代码一目了然，参数直接保存在 options 对象中了。 写到这里，我们的 canvas 页面，可以算作是动态页面了，通过其他页面传输过来的参数，显示不一样的卡片。 总结 到这篇文章为止，我们已经知道了，小程序页面数据 or 参数传输的一些方式，总结一下就是： 将数据从逻辑层传输到视图层，通过 [代码]this.setData()[代码] 函数； 将数据从视图层传输到逻辑层，通过 [代码]data-*[代码] 的方式； 将数据从 A 页面传输到 B 页面，通过页面跳转 url 参数的方式； 接收数据的方法，对应为： 视图层使用 [代码]{{ value }}[代码] 语法； 使用回调函数的 [代码]e[代码] 对象，参数保存在 [代码]e.currentTarget.dataset[代码] 里 使用页面的 onLoad 事件函数，参数保存在 [代码]options[代码] 对象里 以上方式，应该能够满足绝大多数页面数据传输的需求，当然还有一些极端情况，例如：url 中保存参数值的长度是有限度的。如果出现类似情况，该如何解决？ 其实，我们还有更多更灵活的方式，例如借助缓存的功能，再或者借助数据库。后续如果涉及到具体案例，会再进行介绍。 更多文章：https://github.com/pengloo53/miniprogram-articles

在 2019 年 7 月 2 日的小程序基础库版本更新 v2.7.3 中，小程序新增了一个页面间通讯的接口，帮助我们的小程序完成不同页面间数据同步的功能。 页面间通信接口能干嘛？ 在 v2.7.3 之前，小程序不同页面间的大批量数据传递主要有两种： 借助诸如 Mobx 、Redux 等工具，来实现不同页面间的数据传递。 借助小程序提供的 storage ，来完成在不同页面间数据的同步。 前者需要引入一些第三方工具库，从而提升了整个应用的大小，同时，引入的工具也带来了学习生本。而后者则是基于小程序提供的存储，先将数据存入存储，再到另外一个页面去读取，如果数据涉及到了多个页面，则可能会导致数据的紊乱。 新的页面间通信接口则直接解决了上述的两个问题，你可以直接使用 API 在两个页面之间传递数据，再也无需担心数据的紊乱。 新增的页面间通信接口应当如何使用？ 关于页面间通信接口的使用非常简单。 这里，我们假设存在 A 和 B 两个页面，其中 A 是首页，B是详情页。 A 向 B 传递数据 如果你需要从首页向详情页传递数据，则可以这样操作。 在页面 A 执行代码 [代码]wx.navigateTo({ url: 'test?id=1' success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' }) } }) [代码] 这样，当 A 跳转到 B 时，就会出发 B 当中定义的 acceptDataFromOpenerPage，并将后续的数据传递过去。 在 B 中，你可以在 onLoad 去定义 eventChannel 的相关方法 [代码]Page({ onLoad: function(option){ // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据 let eventChannel = this.getOpenerEventChannel(); eventChannel.on('acceptDataFromOpenerPage', function(data) { console.log(data) }) } }) [代码] B 向 A 传递数据 如果需要被打开的页面向打开的页面传递数据，则可以使用如下代码: 在 A 中的跳转时，加入 events 的定义，定义你自己的函数，以及对应的处理函数。 [代码]wx.navigateTo({ url: 'test?id=1', events: { someEvent: function(data) { console.log(data) } }, }) [代码] 然后在 B 中，调用如下代码来发信息 [代码]Page({ onLoad: function(option){ const eventChannel = this.getOpenerEventChannel() eventChannel.emit('someEvent', {data: 'test'}); } }) [代码] 这样，就可以在 B 页面将数据传回到 A 页面了。 页面间通信接口使用注意事项？ 在使用页面间通信接口时需要注意两点： 该功能从基础库 2.7.3 开始支持，低版本需做兼容处理。

小程序支持的单位？ 可以说小程序就是在微信体系网页的另一种表现方式。网页中的单位小程序基本都支持。但实际开发中，我常用到的是以下几种 ↓ rpx rpx做为小程序自家系统里的单位，特性是可以根据屏幕宽度进行自适应。rpx官方介绍 比如我写一个2:1比例的全屏轮播图，可以这样写： [代码]swiper { width:750rpx; height:375rpx; } [代码] 1rpx = 0.5px = 1物理像素。网页开发中，默认字体一般设置为14px，在小程序中我们就可以设置小程序的默认字体大小为28rpx。 px 在小程序开发中 rpx基本就代替了px，但在一些特殊的场合，px的表现要比rpx好。 兼容ipad时，由于ipad可以横屏和竖屏，并且屏幕宽度可以达到2K以上，如果你的小程序要考虑到兼容ipad，那么还是多考虑使用px吧。 覆盖微信原生组件样式。em？？？？可以覆盖微信原生样式？？？ 是的，只有小程序老玩家才知道的秘密！小程序原生样式是可以覆盖美化的，以 <switch> 组件为例：switch代码片段 [图片] 导入代码片段到开发者工具中，并切换设备模式预览可以发现rpx表现不佳。使用px反而更好。 em与rem em与rem在H5的网页开发上可以大放异彩，但小程序中因为有rpx的存在，em与rem使用的就少了。基本只有在一些对字体宽度有特效的情况下才会使用。比如首行缩进。 vw、vh和百分比 vw：视窗宽度，1vw等于视窗宽度的1%。 vh：视窗高度，1vh等于视窗高度的1%。 %：父级容器的宽度百分百。 [图片] calc() 的使用 前面讲了单位，那么我们现在来聊聊怎么使用这些单位了。小程序是网页的一种，支持css，也支持calc()。 这里吃下书： calc() 函数用于动态计算长度值。 [代码] ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； ● 任何长度值都可以使用calc()函数进行计算； ● calc()函数支持 "+", "-", "*", "/" 运算； ● calc()函数使用标准的数学运算优先级规则； [代码] 使用场景示例 垂直导航页，常用于外卖订餐或者商城的二级分类页。 上半部分是定死高度375rpx的轮播图区域，下半部分是可以随设备高度变化的可滚动的区域。容器高度可以这样写： [代码]{ height:calc(100vh - 375rpx) } [代码] [图片] 结尾 夜深了，晚安，不定期更新小程序使用技巧。新人写文章，大佬多指点！ [图片]

背景 在做小程序时，关于默认导航栏，我们遇到了以下的问题： 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 通过

小程序页面如何实现高度自适应 如图： [图片] 这个是iPhone7 打开时候的样子首页 但是其实 小程序下面还有一个板块 [图片] 用iPhoneX 这种比较长的手机 不用往下滑就可以看到全部了 我在这里想问一下大家 如何做到不管手机是什么尺寸，只要进来就能看到完整的页面 不用下滑。

想要实现一个im 功能，在用户输入时页面滚动到聊天列表最底部的位置，目前的思路是：input 固定在底部时，在onFocus的时候使用pageScrollTo使页面滚动到底部，但这种情况下input 的光标位置会错乱 如图 [图片]

当我们需要自定义底部导航栏时   首先要解决iphoneX的底部大横条对这个兼容   通常不设置兼容  都会被挡住 如何编写 在你要编写的底部菜单中插入   样式 [代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码])   即可兼容 [代码] [代码] 例如：css中插入[代码] [代码]@supports ([代码][代码]bottom[代码][代码]: constant(safe-area-inset-[代码][代码]bottom[代码][代码])) or ([代码][代码]bottom[代码][代码]: env(safe-area-inset-[代码][代码]bottom[代码][代码])) {[代码][代码]    [代码][代码].fixed-wrap {[代码][代码]        [代码][代码]height[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]        [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码].fixed-pay {[代码][代码]        [代码][代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]    [代码][代码]}[代码] [代码]}[代码]其中       [代码]env(safe-area-inset-[代码][代码]bottom[代码][代码])  是计算兼容的高度   通常一半即可   [代码]         calc  是计算css   你也可以加入高度  假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】  可如下编写   view.footer {     bottom: calc(100rpx + env(safe-area-inset-bottom)); } 这样轻轻松松解决兼容  不需要写js代码 <-------------大横条-------------> [图片]

https://developers.weixin.qq.com/s/47VZSGmR7Q7w 这是代码片段链接 项目中有好多地方都需要用到 navbar ，一个项目中重复的使用同一段代码感觉很烦人，所以就自己写了一个，适合 2-4 个 tab，【支持多个】多个的话稍微修改一下布局就可以了 ━((′д｀)爻(′д｀))━!!!-图片传不上去 大家可以 打开代码链接看一下 如果感觉写的还凑合的 帮忙点个赞！ 有什么可以改进的也可以 在下方评论

自定义navigate+分包+自定义tabbar，有需要的可以拿去用用，可能会存在一些问题，根据自己的业务改改吧 大家也可以多多交流 代码片段：在这里 {"version":"1.1.5","update":[{"title":"修复 [复制代码片段提示] 无法使用的问题","date":"2020-06-15 09:20","imgs":[]}]} 更新日志:     2019-11-25  自定义navigate 也可以调用wx.showNavigationBarLoading 和 wx.hideNavigationBarLoading     2019-11-25  页面滚动条显示在自定义navigate 和 自定义tabbar上面的问题(点击“体验custom Tabbar” [图片] [图片] 其他demo: 云开发之微信支付：代码片段