移动端小程序采坑篇

移动端小程序采坑篇

小程序踩坑一：IOS底部兼容

小程序对前端的兼容性要求比较严格，尤其是安卓与苹果这两类大的机型，不少小伙伴在开发中会遇到这样一个问题，我们在苹果手机真机测试的时候会发现在底部会有一条黑线挡在我们的页面前面，很影响客户体验，尤其是在底部部署一些点击的tab的时候直接影响用户使用
在不影响安卓用户的前提下，解决这个问题，第一种就是比较hack的传统方法，通过判断系统类型根据类型来运行不同的代码，这种方法弊端就是开销相对大一点。第二种解决办法，就是使用env() 和 constant()两个方法来处理，这两个方法是iOS11 新增的CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
其中safe-area-inset-bottom对应的就是底部黑条的距离，但是由于constant() 在 iOS11.2 之后就不能使用的，取而代之的是env()方法，因此我们要做向后兼容处理
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 /
padding-bottom: env(safe-area-inset-bottom); / 兼容 iOS >= 11.2 */

小程序踩坑二：微信小程序原生组件button

开发微信小程序好多功能在实现上会都会使用到微信的原生的这个button，但是这个button组件的样式修改上却比较隐晦，好多人及时加了！important都无济于事，然后在开发者工具调试过程中也发现不了问题所在,这个地方就是微信的原因了，首先微信开发者工具又不支持伪元素调试，然而这个组件的好多样式是写在伪元素中的，所以就造成了调试困难的问题
要想自定义这个组件的样式，完全变成我们可控的，我们就要把伪元素除掉, button::after{ display:none }，或者根绝自己的需求来修改一部分伪元素的样式，button::after{ border:none }等等，如果想做到样式完全受我们控制，需要处理一下这个组价基础样式

button{ padding:0 ; margin:0}
button::after{ display:none }

完成预处理后我们在组件中做的自定义的内容修改时注意，这里面的位置是在定位的情况下的做的

小程序踩坑三：微信小程序地理位置授权获取地理位置

在零售领域，几乎所有的项目都离不开地址发货，所以一个项目业务上为了有很好的的用户体验，授权获取地理位置是必须要做的
首先做这个获取地理位置获取的第一个坑，第一步不是去getLocation，而是去获取一个允许你的小程序访问你的地理位置的授权，往往很多开发者第一步就去getLocation，然后一直拿不到返回结果，一直处于fail状态，这个就是你的小程序并没有权限去调用你手机的定位权限
所以我们的第一步应该是给我们的小程序授权地理位置权限,这里又会出现第二个坑，往往一说授权立马就authorize，但是这里如果直接authorize的话也是不可以的，是拿不到授权的，想要正确的完成授权就必须用到微信的wx.getSetting这个API，这个api的功能是获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限，我们的授权authorize要在这里面完成。在这一操作之前必须要在我们的app.json中配置一个permission，要不然我们我授权还是失败的
但是在实际的应用中，用户并不一定第一次进我们的小程序就允许授权，有可能会拒绝掉授权，但是以后确实需要了，再想授权但是发现我们的授权根本拉不起来了，这就是另一个坑所在了，微信有所规定，在第一次getSetting 用户拒绝后我们再次getSetting的时候我们的授权不再拉起，往往在这里许多开发者将无从下手，这时候我们想要继续授权的话我们必须用到另一个api，wx.openSetting(Object object)，这个api的意思是调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限，这时候就会打开这样设置的界面，这个界面中会显示小程序中用户请求过的权限，在这里用户在手动操作授权
经过这么多坑，一个授权过程就算是完成了，为我们拿取地 理位置做好铺垫，这时候我们才能开始操作getLocation,拿取我们的地理位置
提供一个简单的demo

"permission": {
  "scope.userLocation": {
    "desc": "请确认授权"
  }
}

"

wx.getSetting({
      success: (res) => {
          // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
          // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
          // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
          // 拒绝授权后再次进入重新授权
          if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
              // console.log('authSetting:status:拒绝授权后再次进入重新授权', res.authSetting['scope.userLocation'])
              wx.showModal({
                  title: '',
                  content: '需要获取你的地理位置，请确认授权',
                  success: function (res) {
                      if (res.cancel) {
                          wx.showToast({
                              title: '拒绝授权',
                              icon: 'none'
                          })
                          setTimeout(() => {
                              wx.navigateBack()
                          }, 1500)
                      } else if (res.confirm) {
                          wx.openSetting({
                              success: function (dataAu) {
                                  // console.log('dataAu:success', dataAu)
                                  if (dataAu.authSetting["scope.userLocation"] == true) {
                                      //再次授权，调用wx.getLocation的API
                                      vm.getLocation(dataAu)
                                  } else {
                                      wx.showToast({
                                          title: '授权失败',
                                          icon: 'none'
                                      })
                                      setTimeout(() => {
                                          wx.navigateBack()
                                      }, 1500)
                                  }
                              }
                          })
                      }
                  }
              })
          }
          // 初始化进入，未授权
          else if (res.authSetting['scope.userLocation'] == undefined) {
              // console.log('authSetting:status:初始化进入，未授权', res.authSetting['scope.userLocation'])
              //调用wx.getLocation的API
              vm.getLocation(res)
          }
          // 已授权
          else if (res.authSetting['scope.userLocation']) {
              // console.log('authSetting:status:已授权', res.authSetting['scope.userLocation'])
              //调用wx.getLocation的API
              vm.getLocation(res)
          }
      }
  })


wx.getLocation({
      type: "wgs84",
      success: function (res) {
          // console.log('getLocation:success', res)
          var latitude = res.latitude
          var longitude = res.longitude
          vm.getDaiShu(latitude, longitude)
      },
      fail: function (res) {
          // console.log('getLocation:fail', res)
          if (res.errMsg === 'getLocation:fail:auth denied') {
              wx.showToast({
                  title: '拒绝授权',
                  icon: 'none'
              })
              setTimeout(() => {
                  wx.navigateBack()
              }, 1500)
              return
          }
          if (!userLocation || !userLocation.authSetting['scope.userLocation']) {
              vm.getUserLocation()
          } else if (userLocation.authSetting['scope.userLocation']) {
              wx.showModal({
                  title: '',
                  content: '请在系统设置中打开定位服务',
                  showCancel: false,
                  success: result => {
                      if (result.confirm) {
                          wx.navigateBack()
                      }
                  }
              })
          } else {
              wx.showToast({
                  title: '授权失败',
                  icon: 'none'
              })
              setTimeout(() => {
                  wx.navigateBack()
              }, 1500)
          }
      }
  })