【钉钉小程序】开发时遇到的坑与解决方案前几年开发了钉钉小程序，当时踩得坑很多，事后也整理了一些常见的问题与当时的解决方案

前几年开发了钉钉小程序，当时踩得坑很多，事后也整理了一些常见的问题与当时的解决方案，今天查看笔记时，想着整理一下分享出来，以供后来人借鉴。想了解钉钉小程序的，可以查看它的官方文档

1、如何使弹出的键盘不遮挡输入框？

问题描述：

评论输入框在底部，但是每次键盘弹出的时候，会遮挡住输入框。

解决方法：

// 设置cursor-spacing='20'指定光标与键盘的距离为20px,20为例
<view class="editor-comment">
    <input placeholder="快来发表看法吧~" cursor-spacing="20" value="{{content}}" onInput="bindKeyInput" />
    <button type="primary" class="add-comment" disabled="{{isDisabled}}" onTap="addComment">发表</button>
</view>

2、scroll-view 点击不生效问题

allowsBounceVertical: "YES" / "NO" 页面是否支持纵向拽拉超出实际内容。默认 YES

原因1：

一般一个页面不全是滚动区域,当你滑动了滚动区域之外的区域,之后再来点击滚动区域,滑动会无效,之后再点击之后滑动才会生效, 这个属性是可以解决这个问题的,大大提升小程序用户体验。

解决方法：

直接在本页面的.json文件下添加"allowsBounceVertical": "NO"属性即可

原因2:

点了一个锚点实现了跳转，这个时候你快速滚动页面再点之前点的锚点，页面就不会再跳转了。

解决方法：

需要监听滚动事件，滚动时将scroll-into-view属性的值清空。
在每次锚点跳转后，再由一个异步操作将scroll-into-view属性的值清空。

// 右侧滑栏的 onScroll 事件函数
  _scroll(event) {
    // 右侧滚动对应左侧的索引值
    var i = this.currentIndex(event);
    this.setData({
      currentIndex: i,
      currentTitle: this.data.sortTitleList[i],
      scrollTopId: '' // 优化滚动时点击左侧tab页不跳转
    })
  },

3、手机预览报错`Uncaught (in promise) #<Object>`

原因:

手机没有连接wifi，电脑连的是Wi-Fi，手机连得是我自己的移动网络，就会这样报错。

解决方法：

手机和电脑需要在同一个网络下，即需连接同一个Wi-Fi

4、手机预览时字体图标不显示，模拟器中却显示

问题解析：

在iconfont.acss中引入字体文件时使用的是相对路径，需要使用绝对路径。

解决方法：

引入字体文件时使用绝对路径

5、小程序嵌套页面最多5层

问题：我们使用dd.dd.navigateTo()跳转路由时，发现一旦调转的层级过多，将不能再跳转。

解决方法：

dd.navigateTo({
    url:'../owerOrder/owerOrder',
    // 跳转失败，就关闭当前所有页面，跳转到应用内的某个指定页面。
    fail:(err) => {
        dd.reLaunch({
            url: '../owerOrder/owerOrder'
        })
    }
})

6、访问ip不在白名单之中

当请求开放平台服务端接口遇到此类时，表示您的请求ip不在appkey的服务器出口ip中。按以下方式排查并修改：

1、上开发者后台打开您的应用，这里一定要确认appkey要对应上。

2、点击“修改”，把返回错误接口里的request ip地址加到服务器出口IP列表中。

3、如果遇到明明已经修改了应用的服务器出口IP，但是调用接口还是报错的话。这个时候一定要再次查看下您的代码，确认下appkey和应用是不是一一对应的。

7、小程序与微应用的更新机制

小程序：文档

app.js

  onShow() {
    // 更新最新包
    this.updateManager()
  },
  // 更新包
  updateManager() {
    const updateManager = dd.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      // 是否有更新
      if (res.hasUpdate) {
        updateManager.onUpdateReady(function (ret) {
          // console.log(ret.version) // 更新版本号
          dd.confirm({
            title: '更新提示',
            content: '新版本已经准备好，是否重启应用？',
            success: function (res) {
              if (res.confirm) {
                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate()
              }
            }
          })
        })
      }
    })
  },

微应用

项目部署上线后，若客户端还是之前的页面，可以在应用内点击刷新按钮刷新

8、如何监听页面左侧的返回按钮

钉钉小程序

微信小程序支持自定义导航栏，可以解决这个问题，而钉钉小程序官方不支持。故该问题暂时无法解决。

钉钉微应用

1、此事件不支持在自定义首页使用。

2、iOS的返回事件请使用setLeft组件。

只能在一个.vue页面使用，如果其他页面要用的话需要配合vuex来使用。不能在多个页面调用，否则返回会失效。并且安卓和IOS调用方法不同。需要做判断。

调用方法

dd.ready(() => {
      const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // 判断是否是 android终端
      if (isAndroid) {
        document.addEventListener('backbutton', (e) => { //安卓调用方式
         e.preventDefault() //阻止返回
          //在这里处理你的业务
          if (this.$route.name === 'addPrizeAndBuckle') { //这个页面用了很多组件，并且类似于跳转到新的页面，直接点击返回的话就会回到首页，所以需要做判断
            e.preventDefault()
            if (this.app.isMenubuckleScreenPop > 0) { //判断是否在组件页面，不在的话直接返回，在的话点击返回需要关闭组件
              this.SET_IS_MENUBUCKLE_SCREEN_POP(-1)
            } else {
              Dialog.confirm({
                title: '提示',
                message: '您的奖扣还未提交，退出后所填写的信息将不做保存，是否确认退出？'
              }).then(() => {
                window.history.go(-1)
              }).catch(() => {
              })
            }
          } 
        })
      } else {
        dd.biz.navigation.setLeft({
          control: true,
          text: '',
          onSuccess: (result) => { //IOS调用方法 ios返回不起作用，需要手动让他返回window.history.go(-1)
           if (this.$route.name === 'addPrizeAndBuckle') {
              if (this.app.isMenubuckleScreenPop > 0) {
                this.SET_IS_MENUBUCKLE_SCREEN_POP(-1)
              } else {
                Dialog.confirm({
                  title: '提示',
                  message: '您的奖扣还未提交，退出后所填写的信息将不做保存，是否确认退出？'
                }).then(() => {
                  window.history.go(-1)
                }).catch(() => {
                })
              }
            } 
          },
          onFail(err) {
            console.log('返回失败', err)
          }
        })
      }
    })