企业官网建设流程全解析

简介：这是一套面向微信小程序开发者与酒类电商创业者的酒类商城模板源码，适合希望快速搭建在线酒品销售平台、又不想从零编写代码的初中级开发者。压缩包共190个文件，约406KB，以png图片、js逻辑脚本、wxss样式表、json配置和wxml结构文件为主，另含少量xml、jpg及说明文档，覆盖页面渲染、数据交互与界面配置等环节。项目主体位于jjb-wx-master目录，包含app.js入口与app.json全局配置、pages页面集合、utils工具函数、components自定义组件、images图片素材、styles公共样式，以及request.js网络请求封装、config.js接口配置和project.config.json开发者工具配置，结构清晰、模块划分明确。目前已有457人学习下载。借助这套源码，读者可快速理解酒类商城的页面组织与请求封装方式，并在此基础上替换商品信息、接入支付接口、调整界面样式，高效完成自己的小程序项目。

1. 酒类商城小程序源码拆包：一份能跑通的电商前端骨架

前阵子帮朋友看一个卖精酿的门店小程序，他拿到的是一份酒类商城模板微信小程序源码.rar，解压后目录结构挺规整，pages 里商品列表、详情、购物车、订单、个人中心一应俱全，app.json 里 tabBar 配了四个入口。这类酒类商城模板微信小程序源码，本质是一套原生微信小程序写的电商前端骨架，后端接口用 mock 数据或占位 URL 顶着，适合两类人：一是想快速搭一个酒水垂直电商 demo 的开发者，二是拿它当小程序页面结构和组件拆分的参考样本。它解决的不是“从零写一个商城”，而是“省掉列表页、详情页、购物车联动这些重复劳动”。下面按拆包、跑通、改接口、避坑、进阶的顺序讲，新手能照着复现，熟手能直接看参数边界。

2. 解压后先看什么：目录结构与页面注册链路

拿到压缩包别急着往开发者工具里拖，先花五分钟把目录和配置文件过一遍，能省掉后面一半的报错排查时间。酒类商城模板这类源码，结构基本遵循原生小程序的约定，但不同作者的习惯差异很大，有的把组件塞在components，有的直接写在页面里，先摸清楚再动手。

2.1 目录层级与关键文件定位

解压后典型结构长这样，我用tree列一下核心部分：

# 解压后进入项目根目录，查看两层结构 unzip 酒类商城模板微信小程序源码.rar -d wine-mall cd wine-mall find . -maxdepth 2 -type d | sort

常见输出会是pages/、components/、utils/、images/、static/这几类。重点看三个文件：app.json决定页面注册和 tabBar，app.js管全局登录态和请求封装，project.config.json里的appid决定你能不能真机预览。如果app.json的pages数组里列了十几个页面，但目录里只有五六个文件夹，说明作者删过页面没同步配置，启动就会报“page not found”。

app.json里还要留意tabBar的list数量和pagePath是否和实际路径大小写一致。Windows 解压出来的路径有时会带大写，而小程序路径区分大小写，Pages/Index和pages/index在开发者工具里就是找不到。

2.2 页面注册与启动页判定

app.json的pages数组第一项就是启动页。很多酒类模板把pages/index/index放第一位，但如果你想让商品列表先出来，就得手动调顺序：

{ "pages": [ "pages/goods/list", "pages/index/index", "pages/cart/cart", "pages/order/confirm" ], "window": { "navigationBarTitleText": "酒类商城", "navigationBarBackgroundColor": "#8B0000" }, "tabBar": { "list": [ { "pagePath": "pages/goods/list", "text": "选酒" }, { "pagePath": "pages/cart/cart", "text": "购物车" }, { "pagePath": "pages/user/user", "text": "我的" } ] } }

改完pages顺序后，开发者工具会以第一项作为编译入口。注意tabBar的pagePath必须也在pages数组里，否则点击 tab 直接白屏。这一步的逻辑说明很简单：小程序没有路由表概念，pages数组既是注册表也是启动顺序表，tabBar只是从注册表里挑几个做底部导航。参数上，navigationBarBackgroundColor用深红色是酒类商城的常见视觉，但别用纯黑，真机上状态栏文字会看不清。

提示：改完app.json后如果开发者工具没刷新，点一下“编译”而不是“预览”，预览走的是上一次的包。

3. 把 mock 数据换成真接口：请求封装与商品列表渲染

模板能跑起来不代表能用，大部分酒类商城源码的商品数据是写死在data里的，或者用utils/mock.js返回假数组。要让它变成能对接后端的项目，得先找到请求层，再把列表页的渲染链路捋顺。

3.1 请求封装与 baseURL 替换

先全局搜wx.request，看作者有没有做统一封装。常见做法是在utils/request.js里包一层：

// utils/request.js const BASE_URL = 'https://your-api.example.com/api'; function request(options) { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.data || {}, header: { 'content-type': 'application/json', 'Authorization': wx.getStorageSync('token') || '' }, success(res) { if (res.statusCode === 200 && res.data.code === 0) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || '请求失败', icon: 'none' }); reject(res.data); } }, fail(err) { wx.showToast({ title: '网络异常', icon: 'none' }); reject(err); } }); }); } module.exports = { request };

这段代码的关键参数有三个：BASE_URL换成你自己的域名，Authorization从本地缓存取 token，res.data.code === 0是约定成功码。逻辑上，Promise 封装是为了在页面里用async/await，比回调清爽。注意header里content-type写application/json时，data传对象会自动序列化，别手动JSON.stringify，否则后端收到双重编码。

替换完请求层，去pages/goods/list.js把onLoad里的假数据调用改成request({ url: '/goods/list' })。如果模板用的是mock.js，直接删掉引用，别留着，否则打包体积白涨。

3.2 商品列表渲染与分页参数

列表页通常用wx:for渲染，核心是data.list和分页。常见坑是下拉刷新和上拉加载共用一个page变量，导致重复请求。我一般这样写：

// pages/goods/list.js const { request } = require('../../utils/request'); Page({ data: { list: [], page: 1, pageSize: 10, hasMore: true, loading: false }, onLoad() { this.fetchList(); }, async fetchList() { if (this.data.loading || !this.data.hasMore) return; this.setData({ loading: true }); try { const res = await request({ url: '/goods/list', data: { page: this.data.page, size: this.data.pageSize } }); this.setData({ list: this.data.list.concat(res.items), page: this.data.page + 1, hasMore: res.items.length === this.data.pageSize, loading: false }); } catch (e) { this.setData({ loading: false }); } }, onReachBottom() { this.fetchList(); }, onPullDownRefresh() { this.setData({ list: [], page: 1, hasMore: true }); this.fetchList().then(() => wx.stopPullDownRefresh()); } });

逻辑说明：loading做请求锁，防止上拉时连续触发；hasMore用返回条数是否等于pageSize判断，比后端给 total 更省事，但要求后端最后一页返回少于pageSize。参数上，pageSize别设太大，10 到 20 之间，小程序setData一次传太多数据会卡渲染。onPullDownRefresh里重置list和page再请求，注意wx.stopPullDownRefresh要在请求结束后调，否则下拉圈一直转。

注意：如果后端返回的是{ code, data: { list, total } }，上面的res.items要改成res.data.list，别照抄，先看接口文档。

4. 购物车与登录态：本地存储和手机号获取的边界

酒类商城绕不开购物车和登录，模板里这两块往往是半成品。购物车用wx.setStorageSync存本地，登录用wx.login换 openid，但手机号获取有硬性限制，得说清楚。

4.1 购物车本地存储与数量同步

模板的购物车常见问题是：详情页加购后，购物车 tab 的红点不更新。原因是 tabBar 红点要手动调wx.setTabBarBadge，不会自动监听 storage。做法是在加购成功后同步更新：

// 加购逻辑 function addToCart(goods) { const cart = wx.getStorageSync('cart') || []; const idx = cart.findIndex(item => item.id === goods.id); if (idx > -1) { cart[idx].count += 1; } else { cart.push({ ...goods, count: 1, checked: true }); } wx.setStorageSync('cart', cart); // 同步 tabBar 红点 const total = cart.reduce((sum, item) => sum + item.count, 0); if (total > 0) { wx.setTabBarBadge({ index: 1, text: String(total > 99 ? '99+' : total) }); } else { wx.removeTabBarBadge({ index: 1 }); } }

参数说明：index: 1对应 tabBar 第二个位置，得和你app.json里购物车的顺序一致。text最长四个字符，超过 99 用99+。逻辑上，storage 是同步的，但 tabBar 红点不是响应式的，每次增删改都要手动调一次。购物车页onShow里也要重新读 storage 并setData，否则从详情页返回时数量对不上。

4.2 微信小程序登录获取手机号的正确姿势

热搜里“微信小程序登录获取手机号”问的人多，这里说清楚边界。wx.getPhoneNumber需要button组件的open-type="getPhoneNumber"触发，且必须企业主体且已认证的小程序才能用，个人号拿不到。流程是：前端点按钮拿到code，传给后端，后端用code换手机号。前端代码：

<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhone">授权手机号</button>

onGetPhone(e) { if (e.detail.code) { // 把 code 发给后端 request({ url: '/user/phone', method: 'POST', data: { code: e.detail.code } }).then(res => { wx.setStorageSync('phone', res.phone); }); } else { wx.showToast({ title: '已取消授权', icon: 'none' }); } }

注意e.detail.code是新版返回，老版本是encryptedData+iv，两者别混用。个人开发者测试时可以用wx.login拿code换 openid 做静默登录，手机号这块只能跳过或让用户手动填。酒类商城如果要做会员价，手机号是刚需，但认证费用和主体资质得提前确认，别写完才发现用不了。

5. 避坑排查：酒类商城模板跑不起来的五个血泪经验

这一章全是翻车记录，每条按现象、原因、解决写，照着排查能省半天。

5.1 编译报错“app.json 未找到”或页面白屏

现象：开发者工具导入后直接报app.json找不到，或者编译成功但页面全白。原因通常是解压时多套了一层文件夹，比如wine-mall/wine-mall/app.json，工具导入的是外层。解决：导入时选中含app.json的那一层，或者把内层文件全选剪切到外层。另一个原因是project.config.json里的miniprogramRoot指向了子目录，改成"./"即可。

5.2 图片全部 404 或显示裂图

现象：商品图、tabBar 图标全裂。原因：模板里的图片路径写的是作者本地绝对路径，或者用了http://外链而小程序只允许https。解决：全局搜src="和iconPath，把http://换成https://，本地图确认images/目录里真有对应文件。如果图片在static但引用写images，统一改路径。

5.3 请求全部失败但域名没错

现象：wx.request报request:fail url not in domain list。原因：小程序开发阶段要在“详情-本地设置”勾选“不校验合法域名”，否则只允许https且已备案域名。解决：开发时勾选跳过校验，上线前在微信公众平台配置request合法域名。注意localhost和 IP 地址在真机上永远不通，真机调试要用内网穿透或部署到服务器。

5.4 购物车数量错乱或红点不消失

现象：加购后红点数字不对，删商品后红点还在。原因：多处修改 storage 但没统一调setTabBarBadge，或者index写错。解决：把购物车增删改封装成一个函数，内部统一更新 storage 和红点。index从 0 开始数，和tabBar.list顺序一一对应。删空后调wx.removeTabBarBadge。

5.5 真机预览正常但体验版白屏

现象：开发者工具和真机预览都正常，上传体验版后白屏。原因：体验版走的是线上环境，BASE_URL如果是内网地址或http，直接失败。解决：上传前把BASE_URL换成已备案https域名，并在公众平台配置合法域名。另外检查有没有用eval或动态require，体验版会拦截。

6. 进阶：用分包和骨架屏把首屏压到 1 秒内

模板跑通后，如果商品多、图片大，首屏加载会明显卡。微信小程序主包限制 2MB，酒类商城图片一多很容易超。常见做法是分包：把商品详情、订单这些非首屏页面拆到subpackages，主包只留列表和购物车。

{ "subpackages": [ { "root": "packageGoods", "pages": ["detail/detail", "comment/comment"] }, { "root": "packageOrder", "pages": ["confirm/confirm", "list/list"] } ] }

分包后，主包体积能降三到四成。注意分包页面路径要写全，跳转用wx.navigateTo({ url: '/packageGoods/detail/detail?id=1' })。另外图片全部走 CDN 并加?x-oss-process=image/resize,w_300这类压缩参数，别把原图塞进包。

骨架屏是另一个提升体感的手段。列表页在data.loading为 true 时渲染灰色占位块，比转圈圈显得快。我一般用wx:if切换：

<view wx:if="{{loading}}" class="skeleton"> <view class="skeleton-item" wx:for="{{[1,2,3]}}" wx:key="*this"></view> </view> <view wx:else class="goods-list"> <view wx:for="{{list}}" wx:key="id">...</view> </view>

骨架块的宽高用rpx写死，和真实卡片对齐，切换时不会跳。验证方法很简单：开发者工具里把网络调成“慢速 3G”，看首屏从白屏到有内容的时间，分包加骨架屏后一般能从两三秒压到一秒出头。

从那以后我每次拿到这类商城模板，都强制先跑一遍分包检查和图片压缩，再动业务代码。希望帮到你。

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