笔记：新手尝试制作小程序 -基于网页PHP

目前多数个人站长均采用PHP 程序搭建独立博客站点，搭配 Apache 服务器、已备案域名完成站点搭建，站点拥有完整首页布局、栏目分类、图文样式与跳转链接。

为打通微信生态流量入口，让微信用户便捷访问个人博客，我从零完成PHP 博客迁移制作微信小程序全流程。

本文分为两大核心板块：

1. 零基础讲解微信小程序四大核心文件构成与基础作用，对标传统网页开发逻辑；
2. 实战讲解如何从 PHP 网页源码中提取有效内容，拆分生成小程序页面文件；
3. 记录开发过程中权限限制、样式适配、链接拦截等真实瓶颈与最终合规解决方案。

一、传统网页与微信小程序开发逻辑对标

我们日常搭建的 PHP 博客结构：

PHP后端逻辑 + HTML页面结构 + CSS样式 + JS交互脚本

微信小程序摒弃了网页开发模式，采用分层独立文件架构，不支持直接运行 PHP 后端代码、不兼容网页原生特效，只能提取网页可视化内容二次重构。

二、微信小程序四大核心基础文件 零基础详解

任何一个小程序页面，都由4 个同名不同后缀文件组成，缺一不可，这是小程序最基础的构成逻辑：

1. index.wxml 页面结构文件

作用：等同于网页开发中的 HTML

• 负责搭建页面所有视觉骨架：文字、图片、按钮、布局板块、列表导航；
• 只写页面摆放结构，不负责颜色、大小、动画样式；
• 支持小程序专属标签，无法直接使用 HTML 标签，是页面最基础的骨架。

2. index.wxss 页面样式文件

作用：等同于网页开发中的 CSS

• 专门负责美化页面：字体大小、背景颜色、卡片圆角、边距、配色、点击效果；
• 继承大部分 CSS 写法，但小程序采用rpx 自适应单位，和网页 px 单位区分使用；
• 网页复杂渐变、多层光影、视频背景样式，在小程序中极易出现兼容异常。

3. index.js 页面逻辑交互文件

作用：等同于网页开发中的 JavaScript

• 承载页面所有功能逻辑：点击事件、数据赋值、弹窗提示、链接复制、页面跳转；
• 无法调用 PHP 后端接口直接渲染动态内容，受微信域名严格限制；
• 个人小程序所有外部网页跳转、数据抓取行为都会被微信拦截。

4. index.json 页面配置文件

作用：页面独立配置项，无页面展示效果

• 配置页面导航栏颜色、标题文字、下拉刷新、页面默认样式；
• 全局统一页面基础设置，极简开发中可默认保留基础配置无需修改。

总结

wxml 搭架子 → wxss 做美化 → js 做功能 → json 做配置，四大文件各司其职，构成完整小程序页面。

三、实战：从 PHP 博客首页源码 提取内容制作小程序文件

我的站点环境：Apache 服务器 + PHP 动态博客程序 + 域名lifetruth.top

拿到完整 PHP 嵌套 HTML 的首页源码后，不直接复用源码，而是筛选有效内容，剔除无效代码，拆分填充至小程序四大文件中。

第一步：剔除 PHP 源码中所有无用内容

PHP 博客首页源码包含大量后端运行代码，小程序完全无法识别，直接全部删除

1. 剔除所有 <?php ?> 包裹的后端逻辑代码（站点配置、动态调用、栏目读取、服务器渲染代码）；
2. 剔除网页专属外部依赖：tailwindcss样式库、font-awesome网页图标、视频背景播放器、网页流星动画、移动端网页下拉菜单；
3. 剔除网页浏览器专属交互 JS、网页平滑滚动、网页菜单展开逻辑；
4. 剔除站点 SEO 验证标签、网页头部多余 meta 标签。

第二步：从 PHP 源码中提取 4 类有效核心素材

1. 提取文字文案（填充至 wxml）

从网页 HTML 结构中抓取固定静态文字：

• 站点品牌：执迷者 X、LIFETRUTH.TOP
• 站点标语：知者行之始，行者知之成
• 栏目导航文案：软件工具、AI 相关、商业数分、社会心理学、关于我
• 底部版权文案、站点定位介绍文案

2. 提取视觉资源（填充至 wxml）

抓取网页中稳定可访问的公开图片地址：

博客 LOGO 远程图片链接，直接放入小程序 image 标签使用。

3. 提取主色调配色（填充至 wxss）

从 PHP 网页自定义 CSS 中提取站点专属配色，统一复刻小程序风格：

• 页面主背景深色：#05061f
• 主题蓝色：#10a2f2
• 辅助紫色：#7c3aed
• 文字浅色、高亮文字颜色复刻网页整体深色简约高级风格，实现小程序与官网视觉统一。

4. 提取全站栏目链接（填充至 js）

抓取 PHP 博客所有栏目、首页、关于页完整 HTTPS 公开链接，固定写入小程序点击事件中，作为静态跳转地址使用。

第三步：素材分类填入小程序对应文件

1. 所有文字布局、图片摆放、导航排版 → 写入 index.wxml按照网页首页从上到下的排版顺序：顶部 LOGO + 站点名 → 居中标语 → 首页入口卡片 → 栏目导航 → 底部版权，1:1 复刻布局结构。
2. 所有颜色、背景、卡片圆角、字体大小 → 写入 index.wxss沿用博客官网配色体系，简化网页复杂光影渐变样式，适配小程序移动端渲染规则，避免色块、花屏、显示错乱。
3. 所有点击功能、链接复制、弹窗提示 → 写入 index.js将提取好的博客栏目链接绑定点击事件，实现点击复制网址功能，替代网页直接跳转行为。
4. 页面导航标题、状态栏样式 → 写入 index.json统一设置小程序顶部导航栏文字为「执迷者 X 博客」，匹配站点定位。

四、开发过程中遇到的核心瓶颈与解决方案

瓶颈 1：网页 LOGO 图片在小程序内严重拉伸变形

原因：网页图片默认自适应铺满容器，小程序 image 组件默认强制拉伸尺寸；

解决：在 wxml 图片标签内加入 mode="widthFix" 固定图片原始比例，杜绝变形。

瓶颈 2：网页复杂 CSS 渐变样式小程序渲染异常

原因：PHP 网页使用多层渐变文字、透明遮罩、动态光影，小程序基础库兼容差，出现乱码色块；

解决：舍弃花里胡哨的网页特效，改用纯色简洁文字样式，保证全机型正常显示。

瓶颈 3：想通过 PHP 博客 RSS 接口抓取文章，实现小程序动态更新

原因：微信小程序严格限制 request 合法域名，第三方 RSS 转换接口无法配置，直接拦截数据请求；

解决：放弃动态数据抓取，改用纯静态固定栏目模式，无需后端接口，零报错。

瓶颈 4：最大权限瓶颈：个人小程序无法内嵌 PHP 博客网页

最初开发目标：使用 web-view 组件直接在小程序内打开完整 PHP 博客页面

限制：

1. 个人主体微信小程序无业务域名配置入口，无法下载站点校验文件；
2. 微信官方禁止个人小程序使用 web-view 内嵌外部独立站点；
3. 所有外部站点直接跳转行为全部被微信安全机制拦截。最终合规解决方案彻底放弃内嵌网页方案，采用点击复制博客链接 + 弹窗引导浏览器打开，完全符合微信审核规则，无任何违规风险。

瓶颈 5：开发工具检测项目存在冗余无用组件

问题：新建小程序模板自带多余导航组件，未被调用触发代码规范警告；

解决：直接删除未使用的 components 多余文件夹，清理冗余代码，满足微信代码审核标准。

五、最终成品定位与实用价值

1. 视觉层面：完整复刻自有 PHP 博客的品牌风格、配色、栏目布局，形成微信端专属品牌入口；
2. 功能层面：无后端依赖、无需维护 PHP 程序对接、纯静态页面稳定零故障；
3. 传播层面：微信内一键复制博客网址，解决微信拦截外部链接无法直接分享的痛点；
4. 合规层面：个人主体可直接提交审核，通过率 100%，无任何违规风险。

六、新手站长开发建议

1. 不要尝试将 PHP 后端代码移植到小程序，二者运行环境完全独立，无法互通；
2. 零基础优先掌握小程序四大基础文件作用，再提取网页素材重构页面；
3. 个人主体小程序不要强行突破权限限制，优先选择合规替代方案；
4. 若后期需要实现小程序直接打开完整博客页面，可升级小程序为企业主体，配置业务域名完成校验，启用 web-view 组件即可实现原生网页内嵌。

结语

对于拥有自建 PHP 博客的个人站长而言，开发微信小程序不需要高深的开发技术，核心思路就是剥离网页后端逻辑、提取静态可视化素材、遵循小程序规则二次重构页面。

虽然个人小程序存在诸多权限限制，无法实现网页沉浸式浏览，但低成本搭建微信品牌入口、打通私域流量传播，依然是性价比极高的轻量化开发方案。