企业官网建设流程全解析

简介：这份资源是面向微信小程序初学者与传统文化爱好者的唐诗诗词小程序页面源码，帮助开发者在移动端快速搭建古典文学阅读类应用，也可作为小程序页面布局与数据交互的学习案例。压缩包共14个文件，约6KB，以json配置文件、js逻辑脚本、wxss样式表和wxml页面结构为主，分别承担全局配置、交互响应、视觉呈现与页面骨架等职责，并包含工具函数与本地资源组织方式。目前已有92人学习下载。源码涵盖首页、列表页、详情页等典型页面结构，读者可从中了解页面组织方式、动态数据加载逻辑以及小程序与服务器通信的基本流程，适合作为入门练手或二次开发的参考模板，对理解小程序项目目录规范与代码分层有一定帮助。

1. 唐诗诗词微信小程序：一份源码能跑出什么，谁该上手

拿到「唐诗诗词的微信小程序页面源码.zip」这类工程，第一反应往往不是兴奋，而是犯嘀咕：它到底是一个能直接导入开发者工具跑起来的完整项目，还是只有几个 wxml 页面的半成品？我见过太多人把源码包解压后卡在「找不到 app.json 入口」或者「页面白屏但控制台不报错」上。这份源码的核心价值，在于它把唐诗诗词这类内容展示型小程序最常见的页面结构——列表页、详情页、分类检索、收藏——用原生小程序的方式搭了一遍。它适合两类人：一是想快速搭一个诗词、古文、名言类内容小程序的独立开发者，二是想拿一个真实页面工程练手 wxml/wxss/js 三件套的前端新手。它不解决后端数据从哪来的问题，也不含登录和支付，这一点必须先说清楚，否则你会在联调阶段翻车。

2. 拆开压缩包先看什么：目录结构与页面注册链路

2.1 原生小程序工程的四个必备文件

一个能跑的原生微信小程序，根目录下必须有app.json、app.js、app.wxss，加上project.config.json。app.json是全局配置，决定页面路由、窗口样式、tabBar；app.js管生命周期和全局数据；app.wxss是全局样式。诗词类源码通常还会有一个pages目录，里面按页面分文件夹，每个文件夹里放四件套：.wxml、.wxss、.js、.json。

解压后先别急着导入，用编辑器打开app.json，看pages数组。数组第一项就是启动页。如果第一项指向的路径在pages目录下不存在，导入后必然白屏。这是最常见的「源码跑不起来」原因，没有之一。

{ "pages": [ "pages/index/index", "pages/detail/detail", "pages/category/category" ], "window": { "navigationBarTitleText": "唐诗宋词", "navigationBarBackgroundColor": "#8B4513", "navigationBarTextStyle": "white" } }

这段配置里，pages数组的顺序决定页面栈的初始状态，第一项是首页。window里的navigationBarTitleText是全局导航栏标题，单个页面可以在自己的.json里覆盖它。navigationBarBackgroundColor用十六进制，诗词类项目常用深棕或墨色，配合白色文字。改完这里，重新编译，导航栏样式立刻生效。

2.2 页面四件套的职责边界

很多人写小程序写久了会把逻辑全塞进.js，样式全塞进.wxss，结果.wxml里只剩一个空壳。诗词详情页尤其容易这样：把整首诗的排版用view堆出来，然后靠 js 拼字符串。正确做法是让.wxml承担结构，用wx:for渲染诗句数组，.wxss管字体、行高、留白，.js只管取数据和状态切换。

<view class="poem-detail"> <view class="poem-title">{{poem.title}}</view> <view class="poem-author">{{poem.author}} · {{poem.dynasty}}</view> <view class="poem-content"> <view wx:for="{{poem.lines}}" wx:key="index" class="poem-line">{{item}}</view> </view> </view>

wx:for遍历poem.lines数组，wx:key用index在静态列表里够用，但如果列表会增删，建议用唯一 id。{{}}是数据绑定，不能写复杂表达式，复杂逻辑放到 js 的computed式函数里提前算好。这段结构配合text-align: center和line-height: 2，就能出诗词排版的基本样子。

2.3 数据从哪来：本地 json 还是接口

诗词源码通常有两种数据方案：一是把诗词数据写成data/poems.js或data/poems.json，直接require进来；二是留一个api.js，里面写wx.request调后端。前者适合演示和离线，后者适合真实产品。如果你拿到的是本地数据版，想接自己的后端，改造成本主要在api.js的封装层。

// utils/api.js const BASE_URL = 'https://your-domain.com/api'; function request(path, params) { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + path, data: params, method: 'GET', success(res) { if (res.statusCode === 200) { resolve(res.data); } else { reject(new Error('请求失败: ' + res.statusCode)); } }, fail(err) { reject(err); } }); }); } module.exports = { request };

BASE_URL必须换成你自己的域名，且该域名要在小程序后台的「开发设置」里配到 request 合法域名，否则真机预览会直接失败。wx.request默认超时 60 秒，诗词列表这种小数据量接口，建议在app.json里把networkTimeout调到 10000 毫秒，避免弱网下用户等太久。Promise 封装是为了在页面里用async/await，比回调嵌套清爽得多。

3. 让页面真正跑起来：列表渲染、详情跳转与收藏状态

3.1 列表页的渲染与分页加载

诗词列表页的核心是wx:for加onReachBottom分页。源码里如果只有静态数组，翻到第二页就没数据了。改造思路是：页面 data 里维护list、page、hasMore三个状态，onLoad时拉第一页，onReachBottom时page + 1继续拉。

Page({ data: { list: [], page: 1, hasMore: true }, onLoad() { this.loadPoems(); }, onReachBottom() { if (this.data.hasMore) { this.loadPoems(); } }, async loadPoems() { const { page, list } = this.data; const res = await api.request('/poems', { page, size: 20 }); this.setData({ list: list.concat(res.items), page: page + 1, hasMore: res.items.length === 20 }); } });

onReachBottom是小程序页面级生命周期，页面滚动到底部自动触发，不需要手动监听滚动事件。hasMore的判断用「本页返回条数是否等于 pageSize」，比让后端返回 total 更省事，但要求后端分页严格。setData里用concat而不是push，因为直接改原数组再setData有时不会触发视图更新，这是血泪经验。

3.2 详情页跳转与参数传递

列表项点击跳详情，用wx.navigateTo，参数拼在 url 上。诗词 id 是数字或短字符串，直接拼没问题；如果标题里有特殊字符，必须encodeURIComponent。

// 列表页点击 goDetail(e) { const id = e.currentTarget.dataset.id; wx.navigateTo({ url: `/pages/detail/detail?id=${id}` }); }

// 详情页接收 onLoad(options) { const id = options.id; this.fetchPoemDetail(id); }

e.currentTarget.dataset.id对应 wxml 里的>const FAV_KEY = 'poem_favorites'; function toggleFavorite(id) { const favs = wx.getStorageSync(FAV_KEY) || {}; if (favs[id]) { delete favs[id]; } else { favs[id] = Date.now(); } wx.setStorageSync(FAV_KEY, favs); return !!favs[id]; } function isFavorite(id) { const favs = wx.getStorageSync(FAV_KEY) || {}; return !!favs[id]; }

wx.setStorageSync单 key 上限 1MB，总上限 10MB，存几千条收藏绰绰有余。同步接口会阻塞，但收藏这种小数据量操作可以接受。如果收藏列表要展示诗词标题，得在收藏页用 id 去本地数据或接口里查，别把整首诗塞进 storage，那样很快会超限。

4. 避坑与排查：源码跑不起来时先查这五处

4.1 导入后白屏，控制台无报错

现象：开发者工具模拟器一片空白，Console 干净。原因通常是app.json的pages第一项路径拼写错误，或者对应目录下缺.js文件。小程序对页面四件套的要求是.js和.wxml必须有，.json和.wxss可缺。解决：逐字核对pages数组与目录名，注意大小写，Windows 下不敏感但真机敏感。

4.2 真机预览接口请求失败

现象：模拟器能拉到数据，手机预览报「request:fail」。原因：BASE_URL域名没配到小程序后台的 request 合法域名，或者用了 http 而非 https。解决：开发阶段可在开发者工具「详情-本地设置」勾选「不校验合法域名」，但上线前必须配好 https 域名。这个设置只对开发工具生效，真机调试模式也生效，但体验版和正式版不生效。

4.3 列表滚动到底部不触发加载

现象：onReachBottom不执行。原因：页面根元素设了height: 100%且内部用了scroll-view，此时滚动发生在scroll-view内部，页面级onReachBottom不会触发。解决：要么改用页面级滚动，去掉固定高度；要么在scroll-view上绑bindscrolltolower，用组件级事件替代。

4.4 setData 后视图不更新

现象：js 里数据变了，页面还是旧的。原因：直接修改了 data 里的对象或数组属性，没有走setData，或者setData的路径写错。解决：数组用concat、slice生成新数组；对象用Object.assign({}, old, new)；setData的 key 用字符串路径如'list[0].title'时确保层级存在。

4.5 导航栏标题被页面覆盖失效

现象：app.json里设了全局标题，某个页面显示的还是「微信」。原因：该页面自己的.json里navigationBarTitleText为空或没写，小程序会回退到默认值而非全局值。解决：每个页面的.json里显式写一遍标题，或者确认页面.json里没有覆盖成空字符串。

5. 从能跑到好用：诗词小程序的三个进阶技巧

5.1 用分包把首屏体积压下来

诗词数据如果全量打包进主包，很容易超过 2MB 限制，尤其是带注释和译文的版本。常见做法是把详情页和分类页拆到分包，主包只留首页和 tabBar 页。在app.json里配subPackages，每个分包有独立 root。用户进首页时只下载主包，点进详情才拉分包，首屏速度明显提升。分包大小上限单个 2MB，总包 20MB，对诗词类足够。

5.2 详情页的字体与排版适配

诗词排版对字体敏感。wxss里用font-family: "Songti SC", "SimSun", serif在 iOS 和安卓上都能落到衬线字体。行高用line-height: 2比固定 px 更稳，因为用户可能调系统字号。长诗要允许滚动，别用overflow: hidden。如果要做竖排，writing-mode: vertical-rl在部分安卓机型上支持不完整，建议先用横排，竖排作为可选皮肤。

5.3 用云开发省掉后端

如果你没有服务器，微信云开发是最省事的路径。把诗词数据存到云数据库，页面里用wx.cloud.database().collection('poems').skip(page * 20).limit(20).get()直接查。云开发免鉴权，不用配域名，个人主体也能用。代价是绑定微信生态，迁移成本高。我一般建议：验证阶段用云开发，数据量上来或要接自有系统时再迁到自建后端，接口层封装好，迁移只改api.js一个文件。

// 云开发版列表查询 const db = wx.cloud.database(); async function loadPoems(page) { const res = await db.collection('poems') .skip(page * 20) .limit(20) .orderBy('id', 'asc') .get(); return res.data; }

skip加limit是云数据库分页的标准写法，但skip在数据量大时性能会下降，超过几千条建议改用where加游标。orderBy必须指定，否则返回顺序不保证。云开发免费额度对诗词类小项目够用，但要注意数据库读次数配额，列表页每次 20 条，一天几千次访问就会逼近上限。

我自己的习惯是：拿到任何一份页面源码，先不评价代码好坏，先把它在开发者工具里跑起来，再跑一遍真机，把白屏、接口、滚动这三个问题排掉，剩下的才是改样式和接数据。诗词类小程序的技术门槛不高，难的是数据整理和排版细节，这两件事源码帮不了你，得自己一首一首过。希望帮到你。

本文还有配套的精品资源，点击获取