前言 这几天在突然想搞(xian)点(de)东(dan)西(teng)，于是折腾了下公众号相关的接口，然而发现某个api在模拟器上正常，手机上使用微信浏览器无法始终无法执行，但是H5页面又不像小程序一样可以远程调试，又看不到打印日志，于是想起来了社区大佬之前发过的vConsole。 vConsole 是什么？ 或许很多人会觉得很陌生，但是开发过小程序的人来说看到下面这个就很熟悉了。 [图片] 小程序端和web端的区别？ 小程序端： [图片] Web端： [图片] 从上面2个截图可以看出基本上功能差不多，用法上也没什么区别，Web端可以查看Network和Storage的信息，至于好不好用，自己试试就知道。 Vue项目使用vConsole [代码]npm install vconsole [代码] 在入口文件引入模块 [代码]import VConsole from 'vconsole' let vConsole = new VConsole() Vue.prototype.$vConsole = vConsole; [代码] 扩展功能：隐藏Network面板 因为Network信息有时候比较敏感，所以小程序端至今没有开放这个面板，但是理论上来说应该都是有的，可能是官方特意隐藏了，我们在H5页面上也可能会有这种需求，默认的话是都显示出来的，我们可以针对线上环境单独设置隐藏。 [代码]vConsole.removePlugin("network") [代码] 仓库地址 https://github.com/Tencent/vConsole

需求： 今天开发遇到一个需求 想给文字添加下划线 不懂字体基线的 可以百度下，需求如下图： [图片] 分析过程 前提：在这个需求之前我已经先将短文单词拆解 每一个单词独立为一个元素 因为内容是英文 需要帖子字母的基线添加下划线 如果使用 text-decoration:underline  solid #ffe60f; 只能给文本内容加上一个1px的实线下划线 如下图： [图片] 探索方法： 结果产品不满意 那咱先继续改 于是想到了两种方法： 1.使用 border 属性 border的话 是可以设置宽度的 但是border不是针对文本的 而是针对整个元素的 上网查询 有人介绍使用 border 和 padding 来控制border的距离 但是他的例子是将border向下移动 我的需求是向上移动 贴住文本的基线 那怎么对padding使用 负值呢？ 结果。。尝试失败 padding的负值 不能缩小元素的大小 从而改变border的位置 他和 margin完全不同 margin的负值可以做到 方法1结论：使用border只能将下划线向下移动 2.使用 css伪类 before 和 after + border + 绝对定位的方法 实现下划线 我的思路是 文本本身使用相对定位 将伪类的高度设置为1em 宽度100% 这样就和文本的宽高相同 使用绝对定位 设置 left:0 然后给伪类一个 border-bottom:4rpx solid #ffe60f 代码如下： [图片] 结果如下图： [图片] 嗯 还不错 但是美中不足的是 这个下划线将原文文本遮挡了 尝试使用z-index控制层级 强制将伪类下划线挪到下面 代码如下： [图片] 嗯 果然不好使。。。结果视图没变 开发工具和真机测试一样 都没变化 看来这个伪类的层级控制是失效的 不过庆幸的是 这个效果 在产品经理那边通过了 他还说了一句 果然慢工出细活！。。 我顿感无语 顺便提下 那个 height:1.1em；是将下划线又向下移动了0.1em的距离 因为 设置 1em 还会遮挡文本内容的最下面 方法2结论：使用伪类+绝对定位的方法 能随意控制下划线的位置 不仅可以上下 还可以左右移动 甚至可以添加旋转效果 美中不足的是 小程序里会遮挡文本内容 注意：在小程序里 就算使用 text-decoration 属性也会出现在 g p f y 这样的字母下方下划线断档的情况 如下图 [图片] 以上就是关于 如何 控制 文本下划线的分享和摸索过程 ！希望能帮到你 不足之处 欢迎指正

前言 本文是笔者分享的第一篇文章，大佬们嘴下留情😆。写这个模态框组件，刚好是看到了腾讯QQ的一些UI设计挺舒服的，以后也会分享如何实现一个一样的页面设计。 1.1 腾讯QQ的模态框 [图片] 1.2 我实现的模态框 [图片] [图片] 2.1 参数说明 属性 类型 默认值 说明 isShow Boolean false 是否显示模态框 mask Boolean true 是否显示遮罩 title String “温馨提示” 模态框的标题 content String “” 模态框的内容 showCancel Boolean true 是否显示取消按钮 cancelText String “取消” 取消按钮的文字，最多 6 个字符 cancelColor String #232323 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串 confirmText String “确定” 确认按钮的文字，最多 6 个字符 confirmColor String #232323 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串 2.2 事件回调 Object res.detail [代码]// page.wxml <custom-modal bind:action="showModal" /> // page.js showModal (res) { if (res.detail.confirm) { // doing something after click confirm } else if (res.detail.cancel) { // doing something after click cancel } } // res.detail { cancel: Boolean, confirm: Boolean, errMsg: "showModal:ok" } [代码] 最后附上代码片段，不足之处还请各位大佬不吝赐教 😊😊

前言   去年在微信公开课小程序里就看到有社区版块，但是就很好奇为啥社区自己不出一个小程序版本的。至少在3月份以前，微信开放社区在手机端虽然进行了简单适配，但是访问的时候用户体验并不是很好，到目前为止手机端访问社区时依然不支持搜索和回复功能。   微信开放社区已经做了手机的适配，为啥还要自己做一个小程序版本的呢？   2月13日在群里聊天的时候 @Stephen 突然发了一个社区列表接口地址，就聊起了要利用公开接口来自己做一个用于查看社区信息的想法。   隔了将近一周，有天实在是闲得没啥事干，于是就开始研究社区的接口来，大概用了一个上午的时间理清了社区栏目和文章页的接口信息和参数含义，接下来就可以做自己的小程序页面了。 体验地址 https://www.qzwu.com/WeChat 开发浏览功能 问题解答接口： https://developers.weixin.qq.com/community/ngi/timeline/{参数1}/{参数2}/{参数3}?page=1 [代码]参数1：版块分类 1：小程序 2：小游戏 8：微信支付 参数2：类型 1：默认 2：公告 参数3：标签ID 0：默认 [代码] 列表接口: https://developers.weixin.qq.com/community/ngi/{参数1}/list/{参数2}?page=1&blockType={参数3} [代码]参数1:文章分类 doc：普通帖子 article：文章 参数2：栏目ID 参数3：版块分类 1：小程序 2：小游戏 8：微信支付 [代码] 搜索接口： https://developers.weixin.qq.com/community/ngi/search?query=关键词&page=1&blogCategory={参数1} [代码]参数1：分类 511：相关帖子 1024:官方教程 512:小故事 [代码] 有了以上3个接口，简单的社区就能做出来了。 开发社区登陆功能   开发社区回复功能首先要解决登陆的问题，官方自然不会有API文档让小程序接入社区。以下登陆流程主要灵感来源于 @这都申请了 提供的思路。 1.获取state [代码]https://developers.weixin.qq.com/community/ngi/ [代码] 2.获取登录二维码页面 [代码]https://open.weixin.qq.com/connect/qrconnect?appid=wx1bb297ee890403a9&scope=snsapi_login&redirect_uri=https://developers.weixin.qq.com&state={state}&login_type=jssdk [代码] 3.解析获取登录二维码以及二维码的uuid 4.监听登录状态（超时时间设置为60秒） [代码]https://long.open.weixin.qq.com/connect/l/qrconnect?uuid={uuid}&_={随机数} [代码] 5.监听返回内容 wx_errcode为405代表登录成功，获取wx_code 6.登录身份验证地址获取用户cookie [代码]https://developers.weixin.qq.com/community/ngi/welogin?type=0&redirect_url=&code={wx_code}&state={state} [代码] 7.解析上一步页面中的set-cookie并保存到数据库 8.生成对应的小程序码 9.扫码进入小程序与小程序内登陆用户的openId或其它用户标识信息绑定 开发评论功能 发布评论接口： https://developers.weixin.qq.com/community/ngi/comment/create?random={随机数}&token={参数1} [代码]参数1:token 这个在登陆的时候能够获取到 [代码] 总结 开发目的 解决手机只能看不能回复的困扰； 可以方便的在床上、马桶上和社区网红 @卢霄霄 聊天； 不是为了采集数据或者以其它方式盈利，纯粹只是闲的； 还需要优化的地方 小程序内对富文本和一些H5特殊标签支持不是很好，会导致部分内容无法正常显示； 期待官方的社区小程序能早日推出； [图片] *最后鄙视下那些采集信息到自己网站上的人。

起因 H###s：#满，微信小程序有模态弹窗吗？ #满：有啊，喏。wx.showModal（随手甩出一个链接） 短暂的几十秒后… H###s：不对啊，我要的不是这种 #满：那你要哪种？ H###s：就是那种组件，可以自己在里面写wxml代码的。 #满：组件？那没有 H###s：那难顶哦，有这个需求 祺##：自己写一个呗，又不难 因为我一般使用 kbone - vue ，所以这里也拿 vue 做示例。另外，使用 typescript 语法，请使用 javascript 的童鞋自行理解～ 最终效果 [图片] 编写过程 我们先创建一个空的 vue 组件，我这里命名为 Modal [图片] [图片] 组件创建好了，随便写点东西，然后引入到页面，看看对不对吧 组件： [图片] 页面： [图片] 实际效果： [图片] OK，组件引入正确，但是这也只是一个组件，并不是模态弹窗。众所周知，模态弹窗，是一个弹出框，应该浮动到最上层，那就加一点 css 吧 组件： [图片] 实际效果： [图片] emmmm，有点丑，不过意思是这个意思，接下来，让弹出框水平垂直居中，再给点宽度高度吧 组件： [图片] 实际效果： [图片] 是不是有内味儿了？但毕竟是模态弹窗组件，显示什么内容应该由页面来决定，所以，slot 走起！ 组件： [图片] 页面： [图片] 实际效果： [图片] OK，那既然是模态弹窗，那就代表可以关闭打开，其实我个人推荐的是在页面里面使用 v-if / v-show 来控制，让组件干净一点 页面： [图片] 实际效果： [图片] [图片] OK，既然打开有了，接下来就是关闭了 组件： [图片] 页面： [图片] 行了，关闭打开也有了，再搞点小东西 组件： [图片] 页面： [图片] 实际效果： [图片] 完成 简单的模态框做完啦！怎么样？似8似很简单！ **考虑到会有一些组件的层级，并且设置 z-index 无效，组件的外部标签可修改为 [代码]cover-view[代码] ** [图片] 结束 H###s：真的诶！超简单的，感谢你的组件了（白嫖成功）！

应用场景 “宝贝积分管理”是为了方便家长记录孩子平时行为，帮助孩子养成奖惩机制的工具型小程序。 家长可以记录孩子的行为并打分（加、减），在积累一定积分后可以用于换取一定的奖励。为了方便多个家长管理一个孩子，还提供了绑定已有孩子的功能。同时还提供模板功能方便快速记录常用事件。 目标用户 有孩子的家长，需要给孩子养成良性生活习惯的家长。 当然也可以扩展到部分宠物主，对自己宠物的行为打分记录。 实现思路 本小程序采用基于云开发的原生开发，用到了云数据库存储数据，使用云函数获取当前用户的openid、读写操作云数据库，云存储保存图片，云调用内容安全接口检查提交信息是否存在违法违规内容。 主要用到了以下几个云函数： 1、用户登录获取openid 2、更新云数据库，使用api更新数据库会有权限的限制，所以部分操作使用了云函数来更新云数据库 3、多表联查，在类似展示记录的地方需要再从用户表查询记录者信息，api查表不支持多表联查，这部分功能使用了云函数来实现 4、使用云调用内容安全接口检查提交信息是否存在违法违规内容 架构图 [图片] 效果截图 [图片] [图片] [图片] [图片] [图片] [图片] 代码链接 码云：https://gitee.com/piscdong/wxa_cloud_2020 作品体验二维码 [图片] 功能演示 腾讯视频：https://v.qq.com/x/page/d3143iccbs3.html 团队简介 本团队的核心成员来自上海微喵网络科技有限公司，多为网页前端、后端、小程序开发者，在微信开放社区也积极活跃。

场景：点击按钮获取data-*的值跳转页面，跳转页获取传过来的参数 binnie: 华哥，为什么有的部分参数传不过去然后显示undefined？ 华哥： binnie, 我看了一下你的代码，你错在属性名有大写字母了。我给你写了个例子，你参考一下，以后别犯这种错误了。 binnie：谢了华哥，犯了低级错误，噗哈哈哈 [图片] ** 有的同学在开发小程序时候，碰到了奇怪的问题，明明代码写的没问题，为什么就报错呢？ 请看一下介绍 data-* 属性包括两部分 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符 属性值可以是任意字符串 [图片] 语法 [代码]<element data-*="somevalue">[代码] [图片] [图片] 示例代码：https://developers.weixin.qq.com/s/8AGZKDmd7VdS © 2019 BINNIE 吉祥 严禁做笔记

1、微信服务号第一次进页面正常，手动刷新当前页面就404了 问题链接：https://developers.weixin.qq.com/community/develop/doc/000c2cba014b6816a4a9d97a555400 经了解到项目中使用了vue-router 的 history 模式，项目在本地yarn serve运行时访问二级页面，再刷新是问题的，yarn build后， 放到nginx里运行，再刷新就404了，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件。 s: https://router.vuejs.org/zh/guide/essentials/historymode.html 使用前先看说明，官方提供了一些配置例子，大家可以参考参考 2、wx:for循环打印的数据添加进去了却不循环？ 问题链接：https:/developers.weixin.qq.com/community/develop/doc/00080a499b85c03bafa9e3b325b400 这位同学修改数值，没有调用this.setData触发视图更新，原因在于开发前没看文档 ps:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html 数据绑定 3、这是接口问题吗？怎么解决？ 问题链接：https://developers.weixin.qq.com/community/develop/doc/00040ae531c710caaea9c551456400 这位同学想调用逆地址解析接口，无奈粗心打印调成了地理编码接口 ps: https://lbs.qq.com/webservice_v1/guide-gcoder.html 腾讯位置服务逆地址解析 4、小程序如何获取好友列表？ 问题链接：https://developers.weixin.qq.com/community/develop/doc/000cc82a9a00e09e78a9bcffe51c00 有类似需求的同学就不用想了，不可能提供，我在此：噗哈哈哈 5、我把自己的本地数据复制到另一小程序中就出错？ 问题链接：https:/developers.weixin.qq.com/community/develop/doc/000c6ef50b0bb8bf59a98242c5b400 经过私聊该同学，代码写的少，碰见问题不会排查，错误出现在路径问题上，对于路径问题，有个笨办法，就是在/show/show 前面加..或/，一个一个加，加到能位置，不必研究目录关系。 6、微信小程序步数返还的时间戳为什么返回的全是1970？ 问题链接：https://developers.weixin.qq.com/community/develop/doc/000caa9effce70ca5ea93371f5bc00 微信步数或者其它的API的时间戳字段没有写明是秒还是毫秒，碰到该类问题，大家先看看时间戳的长度判断是秒还是毫秒。该问题反馈给华哥了 7、picker多项选择器 循环渲染修改另外一个第一行 另外一个第二项数据会变化 问题链接：https://developers.weixin.qq.com/community/develop/doc/000026e420c9e89755a984fb856c00 https://developers.weixin.qq.com/community/develop/doc/0002c846538448b037a908c3951800 该问题对象复制的问题，还有的同学反馈console.log()打印出来的结果和展开的结果不一致问题，console.log打印出来的只是快照， 展开才是实际内容。 s: 可参考《javascript高级程序设计》第三版68页 基本类型和引用类型的值 8、为什么有的部分参数传不过去然后显示undefined？ 问题链接：https:/developers.weixin.qq.com/community/develop/doc/0004626abb4b28eabf9988b4c56000 这位同学data-* 命名不规范有大写字母，所以没获取到值。此类传参问题，还有变量和等于之间多了个空格，眼神不好的，真以为代码没问题。 ps: 参考文章 https://developers.weixin.qq.com/community/develop/article/doc/0080aa5b441d81eb499a954056c13 9、wx.request() post请求中，data中的参数的封装？ 问题链接：https//developers.weixin.qq.com/community/develop/doc/00048ac54e81e03474b95166c51000 10、大家调用安全检测接口有提示敏感词没？ 问题链接：https://developers.weixin.qq.com/community/develop/doc/00040e0f33c5083bd5b976f1751800 该问题是调用文本安全检测不成功 不少同学都卡在这块了，本人不喜欢php，所以没有列出php的代码，也不想会，噗。以下列举java、nodejs、python2、云调用的调用代码 nodejs request库 (yarn add request) [图片] java okhttp库 [图片] [图片] [图片] linux环境的 python2 requests库 （pip install requests） [图片] [图片] 云调用示例： [图片][图片] 11、导入数据，这样的json格子哪里不对吗？ 问题链接：https://developers.weixin.qq.com/community/develop/doc/0002a6973348e0396fc9aa61b52800 云开发数据库导入json数据，其实是{"name": "binnie", "age": 18}{"name": "binnie", "age": 18} 这种格式， 外层没有[],并且{}之间没有逗号，也算是新手容易犯的错误吧

在微信开放社区发现了不少同学都卡在token验证失败了，很多都是代码写的有问题，本人没碰到过代码写对还失败的 ---- 本文只介绍验证服务器地址，其它功能不做描述。---- 接入概述 接入微信公众平台开发，开发者需要按照如下步骤完成： 填写服务器配置（不做描述） 验证服务器地址的有效性 依据接口文档实现业务逻辑（不做描述） 校验规则： 将token、timestamp、nonce三个参数进行字典序排序 将三个参数字符串拼接成一个字符串进行sha1加密 开发者获得加密后的字符串可与signature对比，标识该请求来源于微信 详细文档链接，请参考：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html 校验规则很简单，照着规则来就行了。 项目都是本地的，服务器URL需要外网80端口，所以用了natapp或者花生壳，具体怎么使用百度一下就可以了。 写了两个版本的java、nodejs，问题大多数都是java同学。为了方便演示没有提取工具类，token也是没有写在配置文件中，仅供参考。 java spring boot示例代码 修改application.yml [代码]server.port=80[代码] [图片] nodejs egg示例代码 修改config.default.js [代码]config.cluster = { listen: { path: "", port: 80, hostname: "" } }[代码] port改成80端口 egg https://eggjs.org/zh-cn/intro/quickstart.html [图片] 代码经过验证的，都是可以通过token验证的，有问题还没解决或者准备接入认证同学，可以参考一下代码，少走弯路 补充：golang版本 [图片] © 2019 BINNIE 吉祥 严禁做笔记

云开发确实简单，但是对于没有基础的同学，直接上手，报个错会摸不到头脑 我也是第一次碰见这个错误，直接帮其它社区的同学回答的时候，我是回复的是使用 request 库。今天研究一下 如何排查问题：   遇到该报错，先在社区查查有没有相同的问题，没有的话，去github上找找，在issues搜索框里搜索，果然有这个错误。添加decompress: false，问题得到解决。   自己碰到的问题，基本上别人也碰见过，如果别人也没碰见过，那就是疑难杂症了。   github issues : https://github.com/sindresorhus/got/issues/677   社区相关帖子：https://developers.weixin.qq.com/community/develop/doc/00042a44bf0a28f52ae98b15151400?jumpto=reply&parent_commentid=000ac852e084a05620e9fe228518&commentid=000ca69333cba00030e95c1b55b0 [图片] [图片]