The last article briefly introduced MPVUE to achieve express number query, slowly found that MPVUE and VUE really like, but it has almost very consistent with the small program syntax specification, just start to use will feel the characteristics of the cool, but when it comes to the details is there are many mining pit. Today, the use of online netease cloud interface, combined with MPVUE to write a simple small program short message verification login.

// This is an open source const baseURL = "https://*****:1717"; // This is an open source const baseURL = "https://*****:1717"; / / the base path exports. HTTP = function ({url, method, data, headers, success}) {mpvue. ShowLoading ({title: 'in the loading... ',}) mpvue.request({// request link URL :baseURL+ URL, // request method:method, // parameter data:data, // request header:headers, success:res=>{ console.log(res.data); success(res); // Load box ~~~~ mpvue.hideloading (); mpvue.showToast({ title:res.data.msg }) } }) }

The home page:

Small program modal box <view> <modal v-if=" logindata. show" title=" login "confirmText=" login now" cancelText=" cancel login "@confirm="gotoLogin" @cancel="cancelLogin" cancelColor="#CC0033" confirmColor="#CCFF66" > <label class="h-label"> <input type="tel" Placeholder =" v-model="loginData.mobile" @Click ="getMoblie"/bb0 </label> <label class=" H-label "> <input V-model =" logIndata. code" @Click ="getCode" /> </ Label > < Button Type ="primary" Size =" DefaultSize "loading =" Loading "@Click =" Sendcode" hover-class=" DefaultTap "> Data () {return {loginData () {return {loginData () {return {loginData () {return {loginData () {loginData () {return {loginData (); {show: true, mobile: 1383838438, code: ""}}, mounted() {this.logindata. show =! wx.getStorageSync("isLogin"); } // Methods to write log-in and unlog-in events: Methods: {// To log in gotoLogin() {// To verify HTTP ({url: "/captcha/verify", method: "GET", data: { phone: this.loginData.mobile, captcha: this.loginData.code }, success: Res => {if (res.data.code == 200) {wx.setStorageSync("isLogin", true); wx.setStorageSync("moblie", this.loginData.mobile); }
This.logindata.show = false; // make the popover disappear this.logindata.show = false; }}); },

// Cancel login

cancelLogin() { console.log("888"); (this.logindata.show = false), wx.showToast({title: "visitor visit"}); },

// Get the phone number

getMoblie() { console.log("000"); console.log(this.loginData.mobile); this.loginData.mobile; }, // get the verification code getCode() {this.logindata.code; }, ` ` `

// Send the verification code

sendCode() { http({ url: "/captcha/sent", method: "GET", data: { phone: this.loginData.mobile }, success: res => { console.log(res.data); wx.hideLoading(); wx.showToast({ title: res.data.code }); }}); }
And then we're done