WeHalo 微信小程序版博客项目教程

WeHalo 微信小程序版博客项目教程

【免费下载链接】WeHalo WeHalo 简约风 的微信小程序版博客:sparkles: 项目地址: https://gitcode.com/gh_mirrors/weh/WeHalo

1. 项目目录结构及介绍

WeHalo 项目的目录结构如下：

WeHalo/
├── cloudfunctions/
├── image/
├── miniprogram/
│   ├── colorui/
│   ├── components/
│   ├── pages/
│   ├── utils/
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   └── project.config.json
├── .gitignore
├── LICENSE
├── README.md
└── project.config.json

目录介绍：

• cloudfunctions/: 存放云函数的目录。
• image/: 存放项目中使用的图片资源。
• miniprogram/: 小程序的主要代码目录。
  • colorui/: 存放 ColorUI 组件库的样式文件。
  • components/: 存放自定义组件。
  • pages/: 存放小程序的各个页面。
  • utils/: 存放工具函数和辅助代码。
  • app.js: 小程序的入口文件，负责全局逻辑。
  • app.json: 小程序的全局配置文件。
  • app.wxss: 小程序的全局样式文件。
  • project.config.json: 小程序的项目配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。
• project.config.json: 项目的配置文件。

2. 项目的启动文件介绍

app.js

app.js 是小程序的入口文件，负责全局逻辑的初始化。以下是 app.js 的主要内容：

App({
  onLaunch: function () {
    // 小程序启动时的初始化逻辑
  },
  globalData: {
    userInfo: null,
    skin: null,
    roleFlag: false,
    BlogName: "爱敲代码的猫",
    url: "https://savingrun.one",
    token: "",
    highlightStyle: "dracula",
    adminOpenid: "ogogn47AhczrMBgcTCPbUwugqLcU",
    HaloUser: "xx",
    HaloPassword: "xx"
  }
});

app.json

app.json 是小程序的全局配置文件，定义了小程序的页面路径、窗口表现、网络超时时间等。以下是 app.json 的主要内容：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeHalo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

app.wxss

app.wxss 是小程序的全局样式文件，定义了小程序的全局样式。以下是 app.wxss 的主要内容：

page {
  background-color: #f6f6f6;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}

3. 项目的配置文件介绍

project.config.json

project.config.json 是小程序的项目配置文件，包含了小程序的开发工具配置信息。以下是 project.config.json 的主要内容：

{
  "miniprogramRoot": "miniprogram/",
  "cloudfunctionRoot": "cloudfunctions/",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "appid": "your-app-id",
  "projectname": "WeHalo",
  "description": "WeHalo 简约风的微信小程序版博客"
}

globalData 配置

在 app.js 中，globalData 是一个全局变量对象，包含了小程序运行时所需的全局配置信息。以下是 globalData 的主要内容：

globalData: {
  userInfo: null,
  skin: null,
  roleFlag: false,
  BlogName: "爱敲代码的猫",
  url: "https://savingrun.one",
  token: "",
  highlightStyle: "dracula",
  adminOpenid: "ogogn47AhczrMBgcTCPbUwugqLcU",
  HaloUser: "xx",
  HaloPassword: "xx"
}

这些配置项包括博客名称、博客地址、Halo 后台用户名和密码等，用于小程序的初始化和运行时数据管理。

【免费下载链接】WeHalo WeHalo 简约风 的微信小程序版博客:sparkles: 项目地址: https://gitcode.com/gh_mirrors/weh/WeHalo