【微信小程序】微信课程群二维码查询

此博客主要记录代码：dwjm疫情期间课程微信群二维码查询小程序（ID：好运来MiniProgram）

一、思路

学校所有课程二维码都存储在如下格式的网站中：http://gs.uibe.edu.cn/os/pic/课程号-课序号.后缀名；比如：http://gs.uibe.edu.cn/os/pic/CMP338-2.jpg
因此小程序的思路就是：
①用户输入课程号-课序号；
②小程序的js部分根据用户输入的课程号-课序号生成访问链接；
③wxml部分实现访问该链接，图片返回到小程序用户端

二、代码

index.js：

//index.js  
//获取应用实例  
//获取工具类的应用实例   
var imageUtil = require('../../utils/util.js');
var app = getApp();
var s1 = "http://gs.uibe.edu.cn/os/pic/";
var s2 = ".jpg"; var link = "BDT307-1";

Page({
    
    
  data: {
    
    
    first: true,
    oriImage: "http://img2.imgtn.bdimg.com/it/u=1016607713,2525203659&fm=15&gp=0.jpg",
    imageUrl: s1.concat(link, s2),
    images: {
    
    }
  },
  talks: function (e) {
    
    
    this.setData({
    
    
      talks: e.detail.value
    })
  },
  oks: function () {
    
    
    link = this.data.talks.toUpperCase()
    link = link.replace(/_/, "-")
    link = link.replace(/—/, "-")
    link = s1.concat(link)
    this.setData({
    
    
      first: false,
      imageUrl: link,
    })
  },
  onShareAppMessage: function () {
    
    
    return {
    
    
      title: '课程群二维码查询'
    }
  }
})

wxml：

<text>\n</text>
<view wx:if="{
   
   {first}}" class="userinfo"> 
	<image style="width: {
   
   {viewWidth}}px; height: 200px;" src="{
   
   {oriImage}}"></image> 
</view>
<view wx:else class="userinfo">
	<image mode="widthFix" src="{
   
   {imageUrl}}.jpg" ></image>
	<image mode="widthFix" src="{
   
   {imageUrl}}.png" ></image>
</view>

<input bindinput="talks" placeholder="点此输入课程号-课序号，如CUR330-2" style="height: 50px;"/>
<button bindtap="oks">确认</button>


<text>\n</text>
<text>Tips:</text>
<text>\n1.如果二维码已过期，请等待老师更新</text>
<text>\n2.若长时间未展示图片，可上下拖动屏幕试试</text>
<text>\n3.为防止恶意app搜集相册二维码，建议尽量不在相册中存储二维码</text>

三、存在问题

1、问题描述

此次更新存在一个未解决的bug：如果第一次输入CMP338-2进行查询，第二次输入CUR330-2进行查询，会发现第二次出现图片的位置和文本框间隔了大概一个图片的距离；如果接下来再输入CUR338-2会发现图片和空白的位置出现了交换。

2、原因猜测

出现这种情况的原因是，访问CMP338-2图片的地址是http://gs.uibe.edu.cn/os/pic/CMP338-2.png，访问CUR330-2图片的地址是http://gs.uibe.edu.cn/os/pic/CUR330-2.jpg。没错，所有的jpg结尾图片都会出现在上半部分，png则出现在下半部分，这是因为由于我不知道某一门课的二维码是jpg格式还是png格式

3、我的尝试

首先，我尝试向网站发送请求，如果返回的状态码是404则说明该域名错误。然而微信只支持wx.request发送请求，而wx.request又不支持http只支持https……因此这种方法以失败告终。
其次，我还尝试获取返回图片的长和宽，如果某一个值为0说明图片不存在，域名错误。这里我使用的wx.getImageInfo函数，也是由于同样的原因没有成功。
最后，为了解决问题，我选择了一种最笨的方法，即访问时对这两种域名都进行尝试：

<image mode="widthFix" src="http://gs.uibe.edu.cn/os/pic/CMP338-2.jpg" ></image>
<image mode="widthFix" src="http://gs.uibe.edu.cn/os/pic/CMP338-2.png" ></image>

这也就造成了，如果jpg/png的域名访问失败，则会相应地返回一片空白。

此外，小程序还有一些其他不完善的地方，比如，如果用户课程号-课序号输入错误，那么返回一张提示输入错误的图片或一行提示文字会更友好一些。如果要识别出用户输入了错误的课号，在不提前内置所有课程号-课序号的情况下，只能检测访问域名返回的状态码是否是200。所以，由于和第一次进行尝试失败的同样原因，这一问题也没有得到解决。是我把问题考虑的复杂了吗？求指点！