微信小程序：一些常见问题及代码片段

之前几个小程序功能都非常简单，就几个页面，这次开始一个稍微功能齐全点的小程序；开发进行一周以来，遇到了一些小问题，这里记录下，以便以后遇到能快速解决。

[IT老五]微信小程序

1. 申请位置权限，授权弹窗仅弹出一次

我们如果需要获取当前位置，则需要申请小程序的位置权限，此时我们可以用wx.getLocation来申请，并且在app.json中添加权限，如下文章源自IT老刘-https://itlao6.com/1772.html

// app.json
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置及天气接口的效果展示"
    }
  },

// index.js
wx.getLocation({
      success: function (res) {
      },
      fail: function(res) {
      }
    })
  }

 文章源自IT老刘-https://itlao6.com/1772.html

然而，使用上述代码后，会发现我们第一次打开小程序，能够弹出授权框，但是如果此时点击拒绝，则以后打开小程序，不会再弹出授权框了。
那么，如何解决该问题呢？其实，微信提供了一个授权页面，我们可以提示用户进入该页面，进而打开获取位置功能，我这里写了个授权提示框，如下：文章源自IT老刘-https://itlao6.com/1772.html

  wx.showModal({
    title: '申请获取您的位置信息',
    content: '你的位置信息将用于小程序位置及天气接口的效果展示',
    success: function (res) {
      if (res.confirm == false) {
        return false;
      }
     // 进入设置页
      wx.openSetting({
        success(res) {
          console.log("home openSetting success: ")
          console.log(res)
          //如果再次拒绝则返回页面并提示
          if (!res.authSetting['scope.userLocation']) {
            // wx.showToast({
            //   title: '此功能需获取位置信息，请重新设置',
            //   duration: 3000,
            //   icon: 'none'
            // })
          } else {
            //允许授权，获取位置信息    
            that.getLocaction();
          }
        }
      })
    }
  }) 
},

 文章源自IT老刘-https://itlao6.com/1772.html

2. 小程序button修改disabled样式

很多时候，我们都会对button进行样式自定义，以适配整体ui效果，然而，在修改disabled样式后，发现并没有生效。此时，我们可以加上 !important，如下代码：文章源自IT老刘-https://itlao6.com/1772.html

.button[disabled] {
  background-color: #999 !important;
}

 文章源自IT老刘-https://itlao6.com/1772.html

其实这个很可能是因为你在button的正常样式中加入了 !important， 所有这里在disabled中也要加入，不然disabled的 样式不会生效；同样的，如果button不只是设置了background-color，还设置了渐变的background，则对应的在disabled中也要设置background。文章源自IT老刘-https://itlao6.com/1772.html

3. 字符串包含，或者...开头等

这里有多种写法，如：文章源自IT老刘-https://itlao6.com/1772.html

string.indexof('abcdefg') >= 0   可用于判断string是否包含abcdefg
string.slice(0, 4) == 'http''  可用于是否以http开头
string.substring(2,5)  可用于截取2-4位置的3个字符

 文章源自IT老刘-https://itlao6.com/1772.html

博客：IT老五  简书：ThinkinLiu文章源自IT老刘-https://itlao6.com/1772.html

IT老五（it-lao5）：关注公众号，一起源创，一起学习！