关于APICloud 开发文档

介绍:
APICloud是国内低代码开发平台的引领者与效率革命的探索者,基于云原生、混合开发、API连接、DevOps等能力的广泛应用,在APICloud低代码开发平台,可将原有数月甚至数年的开发时间成倍缩短,加速企业级应用的研发与落地,从而为企业降本增效,轻松应对创新性数字化挑战...

废话不多说,总之在移动端运用它可以轻便的完成很多功能的开发与实现~

此篇文章介绍部分我在开发中运用它解决过的问题

目录:

app内禁用某个页面手势滑动返回

将屏幕像素转换成图片保存至手机相册

单个页面强制横屏

选择本地图片前获取设备权限

那么就开始逐一介绍啦!!!

1. app内禁用某个页面手势滑动返回

如果想禁用某个单独的页面手势滑动返回,在api文档上只找到了ios的禁用滑动返回,但是安卓却没有,为此请教了移动组相关人员,总结出可以使用以下api来实现

ios:如果是通过openwin跳转的,则在跳转中加这个参数即可,或添加监听参数,看下面keyback事件

php 复制代码
     api.openWin({
         name: this.RandomPass(10),
         url: `${userHost}/icve-m/#/whiteboard`,
         bounces: true,
         slidBackEnabled: false,//禁用ios手势滑动返回
         softInputMode: 'resize'
        })

安卓:监听安卓设备 back 键被点击事件,以及 TabLayout 中的返回按钮点击事件,iOS 中可传入 slidBackIntercept 参数监听页面右滑返回事件

php 复制代码
api.addEventListener({
    name: 'keyback',
    extra:{
    slidBackIntercept:false //打开页面时若 slidBackType 参数为 edge,可通过此参数设置是否拦截页面右滑返回,只 iOS 有效,默认值为 false,布尔类型
}},
   function(ret, err) {
 //这里可以做单独的安卓操作,滑动时关闭此页面
   api.closeWin()
});
2. 将屏幕像素转换成图片保存至手机相册-saveMediaToAlbum

如果想将一个图片保存至手机相册,除了处理图片url外,最重要的是怎么保存至手机相册

javascript 复制代码
let aUrl = `${userHost.slice(0, -1)}${res}`
      api.saveMediaToAlbum(
        {
          path: aUrl
        },
        function (ret, err) {
          if (ret && ret.status) {
            alert('保存成功')
          } else {
            alert('保存失败')
          }
        }
      )
3. 单个页面强制横屏

近期开发白板,需要将白板页变成横屏,尝试过用css旋转或者用定位进行视觉上的横屏,但是由于白板功能较多,关系到绘制/旋转/文本框移动等功能的x与y轴的偏移

在询问各个大佬过后,得出了一下api监听方法:

javascript 复制代码
// 监听页面显示事件
        api.addEventListener(
          {
            name: 'viewappear'
          },
          function (ret, err) {
            // 设置为横屏
            api.setScreenOrientation({
              orientation: 'landscape_left' // 设置为横屏左侧朝上
            })
          }
        )

但是发现这样做横屏极其不稳定,比如app从前台退到后台后再进入app就会变成竖屏、ios横屏需要等待半分钟、直接返回会让整个app都变成横屏

其中用到了事件轮询去检测api是否获取到,获取到再执行以上方法,这样就解决了时而横屏时而竖屏的问题:

另外增加了监听app从后台到前台的方法,这样就都解决啦:

以下是完整代码:获取到api对象后就清除不执行检测

javascript 复制代码
this.apiTimer = setInterval(() => {
      if (api != null) {
        window.clearInterval(this.apiTimer)
        // 监听页面显示事件
        api.addEventListener(
          {
            name: 'viewappear'
          },
          function (ret, err) {
            // 设置为横屏
            api.setScreenOrientation({
              orientation: 'landscape_left' // 设置为横屏左侧朝上
            })
          }
        )
        api.addEventListener(
          {
            name: 'resume'
          },
          function (ret, err) {
            api.setScreenOrientation({
              orientation: 'landscape_left' // 设置为横屏左侧朝上
            })
          }
        )
      }
    }, 500)

那横屏影响了整个app该怎么做呢?由于我们跳转用的是vue路由跳转,可能里面有什么影响吧,所以改成了api的跳转方式,跳过去后返回的时候再关闭当前页面,这样就解决了影响app其他页面的问题:

javascript 复制代码
  //跳转白板页
    whiteboard() {
      api.openWin({
        name: this.RandomPass(10),
        url: `${userHost}/icve-m/#/whiteboard`,
        bounces: true,
        softInputMode: 'resize'
      })
    },
javascript 复制代码
//返回上一页
onClickLeft() {
      api.setScreenOrientation({
        orientation: 'portrait_up' // 设置为横屏左侧朝上
      })
      setTimeout(function () {
        api.closeWin()
      }, 500)
    },
4. 选择本地图片前获取设备权限-requestPermission
javascript 复制代码
 openPermission() {
      //获取相机和文件访问权限
      if (typeof api != 'undefined') {
        let permissionList = api.hasPermission({ list: ['camera', 'photos'] })
        if (!permissionList[0].granted || !permissionList[0].granted) {
          api.confirm(
            {
              msg: '应用需要您的授权才能访问相机及本地相册',
              buttons: ['取消', '去设置']//调起权限时的按钮选择
            },
            function (ret) {
              if (ret.buttonIndex == 2) {
                api.requestPermission(
                  {
                    list: ['camera', 'photos']//获取权限后调起选择时文件还是照片
                  },
                  function (res) {
                    if (res.list[0].granted && res.list[1].granted) {
                      this.$refs.file.click()//选择后调起本地文件选择框
                    }
                  }
                )
              }
            }
          )
        } else {
          this.$refs.file.click()
        }
      }

关于APICloud 部分介绍就到这里啦,学艺不精,请多多指教

相关推荐
用户61848240219511 分钟前
我受够了 Electron 的 IPC 样板代码,于是写了 electron-ipc-auto-import
前端
梦想的颜色16 分钟前
TypeScript 完全指南(中):函数、接口、类与高级类型
前端·typescript
鹏多多17 分钟前
OpenSpec+SDD规范驱动AI Agent开发项目实战指南
前端·vue.js·react.js
叶小树咯24 分钟前
React 为什么不能像 Vue 那样 state.count++
前端·react.js
ricardo197328 分钟前
防抖节流进阶 + requestAnimationFrame:滚动与输入场景的性能优化
前端·面试
wjj不想说话29 分钟前
你项目里的 Pinia,可能已经成了第二个 localStorage
前端·vue.js
wuhen_n36 分钟前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·langchain·ai编程
天蓝色的鱼鱼1 小时前
画1万个图形就卡成PPT?试试这款国产高性能2D引擎
前端·javascript
云水一下1 小时前
JavaScript 从零基础到精通系列:异步编程与网络请求
前端·javascript
卡卡军2 小时前
🌈 react-sketch-ruler v3 升级之旅:当 React 遇上跨框架标尺引擎
前端·react.js