补充一点：因为城市选择的数据是从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) } [代码] [图片] 结尾 夜深了，晚安，不定期更新小程序使用技巧。新人写文章，大佬多指点！ [图片]

当我们需要自定义底部导航栏时   首先要解决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: 云开发之微信支付：代码片段