如何实现小程序调用本地

在测试阶段,微信小程序是可以请求本地服务器的,这里有如下好处:

  1. 测试不需要经过网络,暂时可以不配置域名等,服务器也不用上线

  2. 可以看到小程序和服务器的打印,方便调试和找出问题

  3. 服务器不用频繁修改上架,更改非常方便

开发者工具配置

首先要在微信开发者工具做如下配置:

(1)勾选上不检测域名:

设置 » 项目设置 » 本地设置

config

代码修改

前端

修改请求网址:

  • app.js

关注 wx.login 方法即可。

  [js]
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
// app.js App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId if (res.code) { //发起网络请求 wx.request({ url: 'http://localhost:8080/eat-server/any/miniApp/auth', data: { wxCode: res.code }, method: 'post', success (res) { console.log(res.data) } }) } else { console.log('登录失败!' + res.errMsg) } } }) }, globalData: { userInfo: null } })

wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId if (res.code) { let params = { wxCode: res.code }; getDataApi.login(params) .then(res=>{ console.log(res, ‘登录结果’); }); } else { wx.showToast({ title: ‘登录失败’, icon: ‘error’, duration: 2000 }); } };

ps: 这个方法可以统一进行封装处理,放在 login.js 中。

后端

添加对应的鉴权方法。

  [java]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/** * 小程序登录管理 */ @RestController @RequestMapping("/any/miniApp") public class AnyMiniAppController { @Autowired private AuthBiz authBiz; /** * 登录鉴权 * @param appAuthReq 入参 * @return 结果 */ @PostMapping("/auth") public BaseInfoResp<MiniAppAuthResp> auth(@RequestBody MiniAppAuthReq appAuthReq) { MiniAppAuthResp resp = authBiz.auth(appAuthReq); return RespUtil.of(resp); } }

登录方法的改良

app.js

  [js]
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
// pages/setting/setting.js const getDataApi = require('utils/getDataApi.js') // app.js App({ onLaunch() { // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId // 发送 res.code 到后台换取 openId, sessionKey, unionId if (res.code) { let params = { wxCode: res.code }; getDataApi.login(params) .then(res=>{ console.log(res, '登录结果'); // 持久化 if(res.respCode == '0000') { let result = res.result; wx.setStorageSync('tokenId', result.tokenId); wx.setStorageSync('wxOpenId', result.wxOpenId); } else { wx.showToast({ title: res.respMessage, icon: 'error', duration: 2000 }); } }); } else { wx.showToast({ title: '登录失败', icon: 'error', duration: 2000 }); } } }) }, globalData: { userInfo: null } })
  • getDataApi.js

避免大量重复的代码。

  [js]
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
let BASE_URL = 'http://localhost:8080/eat-server/'; /** * 登录 */ function login(params) { return post('any/miniApp/auth', params); } /** * post方法,对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ function post (url, params) { let tokenId = ''; let wxOpenId = ''; // 如果不是登录 if(url != 'any/miniApp/auth') { // 存储到本地 wx.getStorageSync('tokenId'); wx.getStorageSync('wxOpenId'); } return new Promise((resolve, reject) => { //发起网络请求 wx.request({ url: BASE_URL + url, data: params, method: 'post', header: { 'content-type': 'application/json', 'tokenId': tokenId, 'account': wxOpenId, }, success (res) { resolve(res.data) }, fail(res) { reject(err.data) } }) }) } module.exports = { login }

参考资料

微信小程序请求本地服务器测试成功