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

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

 

[IT老五]微信小程序

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

我们如果需要获取当前位置，则需要申请小程序的位置权限
，此时我们可以用wx.getLocation来申请，并且在app.json中添加权限，如下

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

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

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

    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();
            }
          }
        })
      }
    }) 
  },

2. 小程序button修改disabled样式

很多时候，我们都会对button进行样式自定义，以适配整体ui效果，然而，在修改disabled样式后，发现并没有生效。此时，我们可以加上 !important，如下代码：

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

其实这个很可能是因为你在button的正常样式中加入了 !important， 所有这里在disabled中也要加入，不然disabled的 样式不会生效；同样的，如果button不只是设置了background-color，还设置了渐变的background，则对应的在disabled中也要设置background。

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

这里有多种写法，如：

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

---

博客：IT老五 简书：ThinkinLiu

 

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