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

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

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):关注公众号,一起源创,一起学习!

历史上的今天:

阿里云全网云主机特惠,企业级云服务器首购 3 年仅 3 折

2 Replies to “微信小程序:一些常见问题及代码片段”

发表评论

必填项已用*标注