{"id":19993448,"url":"https://github.com/chooin/wechat-spa","last_synced_at":"2026-03-07T19:05:54.623Z","repository":{"id":95974361,"uuid":"79301634","full_name":"chooin/wechat-spa","owner":"chooin","description":"🎉 微信端单页面应用（SPA）常见问题汇总及解决方案","archived":false,"fork":false,"pushed_at":"2018-06-14T13:15:46.000Z","size":812,"stargazers_count":331,"open_issues_count":0,"forks_count":25,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-11-13T04:56:36.043Z","etag":null,"topics":["spa","wechat","wechat-spa"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chooin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-18T03:57:54.000Z","updated_at":"2024-07-01T07:10:29.000Z","dependencies_parsed_at":"2023-06-13T13:30:56.739Z","dependency_job_id":null,"html_url":"https://github.com/chooin/wechat-spa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chooin%2Fwechat-spa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chooin%2Fwechat-spa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chooin%2Fwechat-spa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chooin%2Fwechat-spa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chooin","download_url":"https://codeload.github.com/chooin/wechat-spa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252334451,"owners_count":21731406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["spa","wechat","wechat-spa"],"created_at":"2024-11-13T04:52:42.085Z","updated_at":"2026-03-07T19:05:54.617Z","avatar_url":"https://github.com/chooin.png","language":null,"funding_links":[],"categories":["miscellaneous"],"sub_categories":[],"readme":"# 微信端单页面应用（SPA）常见问题汇总及解决方案\n\n- [非常重要](#非常重要) 🌈🌈🌈\n- [微信授权时序图](#微信授权时序图)\n- [安装和使用微信 JS-SDK](#安装和使用微信-js-sdk)\n- [标题更新](#标题更新)\n- [微信分享](#微信分享)\n- [微信支付](#微信支付)\n- [白屏](#白屏)\n\n## 非常重要：\n\n路由启用 hash 模式，hash 务必是 `#`，如：`https://example.com/#/home/index`\n\n\u003e 采用 history 模式，页面路由改变后无法复制出改变后的 URL 地址\n\n参数使用 `?` 的形式获取，如：`https://example.com/#/product/detail?id=1`\n\n\u003e 不采用 `?` 的形式获取参数则需要配置很多支付安全目录\n\n新建一个页面用于获取 wechat_openid、token 等操作，用户第一次进入 SPA 项目后的都需要跳转到 auth.html 页面，如：在根目录 static 文件夹下新建 auth.html，[微信授权时序图](#微信授权时序图)\n\n\u003e 解决需要配置很多支付安全目录的问题（网上很多资料都说在支付页面添加 `?`，如：`https://example.com/?#/payment/index?order_id=1`，这样会使路由很混乱，我不建议你采用添加 `?` 的形式去解决支付问题）\n\nNginx 配置\n\n```\nadd_header \"Cache-Control\" \"no-cache, private\";\n```\n\n\u003e 解决 window.location.href 跳转页面被浏览器缓存的问题\n\n涉及调用 JS-SDK 的页面都得重新配置 wx.config()\n\n\u003e 你懂的～\n\n## 微信授权时序图：\n\n\u003cimg src=\"https://github.com/Chooin/wechat-spa/blob/master/UML.png\" width=\"880\" height=\"auto\" /\u003e\n\n\u003e is_auth：is_auth 存在说明已经经过 auth.html 页面跳转\n\n## 安装和使用微信 JS-SDK\n\n### 方法 1 (推荐)\n\n在入口 index.html 文件引入微信的 JS-SDK 文件，webpack 配置参考：[中文](https://webpack.docschina.org/configuration/externals/) / [English](https://webpack.js.org/configuration/externals/)\n\nindex.html\n\n``` html\n\u003cscript src=\"//res.wx.qq.com/open/js/jweixin-1.2.2.js\"\u003e\u003c/script\u003e\n```\n\nwebpack.config.js\n\n``` js\nexternals: {\n  wx: 'wx'\n}\n```\n\n如何使用：\n\n``` js\nimport wx from 'wx'\n\nwx.ready(() =\u003e {\n  console.log('Hello Wechat!')\n})\n```\n\n### 方法 2\n\n如何安装：\n\n``` sh\nyarn add weixin-js-sdk\n# 或\nnpm install weixin-js-sdk --save\n```\n\n如何使用：\n\n``` js\nimport wx from 'weixin-js-sdk'\n\nwx.ready(() =\u003e {\n  console.log('Hello Wechat!')\n})\n```\n\n## 标题更新\n\n在切换页面路由之后需在 body 里面添加 iframe，随后移除掉 iframe 即可，代码如下\n\n```js\n// iPhone，iPod，iPad 下无法更新标题\nif (/ip(hone|od|ad)/i.test(window.navigator.userAgent)) {\n  let iframe = document.createElement('iframe')\n  iframe.style.display = 'none'\n  iframe.src = '/favicon.ico'\n  iframe.onload = () =\u003e {\n    setTimeout(() =\u003e {\n      iframe.remove()\n    }, 10)\n  }\n  document.body.appendChild(iframe)\n}\n```\n\n## 微信分享\n1. 分享配置都正确，进入链接后页面显示不对\n\n**解决方案：** 在分享的地址后面添加一个随机字符串，如：`https://example.com/#/product/detail?id=1\u0026share_at=${Date.now()}`\n\n**微信分享参考代码：**\n\n```js\nimport wx from 'wx'\nimport axios from 'axios'\n\nconst share = ({\n  title,\n  desc,\n  fullPath,\n  imgUrl\n}) =\u003e {\n  let link = fullPath.indexOf('?') \u003e -1\n    ? `https://example.com/#${fullPath}\u0026share_at=${Date.now()}`\n    : `https://example.com/#${fullPath}?share_at=${Date.now()}`\n  wx.showAllNonBaseMenuItem()\n  wx.onMenuShareTimeline({\n    title,\n    link,\n    imgUrl\n  })\n  wx.onMenuShareAppMessage({\n    title,\n    desc,\n    link,\n    imgUrl\n  })\n}\n\nconst $_wechat = () =\u003e {\n  return new Promise((resolve, reject) =\u003e {\n    // 获取服务端微信配置信息\n    axios.get('https://api.example.com/v1/wechat/config', {\n      params: {\n        url: window.location.href.split('#')[0]\n      }\n    }).then(res =\u003e {\n      wx.config({\n        debug: false,\n        appId: res.data.appId,\n        timestamp: res.data.timestamp,\n        nonceStr: res.data.nonceStr,\n        signature: res.data.signature,\n        jsApiList: [\n          'onMenuShareTimeline',\n          'onMenuShareAppMessage'\n        ]\n      })\n      wx.ready(() =\u003e { // 配置 wx.config 成功\n        resolve({\n          wx,\n          share\n        })\n      })\n    }).catch(() =\u003e {\n      reject(new Error('微信签名接口异常'))\n    })\n  })\n}\n\n// 调用分享\n$_wechat().then(res =\u003e {\n  res.share({ // 配置分享\n    title: 'wechat-spa',\n    desc: 'Wechat SPA',\n    fullPath: '/home/index',\n    imgUrl: 'https://www.baidu.com/img/bd_logo1.png'\n  })\n}).catch(_ =\u003e {\n  console.warn(_.message)\n})\n```\n\n## 微信支付\n\n1. 支付安全目录，iOS 识别支付安全目录路径规则是进入 SPA 应用的第一个页面所对应的 URL\n\n第一次进入的 URL | iOS 获取到的安全目录\n--------- | --------\nhttps://example.com/#/home/index | https://example.com/#/home/index\nhttps://example.com/#/me/index | https://example.com/#/me/index\nhttps://example.com/#/product/index | https://example.com/#/product/index\n\n这样我们要配置很多的安全目录路径，但微信平台仅允许设置3个安全目录路径，直接进入 SPA 应用的页面是行不通的\n\n**解决思路：** 用户都得先进入 SPA 应用的根目录 `https://example.com/`，然后通过 SPA 应用路由提供的钩子重定向到自己想要访问的页面，[微信授权时序图](#微信授权时序图)\n\n## 白屏\n\n微信支付后立即跳转到其他页面有一定几率出现白屏（长按屏幕可以复制出文字或图片地址），解决方案：\n\n``` js\n// 延迟跳转即可解决\nsetTimeout(() =\u003e {\n  window.location.replace('/payment/success') // 跳转逻辑\n}, 500)\n```\n\n\u003e 微信内置浏览器的 bug，**图片无法批量上传**也可以通过 `setTimeout` 方法解决\n\n## 问题反馈\n\n如内容有误请反馈给我，谢谢\n\n有什么问题可以加我好友，大家一起交流\n\nQQ：465353876\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchooin%2Fwechat-spa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchooin%2Fwechat-spa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchooin%2Fwechat-spa/lists"}