-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path4a17b158.html
More file actions
252 lines (226 loc) · 38.8 KB
/
4a17b158.html
File metadata and controls
252 lines (226 loc) · 38.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>微信支付JSAPI前端调起支付 | Big Pineapple</title><meta name="author" content="DB"><meta name="copyright" content="DB"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。 注意：WeixinJSBridge内置对象在其他浏览器中无效。1、网页端接口请求参数列表12345678&#123; appid: string, // appId为当前服务商号绑定的appid timeStamp: string, // 当前的时间 nonceStr: string, // 随机字符串，不长于">
<meta property="og:type" content="article">
<meta property="og:title" content="微信支付JSAPI前端调起支付">
<meta property="og:url" content="https://dabotxt.github.io/4a17b158.html">
<meta property="og:site_name" content="Big Pineapple">
<meta property="og:description" content="在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。 注意：WeixinJSBridge内置对象在其他浏览器中无效。1、网页端接口请求参数列表12345678&#123; appid: string, // appId为当前服务商号绑定的appid timeStamp: string, // 当前的时间 nonceStr: string, // 随机字符串，不长于">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s1.ax1x.com/2022/04/28/LOHQrF.jpg">
<meta property="article:published_time" content="2022-04-28T04:00:00.000Z">
<meta property="article:modified_time" content="2026-01-29T08:07:04.621Z">
<meta property="article:author" content="DB">
<meta property="article:tag" content="WeiXinPay">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s1.ax1x.com/2022/04/28/LOHQrF.jpg"><script type="application/ld+json">{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "微信支付JSAPI前端调起支付",
"url": "https://dabotxt.github.io/4a17b158.html",
"image": "https://s1.ax1x.com/2022/04/28/LOHQrF.jpg",
"datePublished": "2022-04-28T04:00:00.000Z",
"dateModified": "2026-01-29T08:07:04.621Z",
"author": [
{
"@type": "Person",
"name": "DB",
"url": "https://dabotxt.github.io"
}
]
}</script><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://dabotxt.github.io/4a17b158.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css?v=5.5.4"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css"><script>
(() => {
const saveToLocal = {
set: (key, value, ttl) => {
if (!ttl) return
const expiry = Date.now() + ttl * 86400000
localStorage.setItem(key, JSON.stringify({ value, expiry }))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) return undefined
const { value, expiry } = JSON.parse(itemStr)
if (Date.now() > expiry) {
localStorage.removeItem(key)
return undefined
}
return value
}
}
window.btf = {
saveToLocal,
getScript: (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
script.onload = script.onreadystatechange = () => {
if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
}
script.onerror = reject
document.head.appendChild(script)
}),
getCSS: (url, id) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onload = link.onreadystatechange = () => {
if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
}
link.onerror = reject
document.head.appendChild(link)
}),
addGlobalFn: (key, fn, name = false, parent = window) => {
if (!false && key.startsWith('pjax')) return
const globalFn = parent.globalFn || {}
globalFn[key] = globalFn[key] || {}
globalFn[key][name || Object.keys(globalFn[key]).length] = fn
parent.globalFn = globalFn
}
}
const activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
const activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
btf.activateDarkMode = activateDarkMode
btf.activateLightMode = activateLightMode
const theme = saveToLocal.get('theme')
theme === 'dark' ? activateDarkMode() : theme === 'light' ? activateLightMode() : null
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
}
const detectApple = () => {
if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
document.documentElement.classList.add('apple')
}
}
detectApple()
})()
</script><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"pagination":{"enable":false,"hitsPerPage":8},"languages":{"hits_empty":"未找到符合您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
translate: undefined,
highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":false,"highlightMacStyle":false},
copy: {
success: '复制成功',
error: '复制失败',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'null',
Snackbar: undefined,
infinitegrid: {
js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid@4.13.0/dist/infinitegrid.min.js',
buttonText: '加载更多'
},
isPhotoFigcaption: false,
islazyloadPlugin: false,
isAnchor: false,
percent: {
toc: true,
rightside: false,
},
autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '微信支付JSAPI前端调起支付',
isHighlightShrink: false,
isToc: true,
pageType: 'post'
}</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(https://s1.ax1x.com/2022/04/28/LOHQrF.jpg);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">Big Pineapple</span></a><a class="nav-page-title" href="/"><span class="site-name">微信支付JSAPI前端调起支付</span><span class="site-name"><i class="fa-solid fa-circle-arrow-left"></i><span> 返回首页</span></span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div></div></nav><div id="post-info"><h1 class="post-title">微信支付JSAPI前端调起支付</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-04-28T04:00:00.000Z" title="发表于 2022-04-28 12:00:00">2022-04-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2026-01-29T08:07:04.621Z" title="更新于 2026-01-29 16:07:04">2026-01-29</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91/">微信开发</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title=""><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">浏览量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="container post-content" id="article-container"><p>在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。</p>
<h2 id="注意：WeixinJSBridge内置对象在其他浏览器中无效。"><a href="#注意：WeixinJSBridge内置对象在其他浏览器中无效。" class="headerlink" title="注意：WeixinJSBridge内置对象在其他浏览器中无效。"></a>注意：WeixinJSBridge内置对象在其他浏览器中无效。</h2><h3 id="1、网页端接口请求参数列表"><a href="#1、网页端接口请求参数列表" class="headerlink" title="1、网页端接口请求参数列表"></a>1、网页端接口请求参数列表</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">appid</span>: <span class="built_in">string</span>, <span class="comment">// appId为当前服务商号绑定的appid</span></span><br><span class="line"> <span class="attr">timeStamp</span>: <span class="built_in">string</span>, <span class="comment">// 当前的时间</span></span><br><span class="line"> <span class="attr">nonceStr</span>: <span class="built_in">string</span>, <span class="comment">// 随机字符串，不长于32位。</span></span><br><span class="line"> <span class="attr">package</span>: <span class="built_in">string</span>, <span class="comment">// 统一下单接口返回的prepay_id参数值</span></span><br><span class="line"> <span class="attr">signType</span>: <span class="built_in">string</span>, <span class="comment">// 签名类型，默认为MD5，支持HMAC-SHA256和MD5。</span></span><br><span class="line"> <span class="attr">paySign</span>: <span class="built_in">string</span> <span class="comment">// 签名</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>以上参数皆是必填项统一由后端接口返回参数</p>
<h3 id="2、返回结果值说明"><a href="#2、返回结果值说明" class="headerlink" title="2、返回结果值说明"></a>2、返回结果值说明</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">get_brand_wcpay_request</span>:ok <span class="comment">// 支付成功</span></span><br><span class="line"><span class="attr">get_brand_wcpay_request</span>:cancel <span class="comment">// 支付过程中用户取消</span></span><br><span class="line"><span class="attr">get_brand_wcpay_request</span>:fail <span class="comment">// 支付失败</span></span><br></pre></td></tr></table></figure>
<p>注：JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支付时返回。由于前端交互复杂，get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以统一处理为用户遇到错误或者主动放弃，不必细化区分。</p>
<h3 id="3、前端封装方法"><a href="#3、前端封装方法" class="headerlink" title="3、前端封装方法"></a>3、前端封装方法</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">declare</span> <span class="keyword">let</span> <span class="title class_">WeixinJSBridge</span>: <span class="built_in">any</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@description</span>: 通过JSAPI下单API成功获取预支付交易会话标识（prepay_id）后，需要通过JSAPI调起支付API来调起微信支付收银台</span></span><br><span class="line"><span class="comment"> * 注1：WeixinJSBridge内置对象在其他浏览器中无效</span></span><br><span class="line"><span class="comment"> * 注2：此API需要将请求参数进行签名（参与签名的参数为：appId、timeStamp、nonceStr、package，参数区分大小写）</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">*</span>}</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> {<span class="type">*</span>}</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">onBridgeReady</span> (<span class="params"><span class="attr">res</span>: <span class="built_in">any</span></span>)</span><br><span class="line">{</span><br><span class="line"> <span class="comment">/* eslint-disable-next-line */</span></span><br><span class="line"> <span class="title class_">WeixinJSBridge</span>.<span class="title function_">invoke</span>(<span class="string">'getBrandWCPayRequest'</span>, {</span><br><span class="line"> <span class="comment">// 公众号ID，由商户传入</span></span><br><span class="line"> <span class="string">'appId'</span>: res.<span class="property">appId</span>,</span><br><span class="line"> <span class="comment">// 时间戳（转为String类型，兼容IOS “未传timeStamp”问题）</span></span><br><span class="line"> <span class="string">'timeStamp'</span>: <span class="title class_">String</span>(res.<span class="property">timeStamp</span>),</span><br><span class="line"> <span class="comment">// 随机串</span></span><br><span class="line"> <span class="string">'nonceStr'</span>: res.<span class="property">nonceStr</span>,</span><br><span class="line"> <span class="comment">// 预支付交易会话标识</span></span><br><span class="line"> <span class="string">'package'</span>: res.<span class="property">package</span>,</span><br><span class="line"> <span class="comment">// 微信签名方式</span></span><br><span class="line"> <span class="string">'signType'</span>: res.<span class="property">signType</span>,</span><br><span class="line"> <span class="comment">// 微信签名</span></span><br><span class="line"> <span class="string">'paySign'</span>: res.<span class="property">paySign</span></span><br><span class="line"> },</span><br><span class="line"> <span class="keyword">function</span> (<span class="params"><span class="attr">result</span>: <span class="built_in">any</span></span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// 微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">// 支付成功</span></span><br><span class="line"> <span class="keyword">if</span> (result.<span class="property">err_msg</span> === <span class="string">'get_brand_wcpay_request:ok'</span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'支付成功'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 支付取消</span></span><br><span class="line"> <span class="keyword">if</span> (result.<span class="property">err_msg</span> === <span class="string">'get_brand_wcpay_request:cancel'</span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'支付取消'</span>);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 支付失败</span></span><br><span class="line"> <span class="keyword">if</span> (result.<span class="property">err_msg</span> === <span class="string">'get_brand_wcpay_request:fail'</span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">'支付失败'</span>);</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@description</span>: 调起微信JSAPI支付</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> {<span class="type">*</span>}</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return</span> {<span class="type">*</span>}</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">bootWechatJSAPIPay</span> (<span class="params"><span class="attr">res</span>: <span class="built_in">any</span></span>)</span><br><span class="line">{</span><br><span class="line"> <span class="keyword">let</span> <span class="attr">document</span>: <span class="built_in">any</span>;</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="title class_">WeixinJSBridge</span> === <span class="string">'undefined'</span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">addEventListener</span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">'WeixinJSBridgeReady'</span>, onBridgeReady, <span class="literal">false</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span> (<span class="variable language_">document</span>.<span class="property">attachEvent</span>)</span><br><span class="line"> {</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">attachEvent</span>(<span class="string">'WeixinJSBridgeReady'</span>, onBridgeReady);</span><br><span class="line"> <span class="variable language_">document</span>.<span class="title function_">attachEvent</span>(<span class="string">'onWeixinJSBridgeReady'</span>, onBridgeReady);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> {</span><br><span class="line"> <span class="title function_">onBridgeReady</span>(res)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// 调起微信JSAPI支付</span></span><br><span class="line"><span class="keyword">export</span> {</span><br><span class="line"> bootWechatJSAPIPay</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>以上typScript方法封装</p>
<h3 id="4、前端获取openID方法"><a href="#4、前端获取openID方法" class="headerlink" title="4、前端获取openID方法"></a>4、前端获取openID方法</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">window</span>.<span class="property">location</span>.<span class="title function_">replace</span>(<span class="string">`<span class="subst">${baseURL}</span>/api/v1/wechat/oauth?authorization=<span class="subst">${sign}</span>&returnUrl=<span class="subst">${url.href}</span>`</span>)</span><br></pre></td></tr></table></figure>
<h3 id="5、文件内方法调用"><a href="#5、文件内方法调用" class="headerlink" title="5、文件内方法调用"></a>5、文件内方法调用</h3><figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { bootWechatJSAPIPay } <span class="keyword">from</span> <span class="string">'src/hooks/pay'</span></span><br><span class="line"><span class="title function_">bootWechatJSAPIPay</span>(param)</span><br></pre></td></tr></table></figure>
<p>如果文档内容没有解决您的问题，您还可以前往 <a target="_blank" rel="noopener" href="https://developers.weixin.qq.com/community/pay">微信开放社区</a> 寻求帮助</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://dabotxt.github.io">DB</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://dabotxt.github.io/4a17b158.html">https://dabotxt.github.io/4a17b158.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="https://dabotxt.github.io" target="_blank">Big Pineapple</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/WeiXinPay/">WeiXinPay</a></div><div class="post-share"><div class="social-share" data-image="https://s1.ax1x.com/2022/04/28/LOHQrF.jpg" data-sites="facebook,x,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/7705a76.html" title="项目笔记"><img class="cover" src="https://s1.ax1x.com/2022/04/29/LvoXHe.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">项目笔记</div></div><div class="info-2"><div class="info-item-1">1、项目网络状态监听并跳转路由1234567891011onMounted(() => { window.addEventListener('offline', ()=>{ // 网络异常时触发 router.push({ name: 'Disconnect' }) sessionStorage.locationUrl=window.location.href; }); window.addEventListener('online',()=>{ // 网络恢复正常时触发 window.location.href=sessionStorage.locationUrl });}) 2、H5项目每次跳转路由滚动条回到顶部在路由守卫中配置 12document.title = to.meta.titlewindow.scrollTo(0,0)</div></div></div></a><a class="pagination-related" href="/4a17b166.html" title="前端判断当前访问设备类型"><img class="cover" src="https://s1.ax1x.com/2022/05/05/OeYnqe.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="info text-right"><div class="info-1"><div class="info-item-1">下一篇</div><div class="info-item-2">前端判断当前访问设备类型</div></div><div class="info-2"><div class="info-item-1">在utils目录下创建一个isType文件1234567891011121314151617181920const ua = window.navigator.userAgent;export const isWap = /Android|iPhone|ios|iPad|iPod|BlackBerry|IEMobile/i.test(ua); // 是否是移动端export const isWeixin = /MicroMessenger/i.test(ua); // 是否是微信浏览器export const isAlipay = /AlipayClient/i.test(ua); // 是否是支付宝浏览器export const isAndroid = /Android/i.test(ua); // 是否安卓设备export const isIOS = /iphone|ios|ipad|ipod/i.test(ua);export const isMainClient = /aijiao100\(newk12/i.test(ua);export const isWeibo = ...</div></div></div></a></nav><hr class="custom-hr"/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="giscus-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="https://s1.ax1x.com/2022/04/29/LvbDbT.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">DB</div><div class="author-info-description">事当决而不决者，愚人也</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">22</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">14</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://haiyong.site/moyu/shengchengshu.html"><i class="iconfont icon-youxishoubing"></i><span>Just Relax</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content"><p align="center">微信号：***</p>
<p align="center">QQ号：***</p>
</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%EF%BC%9AWeixinJSBridge%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1%E5%9C%A8%E5%85%B6%E4%BB%96%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%97%A0%E6%95%88%E3%80%82"><span class="toc-number">1.</span> <span class="toc-text">注意：WeixinJSBridge内置对象在其他浏览器中无效。</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1%E3%80%81%E7%BD%91%E9%A1%B5%E7%AB%AF%E6%8E%A5%E5%8F%A3%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0%E5%88%97%E8%A1%A8"><span class="toc-number">1.1.</span> <span class="toc-text">1、网页端接口请求参数列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2%E3%80%81%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E5%80%BC%E8%AF%B4%E6%98%8E"><span class="toc-number">1.2.</span> <span class="toc-text">2、返回结果值说明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3%E3%80%81%E5%89%8D%E7%AB%AF%E5%B0%81%E8%A3%85%E6%96%B9%E6%B3%95"><span class="toc-number">1.3.</span> <span class="toc-text">3、前端封装方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4%E3%80%81%E5%89%8D%E7%AB%AF%E8%8E%B7%E5%8F%96openID%E6%96%B9%E6%B3%95"><span class="toc-number">1.4.</span> <span class="toc-text">4、前端获取openID方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5%E3%80%81%E6%96%87%E4%BB%B6%E5%86%85%E6%96%B9%E6%B3%95%E8%B0%83%E7%94%A8"><span class="toc-number">1.5.</span> <span class="toc-text">5、文件内方法调用</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/90338fix.html" title="解决iOS分发Non-public API问题"><img src="https://s1.ax1x.com/2022/05/10/OtyPTx.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="解决iOS分发Non-public API问题"/></a><div class="content"><a class="title" href="/90338fix.html" title="解决iOS分发Non-public API问题">解决iOS分发Non-public API问题</a><time datetime="2026-01-29T02:38:20.000Z" title="发表于 2026-01-29 10:38:20">2026-01-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/55bb1443.html" title="关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题"><img src="https://s1.ax1x.com/2022/05/05/OeUDJA.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题"/></a><div class="content"><a class="title" href="/55bb1443.html" title="关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题">关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题</a><time datetime="2025-01-06T02:48:34.000Z" title="发表于 2025-01-06 10:48:34">2025-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/e973ebbc.html" title="安装依赖超时443解决"><img src="/images/npm.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="安装依赖超时443解决"/></a><div class="content"><a class="title" href="/e973ebbc.html" title="安装依赖超时443解决">安装依赖超时443解决</a><time datetime="2024-09-13T07:18:32.000Z" title="发表于 2024-09-13 15:18:32">2024-09-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/3bc3f9fd.html" title="Git推送失败443"><img src="/images/git.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Git推送失败443"/></a><div class="content"><a class="title" href="/3bc3f9fd.html" title="Git推送失败443">Git推送失败443</a><time datetime="2024-08-21T09:22:44.000Z" title="发表于 2024-08-21 17:22:44">2024-08-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/36de35a5.html" title="电脑共享VPN到手机方法"><img src="/images/vpn.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="电脑共享VPN到手机方法"/></a><div class="content"><a class="title" href="/36de35a5.html" title="电脑共享VPN到手机方法">电脑共享VPN到手机方法</a><time datetime="2024-08-21T09:03:09.000Z" title="发表于 2024-08-21 17:03:09">2024-08-21</time></div></div></div></div></div></div></main><footer id="footer"><div class="footer-other"><div class="footer-copyright"><span class="copyright">© 2022 - 2026 By DB</span><span class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo 6.3.0</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly 5.5.4</a></span></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="前往评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=5.5.4"></script><script src="/js/main.js?v=5.5.4"></script><div class="js-pjax"><script>(() => {
const isShuoshuo = GLOBAL_CONFIG_SITE.pageType === 'shuoshuo'
const option = null
const getGiscusTheme = theme => theme === 'dark' ? 'dark' : 'light'
const createScriptElement = config => {
const ele = document.createElement('script')
Object.entries(config).forEach(([key, value]) => {
ele.setAttribute(key, value)
})
return ele
}
const loadGiscus = (el = document, key) => {
const mappingConfig = isShuoshuo
? { 'data-mapping': 'specific', 'data-term': key }
: { 'data-mapping': (option && option['data-mapping']) || 'pathname' }
const giscusConfig = {
src: 'https://giscus.app/client.js',
'data-repo': 'dabotxt/dabotxt.github.io',
'data-repo-id': 'R_kgDOHLfmJw',
'data-category-id': 'DIC_kwDOHLfmJ84C1lei',
'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
'data-reactions-enabled': '1',
crossorigin: 'anonymous',
async: true,
...option,
...mappingConfig
}
const scriptElement = createScriptElement(giscusConfig)
el.querySelector('#giscus-wrap').appendChild(scriptElement)
if (isShuoshuo) {
window.shuoshuoComment.destroyGiscus = () => {
if (el.children.length) {
el.innerHTML = ''
el.classList.add('no-comment')
}
}
}
}
const changeGiscusTheme = theme => {
const iframe = document.querySelector('#giscus-wrap iframe')
if (iframe) {
const message = {
giscus: {
setConfig: {
theme: getGiscusTheme(theme)
}
}
}
iframe.contentWindow.postMessage(message, 'https://giscus.app')
}
}
btf.addGlobalFn('themeChange', changeGiscusTheme, 'giscus')
if (isShuoshuo) {
'Giscus' === 'Giscus'
? window.shuoshuoComment = { loadComment: loadGiscus }
: window.loadOtherComment = loadGiscus
return
}
if ('Giscus' === 'Giscus' || !false) {
if (false) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
else loadGiscus()
} else {
window.loadOtherComment = loadGiscus
}
})()</script></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><i class="fas fa-spinner fa-pulse" id="loading-status" hidden="hidden"></i><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据加载中</span></div><div class="local-search-input"><input placeholder="搜索文章..." type="text"/></div><hr/><div id="local-search-results"></div><div class="ais-Pagination" id="local-search-pagination" style="display:none;"><ul class="ais-Pagination-list"></ul></div><div id="local-search-stats"></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=5.5.4"></script></div></div></body></html>