- 「笔记」开发微信开放社区小程序版
前言 去年在微信公开课小程序里就看到有社区版块,但是就很好奇为啥社区自己不出一个小程序版本的。至少在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特殊标签支持不是很好,会导致部分内容无法正常显示; 期待官方的社区小程序能早日推出; [图片] *最后鄙视下那些采集信息到自己网站上的人。
2020-03-12 - 如何使用Chrome调试Android微信小程序呢?
如题:如何使用Chrome调试Android微信小程序呢?目前打开chrome://inspect/#devices不会显示小程序页面。打开debugx5.qq.com中调试选项也不行。请问有什么好的办法能够连接上吗?
2021-06-03 - 如何使用scroll-view制作左右滚动导航条效果
最新:2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段,以下文章内容和就不改了 刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段,需要的大哥拿去随便改改,先看效果图: [图片] 代码如下: wxml [代码]<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" > <view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick"> <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view> <view class="currtline {{currentTab === index ? 'active' : ''}}"></view> </view> </scroll-view> [代码] wxss [代码].scroll-wrapper { white-space: nowrap; -webkit-overflow-scrolling: touch; background: #FFF; height: 90rpx; padding: 0 32rpx; box-sizing: border-box; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .navigate-item { display: inline-block; text-align: center; height: 90rpx; line-height: 90rpx; margin: 0 16rpx; } .names { font-size: 28rpx; color: #3c3c3c; } .names.active { color: #00cc88; font-weight: bold; font-size: 34rpx; } .currtline { margin: -8rpx auto 0 auto; width: 100rpx; height: 8rpx; border-radius: 4rpx; } .currtline.active { background: #47CD88; transition: all .3s; } [代码] JS [代码]const app = getApp() Page({ data: { currentTab: 0, taskList: [{ name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, ] }, onLoad() { }, handleClick(e) { let currentTab = e.currentTarget.dataset.index this.setData({ currentTab }) }, }) [代码] 最后奉上代码片段: https://developers.weixin.qq.com/s/nkyp64mN7fim
2020-06-13