企业官网建设流程全解析

1. 项目概述：苍穹外卖微信小程序开发实战

"苍穹外卖"是一个典型的餐饮类微信小程序项目，Day6的开发重点聚焦在两个核心模块：HttpClient网络请求库的集成应用，以及微信登录与商品浏览功能的完整实现。作为外卖类小程序，这两个功能直接决定了用户体验的基础质量——前者关乎所有接口调用的稳定性和效率，后者则是用户留存和转化的关键路径。

在真实商业环境中，微信小程序的登录流程需要严格遵循微信官方规范，同时要考虑异常场景的兼容处理；而商品浏览作为用户高频操作场景，其性能优化和交互细节往往成为技术攻坚的重点。本日开发内容正是围绕这些实战痛点展开的。

2. HttpClient在微信小程序中的深度应用

2.1 微信小程序网络请求的特殊性

微信小程序运行在微信原生环境中，与传统浏览器环境存在显著差异：

• 没有标准的window和document对象
• 请求域名需要预先配置在request合法域名列表中
• 并发连接数限制为10个（iOS）或20个（Android）
• 必须使用HTTPS协议（本地开发环境可临时开启不校验）

这些限制使得直接使用wx.requestAPI开发复杂业务时，会面临以下典型问题：

1. 重复的header配置和错误处理逻辑
2. 缺乏请求拦截和响应拦截机制
3. 难以统一管理API基础路径
4. 超时重试等高级功能需要手动实现

2.2 HttpClient选型与封装实践

在苍穹外卖项目中，我们基于微信原生API封装了符合业务需求的HttpClient层。核心设计要点包括：

基础封装示例：

class HttpClient { constructor(baseURL) { this.baseURL = baseURL this.interceptors = { request: [], response: [] } } async request(url, method = 'GET', data = {}, header = {}) { // 请求拦截处理 let requestConfig = { url, method, data, header } for (const interceptor of this.interceptors.request) { requestConfig = await interceptor(requestConfig) } // 构造完整URL const fullUrl = `${this.baseURL}${url}` return new Promise((resolve, reject) => { wx.request({ url: fullUrl, method, data: requestConfig.data, header: requestConfig.header, success: (res) => { // 响应拦截处理 let response = res for (const interceptor of this.interceptors.response) { response = interceptor(response) } resolve(response.data) }, fail: (err) => { reject(err) } }) }) } // 快捷方法 get(url, params = {}) { return this.request(url, 'GET', params) } post(url, data = {}) { return this.request(url, 'POST', data) } }

关键增强功能实现：

1. Token自动管理：

// 请求拦截器示例：自动添加Token httpClient.interceptors.request.use((config) => { const token = wx.getStorageSync('token') if (token) { config.header = { ...config.header, 'Authorization': `Bearer ${token}` } } return config })

2. 401状态码自动刷新Token：

// 响应拦截器示例：Token过期处理 httpClient.interceptors.response.use( (response) => response, async (error) => { if (error.statusCode === 401) { try { const newToken = await refreshToken() wx.setStorageSync('token', newToken) // 重试原始请求 return httpClient.request(error.config) } catch (refreshError) { // 跳转到登录页 wx.redirectTo({ url: '/pages/login/index' }) return Promise.reject(refreshError) } } return Promise.reject(error) } )

3. 请求重试机制：

const retryAdapter = (adapter, options) => { const { times = 3, delay = 300 } = options return async (config) => { let retryCount = 0 const request = async () => { try { return await adapter(config) } catch (err) { if (retryCount >= times) throw err retryCount++ await new Promise(resolve => setTimeout(resolve, delay)) return request() } } return request() } } // 使用示例 httpClient.adapter = retryAdapter(httpClient.adapter, { times: 2, delay: 500 })

重要提示：微信小程序中所有网络请求域名必须提前在「微信公众平台」→「开发」→「开发设置」→「服务器域名」中配置，否则真机调试时会报错"不在以下 request 合法域名列表中"。

3. 微信登录全流程实现与优化

3.1 微信登录技术方案选型

微信小程序提供两种主要登录方式：

苍穹外卖采用"静默登录+按钮登录"的双阶段方案：

1. 小程序启动时自动执行静默登录，建立基础用户会话
2. 下单等关键操作前触发按钮登录，获取完整用户信息

3.2 完整登录流程实现

步骤1：静默登录获取code

// app.js App({ onLaunch() { wx.login({ success: (res) => { if (res.code) { this.globalData.loginCode = res.code // 发送code到后端换取openid this.checkSession() } } }) }, checkSession() { wx.checkSession({ success: () => { // session_key未过期 this.autoLogin() }, fail: () => { // session_key已过期，需要重新登录 wx.login() } }) } })

步骤2：后端会话建立（Node.js示例）

const axios = require('axios') const jwt = require('jsonwebtoken') async function wechatLogin(code) { // 1. 用code换取openid const appid = 'your-appid' const secret = 'your-secret' const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${code}&grant_type=authorization_code` const response = await axios.get(url) const { openid, session_key } = response.data // 2. 生成自定义登录态 const token = jwt.sign( { openid, exp: Math.floor(Date.now() / 1000) + 86400 }, 'your-secret-key' ) return { token, openid } }

步骤3：前端Token管理优化

// 封装登录检查逻辑 function ensureLogin() { return new Promise((resolve, reject) => { const token = wx.getStorageSync('token') if (token) { resolve(token) } else { // 触发完整登录流程 wx.showModal({ title: '登录提示', content: '需要您登录后才能继续操作', success: (res) => { if (res.confirm) { wx.navigateTo({ url: '/pages/login/index' }) } reject(new Error('用户取消登录')) } }) } }) }

3.3 登录环节常见问题排查

问题1：反复跳转登录页

• 现象：用户每次打开小程序都需要重新登录
• 原因：未正确处理session_key过期场景
• 解决方案：在app.js中加入checkSession逻辑

问题2：获取用户信息弹窗不出现

• 现象：<button open-type="getUserInfo">点击无反应
• 检查清单：
  1. 确认按钮不是disabled状态
  2. 确认按钮有绑定bindgetuserinfo事件
  3. 确认小程序基础库版本≥1.4.0

问题3：iOS设备登录异常

• 特殊处理：iOS端需要确保服务器时间与微信服务器时间同步
• 解决方案：后端接口返回服务器时间戳，前端做本地校准

4. 商品浏览功能的高性能实现

4.1 商品列表渲染优化

外卖类小程序的核心性能瓶颈往往出现在商品列表页，特别是当分类下有数百个商品时。我们采用三级优化策略：

1. 数据分页加载

// 商品列表加载逻辑 let currentPage = 1 const pageSize = 10 function loadProducts(categoryId) { httpClient.get('/products', { categoryId, page: currentPage, size: pageSize }).then(data => { if (data.length > 0) { currentPage++ this.setData({ products: [...this.data.products, ...data] }) } }) } // 滚动触底加载 onReachBottom() { this.loadProducts(this.data.currentCategory) }

2. 虚拟列表技术对于特别长的列表（>100项），采用按需渲染：

// wxml结构优化 <scroll-view scroll-y style="height: 100vh;" bindscroll="handleScroll" > <view wx:for="{{visibleProducts}}" wx:key="id" style="height: {{item.height}}px;" > <!-- 商品项内容 --> </view> </scroll-view> // JS计算可见项 handleScroll(e) { const scrollTop = e.detail.scrollTop const viewportHeight = this.data.viewportHeight const startIdx = Math.floor(scrollTop / this.data.averageHeight) const endIdx = startIdx + Math.ceil(viewportHeight / this.data.averageHeight) + 5 this.setData({ visibleProducts: this.data.allProducts.slice(startIdx, endIdx) }) }

3. 图片懒加载

<!-- 使用微信原生lazy-load属性 --> <image src="{{product.image}}" mode="aspectFill" lazy-load ></image>

4.2 商品搜索与筛选实现

外卖场景下，高效的搜索筛选直接影响用户下单速度：

1. 防抖搜索实现

let searchTimer = null onSearchInput(e) { const keyword = e.detail.value.trim() // 清除上一个定时器 if (searchTimer) clearTimeout(searchTimer) // 设置新的定时器 searchTimer = setTimeout(() => { this.searchProducts(keyword) }, 300) }

2. 多条件筛选优化

// 筛选条件数据结构 filters: { sortBy: 'default', // default/price/rating priceRange: [0, 100], onlyDiscount: false, categoryIds: [] } // 筛选执行方法 applyFilters() { const params = { sort: this.data.filters.sortBy, minPrice: this.data.filters.priceRange[0], maxPrice: this.data.filters.priceRange[1], hasDiscount: this.data.filters.onlyDiscount, categories: this.data.filters.categoryIds.join(',') } httpClient.get('/products/filter', params) .then(data => this.setData({ products: data })) }

4.3 商品详情页性能优化

1. 预加载策略

// 在列表页预加载详情数据 onProductTap(e) { const productId = e.currentTarget.dataset.id wx.preloadPage({ url: `/pages/product/detail?id=${productId}`, data: { productId } }) wx.navigateTo({ url: `/pages/product/detail?id=${productId}` }) }

2. 缓存策略

// 详情页数据加载逻辑 loadProductDetail(productId) { // 先检查缓存 const cacheKey = `product_${productId}` const cachedData = wx.getStorageSync(cacheKey) if (cachedData) { this.setData({ product: cachedData }) } // 同时发起网络请求 httpClient.get(`/products/${productId}`) .then(data => { this.setData({ product: data }) // 设置缓存（有效期1小时） wx.setStorage({ key: cacheKey, data: data, expires: Date.now() + 3600000 }) }) }

5. 微信小程序开发实战技巧

5.1 调试技巧进阶

1. 真机调试特殊场景处理

• 安卓设备可能出现request:fail ssl hand shake error： 解决方案：确保服务器TLS版本≥1.2，禁用不安全的加密套件

• iOS设备可能出现白屏： 解决方案：检查所有图片域名是否都已配置到downloadFile合法域名

2. 性能分析工具使用

// 自定义性能埋点 const perf = { start: {}, marks: {}, mark(name) { this.marks[name] = Date.now() console.log(`[Perf] ${name}: ${this.marks[name] - this.start.time}`) }, startTracking() { this.start.time = Date.now() this.start.memory = wx.getPerformance().now() } } // 使用示例 Page({ onLoad() { perf.startTracking() perf.mark('page_load_start') }, onReady() { perf.mark('page_ready') } })

5.2 安全防护措施

1. 接口防刷策略

// 后端接口防护示例（Node.js） const rateLimit = require('express-rate-limit') const apiLimiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15分钟 max: 100, // 每个IP限制100次请求 handler: (req, res) => { res.status(429).json({ code: 429, message: '请求过于频繁，请稍后再试' }) } }) app.use('/api/', apiLimiter)

2. 敏感数据保护

• 用户手机号等敏感信息必须加密存储
• 禁止在前端存储或传输用户明文密码
• 使用微信提供的加密数据解密接口处理敏感数据

5.3 异常监控体系

1. 前端错误收集

// app.js中全局错误监听 App({ onError(err) { wx.request({ url: 'https://your-monitor-domain.com/collect', method: 'POST', data: { type: 'js_error', message: err.message, stack: err.stack, timestamp: Date.now(), version: '1.0.0' } }) } })

2. API异常监控

// 在HttpClient拦截器中添加错误上报 httpClient.interceptors.response.use( response => response, error => { // 上报错误 wx.request({ url: 'https://your-monitor-domain.com/collect', method: 'POST', data: { type: 'api_error', url: error.config.url, status: error.statusCode, message: error.message, timestamp: Date.now() } }) return Promise.reject(error) } )

6. 项目部署与持续集成

6.1 微信小程序CI/CD流程

推荐工具链配置：

• 代码托管：GitLab/GitHub
• 构建工具：微信开发者工具CLI
• CI服务：Jenkins/GitHub Actions
• 部署方式：微信开发者工具上传

GitHub Actions示例：

name: WeChat MiniProgram CI on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Setup Node.js uses: actions/setup-node@v2 with: node-version: '14' - name: Install Dependencies run: npm install - name: Build Project run: npm run build - name: Upload to WeChat uses: wechat-miniprogram/ci-action@v1 with: appid: ${{ secrets.APPID }} privateKey: ${{ secrets.PRIVATE_KEY }} version: ${{ github.sha }} desc: 'Auto deploy by CI'

6.2 灰度发布策略

微信小程序灰度发布步骤：

1. 在「微信公众平台」→「管理」→「版本管理」中创建灰度发布
2. 选择要灰度的版本和比例（通常从1%开始）
3. 通过以下API检查用户是否在灰度名单中：

wx.getUpdateManager().onCheckForUpdate(res => { if (res.hasUpdate) { // 用户在灰度名单中 } })

灰度发布监控指标：

• 版本覆盖率
• 错误率对比
• 关键转化率变化
• 性能指标差异

7. 项目优化与扩展方向

7.1 性能优化进阶方案

1. 分包加载策略

// app.json配置示例 { "subPackages": [ { "root": "packageA", "pages": [ "pages/product/list", "pages/product/detail" ] }, { "root": "packageB", "pages": [ "pages/user/center", "pages/user/settings" ] } ], "preloadRule": { "pages/index/index": { "network": "all", "packages": ["packageA"] } } }

2. 数据预取策略

// 在适合的时机预取数据 function prefetchData() { // 预取热门分类 httpClient.get('/categories/hot') .then(data => wx.setStorageSync('hotCategories', data)) // 预取用户常用地址 if (wx.getStorageSync('token')) { httpClient.get('/user/addresses') .then(data => wx.setStorageSync('userAddresses', data)) } }

7.2 业务功能扩展

1. 实时订单状态推送

// 建立WebSocket连接 const socket = wx.connectSocket({ url: 'wss://your-websocket-url.com', success: () => { socket.onMessage(res => { const data = JSON.parse(res.data) if (data.type === 'ORDER_UPDATE') { this.updateOrderStatus(data.orderId, data.status) } }) } })

2. 智能推荐系统集成

// 获取用户行为数据 const userBehavior = { viewProducts: this.data.viewHistory, searchKeywords: this.data.searchHistory, orderItems: this.data.orderHistory } // 获取推荐结果 httpClient.post('/recommend', userBehavior) .then(recommendations => { this.setData({ recommendedProducts: recommendations }) })

在实际开发苍穹外卖小程序的过程中，最大的体会是微信生态的开发既需要遵循平台规范，又要在限制中找到性能优化的空间。特别是在网络请求管理和用户登录流程上，一个健壮的封装能显著降低后续维护成本。商品浏览功能的实现则教会我们，在移动端环境下，即使是简单的列表展示也需要考虑极端数据量情况下的性能表现。