【微信小程序】博客小程序，静态版本（一）准备工作

南方者

已于 2022-12-03 15:21:52 修改

阅读量1k

点赞数 2

分类专栏：【微信小程序】文章标签：微信小程序小程序前端

于 2022-11-14 03:54:15 首次发布

NanFangZhe

本文链接：https://blog.csdn.net/qq_43263647/article/details/127840342

版权

【微信小程序】专栏收录该内容

24 篇文章 2 订阅

订阅专栏

【博客小程序】专栏

【微信小程序】博客小程序，静态版本（一）准备工作

【微信小程序】博客小程序，静态版本（二）引入 lin-ui 组件、设计和开发文章页

【微信小程序】博客小程序，静态版本（三）设计和开发首页、个人关于页

前言

之前做了一个博客的搭建（gitee版本）

有一些网友 “卑微地” 问我，微信小程序版本的博客呀？

如下：与网友小橙、红、绿、蓝的聊天记录
在这里插入图片描述

最后，在所有的网友一直苦苦哀求我之下。我决定了，准备再搞一个简单的微信小程序版本的个人博客。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F4uSjc3y-1668369021522)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c122b1e2ca7f41219af800f04af7116d~tplv-k3u1fbpfcp-watermark.image?)]

流程介绍

该博客小程序将分为三部分（开发过程会有多个）：

（一）准备工作（二）开发过程（三）验收效果

准备工作

1-1 申请小程序

进入微信公众平台官网，点击注册。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkbrfhMV-1668369021523)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a07babb64ee4dd6b4756914d5f1b7c7~tplv-k3u1fbpfcp-watermark.image?)]

选择小程序注册类型

输入注册的相关信息
在这里插入图片描述

1-2 完善小程序信息

注册完成后，点击填写（进行完善小程序信息）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J1FY1P8f-1668369021524)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1d60feb792543c5ba082bdf3b491c99~tplv-k3u1fbpfcp-watermark.image?)]

这里填写自己的微信小程序，个性的博客小程序名称！（这里已改成笔者手记
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QU4Y0Pk6-1668369021524)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47fba7ea327a4e219ca053c30e926fcb~tplv-k3u1fbpfcp-watermark.image?)]

完成注册个人小程序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQtX5fBT-1668369021524)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad33068aef6a4ec09ad392b7c7d5f00a~tplv-k3u1fbpfcp-watermark.image?)]

2-1 下载、安装微信开发者工具

进入微信开发者工具官方，并进行下载微信开发者工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hDJ8Koy-1668369021525)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8adbb4ad65eb42fe96e32c8601a16b38~tplv-k3u1fbpfcp-zoom-1.image)]

2-2 找到微信小程序AppID

登陆微信小程序——》找到设置——》滚动条拉到最底下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkjoYMj0-1668369021525)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbf96c5d0bc44a0a9a2bb66deccc5c4b~tplv-k3u1fbpfcp-watermark.image?)]

2-3 使用微信开发者工具

点击桌面已经安装好的【微信开发者工具】，使用当时扫码注册小程序的微信进行扫码登录。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MttvupHb-1668369021525)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d1b0577f6ad41dda2d7f178aba0c0f5~tplv-k3u1fbpfcp-watermark.image?)]
选择项目相关信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJdMOPG6-1668369021525)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8df00fe053e4f42871fac45a6e9d825~tplv-k3u1fbpfcp-watermark.image?)]

3-1 代码管理（选择微信官方提供）

这个可以跳过，只是方便代码放地方。

微信开发者代码管理：https://git.weixin.qq.com/users/authorize#wechat_redirect

扫码登录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zHG36AF4-1668369021526)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15464483b84b429290e689afb0a090fd~tplv-k3u1fbpfcp-watermark.image?)]

设置用户名和密码（用于微信开发者工具进行提交代码的帐号密码，与下面的同步）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9apxLbyU-1668369021526)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ced9295b9f0b490aa4663a210e1b9b97~tplv-k3u1fbpfcp-watermark.image?)]

回到首页，创建项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zalv2Vhq-1668369021526)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd0ae0da5a5a49fa9ece6ad319e4b06a~tplv-k3u1fbpfcp-watermark.image?)]

填写相关信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kICSzFQd-1668369021526)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/131db7bbf5fa462fb109430d6a9abae8~tplv-k3u1fbpfcp-watermark.image?)]

创建成功复制该 git 地址（这里是 https://git.weixin.qq.com/NanFangZhe/blog.git ）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LQquqZRo-1668369021527)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b4516ce827944f2b502a42c55391acb~tplv-k3u1fbpfcp-watermark.image?)]

在微信开发者工具中，进行点击右上角的版本管理==》点击确定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6TrnqAx9-1668369021527)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1643e12b8a94232afcc8c436697c976~tplv-k3u1fbpfcp-watermark.image?)]

设置微信开发者对应代码管理的用户名和密码（即输入用户名和密码）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TemuqT3Z-1668369021527)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62609f805240457c9bffb7d7859bc499~tplv-k3u1fbpfcp-watermark.image?)]

添加设置远程 git 地址（一）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZSymmjpq-1668369021527)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd51ab89c1e34510bac8815b4000b79c~tplv-k3u1fbpfcp-watermark.image?)]

添加设置远程 git 地址（二）（即刚刚复制的 https://git.weixin.qq.com/NanFangZhe/blog.git ）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s8Avl4j7-1668369021528)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e573820f2f5421fa9ef1070c093e4f2~tplv-k3u1fbpfcp-watermark.image?)]

发现已经出现一个 origin ，点击左上角推送 ==》勾选自动跟踪为上游分支 ==》确定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s7Gwyjkn-1668369021528)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2574c8446c954178b251398a1182ef61~tplv-k3u1fbpfcp-watermark.image?)]

成功后，会发现 origin 下有新出现的 master，同时代码管理中对应项目的页面会有上传的文件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-moXi7JEZ-1668369021528)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9035e55b9601487b839d0b765d956ceb~tplv-k3u1fbpfcp-watermark.image?)]

总结

介绍文章想法由来。
如何进行申请小程序的流程。
微信开发者工具的安装和使用。
代码管理的简单了解与使用。（可忽略）

源码地址（同步更新）

微信开发者-代码管理地址：笔者手记 (git.weixin.qq.com)
Gitee地址：笔者手记 (gitee.com)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-krC6DmX1-1668503540209)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/206e3863e15743a0aa24435b934dd47d~tplv-k3u1fbpfcp-watermark.image?)]

小程序完整体验二维码

在这里插入图片描述

文章小尾巴

文章写作、模板、文章小尾巴可参考：《写作“小心思”》

　　感谢你看到最后，最后再说两点~
　　①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　　②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
　　　我是南方者，一个热爱计算机更热爱祖国的南方人。
　　（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）