微信小程序 —— 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按钮默认样式,只保留字体

<button style='border:0;background-color:#fff;font-size:25rpx;' open-type='getUserInfo'>

{{nickName?nickName:"点击登录"}}

</button>
复制代码

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)
})
复制代码

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

1. 当我们在开发微信小程序时：
2. 通常会使用一些第三方的UI组件库，或者自己封装了一些全局的样式引入在app.wxss中;
3. 这时候如果使用自定义组件的话，会发现全局样式无法使用；
4. 只要在对应组件的js文件中设置addGlobalClass属性为true即可

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

复制代码