用 Python 开发一个微信留言小程序

共 3026字,需浏览 7分钟

 ·

2020-03-16 23:25


在公众号后台,时不时就有朋友吐槽我:“帅b,为什么要关闭公众号的留言功能?”
说出来你可能不信,我是真的没有这个功能,话说在 2018 年 3 月 12 号之后注册的公众号就暂时没有留言功能了(这个“暂时”有点牛逼),好死不死的是,小帅b刚好错过了那么几天...,没办法呀,只能慢慢等留言功能给我开放咯。

b39b59f0091dc92bc01fd0a0ad667cf7.webp


不过等了贼久还是没有留言功能,我也不知道什么时候才开放,咱也不敢问呀,倒是知道还有一个途径可以获取公众号的留言功能,那就是迁移公众号,也就是说,把我们这个公众号迁移到一个带有留言的企业公众号,然后就可以实现留言了,不过我之前了解了一下,发现需要整各种营业执照和认证啥的,感觉贼麻烦,当然也有万能的某宝代办,但是鬼知道他们会不会把我的信息给卖了呢?虽然我的信息不值钱,但总感觉有点膈应。
那到现在就只剩下一个方法了,使用留言小程序,然后嵌入到公众号里面来,虽然市面上有不少留言的小程序,但是我觉得不是很爽快,要不咱们整一个有我们自己特色的小程序?帅帅的那种?

ok,那么接下来就是:学习 Python 的正确姿势


fdd4ab18a550bc8ac74507001fc5a1e2.webp




首先我们需要用到一点数据库,因为我们这里留言的人应该不多,所以没必要搞那么复杂,咱们暂时就整两张表:



9687f3895fce7b018ddb9d7e10925d59.webp




这里关键整了一张用来存放文章标题的数据表,以及一张用来存放用户评论数据表,其中的评论表有一个评论的用户 id 和回复评论的用户 id ,到时可以做关联查询,而微信授权登录之后能拿到用户的一些信息,比如头像和昵称,冗余进来就是了,至于点赞数,拉黑名单的咱先放一放,能评论了再说。

咱们第 0.01 个版本的目标就是能留言就完事了...




35b6810dc16c6894a2acc81231981496.webp


创建完数据表之后,来写两接口给小程序调用,听说最近有个 叫 FastAPI 的 Python 库挺火的,这次就使用它来创建 API 吧。

使用 FastAPI 来写接口确实很方便,比如这样:



643131a0d9cb7f170abb7b92fc549aee.webp




几行代码就完成了一个接口,可以通过 uvicorn(一个健壮的 ASGI 服务容器) 开启服务了:


707c86fd4ecf652eccd9bec632fbd1a4.webp




在浏览器直接访问接口看看:


23b6686da1fe9f6c03fe337d52d068aa.webp




牛逼的是,它居然基于 Swagger 快速生成了接口文档,只要访问 127.0.0.1:8000/docs 就可以看到你写的接口应该如何去调用:



a125333796607e4cabb00c7516a20021.webp





4d9afd12800cbf446dc9199af2b88697.webp


这里的数据库我用的是 MySQL:


b2fc36d47c2703fa177fe9be630d2cfc.webp




可以结合 SQLAlchemy 数据库引擎通过映射的方式来操作 MySQL。
咱们先创建几个模块来操作对应的事情:



ecfc618a2d8baa1f6c48777ee7b1c3bc.webp




导入相关的库就可以使用了,在 databases 模块中定义连接数据库,创建引擎和 Base:



3610cb91ca4a46f09681c60507c3bada.webp




接着在 models 模块通过 Base 来创建数据表相应的类:



af51fbac6e33cbe5fa510a85a7f771da.webp




在 schemas 模块中定义调用 API 的时候需要返回的字段:



38ce15face3258a3dd7dc7e7dc7ed072.webp




其实,我们这次操作数据库主要是插入评论内容以及通过文章的 ID 获取所有的评论数据,可以在 curd 模块中定义操作数据库的方法:



e6cf66243bb9db538be8ecced719e968.webp




所需要的模块都写完之后,就可以回到 main 中写相关的路由方法,首先获取数据库 db 操作对象:



4d9260279372aa7e7327e2ec5e3a3626.webp





定义评论 post 请求方法,这里接收传入的参数就是刚刚定义的 Comment 中的那些字段:



88d59f5af5081cd7ffa71ec38f0f5bf6.webp




获取评论数据,根据传入的 article_id 参数去数据库中查找相关的数据,然后返回:



541a516986f5a67e86e738d1954d1109.webp




接下来就可以把它跑起来了:



602f78f520ca40265db31b75de982927.webp



打开 http://127.0.0.1:8000/docs 可以看到两接口:



7574282207760730e3477ad8ccfcaeec.webp




76f081f26ef7079de93f18b4a3cd3d2a.webp




接口使用文档直接列好,不用自己手动写如何去调用,而且可以直接在这里测试, 6 得不能:


a47a6202a8255a0e29052ec1d612a7ac.webp




ok,先往数据库插入一条文章 ID 测试数据:



9a8e6116660c0faf656251eb20331aea.webp




我们来测试一下,比如有个臭不要脸的留下这样的言论:



205d378ac63c87f34b9a4aaf564dfe8f.webp




点击执行:


7ead9e8cf6f5c956b51918320bb9cc05.webp




恩,提示成功添加数据,回去数据库看看:


8363adbea16891c4fc052fc32c1a1e13.webp




恩,数据有了,接下来再随便插入几条评论数据,比如:


bab5f1cda0c181b78a84c9afc31a4e24.webp

fe11a42287a81f528052965a6f0d468d.webp



接下来再测试一下获取评论数据列表:


f2489a84504eb904c365000e9b41910f.webp



获取文章 id 的评论数据:


0a628dfd8a84ac356255c3a639c14860.webp




数据都可以获取到了,现在的返回 Json 格式就这样吧,之后心情好关联相关回复再整成相应的 Json 数组,比如:



[
  [
    {
      "nickname": "小帅b",
      "to_user_id": "222"
      "content": "帅b老仙法力无边",
      "from_user_id": "111",
      "article_id": 1
    },
    {
      "nickname": "隔壁妹纸",
      "to_user_id": "222",
      "content": "你真帅气",
      "from_user_id": "111",
      "article_id": 1
    }
  ],
  [
    {
      "nickname": "小心肝",
      "to_user_id": "122",
      "content": "你总是心太软",
      "from_user_id": "65",
      "article_id": 1
    }
  ]
]




当然,获取数据最好按评论时间排序:


e89e331ea336914cdc3b30e3e8034d30.webp




接口搞得差不多了,那么接下来要撸微信小程序了,最烦就是撸界面了...



30962f84431a5cfbb6a20d2545361c40.webp


创建一个小程序项目,就叫帅颜帅语吧,主要是比较符合我的气质:


cfa7333c852182442b3ba9cdee6d34dd.webp




创建完之后就可以拿到 APPKey ,然后使用开发者工具开发了,这里顺便说一下,官方没有 Linux 版本的小程序开发工具,不过 GitHub 有,我用的就是这个:


5a0c04dc9c021cc1445599cc982cb16d.webp



1ed0d0324c7543c9c251fa93a3d670af.webp




可以在 app.json 中配置小程序的相关信息,比如我们要添加评论页面就可以这样:


714dd89b7c92335ae1037560bf85b4a8.webp




然后创建 comment 目录,在里面定义一下小程序需要的文件就可以了,其中的 wxml 主要用来显示 UI 的,比如我先在这里写几个字让其显示:


7a61c12e45761447e0c30bfd0e802e3a.webp




这样当我们我们跳转到 comment 页面的时候,它就可以显示相关的信息了:


026a9715d43408c64e9a3db50df812f3.webp




微信小程序已经有一些基础组件可用了:


93d6403039092ad176b1617a642619b8.webp




我现在希望展示的是一个可以滑动的列表,所以可以使用其中的 scroll-view 组件,再通过数据绑定对 view 进行显示,大概是这个样子:

5915edcae19e05abc877b16cd26c21f8.webp




接着回到 js 搞点假数据填充下先:


bb54c8ac5ae7f09811beba77f7c30592.webp




运行一波:



b7bc355a7b92c632bef498896674a87f.webp





恩,你们评论的内容就先这么展示吧...


ce10cd865ada3c2a89787417ac38209e.webp


ok,接下来把评论入口加上,主要在 sroll view 下面添加一个 textarea 和一个发送按钮:



0263b28033e8f042eda17a523c1e5b44.webp




接下来就要绑定按钮的发送事件,触发的时候去做一个评论的 POST 请求。
可以通过 bindtap 来绑定点击事件:


be7cfd79d684ca57db3613a9c64dc6f8.webp




这里我绑定的名称是 send ,可以在 js 中定义这个方法,和这个在里面就可以请求服务器的评论接口了,先定义一些假数据试试:



f012b26576be0e7549761173018c5dca.webp




运行一波,测试一下,这时候点发送按钮就会触发 send 方法,然后把我们定义的假数据发送到服务器:



6c635fda89323f42199111cfd184960a.webp




恩,没毛病,提交成功。
这里的获取服务器上的数据也是一样,主要是调用了评论的 Get 请求接口,把数据封装到 comment 里:



4647195c7a42be298ccd80c2ac1a8d21.webp



然后就 comment 中的数据绑定显示到 xml 就可以了:


fc249c46e155e0ad3cf0a3449c736276.webp




最后就是把假数据变成真数据,也就是将授权到的用户信息和评论的数据整过来:


709c7598f3176a174f90d2582d0fa8fe.webp




其中的评论的数据怎么获取呢,可以通过 bind 方法,获取 textarea 中的值:


992fd1720d88e46131be8bb39b17f6ad.webp


3ebad26925d6a8343a2735e48a68ea99.webp




ok,测试一波:



d0c4ff5aa54dbbf342cce60ccd995721.webp




ok,不过这时候还有一个问题,如果有人什么都不说,直接点发送怎么办呢?
拦截一下,判断如果为空,就叫他不要闹:



5d6e79fdec9b755566c739483f783ecd.webp




哥们,你不要 null 啊!



3ad4bfbfb73f0d92062c05340b7a8687.webp




了,0.01版本差不多就先这样吧。



ebd874b519e1b09d8163f75f5d386e4f.webp


我去提交下:



25c4c8392565b47c21979f18309c4dda.webp



上线了跟你们说,我们下回见,peace!



4bbdcc1ff84f9709541ed9a9a00c388a.webp

扫一扫

学习 Python 没烦恼





























今日份的帅语录:

把你的懒惰和聪明用在决策上
把你的傻逼用在坚持上........
浏览 34
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报