介绍

GBlog-wx：微信小程序博客

halo作为后台，小程序样式采用color-ui组件。

一、展示

二、在线体验

三、说明

本项目采用halo作为后台，调用halo接口。小程序样式使用color-ui组件组件。markdown转换使用html2wxml组件服务。

四、使用

1.后台搭建

采用halo搭建，具体可查看halo文档：https://halo.run

2.小程序导入

• 拉取代码

  git clone git@github.com:GeekEra/GBlog-wx.git

• 导入工具

  通过微信公众平台注册小程序账号，登录后在开发——开发设置中查看AppID；

  下载微信开发者工具，选择小程序——导入项目，选择刚刚clone的文件夹并填写自己的AppID.

  

• 配置

  将config中有个api-tmp.js文件重命名为api.js。

  修改如下配置：

  const ApiBaseUrl = '';//生产上
  const Config = {
    AccessKey: '',
    guestbookSheetId: 2,
    html2wxmlUrl: 'https://html2wxml.qwqoffice.com/api/',
  }

  1.ApiBaseUrl为halo后台地址，上线必须为域名，在开发者工具中可点击右上角详情——本地设置，将不校验合法域名打勾。

  2.AccessKey为halo api的AccessKey。进入halo后台管理系统，在系统——博客设置——高级选项——API设置中，将API 服务开启，并设置Access key。将此Access key填入上述js文件中对应位置。

  

  3.html2wxmlUrl为html2wxml组件qwqoffice提供的解析服务api。也可以自行参考html2wxml搭建组件解析服务，这时将其html2wxmlUrl改为自己的api即可。（使用默认无需修改）

  4.guestbookSheetId该值是留言板页面id，默认为关于页的评论，可自行前往表结构中查看。（默认2）

• 配置小程序云服务

  1.如未配置在控制台会出现如下提示：

  

  2.点击开发者工具左上方“云开发”，进入开通，填写环境名称和环境ID创建；

  

  3.右击cloudfunctions，点击更多设置，选择刚刚创建的环境；

  

  4.在app.js中修改刚刚设置云服务的环境ID

  

  5.打包上传云函数，首先安装npm、node环境（步骤略，推荐安装nvm：Windows下安装及使用NVM）,可通过npm -v检测是否安装。

  6.右击cloudfunctions下get_qrcode文件夹，点击终端中打开，出现get_qrcode目录的cmd命令行，输入命令npm i等待完成，会发现多出如下node_moudles文件夹和package-lock.json文件。

  

  

  

  7.右击cloudfunctions下get_qrcode文件夹，点击“创建并部署：云端安装依赖(不上传node_moudles)”，等待完成。

  

  8.右击cloudfunctions，同步云函数列表。

  

• 配置合法域名

  在微信公众平台中，开发——开发设置——服务器域名中添加request合法域名和downloadFile合法域名。将上述ApiBaseUrl与html2wxmlUrl域名添加到request合法域名，例如www.geekera.com与html2wxml.qwqoffice.com。将博客图片地址域名（halo附件地址）和微信头像域名添加到downloadFile合法域名，例如例如cdn.fuzui.net与wx.qlogo.cn。（在开发者工具中可勾选不校验合法域名运行）

  

  

五、结构

GBLOG-WX     
├── cloudfunctions		// 云服务
├── colorui            	// color-ui组件库 
├── component           // 自定义组件
│       └── article-list                  // 文章列表
│       └── canvas-share                  // 海报生成
│       └── html2wxml-component           // html2wxml组件
├── config 				// 配置文件
├── images      		// 图片
├── pages   			// 页面代码
├── utils      			// 公用js

六、功能

• 文章浏览
• 文章分类
• 文章评论
• 文章点赞
• 文章搜索
• 光影照片
• 日记
• 文章归档
• 留言
• 友情链接
• 站点统计
• 文章分享海报

七、致谢

• halo 一个优秀的开源博客发布应用

• ColorUI 鲜亮的高饱和色彩，专注视觉的小程序组件库

• html2wxml 用于微信小程序的HTML和Markdown格式的富文本渲染组件

• Hux Blog的背景图