捣鼓一个小程序[通俗易懂]

11月不是提了辆车嘛，价格还行，不到百万

租住的小区人多车位少，非固定车位都是先到先停，我到的时候正好有个车位，结果晚上就收到了12123的短信 说影响到别人了。我都懵了，停在小区碍着谁的事了，估计是有人恶作剧 就没搭理，

结果到了晚上 楼下不停的按喇叭，就去瞅一眼 ，四目相对，说那是他的固定车位。一排全是非固定车位，就他这个不是，而且也没写车牌号，这也不能怪我啊。

多大点事，何必走官方渠道(吓人)，作为程序员 ，自然有自己的流程，于是就有了自己的第一个小程序:个人助手plus

起名字也挺苦恼的，本着这个小程序是集成自己常用的功能，让它成为自己的生活小助手，

一周的时间完成了两个小功能

• 挪车码
• 天气预报

不得不说界面的样式太难调了，真痛苦

1. 挪车码

方便在停车的时候影响到别人，可以电话通知车主。

鉴于微信的强大，使用微信的小程序码 是比较方便的。

使用界面:

输入手机号，获取一个小程序码，可以这个码贴在车上，让别人扫码

使用微信扫码的时候，直接唤起电话,如下图

看这样式，他们说我这 css写的很后端😭, 所以前端相关就不说了。主要说下后端相关的功能

微信官方提供功能的API，一个是获取授权token，另一个是获取小程序码

有个坑爹的是，微信提供了API 但是不允许直接在小程序中调用，需要自己转一下，我不明白为什么有这种限制操作，想让我买个腾讯云服务器吗，没办法 我只能在阿里云买个服务器，写一个服务调用这两个接口。

• 获取小程序的接口

token是有时效的，所以不用每次调用，存放到redis中

@GetMapping("/getQrCode/{phoneNum}")
    public String queryList(@PathVariable String phoneNum) throws Exception {
        String accessToken = this.getTokenFromRedis();
        if (StringUtils.isEmpty(accessToken)) {
            accessToken = this.getAccessToken();
        }
        if (StringUtils.isBlank(accessToken)) {
            throw new Exception("生成失败");
        }
        return getwxacodeunlimit(accessToken, phoneNum);
    }

IT知识分享网

• 获取授权token

token_url: api.weixin.qq.com/cgi-bin/tok…

IT知识分享网private synchronized String getAccessToken() throws Exception {
        JSONObject jsonObject = restTemplate.getForObject(TOKEN_URL, JSONObject.class);
        System.out.println(jsonObject.toJSONString());
        if (jsonObject.containsKey(FILED_ACCESS_TOKEN)) {
            String accessToken = jsonObject.getString(FILED_ACCESS_TOKEN);
            redisTemplate.opsForValue().set(REDIS_KEY_TOKEN, accessToken, jsonObject.getLongValue(FILED_EXPIRES_IN), TimeUnit.SECONDS);
            return accessToken;
        }
        throw new Exception("生成失败");
    }

• 获取小程序码

QR_CODE_URL: api.weixin.qq.com/wxa/getwxac…

private String getwxacodeunlimit(String accessToken, String phoneNum) {
        String base64 = getQrCodeBase64FromRedis(phoneNum);
        if (StringUtils.isNotEmpty(base64)) {
            return base64;
        }
        Map<String, Object> input = new HashMap<>();
        input.put("page", "pages/phone/call");
        input.put("scene", phoneNum);
        input.put("check_path", false);
        input.put("env_version", "release");
        ResponseEntity<byte[]> responseEntity = restTemplate.postForEntity(QR_CODE_URL + accessToken, JSON.toJSONString(input), byte[].class);
        byte[] result = responseEntity.getBody();
        base64 = Base64.getEncoder().encodeToString(result);
        redisTemplate.opsForValue().set(REDIS_KEY_QRCODE + phoneNum, base64, 5, TimeUnit.DAYS);
        return base64;
    }

2.天气预报

手机内存不足，能卸载的app都全部卸载了，包括天气app。但是偶然看天气的需求还是在的，天气不好的时候看看是否需要带伞。

开始的时候天气样式是这样的(我调了很久的)

其中那些svg格式的天气图标，由于微信小程序中无法直接改变其颜色，只能默认黑色。还有一种方式就是读取svg文件 ，然后修改其中的颜色属性，然后在显示，但是总是有各种问题 就放弃了，直接采用网友的建议

对接了 和风天气相关的API 获取天气信息。

• 获取位置经纬度

这个是使用微信官方的定位方法wx.getFuzzyLocation（需要先申请才能使用）

IT知识分享网getFuzzyLocation(){
  wx.getFuzzyLocation({
    type: 'wgs84',
    success:(res:any)=>{
      this.setData({
        position : true,
      });
      this.data.location = res.longitude+','+res.latitude;
    },
   });
},

• 和风API获取天气信息

获取实时天气信息

getWeatherNow(){
  wx.request({
    url: 'https://devapi.qweather.com/v7/weather/now', 
    method: 'GET',
    data: {
      key: this.data.key,
      location: this.data.location,
    },
    success: (res:any) => {
      this.setData({
        weather_now: res.data.now
      });
    },
  });
},

还使用了有其他接口

当天的天气指数：devapi.qweather.com/v7/indices/…

24小时的天气： devapi.qweather.com/v7/weather/…

最近三天的天气：devapi.qweather.com/v7/weather/…

最终的效果如下：

• 使用和风天气的h5插件(使用web-view标签引入)

这种接入更好，无论是内容的丰富度，还是样式的美观度，而且还不用自己去定位/调用API，很高兴终于不用自己调样式了

高兴早了…….

微信不支持个人小程序使用web-view的方式引入第三方页面

3.其他功能

其他小功能还在构想中，大家有好的想法可以评论区留言

我是纪先生，用输出倒逼输入而持续学习，持续分享技术系列文章，以及全网值得收藏好文，欢迎关注公众号，做一个持续成长的技术人。