此博客主要记录代码：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。所以，由于和第一次进行尝试失败的同样原因，这一问题也没有得到解决。是我把问题考虑的复杂了吗？求指点！

【微信小程序】微信课程群二维码查询相关推荐

微信小程序业务-字符串生成二维码（weapp-qrcode）
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言邂逅weapp-qrcode 基本使用详细参数小程序组件中使用 image属性详解想使用网络图片? 参考地址前言在小程序项 ...
微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序长按识别二维码，小程序相关问题总结
微信小程序长按识别二维码,小程序相关问题总结开发小程序中,长按识别二维码,小程序码跳转,已知问题整理: 小程序中,不支持长按识别二维码,和小程序码. 可利用小程序图片预览功能识别小程序码并进行跳 ...
微信小程序订单生成支付二维码接口 code
手机的小程序订单是直接拉起支付界面的,有些朋友需要生成支付二维码这边就需要去调用微信的支付二维码接口了需要的参数是 session_id, timeStamp, nonceStr, package ...
『小程序开发』关于微信小程序扫普通链接二维码打开小程序的具体配置流程...
前言: 对于扫普通链接二维码打开小程序的功能详解,官方api已经可以说是接近手把手的教学,咱们这里不做累述,直接上图走起...官方接入指南功能介绍扫二维码登录小程序...^_^ 限制 1.对于普通 ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
uniapp 微信小程序长按识别二维码，跳转小程序、个人微信
前言: 业务要求是小程序放一个二维码图片,长按可以识别二维码,进而识别出个人微信,添加个人微信:我们可以通过uni.previewImage(OBJECT)或者wx.previewImage(Obje ...
微信小程序文字链接生成二维码，扫描识别二维码
给大家推荐一个非常实用且有趣的微信小程序:超实用工具箱. 超实用工具箱小程序里面包含了很多小工具,涵盖了工作.日常生活和娱乐版块.具体的功能大家可以打开微信扫描下方二维码,即刻体验: 接下来给大家介绍 ...

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