简介：面向网站开发者的二开H5猜骰子项目，提供去微信登录版完整源码，可直接在微信中打开即玩，免去公众号接入成本。包内含7个文件，以gz源码包、sql数据库、txt配置说明和mp4视频教程为主，整个压缩包约171.66MB，其中数据库文件便于初始化站点数据，视频与文字教程覆盖搭建和网关更换。资源已接入派特个人免签微信支付，提现改为手动后台审核，并支持机器人陪玩、自动开奖、后台风控、开奖记录与推广分佣，适合快速部署或改造为定制化娱乐平台。目前已有174人学习下载，既能获得完整可运行源码，也能通过演示视频理解支付配置与网关地址更换的实操细节，节省从零开发的沟通与接口成本。
1. 认识"猜骰子H5"二开：从微信登录到独立App的一条改造主线
“二开H5猜骰子去微信登陆版可封装APP支付已接”这个标题，其实是很多H5游戏团队的真实状态：源码能跑通，微信登录和支付都已经接好，但你拿到的是一套强依赖微信生态的网页版本。要做独立App，第一件要改的就是把微信登录拆掉，替换成游客或手机号登录，再让支付同时兼容网页与App两个环境。猜骰子只是载体，真正核心的是“H5+App”的工程化改造链路。
下面顺着源码分析、登录改造、支付联调、封装验证这个顺序展开。文章不会去复述某个具体项目如何，而是给出一套可复现的二开方法论，以及参数、命令和容易踩坑的边界条件。适合有前端基础、正在想把网页游戏壳化上架，或者要做跨端支付的工程师参考。
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 | 微信用户唯一ID | player_id | 登录接口、下单请求 |
| nickname | 微信昵称 | nickname | 游客昵称生成 |
| headimgurl | 微信头像 | avatar | 游客头像留空 |
| access_token | 微信令牌 | token | 游客token对应玩家ID |
2.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:host=localhost;dbname=dice_game;charset=utf8mb4', '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_type | account | player_id |
|---|---|---|---|
| 刚注册游客 | guest | NULL | G开头ID |
| 已绑定手机 | mobile | 13800138000 | G开头ID不变 |
| 老微信用户 | wx | openid值 | 原有ID |
3.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 | 开放平台appid |
| openid | 需要 | 不需要 |
| 调起方式 | WeixinJSBridge | 微信SDK |
| 回调地址 | 后台配置 | 后台配置+Scheme |
| 验签方式 | MD5/HMAC-SHA256 | RSA |
4.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.jsBridge，Android和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_code | trade_status=TRADE_SUCCESS |
| 验签方式 | MD5/HMAC-SHA256 | RSA2 |
| 金额字段 | total_fee | total_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签名，换正式包时签名变了忘了更新平台配置，结果打包后微信支付永远弹不出来。
本文还有配套的精品资源，点击获取
