5, connected to the front end of wechat (1) we first write the webpage part.
Jq WeUI is used here
The code is as follows:
<! DOCTYPE HTML > < HTML > <head> <title> <meta charset=" UTF-8 "/> <meta http-equiv=" x-UA-compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml Site description. "/ > < link rel =" stylesheet "href =" https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css "/ > < link Rel = "stylesheet" href = "https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css" / > < script SRC = "https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js" > < / script > < style >. The toolbar. The picker - button, .weui-cells_radio .weui-check:checked + .weui-icon-checked:before { color: rgb(58, 95, 124); } body, html { height: 100%; -webkit-tap-highlight-color: transparent; } .demos-title { text-align: center; font-size: 34px; color: #3cc51f; font-weight: 400; margin: 0 15%; } .demos-sub-title { text-align: center; color: #888; font-size: 14px; } .demos-header { padding: 35px 0; } .demos-content-padded { padding: 15px; } .demos-second-title { text-align: center; font-size: 24px; color: #3cc51f; font-weight: 400; margin: 0 15%; } footer { text-align: center; font-size: 14px; padding: 20px; } footer a { color: #999; text-decoration: none; } </style> <style> /*css */ * { margin: 0; padding: 0; } .title { margin: 10px; text-align: center; } .textcenter { text-align: center; } .textleft { text-align: left; } .textright { text-align: right; } body { background: #fbfbfb; }. Body {padding: 0 0.9em; The font - size: 0.88 em. min-width: 300px; max-width: 480px; margin: 0 auto; } .box { width: 200px; height: 200px; border-radius: 50%; background-color: aquamarine; margin: 100px auto; } .wjj { width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; background-size: 80% 80%; background-position: center; background-image: url(img/wjj.png); } .zxj { width: 100%; height: 100%; margin: 0 auto; background-repeat: no-repeat; background-size: 80% 80%; background-position: center; background-image: url(img/zxj.png); } </style> </head> <body ontouchstart> <div class="weui-tab"> <div class="weui-tab__bd"> <div id="tab1" Class =" wei-tab__bd-item wei-tab__bd-item --active" >< div class="title"><h1> Identify mask </h1></div> <div class="box" onclick="yuche()"> <div class="wjj"></div> </div> <div class="box"> <div class="zxj"></div> </div> </div> <div id="tab2" Class = "weui tab__bd - item" > < div class = "title" > < h1 > please look < / h1 > < / div > < / div > < / div > < div class = "weui - tabbar" > < a href="#tab1" class="weui-tabbar__item"> <div class="weui-tabbar__icon"> <img src="img/icon_nav_article.png" alt="" /> < / div > < p class = "weui - tabbar__label" > identify mask < / p > < / a > < a href = "# tab2" class = "weui - tabbar__item" > < div Class = "weui - tabbar__icon" > < img SRC = "img/icon_nav_cell. PNG" Alt = "" / > < / div > < p class =" weui - tabbar__label "> identify the men and women < / p > < / a > </div> </div> <div style="display: none"> <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="" Onchange ="compress()" /> </div> <script> // Document.getelementbyid ('uploaderInput').files[0] var namefile = fileobj. name let reader = new FileReader() ReadAsDataURL (fileObj) reader.onload = function (e) {let image = new image () // Create a new img tag e.target.result image.onload = function () { let canvas = document.createElement('canvas'), Context = canvas. GetContext ('2d'), imageWidth = image.width / 3, imageHeight = image. data = '' canvas.width = imageWidth canvas.height = imageHeight context.drawImage(image, 0, 0, imageWidth, ImageHeight) var base64 = canvas. ToDataURL ('image/jpeg') Byte const bytes = window.atob(base64.split(',')[1]) // Handle exceptions and convert ASCII less than 0 to more than 0 const ab = new ArrayBuffer(bytes.length) const ia = new Uint8Array(ab) for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i) } file = new File([ab], namefile, { type: 'image/png' }) //file.type = "jpeg"; var formData = new FormData() formData.append('File', file) var settings = { url: 'http://localhost:5000/api/discern/kouzhao', method: 'POST', timeout: 0, processData: false, mimeType: 'multipart/form-data', contentType: false, data: formData, } $.ajax(settings).done(function (response) { console.log(response) $.alert(response, }) var file = document.getelementById ('file') file.value = "//file's value can only be set to empty string}}} </script> <script> function yuche() { $('#uploaderInput').click() } </script> </body> </html>Copy the codeHere is all the content of access to the front end of wechat, the follow-up will continue the process of how to access wechat public number
Welcome to qq group communication: 704028989