首先：这个项目是在公众号下单，所以要开发 公众号 相关的功能

然后：再开发

网页授权 ：  用于拿到 openid 。

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

1、设置域名

2、获取code (用户授权)

3、用code 换取 access_token  ; (这一步会把 openid 也带过来)

重要：

设置授权回调地址   ：不是那个 js安全接口域名

代码开发：

将WxMpService 进行持久化：

@Component

public class WechatMpConfig {

@Autowired

WechatAccountConfig wechatAccountConfig;

@Bean

public WxMpService wxMpService() {

WxMpService wxMpServiceBean=new WxMpServiceImpl();

wxMpServiceBean.setWxMpConfigStorage(wxMpConfigStorage());

return wxMpServiceBean;

}

@Bean

public WxMpDefaultConfigImpl wxMpConfigStorage(){

WxMpDefaultConfigImpl wxMpDefaultConfigBean=new WxMpDefaultConfigImpl();

wxMpDefaultConfigBean.setAppId(wechatAccountConfig.getMpAppId());

wxMpDefaultConfigBean.setSecret(wechatAccountConfig.getMpAppSecret());

return wxMpDefaultConfigBean;

}

}

从配置文件读取信息：  WechatAccountConfig wechatAccountConfig; 上面的注入，读取信息，会用到。

@Component

@Data

@ConfigurationProperties(prefix = "wechat")

public class WechatAccountConfig {

private String mpAppId;

private String mpAppSecret;

}

代码的实际应用：

@Controller

@RequestMapping("/wechat")

public class WechatController {

Logger logger = LoggerFactory.getLogger(getClass());

@Autowired

private WxMpService wxMpService;

@Autowired

private WxMpConfigStorage wxMpConfigStorage;

@Autowired

WechatAccountConfig wechatAccountConfig;

@GetMapping("/authorize")

public String authorize(@RequestParam("returnUrl")String returnUrl) throws UnsupportedEncodingException {

//1.配置

//2.调用方法

String url = "http://halfofalemon.ngrok.wendal.cn/sell/wechat/userInfo";

String redirectResult = wxMpService.oauth2buildAuthorizationUrl(url, WxConsts.OAuth2Scope.SNSAPI_USERINFO,URLEncoder.encode(returnUrl, "UTF-8"));

logger.info("[微信授权] 获取code redirectResult = {}",redirectResult);

return "redirect:"+redirectResult;

}

@GetMapping("userInfo")

private String userInfo(@RequestParam("code")String code,@RequestParam("state")String returnUrl){

WxMpOAuth2AccessToken wxMpOAuth2AccessToken = new WxMpOAuth2AccessToken();

try {

wxMpOAuth2AccessToken = wxMpService.oauth2getAccessToken(code);

} catch (WxErrorException e) {

logger.error("[微信网页授权] 获取AccessToken错误 {}",e);

throw new SellException(ResultEnum.WECHAT_MP_ERROR.getCode(),e.getError().getErrorMsg());

}

String openId = wxMpOAuth2AccessToken.getOpenId();

logger.info("[微信授权] 获取openId openId = ",openId);

return "redirect:"+returnUrl + "?openId="+openId;

}

}

注：

内网穿透： 微信回调需要使用内网穿透

使用方法：

1、下载客户端和配置文件

2、官方上面的例子输入下面就可以启动服务

ngrok -config ngrok.yml 8080

3、有点蠢，原样照搬， 进入了我的文件夹，启动ngrok

d:\software3\ngrok_win\ngrok -config ngrok2.yml 8080

提示找不到配置文件。

4、实际上，配置文件也要完整路径：

d:\software3\ngrok_win\ngrok -config d:\software3\ngrok_win\ngrok2.yml 8080

配置前端项目：

前端项目在  /opt/code/sell_fe_buyer

1、到 config 文件 修改 index.js 文件 。

sellUrl  : 项目地址 。

openidUrl :  获取openid 的地址。

wechatPayUrl :

2、回到前端根目录 ： npm run build

重新构建项目：构建好，项目会在 前端根目录的 dist

将构建好的项目发布： cp -r dist/*  /opt/data/wwwroot/sell

end