企业官网建设流程全解析

简介：这是一套面向微信小程序初学者与进阶开发者的完整项目源码，围绕小程序前端开发全流程展开，适合正在做课程设计、毕业设计或想通过真实项目熟悉小程序开发的同学参考。资源包共106个文件，以js逻辑脚本、wxml页面结构、wxss样式表、json配置文件为主，另含png图片素材、gif动效、xmind思维导图与md说明文档，压缩包约253KB，体量轻便便于快速导入开发者工具运行调试。内容覆盖页面路由、接口请求封装、列表与详情渲染、用户信息展示等常见模块，从预览文件可见涉及城市数据、影片详情、文章列表与搜索、内容页及网络请求等典型业务场景，能帮助读者理解小程序目录组织方式与组件化写法。目前已有775人学习下载，可作为练手项目对照阅读，也可在此基础上二次改造，快速搭建自己的小程序雏形。

1. 从一份能跑通的微信小程序源码说起

很多开发者第一次接触小程序，卡住的地方往往不是逻辑写不出来，而是工程跑不起来。下载了一份“微信小程序开发完整代码”，打开开发者工具，控制台一片红，页面白屏，或者点一下按钮就报request:fail。这份资源解决的就是这个问题：它是一套结构完整、可以直接导入微信开发者工具运行的小程序工程代码，覆盖页面路由、组件封装、数据请求、本地缓存、用户授权等常见模块。适合两类人：一是刚学完基础语法、想找一个真实工程对照练手的新手；二是接过外包或公司内部需求、需要快速搭出可交付原型的熟手。下面我按“先看清结构、再跑起来、最后动手改”的顺序，把这份代码拆开讲一遍。

2. 工程结构拆解：从 app.json 到页面目录的完整链路

拿到一份小程序源码，第一件事不是急着点编译，而是先看目录。小程序的工程结构比普通前端项目更“约定式”，很多配置写错一个字段，整个页面就出不来。这份代码的根目录结构大致如下：

├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── sitemap.json ├── pages/ │ ├── index/ │ ├── detail/ │ └── user/ ├── components/ │ ├── card/ │ └── loading/ ├── utils/ │ ├── request.js │ └── storage.js └── static/ └── images/

2.1 全局配置三件套：app.js、app.json、app.wxss

app.json是小程序的全局配置入口，决定了页面路径、窗口表现、底部 tabBar 等。这份代码里pages数组的第一项就是启动页，顺序不能乱：

{ "pages": [ "pages/index/index", "pages/detail/detail", "pages/user/user" ], "window": { "navigationBarTitleText": "示例小程序", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/user/user", "text": "我的" } ] }, "sitemapLocation": "sitemap.json" }

这里有几个参数值得注意：pages第一项是启动页，改成别的页面就能换首页；tabBar.list里的pagePath必须和pages中注册的路径完全一致，少一个斜杠都会导致 tab 不显示。app.js里通常放全局生命周期和全局数据：

App({ globalData: { userInfo: null, baseUrl: 'https://example.com/api' }, onLaunch() { // 启动时读取本地缓存中的登录态 const token = wx.getStorageSync('token'); if (token) { this.globalData.token = token; } } });

onLaunch只执行一次，适合做登录态恢复、版本检查这类初始化动作。globalData是全局共享的，但注意它不会自动同步到页面，页面里要用getApp().globalData主动取。

2.2 页面目录的四个文件各管什么

每个页面目录下通常有四个同名文件：.js、.json、.wxml、.wxss。.js管逻辑和生命周期，.json管页面级配置（比如导航栏标题），.wxml是模板结构，.wxss是样式。这份代码的pages/index里，index.json单独覆盖了标题：

{ "navigationBarTitleText": "首页", "usingComponents": { "card": "/components/card/card" } }

usingComponents是页面引入自定义组件的关键，路径用绝对路径或相对路径都行，但绝对路径更不容易出错。很多人改完组件路径忘了同步这里，结果组件不渲染，控制台只报一句Component is not found，排查半天。

2.3 工具层封装：request.js 和 storage.js

utils/request.js是对wx.request的二次封装，统一处理 baseUrl、token 注入和错误提示：

const app = getApp(); function request(options) { const { url, method = 'GET', data = {} } = options; return new Promise((resolve, reject) => { wx.request({ url: app.globalData.baseUrl + url, method, data, header: { 'content-type': 'application/json', 'Authorization': app.globalData.token || '' }, success(res) { if (res.statusCode === 200) { resolve(res.data); } else { wx.showToast({ title: '请求失败', icon: 'none' }); reject(res); } }, fail(err) { wx.showToast({ title: '网络异常', icon: 'none' }); reject(err); } }); }); } module.exports = { request };

这段封装的价值在于：页面里不用重复写 header 和错误处理，调用时只关心业务数据。参数说明：url是相对路径，拼接baseUrl后才是完整地址；method默认 GET；data是请求参数。注意getApp()在模块顶层调用时可能拿不到实例，常见做法是放到函数内部再取。

3. 跑起来：导入、配置、真机预览的完整步骤

代码结构看清之后，下一步就是让它真正跑起来。这一章按操作顺序走一遍，每一步都说明为什么这么做、失败时看哪里。

3.1 导入项目与 project.config.json 的关键字段

打开微信开发者工具，选择“导入项目”，目录指向源码根目录。工具会读取project.config.json里的配置：

{ "appid": "touristappid", "projectname": "demo-miniprogram", "setting": { "urlCheck": false, "es6": true, "minified": false } }

appid如果暂时没有自己的小程序账号，可以用测试号，工具会生成一个临时 appid。urlCheck设为false时，开发阶段不会校验请求域名，方便本地联调；但上线前必须改回true并在后台配置合法域名。es6开启后可以用箭头函数、模板字符串等语法，工具会自动转译。

3.2 编译报错的常见来源与定位方法

导入后点“编译”，如果报错，先看控制台第一条红色信息。常见的有三类：一是app.json里pages路径写错，报Page "xxx" is not found；二是组件路径不对，报Component is not found；三是wxss里用了不支持的 CSS 选择器，比如*通配符在小程序里不支持。定位方法很简单：报错信息里通常会带文件路径和行号，直接跳过去看。如果控制台没报错但页面白屏，检查wxml里是不是绑定了未定义的数据，或者wx:if条件永远为假。

3.3 真机预览与域名配置

模拟器跑通后，点“预览”生成二维码，用手机扫码就能真机查看。真机上最容易翻车的是网络请求：模拟器里urlCheck: false能过，真机上必须走合法域名。如果接口是本地服务，真机访问不到localhost，常见做法是用内网穿透工具映射一个临时域名，或者把接口部署到测试服务器。另外，真机预览时wx.getUserProfile等授权接口的行为和模拟器有差异，建议在真机上完整走一遍授权流程。

4. 核心模块实战：请求封装、组件通信与本地缓存

跑通之后，真正决定代码好不好改的，是几个核心模块的设计。这一章挑三个最常被二次开发的地方讲。

4.1 请求封装的分层设计

前面看到的request.js是最基础的一层。实际项目里，我一般会再加一层api.js，把每个接口单独定义：

const { request } = require('./request'); const api = { getList(params) { return request({ url: '/list', data: params }); }, getDetail(id) { return request({ url: '/detail', data: { id } }); }, login(code) { return request({ url: '/login', method: 'POST', data: { code } }); } }; module.exports = api;

这样页面里只调api.getList()，接口地址变了只改一处。参数说明：getList接收分页参数，getDetail接收 id，login用 POST 传 code。分层的好处是业务逻辑和网络细节解耦，测试时也容易 mock。

4.2 自定义组件的属性与事件通信

components/card是一个典型的展示型组件，通过properties接收外部数据，通过triggerEvent向父级传事件：

Component({ properties: { title: { type: String, value: '' }, desc: { type: String, value: '' } }, methods: { onTap() { this.triggerEvent('cardtap', { title: this.data.title }); } } });

父页面这样用：

<card title="{{item.title}}" desc="{{item.desc}}" bind:cardtap="handleCardTap" />

properties里的type和value是必填的，value是默认值。triggerEvent的第一个参数是事件名，父级用bind:事件名接收。注意事件名不要用驼峰，小程序里全小写更稳妥。

4.3 本地缓存的读写与过期策略

utils/storage.js封装了带过期时间的缓存：

function setCache(key, value, expire) { const data = { value, expire: expire ? Date.now() + expire : null }; wx.setStorageSync(key, data); } function getCache(key) { const data = wx.getStorageSync(key); if (!data) return null; if (data.expire && Date.now() > data.expire) { wx.removeStorageSync(key); return null; } return data.value; } module.exports = { setCache, getCache };

参数说明：expire是毫秒数，传null表示永不过期。读取时先判断是否过期，过期就删掉并返回null。这个封装适合存登录态、列表缓存等场景。注意wx.setStorageSync有大小限制，单个 key 不要超过 1MB，存大对象前先序列化并评估体积。

5. 避坑与排查：小程序开发中最容易翻车的五个点

这一章是我自己踩过的坑，按“现象 → 原因 → 解决”整理，遇到问题可以对照排查。

5.1 页面白屏但控制台无报错

现象：编译成功，页面一片空白，控制台没有红色错误。原因：wxml里绑定的数据在data中未定义，或者wx:if条件恒为假。解决：在onLoad里console.log(this.data)确认数据是否挂载；检查wx:if的变量名是否拼写错误。

5.2 请求在模拟器正常、真机失败

现象：模拟器里接口返回正常，真机预览时报request:fail。原因：真机不走urlCheck: false的豁免，必须配置合法域名。解决：在小程序后台“开发设置”里添加 request 合法域名，或者开发阶段用测试号并开启“不校验合法域名”选项。

5.3 组件样式不生效

现象：自定义组件里写了样式，页面里完全不生效。原因：小程序组件默认样式隔离，外部样式无法直接影响组件内部。解决：在组件options里设置styleIsolation: 'apply-shared'，或者用外部样式类externalClasses暴露给父级。

5.4 setData 后视图不更新

现象：调用setData修改了数据，但页面没变化。原因：直接修改了this.data的引用而没有走setData，或者setData的路径写错。解决：始终用this.setData({ key: value })；修改数组或对象时用路径写法，如this.setData({ 'list[0].name': 'new' })。

5.5 页面栈超过十层导致跳转失败

现象：连续navigateTo跳转后，某一次点击没反应。原因：小程序页面栈最多十层，超出后navigateTo静默失败。解决：用redirectTo替换navigateTo，或者用navigateBack返回后再跳。常见做法是在跳转前用getCurrentPages().length判断层数。

6. 二次开发改造：从能跑到能交付的几个实用技巧

代码跑通只是起点，真正交付前还得按需求改。这一章说几个我常用的改造思路，都是能直接落地的。

第一个改造点是接口层替换。这份代码的baseUrl写死在app.js的globalData里，实际项目里我一般会按环境区分：

const env = 'dev'; // dev / test / prod const config = { dev: { baseUrl: 'https://dev.example.com/api' }, test: { baseUrl: 'https://test.example.com/api' }, prod: { baseUrl: 'https://api.example.com' } }; App({ globalData: { baseUrl: config[env].baseUrl } });

这样切换环境只改一个变量，不用全局搜索替换。参数说明：env是当前环境标识，config里每个环境对应一个baseUrl。上线前把env改成prod即可。

第二个改造点是页面路由的权限控制。很多小程序需要登录后才能访问某些页面，我一般会在app.js里加一个路由守卫的思路：

function checkAuth() { const token = wx.getStorageSync('token'); if (!token) { wx.redirectTo({ url: '/pages/login/login' }); return false; } return true; } module.exports = { checkAuth };

然后在需要登录的页面onLoad里调用checkAuth()，返回false就直接中断后续逻辑。注意redirectTo不会保留当前页面栈，适合登录页这种不需要返回的场景。

第三个改造点是列表分页的通用封装。这份代码的列表页是写死的静态数据，改成真实接口时，我一般会抽一个useList的思路：

function createListLoader(apiFn, pageSize = 10) { let page = 1; let loading = false; let finished = false; return { async load() { if (loading || finished) return []; loading = true; const res = await apiFn({ page, pageSize }); loading = false; if (res.list.length < pageSize) finished = true; page += 1; return res.list; }, reset() { page = 1; loading = false; finished = false; } }; }

参数说明：apiFn是接口函数，pageSize是每页条数。load返回当前页数据，reset用于下拉刷新。这个封装把分页状态收在闭包里，页面里只关心数据追加。

最后一个技巧是关于调试的。小程序开发者工具的“调试器”里有一个“Storage”面板，可以直接看本地缓存；还有一个“Network”面板，能看到每个请求的耗时和返回。我习惯在request.js里加一行console.log('[request]', url, data)，上线前再注释掉。另外，真机调试时可以用wx.setEnableDebug({ enableDebug: true })打开 vConsole，方便在手机上直接看日志。

从那以后我每次拿到一份新源码，都强制先走一遍“导入 → 编译 → 真机预览 → 改一个接口 → 再预览”的流程，确认整条链路通了再动业务代码。希望帮到你。

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