Button removes border border

The traditional border:none; To remove the border “, there is still a thin border;

Solution:

Button ::after{border: none; } to remove the border **

Wechat mini program – countdown to 60 seconds (obtain verification code)

Implementation effect

wxml

Here, I did not use labels such as View and text, but button. The main reason is that the disabled attribute is used. The event will be invalid after sending the verification code, and the event will continue to take effect after the countdown.

Problem: Because the property of type disabled was not found in the previous use of view and text tags, it could still be clicked after sending the verification code, which led to the start of multiple timers, faster timing and overwriting of timers

// Click property: sendCode Click status: smsFlag Font color: sendColor Display text: sendTime<button bindtap="sendCode" disabled="{{smsFlag}}" style='margin-top:50px; margin-right:10rpx; color:{{sendColor}}; font-size:28rpx'>{{sendTime}}</button>
Copy the code

js

The smsFlag declared in WXML represents the disabled state. Disabled: true Indicates that it cannot be clicked. False means clickable

Page({

  data: {
   	// Set the initial state, including font, color, and waiting events > <
    sendTime: 'Get captcha'.sendColor: '# 363636'.snsMsgWait: 60
  },

 // Get the verification code
  sendCode: function() {  
 // Obtain the verification code again after 60 seconds
    var inter = setInterval(function() {
      this.setData({
        smsFlag: true.sendColor: '#cccccc'.sendTime: this.data.snsMsgWait + 's resend after '.snsMsgWait: this.data.snsMsgWait - 1
      });
      if (this.data.snsMsgWait < 0) {
        clearInterval(inter)
        this.setData({
          sendColor: '# 363636'.sendTime: 'Get captcha'.snsMsgWait: 60.smsFlag: false
        });
      }
    }.bind(this), 1000); }})Copy the code

How to remove the button button default style, only keep the font

1. Use the ::after pseudo-class selector. Since the button border style is implemented by ::after, if you define a border on a button, there will be two border lines, so we can override the default value by using ::after.

button::after {
  border: none;
}
Copy the code

2. You also need to set the background color of the button to white, because the default background color of the button is gray.

button {
  background-color: #fff;
}
Copy the code

Dov, a wechat applet request tool based on axios experience

Introduced as the first step in the project, NPM I dov-HTTP-mini

In the second step, copy the dov.min.js file from the dist directory into the project

Import dov from ‘./libs/dov.min.js’

Quick to use

// http.js
import dov from './libs/dov.min.js'

dov.get('http://www.baidu.com/user').then(response= > {
    console.log(response)
})
/ / or
dov.defaults.baseURL = 'http://www.baidu.com'   // Set the default address
dov.get('http://www.baidu.com/user').then(response= > {
    console.log(response)
})
Copy the code

The second argument can append arguments

dov.get('http://www.baidu.com/user', {
    data: {
        username: 'dov'.password: 'asdkln211232345sa'
    }
}).then(response= > {
    console.log(response)
})
Copy the code

Multiple request merge

function getUserInfo(){
    return dov.get('/userinfo')}function getUserPerssion(){
    return dov.get('/userPerssion')
}
dov.all([getUserInfo(), getUserPerssion()]).then(response= > {
    console.log(response)
}).catch(error= > {
    console.log(error)
})
Copy the code

The wechat applet component cannot use global styles

  1. When we were developing wechat applets:
  2. WXSS usually uses some third-party UI component library, or wraps some global styles into app.wxSS.
  3. If you use custom components at this point, you will find that global styles are not available;
  4. Simply set the addGlobalClass property to true in the corresponding component’s JS file
Component({
  options: {
    addGlobalClass: true}})Copy the code