前言 要实现如下瀑布流效果，动态图片，动态高度 [图片] 我知道使用JS能够实现完美瀑布流，但小程序不比web，坑点会比较多，因此我决定先使用CSS看能不能解决，最后实在不行在使用JS来实现 根据网上的教程尝试使用css的方式(column和flex)实现效果，但排列顺序都是竖排而不是横排，不符合产品需求，实现效果如下 [图片] GRID瀑布流 如此看来只剩grid这一条路了，还好成功了 基础版 下列摘自网上使用GRID实现瀑布流的实例 模板 [代码] 1/view> 2/view> 3/view> 4/view> 5/view> 6/view> ... /view> [代码] wxss [代码].waterfall { display: grid; grid-template-columns: repeat(2, 1fr); // 指定两列，自动宽度 grid-gap: 0.25em; // 横向，纵向间隔 grid-auto-flow: row dense; // 是否自动补齐空白 grid-auto-rows: 20px; // base高度，grid-row基于此运算 } .waterfall .item { width: 100%; background: #222; color: #ddd; } .waterfall .item:nth-of-type(3n+1) { grid-row: auto / span 5; } .waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } .waterfall .item:nth-of-type(3n+3) { grid-row: auto / span 8; } [代码] 效果 [图片] 基础版的问题 看看上面的css是如何使用grid实现 [代码].waterfall .item:nth-of-type(3n+1) { grid-row: auto / span 5; } [代码] 上述代码指定[代码]1,4,7,10...[代码]等item的高度，[代码]auto[代码]为grid自动设置该item的起始位置，[代码]span 5[代码]则指定该item的高度为[代码]grid-auto-rows * 5[代码], [代码]grid-auto-rows[代码]在CSS的设定中为20px，在源码中我做了说明，它是一个基础高度 [代码].waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } [代码] 上述代码指定[代码]2,8,11,14...[代码]等item的高度，[代码]auto[代码]为grid自动设置该item的起始位置，[代码]span 6[代码]则指定该item的高度为[代码]grid-auto-rows * 6[代码] [代码].waterfall .item:nth-of-type(3n+3) { grid-row: auto / span 8; } [代码] 上述代码指定[代码]3,6,12,15...[代码]等item的高度，[代码]auto[代码]为grid自动设置该item的起始位置，[代码]span 8[代码]则指定该item的高度为[代码]grid-auto-rows * 8[代码] 基础版虽然看上去基本符合我们的产品需求，但由css可以知道，它的问题是__高度固定__，但业务上我们并不确切知道每个item的高度及所包含的图片的高度。所以接下来我们要解决__动态高度__设定的问题，让每一个item都自动计算自己的高度，而不是通过CSS来手动指定 css变量登场 微信小程序swiper的自适应高度 小程序中使用css var变量，使js可以动态设置css样式属性 上面两篇文章是之前写得关于css变量的一些巧妙的用法，css变量确实能够解决很多之前很棘手的问题，此时我脑海里面迸发出了一个绝佳的IDEA 仔细观察这段css [代码].waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } [代码] 唯一不确定的就是[代码]6[代码]，对，它应该是一个变量而不是一个恒量，它应该是一个与高度关联的比值，而我们可以通过css变量动态设置这个比值，它大概应该长这样 [代码]page{ --item-span: x // 需要使用setData设置x值 } .waterfall .item { grid-row: var(--item-span); } [代码] 考虑到需要设置每个item的高度，应该为每一个item设定独立的样式 [代码].waterfall{ --item-span-1: x; // 使用setData设置x值 --item-span-2: y // 使用setData设置y值 } .waterfall .item-1 { grid-row: var(--item-span-1); } .waterfall .item-2 { grid-row: var(--item-span-2); } [代码] 原理 到此我们就可以讲通如何实现的原理了 注意：下面的例子使用内联样式代替上面的样式设定，因为内联样式可以由JS动态输出 模板 [代码] .../view> /view> .../view> /view> /page> [代码] Page [代码]Page({ data: { waterStyle: '', items: [...] }, onReady(){ let query = wx.createSelectorQuery().in(this) query.selectAll('.waterfall .item').boundingClientRect(ret=>{ let styleStr = ''; ret.forEach((ele, ii) => { let height = ele.height let span = parseInt(height/ 20) // 20 = grid-auto-row styleStr += `--item-span-${ii}: auto / span ${span};` }) this.setData({ waterStyle: styleStr }) }) } }) // 注释一 // 所有item的css变量合集 waterStyle /* xn在onReady方法中计算得出 --item-span-1: auto/span x1; --item-span-2: auto/span x2; --item-span-3: auto/span x3; ... */ [代码] 使用内联样式而不是.item-n [代码][代码]item元素使用内联样式，因为我们不确定item的数量。 高度计算 通过query我们可以获取所有item子元素的rect属性(长宽高…)，计算height属性与grid-auto-row的比值，即我们需要的设定值 waterStyle 参考上述代码的注释一(动态计算每一个item的span比值)，通过setData方法设置生效(设置在父级[代码]view.waterfall[代码]上)，如此grid会自动设置每一个item子元素的位置 优化 以上基本将如何使用grid实现瀑布流的原理阐述了一遍，实际代码中需要注意[代码]grid-auto-row[代码]值的设定，在我们的项目中省略了此项css属性的设置，即span比值实际是由[代码]height/grid-gap[代码]得出，反而效果更好，具体原因我也一脸懵逼，如果有知道的留言告诉我 [图片]

由于小程序中的画布,动画等目前只支持PX单位,在页面开发中单位的选择会在PX和RPX中纠结一下,有时候就会出现某些机型页面缺斤少两的现象,下面给大家说一下加载页面时自动计算出设备可用最大rpx高度数值的方法,原理很简单  大家应该一看就懂 [代码]wx.getSystemInfo({[代码] [代码]  success(res) {[代码] [代码]    that.setData({[代码] [代码]      windowHeightrpx: res.windowHeight / (res.windowWidth / 750)[代码] [代码]    })[代码] [代码]  }[代码] [代码]})[代码] 在wxml使用: [代码]<scroll-view scroll-y class='classifybg'[代码] [代码]style='height:{{windowHeightrpx -310}}rpx'>[代码] [代码]  <view bindtap='scrollto'[代码] [代码]wx:for='{{classify}}'[代码] [代码]data-index='{{index}}'[代码] [代码]wx:key=''>[代码] [代码]    <view wx:if='{{index != 0 }}'[代码] [代码]class='line'></view>[代码] [代码]    <view class='{{classifyindex=="classify"+index?"classifyv2":"classifyv"}}'>{{item.name}}</view>[代码] [代码]  </view>[代码] [代码]</scroll-view>[代码]

一、准备工作 参考 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 1.1注册腾讯位置服务账号 腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！ 本文要介绍的是其中的逆地址解析 https://lbs.qq.com/ 1.2.申请开发者密–钥 [图片] 1.3.开通webserviceAPI服务 [图片] 控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限) 1.4.下载微信小程序JavaScriptSDK http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip 1.5.安全域名设置 微信公众平台登录你的小程序->开发->开发设置->服务器域名->将[代码]https://apis.map.qq.com[代码]填入request合法域名 这样在微信开发者工具就可以看到了：[图片] 腾讯位置服务是有免费额度的,每个key的每个服务接口的调用量如下： 日调用量：1万次 / Key 并发数：5次 / key / 秒 用来学习足够了。 至此，准备工作已经全部完成。 二、实践 2.1加入JavaScriptSDK 理论上可以随便放入一个文件夹。但是程序员做事应该有条理一点。 创建一个工具类文件夹 untils，将qqmap-wx-jssdk.js放入。 [代码]//在要使用服务的页面 var QQMapWX = require('../../untils/qqmap-wx-jssdk.js'); var qqmapsdk; Page({ onLoad: function () { // 实例化API核心类 qqmapsdk = new QQMapWX({ key: '你在腾讯位置服务申请的key' }); }, [代码] 2.2.获取用户定位授权 wx.authorize(Object object) https://developers.weixin.qq.com/miniprogram/dev/api/open-api/authorize/wx.authorize.html 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。更多用法详见 用户授权。 [代码]function () { var that = this wx.authorize({ scope: 'scope.userLocation',//发起定位授权 success: function () { console.log('有定位授权') //授权成功，此处调用获取定位函数 }, fail() { //如果用户拒绝授权，则要告诉用户不授权就不能使用，引导用户前往设置页面。 console.log('没有定位授权') wx.showModal({ cancelColor: 'cancelColor', title: '没有授权无法获取位置信息', content: '是否前往设置页面手动开启', success: function (res) { if (res.confirm) { wx.openSetting({ withSubscriptions: true, }) } else { wx.showToast({ icon: 'none', title: '您取消了定位授权', }) } }, fail: function (e) { console.log(e) } }) } }) } [代码] 2.3. 获取定位信息并进行逆地址解析 如果用户同意了授权，就可以获取定位信息了，调用wx.getLocation(Object object) 调用成功就会返回位置信息： [图片] 然后调用SDK的reverseGeocoder(options:Object)进行逆地址解析：[图片] 代码如下： [代码]//此函数在用户定位授权成功后调用 function () { wx.getLocation({//获取地址 type: 'gcj02', success(res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy console.log(latitude, longitude, speed, accuracy) qqmapsdk.reverseGeocoder({//SDK调用 location: { latitude, longitude }, success: function (res) { console.log(res) } }) } }) } [代码] 完成。 水平有限，欢迎交流。 觉得有用请点个赞。

前言 在微信小程序开发中，我们可以提前获取用户的地理位置，为用户提供更好的服务，因此我们今天就来实现一下。 一、原理 通过微信小程序的开发文档，我们可以发现 wx.getLoaction 能够获取到用户所在位置的经纬度，并且通过腾讯地图提供的逆地址解析中可以将经纬度信息还原成城市名称。 在实际开发当中，我们可以分为两个部分，一个是腾讯地图key的获取，另一个是微信开发端的编码。 二、腾讯地图key 创建一个腾讯地图的账号。（需要手机号和邮箱号）腾讯地图官网 登录成功之后可以点击右上角的控制台就会出现下图的界面，点击创建应用数量，进入到应用的管理页面。 [图片] 创建一个应用.。（应用名称、应用类型如实填写即可） [图片] 随即在我的应用中会显示刚刚创建的，点击添加key [图片] 信息如实填写就可以了，[代码]注意：启用产品选项要勾选 WebServiceAPI 和 微信小程序[代码]，如果忘记勾选的也可以在创建key之后重新编辑配置。[代码]APPID需要到微信小程序网站查阅[代码] [图片] 添加成功之后，在创建好的应用可以看到key。 [图片] 二、编码 1. App.json [代码]"permission": { "scope.userLocation": { "desc": "为了更好的服务体验，我们希望获取你的位置" } } [代码] 2. JavaScript [代码]// 这里我选择在onShow中触发，可以根据具体情况设置触发事件 data: { locationObj: {} } onShow: function () { // 调用定位方法 this.getUserLocation(); }, // 定位方法 getUserLocation: function () { let _this = this wx.getLocation({ type: 'gcj02', // type有两中类型，gcj02 是腾讯地图所能解析的 success: res => { _this.setData({ locationObj: res }) // 调用获取城市名称方法 _this.getCity() } }) }, // 获取定位城市名称方法 getCity: function () { var _this = this wx.request({ url: `https://apis.map.qq.com/ws/geocoder/v1/?key=key填写的位置&location=`+ _this.data.locationObj.latitude + ',' +_this.data.locationObj.longitude, success: res => { console.log(res) // 此处返回的就是需要查询的城市名称 } }) }, [代码] 3. 返回值 逆地址解析之后的返回值如下： [图片] 总结 综上所述，便是今天介绍的微信小程序中定位及逆地址解析的实现方式。更多的参数信息，可以查阅本文末的开发文档链接。 [代码]最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！[代码] 微信开发文档：wx.getLocation(Object object) 腾讯开发文档：逆地址解析 原 文 链 接 ：JhouXu博客

最近在做自己的小程序《看啥好呢》，这个小程序是使用云开发的方式开发的，功能特别简单，就是获取豆瓣、大麦网的数据展示，虽然功能简单，但还是记录下开发过程和一些技术点，大约会有两篇博文产出，这是第一篇。GitHub 地址 [图片] 背景 在《看啥好呢》中有个本地好看 Tab，进去后会获取用户当前所在城市，然后显示该城市的数据，并且显示在导航栏和 Tab 上。 微信小程序中，我们可以通过调用 [代码]wx.getLocation()[代码] 获取到设备当前的地理位置信息，这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家，哪个城市等信息，该如何实现呢？ 微信小程序中并没有提供这样的 API，但是没关系，有 [代码]wx.getLocation()[代码] 得到的经纬度作为基础就够了，其他的，我们可以使用其他第三方地图服务可以来实现，比如腾讯地图或百度地图的 API。 所以整个步骤就是： 在小程序中获取当前的地理位置，涉及小程序 API 为[代码]wx.getLocation[代码] 把第 1 步中获得的经纬度信息通过腾讯地图的接口逆地址解析，涉及腾讯地图接口为 [代码]reverseGeocoder(options:Object)[代码] 在小程序中获取当前的地理位置 在小程序中，调用 wx.getLocation，使用前需要用户授权 [代码]scope.userLocation[代码]，代码如下 [代码]checkAuth(callback) { wx.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { wx.authorize({ scope: 'scope.userLocation', success() { wx.getLocation({ type: 'wgs84', success(res) { callback(res.latitude, res.longitude) } }) } }) } } }) } [代码] 其中 [代码]type[代码] 的取值可以为： [代码]wgs84[代码] 意思返回 gps 坐标 [代码]gcj02[代码] 返回可用于 [代码]wx.openLocation[代码] 的坐标。 运行后会提示如下信息，还需要在 app.json 中配置 [代码]permission[代码] 字段 [图片] 查询文档后得知，得知需要如下配置 [代码]"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } [代码] desc 用于在弹出的授权提示框中展示，如下 [图片] 允许后即可获取接口返回的信息，此过程会在右上角胶囊按钮上显示箭头图标 [代码]{ accuracy: 65; errMsg: "getLocation:ok"; horizontalAccuracy: 65; latitude: 30.25961; // 纬度，范围为 -90~90，负数表示南纬 longitude: 120.13026; // 经度，范围为 -180~180，负数表示西经 speed: -1; verticalAccuracy: 65; } [代码] [代码]latitude[代码] 和 [代码]longitude[代码] 即是我们需要的两个字段 腾讯地图接口逆地址解析 以腾讯地图为例，我们可以去腾讯地图开放平台注册一个账号，然后在它的管理后台创建一个密钥(key)，以及进行 KEY 设置，按照微信小程序 JavaScript SDK入门及使用限制文档 [图片] 在 KEY 设置的启用产品中，勾选 WebServiceAPI，选择签名校验方式，因为我是使用云开发的方式，所以没有什么域名也没有授权 IP。 [图片] 这部分代码逻辑如下 [代码]import QQMapWX from '../../scripts/qqmap-wx-jssdk.min.js' let qqmapsdk Page({ onLoad: function (options) { // 实例化API核心类 qqmapsdk = new QQMapWX({ key: '开发密钥（key）' // 必填 }); this.checkAuth((latitude, longitude) => { // https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html qqmapsdk.reverseGeocoder({ sig: 'KEY设置中生成的SK字符串', // 必填 location: {latitude, longitude}, success(res) { wx.setStorageSync('loca_city', res.result.ad_info.city) }, fail(err) { console.log(err) wx.showToast('获取城市失败') }, complete() { // 做点什么 } }) }) } }） [代码] reverseGeocoder 接口返回的结果，这里面的字段比较多，详细可以看接口文档，里面好几个字段可以取到城市，其中 [代码]ad_info[代码] 是行政区划信息，我就取这里面的 [代码]city[代码] 了。 [图片]

文章首发于我的个人公众号“超阅认知”：分享技术、创业和个人成长等方面，有趣、有料的内容，帮你不断超越自己、升级认识，开启多样人生！ /关于成长/ 最近两年最大的变化，可能就是：被生活已经磨的失去了锐气，不抱怨，不吐槽。至少不会像之前一样：为事所困，经常隔三差五的发个动态（那时微信可能还没出来或没多少人用，用的比较多还是QQ空间）。现在只剩下为生活所困——这也是大多数人谁也挣脱不了的，就像李宗盛唱的那首《凡人歌》里说的：你我皆凡人，生在人世间，终日奔波苦，一刻不得闲…… 不想也不太愿意表达太个人的东西，这样问题也很明显：对于生活缺少激情，整个人也少了很多趣味。至少不会像几年前：偶尔还能写首打油诗、自娱自乐。那时思维好像很活跃，写诗似乎是信手拈来的事儿。记得有次点燃一张纸，心中就很快就涌出一首诗“我将一张纸点燃，看它喷吐着欢快的火苗，它有些得意忘形，借助着风势，热烈的燃烧，燃烧，燃烧，烧成一堆灰烬，又被风吹向云霄”。也写了一些自己感觉不错的诗，像《回忆·生活》、《风》、《岁月的车轮》等，写诗没有改变什么，给我最大的收获可能就是：感觉自己活的还多少有点儿闲情逸致。而现在，生活好像只剩下眼前的苟且，没有了诗和远方的田野。曾多次想写首诗，但提起笔，绞尽脑汁、沉思良久都写不出半句…… 可能就像跟朋友聊，他说的一样：你的经历也能成为饭桌上大家愿意倾听的故事，但因为你长时间不说、不去表达，慢慢它就烂在肚子里了，所以你感觉没什么太多值得跟别人讲述的经历、缺少聊天的话题。 成长可能本该就是这样：越来越麻木，对一切都慢慢看淡…… [图片]​ /关于感悟/ 现在最大的经验教训就是：要保持思维的敏锐，对于新事物，要迅速去了解并采取行动——像公众号、小程序和抖音等这些新风口，能在第一时间入场的都赚的盆满钵满。而像我这样一开始对其不屑一顾、没看明白和感觉还不成气候的，到现在基本上只能看别人躺赚了。就像前几天跟朋友闲聊，就一篇谈勤奋的文章说到，这一路走来，现在明白的道理是：要抬头看天（目标长远）加上脚踏实地的坚持。 要怀有一颗感恩的心：感谢你的合作伙伴、朋友以及家人，无论如何都是他们成就了今天的你。感恩让你能相对沉下心来做事、与人相处，不会稍有成绩就沾沾自喜、狂妄自大，更甚者整个人都飘了。所以，我对“感恩”一词的理解是：感谢和珍惜你身边的人，惜缘，为人谦逊。 [图片]​ 两个“不要等” 1.有想法就要尽快付诸行动并实现，不要给自己找各种理由推脱，否则到最后只能说句：早知道那时做就好了…… 2.心愿或者说目标（这里目标跟钱权无关），无论是对自己，更或者是对家人，应该尽早去兑现、达成，不要让自己有太多遗憾。我们大多数人总是习惯性的想着，比如：等我赚够多少钱或有所作为了、带家人出去旅游一次，等我有时间了再好好陪陪父母……。但我们的人生可能很难达到理想状态——我们有时间的时候可能没钱，等有钱了又缺少时间，等时间和钱都有了，你当时的心愿可能已不复存在，更或是已无法再去兑现。去年无锡发生的桥梁侧翻和餐馆爆炸事故，之后父亲的离去，再加之眼前的疫情，给我的触动很大，让我深刻明白了：世事无常，有心愿不要等！ 我在之前的一篇《创业一年多的程序员，写给正为梦想奋斗的我们！》文章中，曾写到“无论你是以什么样的姿态或方式去为人处事，或谦虚随和，或高调强势，都在以你的人格魅力去影响和吸引着周围的人”，现在看看确实这样，跟我一直在合作的客户或经常联系的朋友，大多性格都是比较相似的。所以，我们没必要刻意的想成为“别人”，一味模仿或想成为“别人”，只会让我们难于接纳自己、活的很纠结，或者丢失我们原本与众不同、最宝贵的部分。我们需要的是努力做好自己，然后成为更好的自己！ [图片]​ 我们可能总是习惯“对外人太客气，对家人太苛刻”，这是人之常情、无可厚非。但我们应该知道：家人陪伴是相对短暂的，或者并不会真的如我们所期；对家人、特别是老人要多些耐心、要好一点儿，再好一点儿…… 前几天看一个关于父女亲情的小品，里面小女孩儿说的一句话深深触动了我，她说：爸爸，你再不陪陪我，我就长大了。作为已是两个孩子父亲的我，能理解背后各自的想法，正因为如此，我一直在努力做好权衡：尽量多陪陪孩子，哪怕是给她一个拥抱。不用说等她长大，就是5年后，你跟她的亲密也只会渐行渐远…… 对于80后以及同样肩负着“上有老下有小”双重责任的我们，生活有时候，给我们的压力很大，以至于让我们几乎都无法喘息。在这里我无法给你，一个很好的缓解压力，或者是摆脱现状的方法，因为我也时常在这种困扰当中。那我们能否适当缓解下压力呢？我想分享自己的一点感悟：无论你压力再大，或者是情况有多糟糕，都不妨去看看你身边，被我们忽视、但很值得欣慰或喜悦的事物。就像前几天，我跟老婆说：“每次我压力很大的时候，我就想想，我现在‘家庭和睦，孩子可爱’，这就是我应该高兴的一件事，也是我能走的更远、达成目标的基础，想到这儿，我感觉压力就会舒缓一些”。生活不易，我们要学会给自己减压，想开一点儿——多想想好的方面和自己当下正拥有的，比如：健康的身体、和睦的家庭，只要有这些，一切都有可能，剩下的都交给时间吧！ 好了，写完这篇文章就像是跟自己，进行了一场不吐为快的畅谈。最近在CSDN学院上更新了《小程序开发入门之实战案例解析》、《微信小程序广告位开发及赚钱》和《微信小程序直播开发快速入门》的视频课程，对微信小程序有兴趣的朋友，可以去看看！ [图片]​ 超阅认知 我的公众号：zxcknowmore，你的关注与支持，是我多写博文的动力！（关注公众号，回复“福利”，即可领取学习礼包一份！）

db.collection('activity').aggregate()       .geoNear({         distanceField: 'distance', // 输出的每个记录中 distance 即是与给定点的距离         spherical: true,         near: db.Geo.Point(114.06058996826175, 22.550311425481723),         maxDistance: 300 * 1000//300公里         // query: {         //   docType: 'geoNear',         // },         // key: 'location', // 若只有 location 一个地理位置索引的字段，则不需填         // includeLocs: 'location', // 若只有 location 一个是地理位置，则不需填       })       .end() 以上同一份代码，在小程序端运行和云函数（版本：~2.3.0）中调用返回结果不一样，小程序端返回的距离为，distance: 6617.587567221755这个是正确的，而云函数返回结果为distance: 0.0010375484183725177 这个距离是错误的。为什么给定同样的点，查询同样的数据，两者返回结果不一样？