简介这是一份微信小程序打车客户端的完整源码定位为小程序初学者的实战参考覆盖了项目搭建、页面布局、网络请求、本地存储、授权登录等多环节关键功能。压缩包共42个文件以js逻辑脚本和vue页面组件为主辅以图片素材、babel等配置文件与README说明文档整体仅有125KB结构精炼便于通读与二次开发。目前已有67人学习浏览作者为qqrrjj2011项目内部分模块清晰包含工具函数、状态管理、组件复用等组织方式有助于学习者理解小程序工程化的常见写法。借助这份源码可以快速掌握微信开发者工具的使用、WXML与WXSS的配合书写、数据缓存与wx.request网络请求的实践并熟悉从开发调试到审核上线的完整思维路径。虽然体量不大但配置齐全适合作为第一个独立练习的小程序项目或者课程设计与毕业设计的参考蓝本。1. 从“一起打车吧”这个 zip 里先搞懂微信小程序客户端能做什么“一起打车吧微信小程序客户端.zip”听起来是一个完整的打车业务前端工程解压后你会看到 pages、components、utils 这类目录也可能夹杂图片资源和一堆配置文件。很多人拿到这种包的第一反应是直接导入开发者工具结果不是报 appid 无效就是地图白屏。这块客户端的本质不是“有界面就能跑”而是由小程序的运行环境、微信生态能力定位、登录、支付和业务页面共同组成的工程合集。这里不打算逐行读源码而是从项目结构、核心页面、运行调试和上线前检查这几个角度把一个打车类微信小程序客户端拆开讲清楚适合正在做微信小程序开发、接手别人工程或准备从零复刻打车流程的开发者。2. 微信小程序客户端的项目骨架与运行前提2.1 解压后先看这几个关键文件app.json、app.js、project.config.json一个微信小程序客户端无论业务多复杂入口都收敛在app.json。这个文件里声明了页面的注册路径、窗口外观、tabBar 和权限申请。打车类项目通常会有pages/index/index首页、pages/order/order订单、pages/my/my我的等页面这些页面必须出现在 pages 数组里否则跳转时会报page route not found。{ pages: [ pages/index/index, pages/order/order, pages/my/my ], window: { navigationBarTitleText: 一起打车吧, navigationBarBackgroundColor: #F5F5F5, navigationBarTextStyle: black }, permission: { scope.userLocation: { desc: 用于选择上车点与展示司机位置 } }, requiredPrivateInfos: [getLocation, chooseLocation], tabBar: { list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/order/order, text: 订单 }, { pagePath: pages/my/my, text: 我的 } ] } }逻辑说明requiredPrivateInfos是 2022 年之后微信平台强制要求的需要单独列出getLocation和chooseLocation否则定位接口在真机上会被直接拒绝。permission 字段里的用途描述要写清楚代码审核时可能被核查。window 里的 navigationBar 配置决定顶部导航栏背景色与文字颜色如果项目里用了自定义导航栏这里就要打开navigationStyle: custom并按胶囊高度做适配。project.config.json 是开发者工具的项目级配置里面比较重要的是appid和compileType。appid留空时真机预览会受限如果这个 zip 里带的是前开发者留下的 appid建议换成自己的测试号或正式 appid。另外如果解压后看到的不是 app.json 而是 manifest.json 和 pages.json那说明这是一个 uni-app 工程需要用 HBuilderX 打开再运行到微信开发者工具不能在原生小程序工具里直接编译。2.2 登录态与游客态wx.login 之后的 token 流转打车业务的下单、支付和评价都依赖用户身份。微信小程序的常规做法是使用wx.login换取临时 code再将 code 发给后端换取 openid 和 session_key。但很多客户端的 zip 包里并没有完整的后端联调条件因此前端要预留好登录流程的抽象层。// utils/auth.js function login() { return new Promise((resolve, reject) { wx.login({ success(res) { if (res.code) { // 将 code 交给业务后端由后端调用 jscode2session 接口换取 openid wx.request({ url: https://api.example.com/login, method: POST, data: { code: res.code }, success: (loginRes) { const { token } loginRes.data.data; wx.setStorageSync(token, token); resolve(token); }, fail: reject }); } else { reject(new Error(登录失败)); } }, fail: reject }); }); }参数说明wx.login返回的 code 只有 5 分钟有效期且每次调用都会变化。下单时应该使用后端返回的 token 而不是 code 来标识用户。如果项目里暂时没有后端可以用一个固定 token 做模拟但要避免把正常逻辑和 mock 逻辑混在一起建议在config.js中增加IS_MOCK开关登录失败时也允许用户以游客身份进入首页。游客态在打车场景里是一个被忽略但重要的状态用户可能只想知道线路预估价格。此时客户端可以先渲染首页再异步调用登录当用户发起下单时如果 token 不存在就弹窗引导登录。这样做能显著降低新用户流失。2.3 顶部导航栏与自定义导航栏的高度适配微信小程序顶部导航栏在不同机型上高度不一致尤其当你在打车首页需要嵌入地图时默认导航栏往往不够灵活。常见做法是把首页设置为自定义导航栏然后用wx.getMenuButtonBoundingClientRect获取右上角胶囊按钮的位置。// utils/nav.js function getNavBarInfo() { const menuRect wx.getMenuButtonBoundingClientRect(); const systemInfo wx.getSystemInfoSync(); return { statusBarHeight: systemInfo.statusBarHeight, navBarHeight: (menuRect.top - systemInfo.statusBarHeight) * 2 menuRect.height, menuRect }; }把返回值用于页面的内边距可以让导航栏在不同机型上不遮挡内容。打车页面的地图要纵向撑满整屏通常只保留一个悬浮的发单面板此时状态栏区域需要单独着色。还有一个容易踩的坑如果页面内同时使用了 map 组件和自定义导航栏map 组件会自动覆盖到原生导航栏区域导致胶囊按钮被地图遮住。处理办法是把地图的cover-view或者同层渲染配置打开小程序的map组件在部分基础库版本需要设置enable-3d或启用同层渲染才能与普通组件正常叠加。3. 打车核心功能在客户端侧怎么实现3.1 地图选点与定位权限wx.getLocation 和 chooseLocation 的配合打车客户端首先要解决的是“用户在哪里、要去哪里”。常见做法是首页加载时请求定位权限拿到经纬度后反解析出地址文字同时把地图中心点移到该位置。wx.getLocation返回的坐标是 gcj02刚好可以被 map 组件直接使用如果你拿这些数据去调第三方 Web API可能需要先确认对方的坐标系。// pages/index/index.js 节选 Page({ data: { startLat: 0, startLng: 0, startAddress: }, async onLoad() { const loc await this.getCurrentLocation(); this.setData({ startLat: loc.latitude, startLng: loc.longitude }); this.reverseGeocode(loc.latitude, loc.longitude); }, getCurrentLocation() { return new Promise((resolve, reject) { wx.getLocation({ type: gcj02, success: resolve, fail: reject }); }); }, chooseStartPoint() { wx.chooseLocation({ success: (res) { this.setData({ startLat: res.latitude, startLng: res.longitude, startAddress: res.name || res.address }); this.mapCtx.moveToLocation({ latitude: res.latitude, longitude: res.longitude }); } }); } });参数说明type: gcj02是标准国产坐标map 组件和wx.chooseLocation返回的也是这个坐标系。用户拒绝过授权后直接调用wx.getLocation会立刻走 fail 回调此时要根据wx.getSetting的返回值判断是否应该引导用户去wx.openSetting手动打开权限。地图组件上可以通过markers显示起点和终点拖动地图通过bindregionchange事件获取中心点实现“移动地图选点”。这里要注意做节流因为 regionchange 触发频率很高每次逆地址解析都会消耗配额建议在事件停止后 300 到 400 毫秒再发起请求。3.2 车型选择与计价展示用单选框还是卡片联动打车界面的车型选择不复杂但体验差别很大。一种方式是使用小程序原生 radio-group每一行的 radio 标识车型另一种是用 scroll-view 横向排列车型卡片选中态通过样式变化表达。在打车场景中卡片模式更合适因为车型还要展示价格、预计等待时间和剩余座位信息radio 组件只能放一个小圆圈信息承载能力不足。scroll-view classcar-list scroll-x view classcar-card {{selectedCar item.id ? active : }} wx:for{{carList}} wx:keyid bindtaponSelectCar>// services/order.js const IS_MOCK true; function createOrder(payload) { return new Promise((resolve, reject) { if (IS_MOCK) { setTimeout(() { resolve({ orderId: MOCK Date.now(), status: 1, driverInfo: null }); }, 800); return; } wx.request({ url: https://api.example.com/order/create, method: POST, data: payload, success: res resolve(res.data), fail: reject }); }); }下单成功后跳转到等待接单页页面里用 60 秒倒计时定时器如果倒计时结束仍然没有匹配司机就提示用户重新下单。这里要注意 setInterval 的清理在onUnload里clearInterval否则用户后退之后定时器还会继续执行。等待页可以用wx.showLoading或自定义组件来模拟司机接单动画如果 zip 包里没有轮询逻辑可以增加一个setInterval每 5 秒查询一次订单状态这是真实项目里常见的做法不过要控制频率避免频繁请求把服务端接口打爆。3.4 支付模块的客户端预留微信支付 v3 对接时客户端只做两件事打车行程结束后必然涉及支付。微信支付对服务端签名算法要求严格在客户端 zip 包里通常只有调起支付的这段代码。客户端需要做的两件事是从后端拿到支付参数再调用wx.requestPayment。签名和下单调由服务端负责API v3 密钥和商户证书千万不要出现在小程序目录里。function payOrder(orderId) { return new Promise((resolve, reject) { wx.request({ url: https://api.example.com/pay/params, method: POST, data: { orderId }, success: (res) { const { timeStamp, nonceStr, package: pkg, signType, paySign } res.data.data; wx.requestPayment({ timeStamp, nonceStr, package: pkg, signType, paySign, success: resolve, fail: reject }); } }); }); }参数说明timeStamp是秒级时间戳nonceStr是随机字符串package的值必须是prepay_id...格式paySign由商户私钥对拼接字符串签名。调试时最容易出错的是时间戳前端误用毫秒以及 package 值丢失前缀。常见的“无可用的平台证书”报错根源通常不在客户端而是商户平台没有上传 API 证书或者服务端没有正确加载证书。可以先检查后端日志里的证书序列号是否与请求头里的 serialNo 一致。参数名类型来源常见错误timeStampString服务端生成单位是秒误用毫秒会签名失败nonceStrString服务端生成与下单时的随机串不一致packageString服务端生成丢失prepay_id前缀signTypeString服务端指定与签名算法不一致通常为 RSApaySignString服务端签名使用 API v3 密钥而非 API 密钥4. 把 zip 里的客户端用开发者工具跑起来4.1 导入项目的正确姿势与常见报错从 zip 包解压后不要直接双击 .wxml 或 .js 文件用文本编辑器打开而是打开微信开发者工具选择“导入项目”目录指向解压后的根目录。导入时开发者工具会根据 project.config.json 读取 appid。如果提示“appid 未找到”可以点“使用测试号”也可以换成自己的小程序 appid。常见报错与处理方式报错信息原因解决方式app.json: 未找到入口页面pages 数组中的路径和实际文件名不一致检查第一个页面路径getLocation:fail the api need to be declared in requiredPrivateInfos field缺少 requiredPrivateInfos 字段在 app.json 中补充xxx 不在以下 request 合法域名列表中未配置 request 域名开发时勾选“不校验合法域名”正式环境需配置Failed to load local image resource图片路径包含中文或未正确编码使用绝对路径或重新放置图片如果根目录里有manifest.json说明这是一个 uni-app 工程需要使用 HBuilderX 打开并运行到微信开发者工具而不是直接把目录导入。这也是很多 zip 客户端最常见的坑导入后只有一堆 vue 文件原生工具根本不认识。判断标准是看项目中是否存在pages.json和main.js。提示导入后建议先跑一次“编译”如果看到红色报错定位到某个 npm 包需要先在根目录执行npm install。但微信小程序原生工程通常不需要 npm只有使用 npm 扩展能力时才需要比如引入现有组件库。4.2 用 mock 数据打通完整下单流程后端接口未准备时可以用一个 mock 数据文件把首页、下单页、等待页、支付页整个链路串起来。做法是在每个 service 方法的入口加一个if (IS_MOCK)分支返回固定 JSON。关键点是 mock 数据要和后端约好字段名否则后面联调时会出现大量前端改动。// config/index.js module.exports { IS_MOCK: true, BASE_URL: https://api.example.com, MAP_KEY: , PAY_TYPE: mock };在 mock 模式下下单返回的 orderId 可以是一个时间戳支付参数也可以直接写成固定的假参数但一定不要真的发起支付。联调时要将IS_MOCK改为 false并确保BASE_URL是兼容 HTTPS 的正式域名。PAY_TYPE可以区分 mock 支付和真实支付设置PAY_TYPE mock时点击支付按钮直接提示“模拟支付成功”并跳转到完成页这样能让产品同学尽早确认流程。4.3 真机预览与调试的边界条件开发者工具模拟器和真机之间存在很多差异尤其是定位、网络权限和地图渲染。打车类小程序需要在真机上验证wx.getLocation是否能弹授权框地图 marker 是否被顶部状态栏遮挡。使用“预览”功能生成二维码用微信扫码进入小程序使用“真机调试”可以在手机上查看 console 日志和网络请求这一步骤在排查定位问题时几乎是必做的。真机上最常见的两个现象一是手机定位偏移因为部分机型在室内定位不准wx.getLocation拿到的是一个缓存位置可以在 success 回调里比较前后两次定位的精度值如果 accuracy 大于 200 米就丢弃不采用二是自定义导航栏后在 iPhone 上看到内容跑到胶囊按钮下面需要动态计算导航栏高度并给页面根节点设置 padding-top。如果你要对 PC 端微信小程序做安全测试或抓包常见做法是让 PC 微信的流量经过一个支持 HTTPS 解密的抓包工具需要安装相应 CA 证书并开启 HTTPS 解密小程序开发者工具自带的 Network 面板也能看到大多数请求日常调试优先用它就够了。5. 从 zip 包到可发布的微信小程序三个容易被忽略的细节5.1 地图 key 与 request 合法域名校验地图 key 是打车项目里最容易泄露的配置。不要在前端代码的明文变量里写正式 key但小程序定位和地图功能确实需要 key。常见做法是把 map key 放在后端下发的配置接口中前端启动时拉取并存入内存再在调用 map 组件时使用。如果 zip 包里的 key 是前开发者留下的上线前务必去腾讯位置服务控制台换成自己的否则可能因调用量超限导致地图空白。小程序 request 合法域名也会影响地图服务。开发者工具可以临时勾选“不校验合法域名”但真机上必须把https://apis.map.qq.com等域名加到后台 request 白名单且域名需要完成 ICP 备案。5.2 记录日志与异常上报的前置埋点打车类小程序的崩溃点集中在定位权限、支付回调、页面分享带参数丢失。在客户端早期就添加一个统一的日志上报方法可以避免线上问题只能靠用户录屏复现。推荐在App.onError注册全局错误回调并记录wx.getRealtimeLogManager或wx.reportEvent的调用结果。App({ onError(err) { const logs wx.getRealtimeLogManager(); logs.error(app error, err); } });5.3 反编译与本地缓存保护自己项目的两种姿态微信小程序发布后最终在手机上运行的是一个编译后的包存在被解包工具逆向出 WXML 和 JS 的可能接口地址也会暴露。针对这种风险你需要做两件事第一不要在小程序目录里存放支付密钥、管理员口令等敏感信息后端接口要做到参数签名校验第二核心计价和订单分配逻辑放到服务端前端只负责渲染和交互。本地缓存的 token 要设置过期时间并在每次启动时校验避免 token 泄漏后长期有效。至于解包别人小程序的工具链行业内确实存在但把别人的源码改改就上架属于违规运营行为不建议在项目中使用。正视这个问题才能在设计阶段就把安全边界立住。本文还有配套的精品资源点击获取
微信小程序打车客户端开发要点：从地图定位到微信支付全流程拆解
简介这是一份微信小程序打车客户端的完整源码定位为小程序初学者的实战参考覆盖了项目搭建、页面布局、网络请求、本地存储、授权登录等多环节关键功能。压缩包共42个文件以js逻辑脚本和vue页面组件为主辅以图片素材、babel等配置文件与README说明文档整体仅有125KB结构精炼便于通读与二次开发。目前已有67人学习浏览作者为qqrrjj2011项目内部分模块清晰包含工具函数、状态管理、组件复用等组织方式有助于学习者理解小程序工程化的常见写法。借助这份源码可以快速掌握微信开发者工具的使用、WXML与WXSS的配合书写、数据缓存与wx.request网络请求的实践并熟悉从开发调试到审核上线的完整思维路径。虽然体量不大但配置齐全适合作为第一个独立练习的小程序项目或者课程设计与毕业设计的参考蓝本。1. 从“一起打车吧”这个 zip 里先搞懂微信小程序客户端能做什么“一起打车吧微信小程序客户端.zip”听起来是一个完整的打车业务前端工程解压后你会看到 pages、components、utils 这类目录也可能夹杂图片资源和一堆配置文件。很多人拿到这种包的第一反应是直接导入开发者工具结果不是报 appid 无效就是地图白屏。这块客户端的本质不是“有界面就能跑”而是由小程序的运行环境、微信生态能力定位、登录、支付和业务页面共同组成的工程合集。这里不打算逐行读源码而是从项目结构、核心页面、运行调试和上线前检查这几个角度把一个打车类微信小程序客户端拆开讲清楚适合正在做微信小程序开发、接手别人工程或准备从零复刻打车流程的开发者。2. 微信小程序客户端的项目骨架与运行前提2.1 解压后先看这几个关键文件app.json、app.js、project.config.json一个微信小程序客户端无论业务多复杂入口都收敛在app.json。这个文件里声明了页面的注册路径、窗口外观、tabBar 和权限申请。打车类项目通常会有pages/index/index首页、pages/order/order订单、pages/my/my我的等页面这些页面必须出现在 pages 数组里否则跳转时会报page route not found。{ pages: [ pages/index/index, pages/order/order, pages/my/my ], window: { navigationBarTitleText: 一起打车吧, navigationBarBackgroundColor: #F5F5F5, navigationBarTextStyle: black }, permission: { scope.userLocation: { desc: 用于选择上车点与展示司机位置 } }, requiredPrivateInfos: [getLocation, chooseLocation], tabBar: { list: [ { pagePath: pages/index/index, text: 首页 }, { pagePath: pages/order/order, text: 订单 }, { pagePath: pages/my/my, text: 我的 } ] } }逻辑说明requiredPrivateInfos是 2022 年之后微信平台强制要求的需要单独列出getLocation和chooseLocation否则定位接口在真机上会被直接拒绝。permission 字段里的用途描述要写清楚代码审核时可能被核查。window 里的 navigationBar 配置决定顶部导航栏背景色与文字颜色如果项目里用了自定义导航栏这里就要打开navigationStyle: custom并按胶囊高度做适配。project.config.json 是开发者工具的项目级配置里面比较重要的是appid和compileType。appid留空时真机预览会受限如果这个 zip 里带的是前开发者留下的 appid建议换成自己的测试号或正式 appid。另外如果解压后看到的不是 app.json 而是 manifest.json 和 pages.json那说明这是一个 uni-app 工程需要用 HBuilderX 打开再运行到微信开发者工具不能在原生小程序工具里直接编译。2.2 登录态与游客态wx.login 之后的 token 流转打车业务的下单、支付和评价都依赖用户身份。微信小程序的常规做法是使用wx.login换取临时 code再将 code 发给后端换取 openid 和 session_key。但很多客户端的 zip 包里并没有完整的后端联调条件因此前端要预留好登录流程的抽象层。// utils/auth.js function login() { return new Promise((resolve, reject) { wx.login({ success(res) { if (res.code) { // 将 code 交给业务后端由后端调用 jscode2session 接口换取 openid wx.request({ url: https://api.example.com/login, method: POST, data: { code: res.code }, success: (loginRes) { const { token } loginRes.data.data; wx.setStorageSync(token, token); resolve(token); }, fail: reject }); } else { reject(new Error(登录失败)); } }, fail: reject }); }); }参数说明wx.login返回的 code 只有 5 分钟有效期且每次调用都会变化。下单时应该使用后端返回的 token 而不是 code 来标识用户。如果项目里暂时没有后端可以用一个固定 token 做模拟但要避免把正常逻辑和 mock 逻辑混在一起建议在config.js中增加IS_MOCK开关登录失败时也允许用户以游客身份进入首页。游客态在打车场景里是一个被忽略但重要的状态用户可能只想知道线路预估价格。此时客户端可以先渲染首页再异步调用登录当用户发起下单时如果 token 不存在就弹窗引导登录。这样做能显著降低新用户流失。2.3 顶部导航栏与自定义导航栏的高度适配微信小程序顶部导航栏在不同机型上高度不一致尤其当你在打车首页需要嵌入地图时默认导航栏往往不够灵活。常见做法是把首页设置为自定义导航栏然后用wx.getMenuButtonBoundingClientRect获取右上角胶囊按钮的位置。// utils/nav.js function getNavBarInfo() { const menuRect wx.getMenuButtonBoundingClientRect(); const systemInfo wx.getSystemInfoSync(); return { statusBarHeight: systemInfo.statusBarHeight, navBarHeight: (menuRect.top - systemInfo.statusBarHeight) * 2 menuRect.height, menuRect }; }把返回值用于页面的内边距可以让导航栏在不同机型上不遮挡内容。打车页面的地图要纵向撑满整屏通常只保留一个悬浮的发单面板此时状态栏区域需要单独着色。还有一个容易踩的坑如果页面内同时使用了 map 组件和自定义导航栏map 组件会自动覆盖到原生导航栏区域导致胶囊按钮被地图遮住。处理办法是把地图的cover-view或者同层渲染配置打开小程序的map组件在部分基础库版本需要设置enable-3d或启用同层渲染才能与普通组件正常叠加。3. 打车核心功能在客户端侧怎么实现3.1 地图选点与定位权限wx.getLocation 和 chooseLocation 的配合打车客户端首先要解决的是“用户在哪里、要去哪里”。常见做法是首页加载时请求定位权限拿到经纬度后反解析出地址文字同时把地图中心点移到该位置。wx.getLocation返回的坐标是 gcj02刚好可以被 map 组件直接使用如果你拿这些数据去调第三方 Web API可能需要先确认对方的坐标系。// pages/index/index.js 节选 Page({ data: { startLat: 0, startLng: 0, startAddress: }, async onLoad() { const loc await this.getCurrentLocation(); this.setData({ startLat: loc.latitude, startLng: loc.longitude }); this.reverseGeocode(loc.latitude, loc.longitude); }, getCurrentLocation() { return new Promise((resolve, reject) { wx.getLocation({ type: gcj02, success: resolve, fail: reject }); }); }, chooseStartPoint() { wx.chooseLocation({ success: (res) { this.setData({ startLat: res.latitude, startLng: res.longitude, startAddress: res.name || res.address }); this.mapCtx.moveToLocation({ latitude: res.latitude, longitude: res.longitude }); } }); } });参数说明type: gcj02是标准国产坐标map 组件和wx.chooseLocation返回的也是这个坐标系。用户拒绝过授权后直接调用wx.getLocation会立刻走 fail 回调此时要根据wx.getSetting的返回值判断是否应该引导用户去wx.openSetting手动打开权限。地图组件上可以通过markers显示起点和终点拖动地图通过bindregionchange事件获取中心点实现“移动地图选点”。这里要注意做节流因为 regionchange 触发频率很高每次逆地址解析都会消耗配额建议在事件停止后 300 到 400 毫秒再发起请求。3.2 车型选择与计价展示用单选框还是卡片联动打车界面的车型选择不复杂但体验差别很大。一种方式是使用小程序原生 radio-group每一行的 radio 标识车型另一种是用 scroll-view 横向排列车型卡片选中态通过样式变化表达。在打车场景中卡片模式更合适因为车型还要展示价格、预计等待时间和剩余座位信息radio 组件只能放一个小圆圈信息承载能力不足。scroll-view classcar-list scroll-x view classcar-card {{selectedCar item.id ? active : }} wx:for{{carList}} wx:keyid bindtaponSelectCar>// services/order.js const IS_MOCK true; function createOrder(payload) { return new Promise((resolve, reject) { if (IS_MOCK) { setTimeout(() { resolve({ orderId: MOCK Date.now(), status: 1, driverInfo: null }); }, 800); return; } wx.request({ url: https://api.example.com/order/create, method: POST, data: payload, success: res resolve(res.data), fail: reject }); }); }下单成功后跳转到等待接单页页面里用 60 秒倒计时定时器如果倒计时结束仍然没有匹配司机就提示用户重新下单。这里要注意 setInterval 的清理在onUnload里clearInterval否则用户后退之后定时器还会继续执行。等待页可以用wx.showLoading或自定义组件来模拟司机接单动画如果 zip 包里没有轮询逻辑可以增加一个setInterval每 5 秒查询一次订单状态这是真实项目里常见的做法不过要控制频率避免频繁请求把服务端接口打爆。3.4 支付模块的客户端预留微信支付 v3 对接时客户端只做两件事打车行程结束后必然涉及支付。微信支付对服务端签名算法要求严格在客户端 zip 包里通常只有调起支付的这段代码。客户端需要做的两件事是从后端拿到支付参数再调用wx.requestPayment。签名和下单调由服务端负责API v3 密钥和商户证书千万不要出现在小程序目录里。function payOrder(orderId) { return new Promise((resolve, reject) { wx.request({ url: https://api.example.com/pay/params, method: POST, data: { orderId }, success: (res) { const { timeStamp, nonceStr, package: pkg, signType, paySign } res.data.data; wx.requestPayment({ timeStamp, nonceStr, package: pkg, signType, paySign, success: resolve, fail: reject }); } }); }); }参数说明timeStamp是秒级时间戳nonceStr是随机字符串package的值必须是prepay_id...格式paySign由商户私钥对拼接字符串签名。调试时最容易出错的是时间戳前端误用毫秒以及 package 值丢失前缀。常见的“无可用的平台证书”报错根源通常不在客户端而是商户平台没有上传 API 证书或者服务端没有正确加载证书。可以先检查后端日志里的证书序列号是否与请求头里的 serialNo 一致。参数名类型来源常见错误timeStampString服务端生成单位是秒误用毫秒会签名失败nonceStrString服务端生成与下单时的随机串不一致packageString服务端生成丢失prepay_id前缀signTypeString服务端指定与签名算法不一致通常为 RSApaySignString服务端签名使用 API v3 密钥而非 API 密钥4. 把 zip 里的客户端用开发者工具跑起来4.1 导入项目的正确姿势与常见报错从 zip 包解压后不要直接双击 .wxml 或 .js 文件用文本编辑器打开而是打开微信开发者工具选择“导入项目”目录指向解压后的根目录。导入时开发者工具会根据 project.config.json 读取 appid。如果提示“appid 未找到”可以点“使用测试号”也可以换成自己的小程序 appid。常见报错与处理方式报错信息原因解决方式app.json: 未找到入口页面pages 数组中的路径和实际文件名不一致检查第一个页面路径getLocation:fail the api need to be declared in requiredPrivateInfos field缺少 requiredPrivateInfos 字段在 app.json 中补充xxx 不在以下 request 合法域名列表中未配置 request 域名开发时勾选“不校验合法域名”正式环境需配置Failed to load local image resource图片路径包含中文或未正确编码使用绝对路径或重新放置图片如果根目录里有manifest.json说明这是一个 uni-app 工程需要使用 HBuilderX 打开并运行到微信开发者工具而不是直接把目录导入。这也是很多 zip 客户端最常见的坑导入后只有一堆 vue 文件原生工具根本不认识。判断标准是看项目中是否存在pages.json和main.js。提示导入后建议先跑一次“编译”如果看到红色报错定位到某个 npm 包需要先在根目录执行npm install。但微信小程序原生工程通常不需要 npm只有使用 npm 扩展能力时才需要比如引入现有组件库。4.2 用 mock 数据打通完整下单流程后端接口未准备时可以用一个 mock 数据文件把首页、下单页、等待页、支付页整个链路串起来。做法是在每个 service 方法的入口加一个if (IS_MOCK)分支返回固定 JSON。关键点是 mock 数据要和后端约好字段名否则后面联调时会出现大量前端改动。// config/index.js module.exports { IS_MOCK: true, BASE_URL: https://api.example.com, MAP_KEY: , PAY_TYPE: mock };在 mock 模式下下单返回的 orderId 可以是一个时间戳支付参数也可以直接写成固定的假参数但一定不要真的发起支付。联调时要将IS_MOCK改为 false并确保BASE_URL是兼容 HTTPS 的正式域名。PAY_TYPE可以区分 mock 支付和真实支付设置PAY_TYPE mock时点击支付按钮直接提示“模拟支付成功”并跳转到完成页这样能让产品同学尽早确认流程。4.3 真机预览与调试的边界条件开发者工具模拟器和真机之间存在很多差异尤其是定位、网络权限和地图渲染。打车类小程序需要在真机上验证wx.getLocation是否能弹授权框地图 marker 是否被顶部状态栏遮挡。使用“预览”功能生成二维码用微信扫码进入小程序使用“真机调试”可以在手机上查看 console 日志和网络请求这一步骤在排查定位问题时几乎是必做的。真机上最常见的两个现象一是手机定位偏移因为部分机型在室内定位不准wx.getLocation拿到的是一个缓存位置可以在 success 回调里比较前后两次定位的精度值如果 accuracy 大于 200 米就丢弃不采用二是自定义导航栏后在 iPhone 上看到内容跑到胶囊按钮下面需要动态计算导航栏高度并给页面根节点设置 padding-top。如果你要对 PC 端微信小程序做安全测试或抓包常见做法是让 PC 微信的流量经过一个支持 HTTPS 解密的抓包工具需要安装相应 CA 证书并开启 HTTPS 解密小程序开发者工具自带的 Network 面板也能看到大多数请求日常调试优先用它就够了。5. 从 zip 包到可发布的微信小程序三个容易被忽略的细节5.1 地图 key 与 request 合法域名校验地图 key 是打车项目里最容易泄露的配置。不要在前端代码的明文变量里写正式 key但小程序定位和地图功能确实需要 key。常见做法是把 map key 放在后端下发的配置接口中前端启动时拉取并存入内存再在调用 map 组件时使用。如果 zip 包里的 key 是前开发者留下的上线前务必去腾讯位置服务控制台换成自己的否则可能因调用量超限导致地图空白。小程序 request 合法域名也会影响地图服务。开发者工具可以临时勾选“不校验合法域名”但真机上必须把https://apis.map.qq.com等域名加到后台 request 白名单且域名需要完成 ICP 备案。5.2 记录日志与异常上报的前置埋点打车类小程序的崩溃点集中在定位权限、支付回调、页面分享带参数丢失。在客户端早期就添加一个统一的日志上报方法可以避免线上问题只能靠用户录屏复现。推荐在App.onError注册全局错误回调并记录wx.getRealtimeLogManager或wx.reportEvent的调用结果。App({ onError(err) { const logs wx.getRealtimeLogManager(); logs.error(app error, err); } });5.3 反编译与本地缓存保护自己项目的两种姿态微信小程序发布后最终在手机上运行的是一个编译后的包存在被解包工具逆向出 WXML 和 JS 的可能接口地址也会暴露。针对这种风险你需要做两件事第一不要在小程序目录里存放支付密钥、管理员口令等敏感信息后端接口要做到参数签名校验第二核心计价和订单分配逻辑放到服务端前端只负责渲染和交互。本地缓存的 token 要设置过期时间并在每次启动时校验避免 token 泄漏后长期有效。至于解包别人小程序的工具链行业内确实存在但把别人的源码改改就上架属于违规运营行为不建议在项目中使用。正视这个问题才能在设计阶段就把安全边界立住。本文还有配套的精品资源点击获取
