uni-app中常见功能

页面分享

1.需要在钩子函数中调用方法

onLoad((options) => {
  // #ifdef MP-WEIXIN
  uni.showShareMenu({
    withShareTicket: true, // 是否使用带 shareTicket 的转发
    menus: ['shareAppMessage', 'shareTimeline'], // 需要显示的菜单列表，例如分享到朋友圈等
  });
  // #endif
});

2.引用钩子函数，并进行相应的配置

import { onShareAppMessage } from '@dcloudio/uni-app';
// 允许页面被分享
onShareAppMessage(() => {
  return {
    title: roomDetail.value.resourceName,
    imageUrl: roomDetail.value.picArr[0], // 图片 URL
    path: `/pages/Tenant/roomDetail?resourceId=${resourceId.value}&roomPrimaryId=${roomPrimaryId.value}&coreArr=${coreArr.value}&checkInTime=${checkInTime.value}&checkOutTime=${checkOutTime.value}`,
    success: function () {
      console.log('分享成功');
    },
  };
});

点击放大图片

uni.previewImage

<image :src="item.qrcode" @click="previewImage(item.qrcode)" />

// 图片预览
const previewImage = (val) => {
    uni.previewImage({
        urls: [val],
    });
};

微信小程序中图片的显示

imgae标签中的mode属性

• scaleToFill 缩放模式（默认属性），不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
• aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
• aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

<image :src="echoimg" mode="scaleToFill" />

uni-app中进行页面跳转

1.使用 navigateTo 方法进行跳转：

uni.navigateTo({
   url: '/pages/home/home'
});

2.使用 redirectTo 方法进行跳转：

uni.redirectTo({
   url: '/pages/home/home'
});

redirectTo 方法会关闭当前页面，跳转到应用程序中的指定页面。新页面的打开方式是动画切换的，也可以在跳转页面时携带参数。 3.使用 reLaunch 方法进行跳转：

uni.reLaunch({
   url: '/pages/home/home'
});

4.使用 switchTab 方法进行跳转：

uni.switchTab({
   url: '/pages/home/home'
});

switchTab 方法主要用于跳转到应用程序的底部菜单栏中的指定页面，必须在应用程序的 tabBar 中定义对应的路径，否则该方法将无法使用。

跳转传参

1.在页面跳转时候利用url进行传参

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

onLoad((option) =>{ //option为object类型，会序列化上个页面传递的参数
    console.log(option.id)
    console.log(option.name)
})

2.如果参数太长，可以使用encodeURIComponent

// 使用encodeURIComponent和JSON.stringify对对象进行编码和序列化
let encodedObj = encodeURIComponent(JSON.stringify(searchObject.value));

uni.navigateTo({
    url: `/pages/home?obj=${encodedObj}`,
  });

// 获取传递过来的参数(对象)
const getObj = (options) => {
  searchObj.value = JSON.parse(decodeURIComponent(options.obj));
  console.log('接收到的参数:', searchObj.value);
};

3.利用uni.$on和uni.$emit实现页面通信

// 页面1发送事件，并传递参数
 uni.navigateBack({
    delta: 1, // 回退的层数
    success: () => {
      uni.$emit('dataBack', {
        regionId: id,
        titleFull: showCity.value,
        children: item,
      })
    },
  })

// 页面2接收参数
onLoad(() => {
   uni.$on('dataBack', function (data) {
    searchObject.value.region = data.regionId;
    address.value = data.titleFull;
    searchObject.value.cityChildren = data.children;
 });
})

接收二进制流文件并转为base64显示在页面

1.在接口请求的位置可以设置responseType

/**
 * 管理员获取人脸照片
 * @param {object} data
 * @returns
 */
export function managerGetImg(data) {
    return request({
        timeout: 20000,
        url: '/mp/manager/image/get/v1',
        method: 'post',
        data,
        responseType: 'arraybuffer', // 响应数据类型
    });
}

2.也可以在拦截器中处理

function httpInterceptor(options) {
    // showLoading();
    // 请求前的拦截器逻辑
    const secretStore = userSecretStore();
    // 判断非http开头需要拼接参数
    if (!options.url.startsWith('http')) {
        options.url = baseUrl + options.url;
    }
    if (options.url.includes('manager/image/get')) options.responseType = 'arraybuffer'; // 如果请求地址是图片上传，则需要设置请求类型为arraybuffer

    // 设置请求超时时间
    if (!options['timeout']) options.timeout = 10000;

    // 设置请求头
    options.header = {
        ...options.header,
        uniqueId: secretStore.uniqueid,
        iv: secretStore.iv,
    };
    options.data = encodeQueryData(JSON.stringify(options.data));
    return options;
}

3.接收到arraybuffer数据类型转为base64数据

const request = (options) => {
    options = httpInterceptor(options); // 在发送请求前调用拦截器
    return new Promise((resolve, reject) => {
        uni.request({
            ...options,
            success: (response) => {
                // hideLoading();
                // 响应拦截器逻辑
                if (response.data.code === -401) {
                    GetAESKEY(); // AES KEY失效，需要重新申请
                }
                if (response.data.data) response.data.data = JSON.parse(decodeData(response.data.data));

                // 检查是否是二进制数据响应
                if (response.data && response.data.constructor === ArrayBuffer) {
                    const base64Data = uni.arrayBufferToBase64(response.data);
                    response.data = 'data:image/png;base64,' + base64Data; // 如果是二进制流数据，则需要将二进制流数据转为bace64类型数据并回显
                }

                resolve(response.data); // 根据需要调整
            },
            fail: (error) => {
                ...
            },
        });
    });
};

小程序中点击图片放大

// 预览照片
const previewImage = (count) => {
    uni.previewImage({
        urls: [count],
    });
};

长按保存图片

show-menu-by-longpress增加这个属性即可

<image :show-menu-by-longpress="true" src="" mode="scaleToFill" />