微信小程序 —— button按钮去除border边框

传统的用“border:none;来去除边框”，依旧有一条细细的border;

方案：

** 使用 button::after{ border: none; } 来去除边框**

微信小程序 - 倒计时60秒(获取验证码)

实现效果

wxml

这里我没有采用view、text等标签，而是采用了button，主要原因是用到了disabled的属性，作用于发送验证码后事件失效，倒计时完毕之后事件继续生效；

所遇问题：因为前期使用view、text标签没有找到类型disabled的属性，所以在发送验证码后依旧可以进行点击，从而导致开启多个计时器，计时速度加快、计时器覆盖

//点击属性：sendCode  点击状态：smsFlag  字体颜色：sendColor  显示文字：sendTime
<button bindtap="sendCode" disabled="{{smsFlag}}" style='margin-top:50px;
margin-right:10rpx;color:{{sendColor}};font-size:28rpx'>{{sendTime}}</button>

js

wxml中声明的smsFlag 代表 disabled的状态；disabled： true代表不可点击；false代表可点击

Page({

  data: {
   	//设置初始的状态、包含字体、颜色、还有等待事件 > <
    sendTime: '获取验证码',
    sendColor: '#363636',
    snsMsgWait: 60
  },

 // 获取验证码
  sendCode: function() {  
 // 60秒后重新获取验证码
    var inter = setInterval(function() {
      this.setData({
        smsFlag: true,
        sendColor: '#cccccc',
        sendTime: this.data.snsMsgWait + 's后重发',
        snsMsgWait: this.data.snsMsgWait - 1
      });
      if (this.data.snsMsgWait < 0) {
        clearInterval(inter)
        this.setData({
          sendColor: '#363636',
          sendTime: '获取验证码',
          snsMsgWait: 60,
          smsFlag: false
        });
      }
    }.bind(this), 1000);
  },
  
})

小程序怎么去除button按钮默认样式,只保留字体

1、使用::after 伪类选择器，因为button的边框样式是通过::after方式实现的，如果在button上定义边框就会出现两条边框线，所以我们可以使用::after的方式去覆盖默认值。

button::after {
  border: none;
}

2、还需要在将按钮背景色设置为白色，因为按钮默认背景色是灰色的。

button {
  background-color: #fff;
}

Dov,一个基于axios 体验的微信小程序请求工具

引入到项目中第一步， npm i dov-http-mini

第二步，复制 dist 目录下的 dov.min.js 到项目中

第三步， import dov from './libs/dov.min.js'

快速使用

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

dov.get('http://www.baidu.com/user').then(response => {
    console.log(response)
})
// 或者
dov.defaults.baseURL = 'http://www.baidu.com'   // 设置默认地址
dov.get('http://www.baidu.com/user').then(response => {
    console.log(response)
})

第二个参数可以追加参数

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

多个请求合并

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)
})

微信小程序组件无法使用全局样式

当我们在开发微信小程序时：

通常会使用一些第三方的UI组件库，或者自己封装了一些全局的样式引入在app.wxss中;

这时候如果使用自定义组件的话，会发现全局样式无法使用；

只要在对应组件的js文件中设置addGlobalClass属性为true即可

Component({
  options: {
    addGlobalClass: true
  }
})

小程序开发笔记4月