微信开发者工具开发小程序踩坑实录

账号申请与工具安装

这一部分挺顺利的，参考官方文档就好，工具建议选择稳定版，记得改路径就ok

错误一：no such file or directory

（噩）梦开始的地方

前情提要：什么都没做就新建了一个项目编译了一下，该都没改直接报错。

报错信息：stat:fail ENOENT: no such file or directory, lstat 'E:\wechatProject\miniprogram-1\wxfile:\ad

先找到一个说法是更改创建项目时的默认目录，创建项目的目录要与默认目录路径一致。

改了，没用，好处是之后创建项目不用一直手动改了。

参考解决方案：更换调试基础库，那个图太糊了，又搜的基础库在哪，项目界面的右上角详情-->本地设置-->第一行调试基础库

错误二：时间不对routeDone with a webviewId 32 that is not the current page

前情提要：还是刚新建项目，刚把上个项目调试完，有时候编译弹出来这个错误有时候不

报错信息：routeDone with a webviewId 32 that is not the current page

网传解决方案：开发者工具总出现routeDone with a webviewId 错误？ | 微信开放社区 (qq.com)

最终解决方案：报错后清一下缓存，再尝试。（好像不清缓存过一会也会好）

错误三：本机域名不在合法域名列表中

前情提要：全部调试好了，美滋滋的开始自己的项目，连接本机的后端ip发现死活连不上？换成服务器的ip就可以。不管是localhost、127.0.0.1、还是自己的局域网ipv4地址都报错。

解决方案：【微信小程序】 微信小程序连接本地接口_微信小程序调试不能用本地后端的端口url吗-CSDN博客

勾选不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书，位置还是在右上角详情-->本地设置

 通过wx.login()获取code返回token实现自己的登录逻辑

参考文章：微信小程序：授权登录 + 基于token的身份验证详解-腾讯云开发者社区-腾讯云 (tencent.com)

微信小程序获取openID及unionID | 微信开放社区 (qq.com)

微信小程序获取openid的两种方法 | 微信开放社区 (qq.com)

最简单暴力获取openId的方法。-CSDN博客

// index.js

Page({
  data: {
    openid: ''
  },

  login() {
    wx.login({
      success: (res) => {
        if (res.code) {
          this.sendCodeToBackend(res.code);
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    });
  },

  sendCodeToBackend(code) {
    wx.request({
      url: 'http://yoururl:yourport/wx/user/huoquOpenid',
      data: {
        code: code
      },
      success: (res) => {
        const { openid } = res.data;
        this.setData({
          openid: openid
        });
        wx.setStorageSync('openid', openid);
      }
    });
  }
})

<!--index.wxml-->
<view class="container">
  <button bindtap="login">微信登录</button>
</view>

//后端java

import java.util.HashMap;
import java.util.Map;

import lombok.extern.slf4j.Slf4j;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.poi.util.IOUtils;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;


//获取openid
@Slf4j
@Controller
@RequestMapping("/wx/user")
public class UserController  {

    @ResponseBody
    @RequestMapping("/huoquOpenid")
    public String getUserInfo(@RequestParam(name= "code")String code) throws Exception {
        Map<String,Object> rtnMap = new HashMap<String,Object>();
        String url = "https://api.weixin.qq.com/sns/jscode2session";
        url += "?appid=yourappid";//自己的appid
        url += "&secret=yoursecret";//密匙
        url += "&js_code=" + code;
        url += "&grant_type=authorization_code";
        byte[] res = null;
        HttpClient httpclient = new DefaultHttpClient();
        HttpGet httpget = new HttpGet(url);
        HttpResponse response = null;
        try {
            response = httpclient.execute(httpget);
            res = IOUtils.toByteArray(response.getEntity().getContent());
        } catch (Exception e) {
            throw e;
        } finally {
            if (httpget != null) {
                httpget.abort();
            }
            httpclient.getConnectionManager().shutdown();
        }
        JSONObject jo = JSON.parseObject(new String(res, "utf-8"));
        log.info(jo.toJSONString());
        String openid = jo.getString("openid");
        log.info("openid:{}", openid);
        return openid;
    }
}

<!--如果使用的maven需要在pom.xml里添加依赖-->

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.83</version>
    </dependency>

<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <version>4.5.13</version>
</dependency>

第一次开发微信小程序没经验，以为appid与secret自定义就行(╥ᆺ╥；)

在刚刚注册好的小程序网站，进去登录，侧边栏开发-->开发管理-->开发设置，没生成过secret会有一个生成操作的按钮，把AppID和AppSecret替换代码中的yourappid与yoursecret