The main record code of this blog: dwjm WeChat group QR code query mini program during the dwjm epidemic (ID: Good Luck MiniProgram)
1. Ideas
The QR codes of all courses of the school are stored in the website of the following format: http://gs.uibe.edu.cn/os/pic/course number-course number. suffix name; for example: http://gs.uibe. edu.cn/os/pic/CMP338-2.jpg
So the idea applet is:
① the user to enter the course number - Lesson number;
② JS small part of the program based curriculum user input - Lesson No. generate an access link;
③ wxml Part of the realization of access to the link, the picture is returned to the applet client
Two, the code
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>
Three, there are problems
1. Problem description
There is an unresolved bug in this update: If you enter CMP338-2 for the first query, and enter CUR330-2 for the second query, you will find that the second time the image appears is separated from the text box by about one image. ; If you enter CUR338-2 next, you will find that the picture and the blank position have been swapped.
2. Reason speculation
The reason for this is that the address access CMP338-2 picture is http://gs.uibe.edu.cn/os/pic/CMP338-2. PNG address access CUR330-2 picture is http: // gs.uibe.edu.cn/os/pic/CUR330-2. jpg . That’s right, all jpg ending pictures will appear in the upper part, and png will appear in the lower part. This is because I don’t know whether the QR code of a certain course is in jpg format or png format.
3. My attempt
First , I try to send a request to the website. If the status code returned is 404, it means that the domain name is wrong. However, WeChat only supports wx.request to send requests, and wx.request does not support http and only supports https... So this method ended in failure.
Secondly , I also tried to get the length and width of the returned image. If a value of 0 indicates that the image does not exist, the domain name is wrong. The wx.getImageInfo function I used here was unsuccessful for the same reason.
Finally , in order to solve the problem, I chose the dumbest method, which is to try both domains when visiting:
<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>
This also causes that if the jpg/png domain name access fails, a blank will be returned accordingly.
In addition , there are some other imperfections in the applet. For example, if the user's course number-course number is entered incorrectly, it will be more friendly to return a picture or a line of prompt text that prompts the input error. If you want to recognize that the user has entered the wrong class number, you can only check whether the status code returned by the access domain name is 200 without pre-built-in all the course numbers-class serial numbers. Therefore, due to the same reason as the failure of the first attempt, this problem has not been solved. Did I consider the problem complicated? Seeking advice!