关于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 部分介绍就到这里啦,学艺不精,请多多指教

相关推荐
xiao-xiang7 分钟前
jenkins-通过api获取所有job及最新build信息
前端·servlet·jenkins
C语言魔术师23 分钟前
【小游戏篇】三子棋游戏
前端·算法·游戏
匹马夕阳2 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?2 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
桂月二二8 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062069 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb9 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角9 小时前
CSS 颜色
前端·css
九酒10 小时前
从UI稿到代码优化,看Trae AI 编辑器如何帮助开发者提效
前端·trae
浪浪山小白兔10 小时前
HTML5 新表单属性详解
前端·html·html5