uniapp好不好用呢~

随风而却
389 阅读3分钟

在这次使用了 uni 之后感觉还不如使用原生的小程序来开发。

在吐槽个，感觉uView 框架在小程序好多都不太兼容，也可能是我没配置好。

小弟技术有限

uni方法下的this使用

showActionSheet() {
      const _this = this
      uni.showActionSheet({
        itemList: ["删除拜访照片"],
        itemColor: "#F94E4E",
        success: (res) => 
          if (res.tapIndex == 0) {
            this.picUrl = "";
            _this.picUrl = "";
          }
        },
        fail: function (res) {
          console.log(res.errMsg);
        },
      });
    },

** 这里的this指向的是uni **

用到的函数方法记录下

  1. uni.showActionSheet(OBJ)，从底部向上弹出操作菜单
  2. uni.chooseImage(OBJ)，从本地相册选择图片或使用相机拍照
  3. uni.uploadFile(OBJ)，将本地资源上传到服务器 4.uni.downloadFile(OBJ)，下载文件资源到本地 5.uni.openDocument(OBJ)，新开页面打开文档，支持格式：doc,xls,ppt,pdf,docx,xlsx,ppts,图片等

uni.showActionSheet(OBJ)

属性：

  • title：字符串，菜单标题
  • alertText：字符串，警示文案
  • itemList：数组，文字
  • itemColor：文字颜色，默认是#000
  • success：函数，成功
  • fail：函数，失败
  • complete：函数，接口调用解释回调函数（成功、失败都会执行）
  • tapIndex：number，从上到下顺序

image.png

uniapp showactionsheet

uni.chooseImage(OBJ)

  • count：number，最多可以选择图片张数，默认9
  • sizeType：Array<String>,original 原图，compressed 压缩图，默认二者都有
  • sourceType：Array<String>，album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
  • success：函数，成功
  • fail：函数，失败
  • complete：函数，接口调用解释回调函数（成功、失败都会执行） uniapp chooseimage

uni.uploadFile(OBJ)

  • url：字符串，接口地址
  • files：Array,需要上传的文件列表
  • filePath：字符串，要上传文件资源的路径
    • file和filePath只能选其中一个用，使用files时，filePath和name不生效
  • file：file，文件对象
  • name：字符串，后端接收的文件名
  • header：对象，HTTP请求header，header不能设置referer
  • success：函数，成功
  • fail：函数，失败
  • complete：函数，接口调用解释回调函数（成功、失败都会执行）

注意

App支持多文件上传，微信小程序只支持单文件上传

uniapp uploadfile

uni.chooseImage和uni.uploadFile能实现上传功能

chooseImg() {
      //选择图片
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        success: (res) => {
          uni.uploadFile({
            url: "接口请求地址",
            filePath: res.tempFilePaths[0],
            header: {
              token: "你的token",
              "Content-Type": "multipart/form-data",
            },
            name: "file", // 后端接收的文件名
            complete: (res) => {
                console.log(res)
            },
          });
        },
      });
    },

uni.downloadfile(OBJ)

  • url：字符串，接口地址
  • filePath：字符串，指定文件下载后存储的路径（本地路径）
  • header：对象，HTTP请求header，header不能设置referer
  • success：函数，成功
  • fail：函数，失败
  • complete：函数，接口调用解释回调函数（成功、失败都会执行）

uniapp downloadfile

uni.opendocument(OBJ)

  • filePath：字符串，文件路径，可通过 downFile 获得
  • fileType：字符串，文件类型，指定文件类型打开文件
  • showMenu：对象，右上角是否有可以转发分享的功能
  • success：函数，成功
  • fail：函数，失败
  • complete：函数，接口调用解释回调函数（成功、失败都会执行） uniapp opendocument

downloadfile和opendocument，实现预览

pdfFile(item) {
      uni.downloadFile({
        url: item,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            fileType: 'pdf',
            showMenu: true,
            success: function (res) {
              console.log("打开文档成功");
            },
            fail: function (res) {
              console.log("失败");
            },
          });
        },
      });
    },

注意

在微信开发者能正常显示图片或者打开文档的话，在真机不行的话，有可能是因为你的网络和服务器不是同一个。

小白，入门1年多了，但是摸鱼摸太久了，现在慢慢补补自己的知识点，努力学习~~~

avatar
文章
阅读
粉丝