微信小程序开发填坑记录

最新推荐文章于 2024-10-11 23:00:03 发布

凌凌小博客

最新推荐文章于 2024-10-11 23:00:03 发布

阅读量1.7k

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_35923749/article/details/104299455

版权

本文记录了作者初次接触微信小程序开发的经历，包括微信登录实现、页面配置、事件处理、参数传递、页面跳转、数据绑定等问题，分享了遇到的坑及解决办法，特别提醒了在小程序中数据绑定和参数获取的特殊性。

摘要由CSDN通过智能技术生成

最近因为需要帮女朋友实现一个微信小程序，所以去了解了一下小程序的开发。对于微信小程序的开发，之前完全没接触过（但有一些前端开发经验），作为完全的新手，入手资料肯定是微信小程序开发文档，根据这些天的开发过程的经验来看，最好先详细的过一遍官网的文档，大部分的坑是因为没有详细阅读文档，而另一部分坑是因为文档没有写。。。

注：项目架构是：C/S架构，前后端完全分离，前端：微信小程序，后端：springboot

开发过程遇到的坑主要以下几点：

微信登录实现模块
开发文档中，登陆逻辑描述的很清楚，首先小程序中调用 wx.login() 获取微信提供的临时登录凭证code ，然后把code传到开发者服务器（我们的后端服务器），后端再使用申请的专属appid和appsecret、code（刚才前端传过来的code）作为三个入参，调用微信授权url（https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code（APPID即appid，SECRET即appsecret，JSCODE即code，其他的不变）），微信授权中心会返回两个字段：用户唯一标识 OpenID 和会话密钥 session_key；为了安全，一般不会把session_key作为sessionId，而是自己生成一个sessionId，我是使用jwt技术实现的sessionId的生成和校验。
java实现代码：

@PostMapping("/wxLogin")
    public Result wxLogin(LoginVo loginVo) {
   
        log.info("wxLogin request:{}", loginVo);
        String url = "https://api.weixin.qq.com/sns/jscode2session";
        Map<String, String> param = new HashMap<>();
        param.put("appid", Constants.WEIXIN_APPID);
        param.put("secret", Constants.WEIXIN_SECRET);
        param.put("js_code", loginVo.getCode());
        param.put("grant_type", "authorization_code");

        String wxResult = HttpClientUtil.doGet(url, param);
        log.info("weixin response:{}", wxResult);

        WXSessionVo wxSessionVo = FastJsonUtil.fromJson(wxResult, WXSessionVo.class);
        if (wxSessionVo == null){
   
            return Result.fail(LOGIN_FAIL.getDesc(), LOGIN_FAIL.getCode());
        }
        UserInfo oldUserInfo = userInfoService.queryByOpenId(wxSessionVo.getOpenid());
        String token = "";
        if (oldUserInfo == null)