微信小程序: button 修改样式

项目需求，登陆界面的button需要使用橙色的bg，而在输入手机号码的时候，确认button 是disabled的。而默认的样式是绿色的，而直接类选择器设置样式，是没有效果的，在群友的帮助下，在button 里直接设置style就可以了。具体效果，直接看图吧。

效果是这样：

代码：

wxss：

登录btn的效果需要在手机号码没有输入正确的情况下设置不可用状态。而默认的是绿色。解决方法主要就是在style里直接设置bg-color，而能实现透明度就是设置opacity=0.4，在验证手机号码正确以后在将opacity设置为1，即不透明。

注册的btn 设置了plain 效果，不过border 默认的是黑色，所以要想取得效果的话，就要在style中设置border-color就可以了。（这都是选择器不熟悉的后果啊）

<view>    <form bindsubmit="sumit">        <input bindinput="phone"maxlength="11" type="number" class="marginview" name="phone" placeholder="手机号"/>        <input bindinput="password" maxlength="8" password class="marginview"name="passworld" placeholder="密码"/>        <button style="opacity: {{opacity}};color: white; background-color: #ff8719;" disabled="{{disabled}}" loading="{{loginLoading}}"    class="marginview"form-type="submit">登录</button>    </form>        <button bindtap="gotoRegist" plain style="color: #ff8719; border-color: #ff8719;"  class="marginview">注册</button>        <navigator open-type="redirect" hover-class="none" class="marginview textview" url="forgetpw/forgetpw">忘记密码</navigator></view>

js： 在sumit里请求服务器，返回成功，则提示登录成功。

//判断是否是手机号码的方法function IsTel(s){   if(s!=null) {    var length = s.length;      if(length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|)+\d{8})$/.test(s) )      {          return true;      }else{          return false;      }    }}  Page({  data:{    disabled:true,  //是否可用    opacity:0.4,    //设置透明度  },//跳转注册页面  gotoRegist:function(){     wx.redirectTo({url: '../../pages/login/regist/regist'})},//手机的输入框  phone:function(e){    var that = this    //console.log(e.detail.value)    var isTel = IsTel(e.detail.value)    //console.log(isTel)    if(isTel){      that.setData({        disabled:false,        opacity:1       })    }else{      that.setData({        disabled:true,        opacity:0.4      })    } },//提交按钮确认  sumit:function(e){    console.log(e.detail.value)    if(e.detail.value.passworld.length==0){      wx.showModal({      title: '密码不得为空',      showCancel:false    })  }else{    //提交    wx.request({      url: 'https://URL',      data: e.detail.value,      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT      // header: {}, // 设置请求的 header      success: function(res){        // success        if(res.data==1){  //请求成功返回码        wx.showToast({          title: '登陆成功',          icon: 'success',          duration: 2000        })      }      },      fail: function() {        // fail      },      complete: function() {        // complete      }    })  }},})

当然，以上效果有很多方式能实现。