H5游戏二开实战：去微信登录、改支付渠道与封装App全流程

简介面向网站开发者的二开H5猜骰子项目提供去微信登录版完整源码可直接在微信中打开即玩免去公众号接入成本。包内含7个文件以gz源码包、sql数据库、txt配置说明和mp4视频教程为主整个压缩包约171.66MB其中数据库文件便于初始化站点数据视频与文字教程覆盖搭建和网关更换。资源已接入派特个人免签微信支付提现改为手动后台审核并支持机器人陪玩、自动开奖、后台风控、开奖记录与推广分佣适合快速部署或改造为定制化娱乐平台。目前已有174人学习下载既能获得完整可运行源码也能通过演示视频理解支付配置与网关地址更换的实操细节节省从零开发的沟通与接口成本。1. 认识猜骰子H5二开从微信登录到独立App的一条改造主线“二开H5猜骰子去微信登陆版可封装APP支付已接”这个标题其实是很多H5游戏团队的真实状态源码能跑通微信登录和支付都已经接好但你拿到的是一套强依赖微信生态的网页版本。要做独立App第一件要改的就是把微信登录拆掉替换成游客或手机号登录再让支付同时兼容网页与App两个环境。猜骰子只是载体真正核心的是“H5App”的工程化改造链路。下面顺着源码分析、登录改造、支付联调、封装验证这个顺序展开。文章不会去复述某个具体项目如何而是给出一套可复现的二开方法论以及参数、命令和容易踩坑的边界条件。适合有前端基础、正在想把网页游戏壳化上架或者要做跨端支付的工程师参考。2. 改造前的源码体检拆解H5登录态与支付模块的调用链拿到一套“去微信登陆版”的H5猜骰子源码建议先做一次全面体检而不是急着提交代码。因为如果登录链路没理清后面支付回调发错玩家排查起来比改代码更耗时。下面按照“找微信登录点 - 理状态保存 - 确认支付渠道 - 排查写死地址”的顺序来做。2.1 用全局搜索定位微信登录的初始化入口大多数H5项目的微信登录都依赖weixin-js-sdk或jweixin-1.6.0.js。在源码目录里先执行一次全局搜索grep -rn wx.config\|wx.ready\|wx.authorize\|jweixin\|weixin-js-sdk --include*.html --include*.js .这条命令里的-r表示递归子目录-n显示行号--include限定只查.html和.js文件。搜索结果会定位到微信SDK引用、wx.config初始化以及授权回调的位置。猜骰子这类小游戏通常只在入口页使用微信登录所以匹配结果一般在10处以内。如果源码是压缩过的单行文件建议先格式化还原否则grep会打出一整行很难定位局部逻辑。可以用js-beautify做一次还原npx js-beautify -o app.formatted.js app.min.js格式化后再搜索才能准确修改。注意wx.config所在的js不仅负责登录还可能在分享、支付时混入逻辑修改前先给这几处打上标记避免删掉一整个函数导致页面白屏。2.2 理清登录态保存方式与玩家ID的关联微信登录版通常流程是页面加载后跳转微信授权通过code换取openid再以openid为参数请求后端登录接口。后端返回player_id给前端前端存到localStorage或cookie。接下来要在浏览器控制台直接扫一遍当前站点存储的本地字段。打开开发者工具的Application面板或者在页面控制台执行for (var i 0; i localStorage.length; i) { var key localStorage.key(i); console.log(key, localStorage.getItem(key)); }这段代码会把当前域名下所有localStorage字段打出来。你要找出两件事一是玩家唯一标识叫什么二是支付下单时取的是哪个字段。如果支付下单请求体里带的是openid那么你在“去微信登录”之后必须把请求体字段改成player_id否则后端会报登录态无效。我一般会顺手整理一张字段对照表方便后续改造原始字段含义替代字段改造位置openid微信用户唯一IDplayer_id登录接口、下单请求nickname微信昵称nickname游客昵称生成headimgurl微信头像avatar游客头像留空access_token微信令牌token游客token对应玩家ID2.3 记录支付模块的渠道标识与回跳URL源码里“支付已接”通常指的是已经接入了微信H5支付或支付宝手机网站支付。你需要去/api/pay相关的PHP或Java文件中找出channel字段。常见取值是wx_h5、alipay_wap、app_wx、app_alipay。用表格记一下后面封装App时需要区分渠道标识使用场景支付方式需要配置项wx_h5浏览器内微信支付扫码/跳转商户号、API密钥、域名alipay_wap支付宝手机网页跳转收银台AppId、私钥、公钥app_wx封装App内调起微信微信客户端通用链接、包名、签名app_alipay封装App内调起支付宝支付宝客户端URL Scheme拦截找到order_type或pay_type的switch分支确认对应渠道逻辑是否完整。如果源码里只有wx_h5那App封装后需要补app_wx的签名参数才能直接拉起微信。2.4 检查写死的域名与轮询地址很多H5支付后没有等微信异步通知而是用前端轮询订单接口。你要搜索一下/api/order/status或者query_order这类路径看它的域名是否写死为旧的线上地址。写死的话封装App后本地调试就会一直失败需要替换为相对路径或者动态获取当前域名。grep -rn https://api.old-domain.com --include*.js .这段命令把源码里写死的API域名暴露出来。实战中我会把域名统一提取到config.js让页面在加壳后可以读取壳层注入的全局变量。为兼容不同环境还可以给每个环境准备独立的配置文件避免测试服务器和正式环境的支付回调串了。3. 去除微信登录的替换方案游客ID与手机号绑定双通道去掉微信登录不是简单删掉代码而是要建立一套新的用户体系。这套体系需要满足两个条件一是新建的用户ID能正常参与支付和充值二是老用户如果能拿到之前的player_id也不能丢失账号数据。下面给出的方案是“游客ID手机号绑定”双通道。3.1 用一个纯前端工具函数替换所有微信授权调用先删掉或注释掉页面上的wx.config初始化块用如下函数替代// login.js - 替换微信登录的游客登录方案 function ensureGuestLogin() { let playerId localStorage.getItem(player_id); if (playerId) { return Promise.resolve(playerId); } return fetch(/api/guest_login, { method: POST }) .then(function(res) { return res.json(); }) .then(function(data) { if (data.code 0) { localStorage.setItem(player_id, data.player_id); localStorage.setItem(nickname, 玩家 data.player_id.slice(-4)); return data.player_id; } throw new Error(guest login failed); }); }这段逻辑很简单本地没有player_id时请求/api/guest_login生成匿名ID写入localStorage。slice(-4)取ID后四位作为昵称后缀保证不重名。注意localStorage在App内嵌WebView里可用但有些App会关闭WebView的文件访问更稳妥的做法是由壳层提供setStorage方法前端通过桥对象调用。3.2 后端增加游客登录接口并保持字段兼容在服务端新增/api/guest_login接口返回字段必须与原来微信登录返回的一致。以下是PHP参考实现?php // guest_login.php header(Content-Type: application/json); $pdo new PDO(mysql:hostlocalhost;dbnamedice_game;charsetutf8mb4, root, pass); $player_id G . date(YmdHis) . mt_rand(1000, 9999); $stmt $pdo-prepare(INSERT INTO player (player_id, nickname, avatar, login_type) VALUES (?, ?, ?, ?)); $stmt-execute([$player_id, Player_ . substr($player_id, -4), , guest]); echo json_encode([code 0, player_id $player_id, nickname Player_ . substr($player_id, -4), avatar ]);这里的login_type字段用来标记用户是从游客注册还是微信老用户迁移。前端只认player_id、nickname、avatar三个字段后end多返回字段不影响。substr($player_id, -4)生成可读的昵称后缀避免每次都是“玩家”两个字。提示游客ID生成时要用足够长的随机段防止被恶意遍历。实战中建议把日期时间加随机数拼成G 日期 6位随机并给player_id加唯一索引。3.3 手机号绑定接口与数据库迁移游客登录方便但换设备就会丢档。所以要在用户设置页加一个手机号绑定按钮。绑定后把用户表的login_type从guest改为mobile并把手机号写入account字段。这样卸载重装后通过验证码登录也能找回同一个player_id。数据库迁移SQL如下ALTER TABLE player ADD COLUMN login_type ENUM(guest,mobile,wx) NOT NULL DEFAULT guest; ALTER TABLE player ADD COLUMN account VARCHAR(32) DEFAULT NULL;注意account字段要加唯一索引防止同一个手机号被多个游客ID绑定。绑定接口还需要一张短信验证码表存验证码、手机号、过期时间验证通过后才允许更新用户表。这里给出一个字段状态对照表方便你在改造时判断当前处于哪一步状态login_typeaccountplayer_id刚注册游客guestNULLG开头ID已绑定手机mobile13800138000G开头ID不变老微信用户wxopenid值原有ID3.4 支付下单参数从openid换成player_id原来支付下单接口可能依赖微信的openid。现在需要把前端下单请求里的openid字段改为player_id。如果后端下单接口只认openid就在后端做一个映射例如player表增加wx_openid迁移字段用来兼容老数据新游客账号该字段留空。支付回调时根据订单号找到player_id再给对应用户加骰子次数整个过程与openid无关。改造完成后还要删除页面内残留的wx.config否则在非微信环境点击会抛异常。可以再次执行第2章的grep确认没有微信SDK引用残留。4. 支付接入的落地配置H5支付与App内支付的双端适配支付是二开项目里最容易出问题的环节因为同一个订单在H5页面和App内的调起方式完全不同。源码里“支付已接”只能代表网页端通了封装App后大概率你需要补一套原生支付SDK的桥接。4.1 区分H5支付与App支付的核心参数微信JSAPI支付用于微信公众号内网页需要openid微信H5支付用于手机浏览器不需要openid但会跳转中间页App支付则需要在开放平台注册应用拿到新的appid和签名。参数对比表如下参数JSAPI支付App支付appid公众号appid开放平台appidopenid需要不需要调起方式WeixinJSBridge微信SDK回调地址后台配置后台配置Scheme验签方式MD5/HMAC-SHA256RSA4.2 前端支付桥接的代码设计页面层不需要关心底层是Android还是iOS只需要统一调用一个requestPayment方法。下面是常见的桥接封装// pay.js - 封装App支付桥接与H5支付回退 function requestPayment(orderId, amount) { if (window.AndroidBridge window.AndroidBridge.pay) { window.AndroidBridge.pay(orderId, amount, function(result) { if (result.status success) { pollOrderStatus(orderId); } }); } else if (window.webkit window.webkit.messageHandlers window.webkit.messageHandlers.pay) { window.webkit.messageHandlers.pay.postMessage({ orderId: orderId, amount: amount }); } else { location.href /pay/redirect?order_id orderId; } }这段代码的关键是桥接对象名要和壳层保持一致。很多App封装工具默认暴露的桥是nativeBridge但页面里写的是AndroidBridge就会导致页面点击支付没反应。封装时先约定一个全局桥对象例如统一使用window.jsBridgeAndroid和iOS都实现pay方法前端只调用一处即可。4.3 下单接口的参数改造与回调校验后端新增一个接受player_id、pay_channel参数的下单接口。金额必须以分为单位且在后端写好不能由前端传金额并信任它。示例如下?php // create_order.php 简化逻辑 $player_id $_POST[player_id]; $amount_fen 100; $order_sn D . date(YmdHis) . mt_rand(10000, 99999); $pay_channel $_POST[pay_channel]; // wx_app / alipay_app / wx_h5 $stmt $pdo-prepare(INSERT INTO orders (order_sn, player_id, amount_fen, pay_channel, status) VALUES (?,?,?,?,?)); $stmt-execute([$order_sn, $player_id, $amount_fen, $pay_channel, pending]); $params [ appid $wx_appid, mch_id $mch_id, out_trade_no $order_sn, total_fee $amount_fen, body 猜骰子点数充值, ]; echo json_encode([code 0, order_sn $order_sn, pay_params $params]);这里的$wx_appid和$mch_id来自配置文件不同渠道要用不同的配置。total_fee单位是分所以1元就写100。支付统一下单必须走HTTPS没有证书时可以在本地用测试工具模拟但真机联调必须换正式域名。提示前端下单时不要传递用户点击的金额后端写死价格可以防止有人用抓包工具把100分的订单改成0.01分。4.4 支付回调用一种方式覆盖多端异步通知和前端轮询建议都做。异步通知给服务端发货前端轮询用来拿到结果刷新页面。回调处理的校验点有三个验证签名重新用平台证书或API密钥生成签名与通知里的sign比较。判断订单状态微信看return_code为SUCCESS支付宝看trade_status为TRADE_SUCCESS。根据out_trade_no查订单确认订单里的player_id再给该用户加骰子次数。回调成功后要输出固定应答。微信是{code:SUCCESS}支付宝是success。如果返回其他内容平台会连续发十几次通知导致重复发货。很多二开项目在这里忘了处理幂等用户充值10元会到账两次。4.5 支付宝支付与微信支付的适配差异如果源码同时接了两家要特别注意字段差异。支付平台返回的订单号字段不同验签方式也不同。常用对照如下功能微信支付支付宝支付统一下单URL/pay/unifiedorder/gateway.do异步通知标志return_codetrade_statusTRADE_SUCCESS验签方式MD5/HMAC-SHA256RSA2金额字段total_feetotal_amount支付宝的total_amount单位是元且是字符串例如1.00。微信的total_fee单位是分。这两个字段一旦搞反会出现金额差100倍的故障。建议在支付回调入口处统一把金额转换成分后续逻辑只用分处理减少失误。5. 封装APP的实战细节从网页调试到真机验证的坑与技巧把H5游戏封装成Android App常见做法是用Android WebView加载线上HTML或者直接用HBuilder云打包。两者各有各的坑下面挑参数配置和验证技巧展开。5.1 WebView封装的关键参数用Android原生WebView封装时onCreate里的配置直接决定H5的缓存、定位和支付能否正常工作WebSettings settings webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true); settings.setAllowFileAccess(true); settings.setAllowFileAccessFromFileURLs(true); webView.setWebChromeClient(new WebChromeClient()); webView.loadUrl(https://yourdomain.com/dice/index.html);容易踩的坑是setAllowFileAccessFromFileURLs在Android 7.0以上默认关闭如果你加载的是本地html文件需要手动打开。另外支付回调要拦截intent://或自定义scheme例如微信App支付会回跳到wxpay://这部分需要写在onActivityResult里而不是普通页面跳转。5.2 用adb reverse做本地联调封装App时如果想让手机直接访问电脑上的开发服务器不需要每次上传到服务器可以用一行命令做端口转发adb reverse tcp:8080 tcp:8080执行后手机WebView里访问http://localhost:8080会转发到电脑的8080端口。这样H5页面任何修改刷新就能看到。支付日志和WebView报错可以打开chrome://inspect查看。使用这个方法调试支付时注意测试微信支付需要有备案域名本地联调只能验证到下单接口参数正确。5.3 封装后的支付回调验证App支付成功后微信或支付宝会把结果回传给壳层Activity而不是H5页面。壳层拿到回调后需要通过onJsBridge把订单状态通知给页面。验证有没有配错打印三个信息就够了订单号、支付渠道、回跳地址。如果回跳地址是http://localhost说明前端写的回调地址不对应改为壳层提供的scheme://paycallback。最后还有一个签名技巧。封装App后把签名证书的SHA256值记下来配置到微信开放平台。查看命令keytool -list -v -keystore release.jks -alias dice_app输出的SHA256字符串就是开放平台要填的值。这个问题经常出现在二开项目里Android Studio调试包用的是debug签名换正式包时签名变了忘了更新平台配置结果打包后微信支付永远弹不出来。本文还有配套的精品资源点击获取