小程序开发中的踩坑记录

小西柚啊
57 阅读2分钟

一、接口报错问题

  • 如果没有在小程序开发平台设置request域名的情况下调用接口，需要勾选不校验域名选项

image.png

  • 开发平台设置如下：

开发管理 - 开发设置 - 服务器域名，注意：

设置后不再需要勾选“不校验域名选项”

域名需备案，一级域名备案即可，二级、三级可不用备案

域名需精确到端口号

image.png

二、体验版问题

个人账号：部分小程序功能不可用，例如：获取手机号相关的api

公司账号：小程序所有功能都可用

三、登录、手机号授权问题

我司小程序使用手机号登录，这必然会用到手机号授权，根据小程序官方最新要求，唤起小程序手机号授权需用户手用触发，不可直接调接口唤起，既需要结合button组件的open-type使用

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

Page({
  getPhoneNumber (e) {
    // code | String | 动态令牌。可通过动态令牌换取用户手机号 |
    console.log(e.detail.code) 
  }
})

反参code是一个动态令牌，使用code去换取真实的手机号码

以下是换取手机号码的方法：

1、方案一

第一步：通过appid和secret调微信接口获取access_token

第二步：通过access_token调用微信接口，直接拿到手机号

获取access_token image.png 获取手机号 image.png

2、方案二

稍后补充

四、定位

要想获取当前的位置信息，需要首先唤起location授权，授权api会返回经纬度，开发者根据经纬度调用腾讯地图接口，把经纬度解析成位置信息

参考文章 blog.csdn.net/Mocode/arti…

五、支持扫描普通二维码进入小程序

设置如下：

开发管理 - 开发设置 - 扫普通链接二维码打开小程序

image.png

然后用符合规则的地址去草料二维码生成对应的二维码即可

注意：扫码进入小程序后，可从小程序的生命周期钩子中获取二维码所携带的相关参数，注意参数需decode后才能使用

六、照片添加水印功能

参考文章：blog.csdn.net/songduo112/…

七、不同机型兼容问题

1、不同机型底部安全区域 2、刘海屏

1、状态栏 一般为48px

2、导航栏（胶囊区） 一般为40px

3、底部tabBar 一般为50px

4、安全区域 一般为34px

image.png

场景一：有tabbar的页面：需增加占位块或者页面容器增加padding-bottom

    <!--底部安全块-->
    <view class="safe-bottom"></view>
    .safe-bottom
        padding-bottom constant(safe-area-inset-bottom) // 兼容IOS版本<11.2
        padding-bottom env(safe-area-inset-bottom) // 兼容IOS版本>11.2

场景二、底部按钮固定定位

 <view class="btn-container">
    <van-button type="info">确认</van-button>
 <view>
 
.btn-container
  position fixed
  height 140rpx
  left 0
  right 0
  padding-bottom constant(safe-area-inset-bottom) // 兼容IOS版本<11.2
  padding-bottom env(safe-area-inset-bottom) // 兼容IOS版本>11.2
avatar
文章
阅读
粉丝