vue3.0 开发微信公众号调用相机和相册(解决ios首次进入调用不了)

废话不说直接上代码，IOS退出页面从公众号首次进入是没办法调用jssdk的，搞了半天没搞好，搜到隔壁兄弟用input效果出奇的好哈哈哈哈！

<template>
<!--  资料编辑  -->
<div class="visitor-page">
	<input type="file" v-show="false" @change="gainImage" ref="fileButton" />
	<img  @click="chooseImageInfo" v-if="updateImg" class="image-container" :src="updateImg" alt="">
	        <img  @click="chooseImageInfo" v-else class="image-container" src="@/assets/images/upload-logo.png" alt="">
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Message } from 'tdesign-mobile-vue'
import { Toast } from 'tdesign-mobile-vue'

import wx from 'weixin-js-sdk'
import { sign } from '@/utils/WXSign';
import { getTicket } from '@/api/login'

const router = useRouter()

const uploadFile = ref(null);
const updateImg = ref(null);
// ios上传
const fileButton = ref(null);
// ios方法
const gainImage = () => {
  let inputDom = fileButton.value;
  console.log('fileButton.value', inputDom.files[0])
  let file = inputDom.files[0]; // 文件
  console.log(isImageFile(file.name))
  if (isImageFile(file.name)) {
    if (file.type.indexOf("image") != -1) {
      // 调用上传图片的接口
      uploadFile.value = file;
      // 图片base64
      const reader = new FileReader();
      reader.onload = (e) => {
        // e.target.result 就是转化成base64的图片地址
        console.log('转化成base64的图片地址', e.target.result);
        updateImg.value = e.target.result;
      };
      reader.readAsDataURL(file);
    } else {
      // 提示选择图片
      Toast({
        theme: 'error',
        direction: 'column',
        message: '请选择图片',
      });
    }
  } else {
    // 图片格式错误
    Toast({
      theme: 'error',
      direction: 'column',
      message: '图片格式错误',
    });
    return;
  }
}
// 判断是不是图片
const isImageFile = (url) => {
  // 获取文件扩展名
  const extension = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
  // 支持的图片扩展名列表
  const imageExtensions = ['jpg', 'jpeg', 'png', 'bmp'];
  // 判断当前文件扩展名是否为图片扩展名
  if (imageExtensions.includes(extension)) {
    return true;
  }
  return false;
}
let u = navigator.userAgent || navigator.vendor || window.opera;
let isIOS = /iPad|iPhone|iPod/.test(u) && !window.MSStream; //ios终端
// 点击 根据机型调用选择图片和拍照
const chooseImageInfo = () => {
  if (isIOS) {
    fileButton.value.click();
  } else {
    getTicket().then((res) => {
      if (res.data) {
        let signData = sign(res.data.ticket, window.location.href);
        // console.log(signData)
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有（我使用的压缩图）
          sourceType: ['album','camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            let file = res.localIds[0];
            // console.log('chooseImage-file', file)
            wx.getLocalImgData({ // 使用这个方法将chooseImage返回的临时路径转换为base64编码
              localId: file.toString(),
              success: function (res) {
                console.log('getLocalImgData返回', res)
                const localData = res.localData;
                let imageBase64 = "";
                if (localData.indexOf("data:image") == 0) {
                  //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                  imageBase64 = localData;
                } else {
                  //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                  //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                  imageBase64 =
                    "data:image/jpeg;base64," +
                    localData.replace(/\n/g, "");
                }
                // console.log(imageBase64)
                updateImg.value = imageBase64;
                console.log('updateImg.value', updateImg)
                uploadFile.value = base64ToFile(imageBase64, "people.jpg"); // 在将base64编码转换成file文件即可上传
                console.log('base64ToFile-', uploadFile.value);
              },
            });
          },
          cancel(): void {
          },
        })
        return
        wx.config({
          debug: false, // 调试
          appId: "wx9eeb73e006799e6e", // 必填，公众号的唯一标识
          timestamp: signData.timestamp, // 必填，生成签名的时间戳
          nonceStr: signData.nonceStr, // 必填，生成签名的随机串
          signature: signData.signature, // 必填，签名
          jsApiList: ["chooseImage", "getLocalImgData"], // 需要使用的方法的名称
        });
        wx.ready(() => {

        });
        wx.error(function (res) {
          console.log(res)
        });
      }
    })
  }
}
// base64转File格式
const base64ToFile = (base64, fileName) => {
  // base64转file文件
  let arr = base64.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bytes = atob(arr[1]);
  let n = bytes.length;
  let ia = new Uint8Array(n);
  while (n--) {
    ia[n] = bytes.charCodeAt(n);
  }
  return new File([ia], fileName, { type: mime });
}

</script>

WXSign

import jsSHA from 'jssha'
var createNonceStr = function () {
  return Math.random().toString(36).substr(2, 15);
};

var createTimestamp = function () {
  return parseInt(new Date().getTime() / 1000) + '';
};

var raw = function (args) {
  var keys = Object.keys(args);
  keys = keys.sort()
  var newArgs = {};
  keys.forEach(function (key) {
    newArgs[key.toLowerCase()] = args[key];
  });

  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

/**
* @synopsis 签名算法 
*
* @param jsapi_ticket 用于签名的 jsapi_ticket
* @param url 用于签名的 url ，注意必须动态获取，不能 hardcode
*
* @returns
*/
export const sign = function (jsapi_ticket, url) {
  console.log(jsapi_ticket)
  var ret = {
    jsapi_ticket: jsapi_ticket,
    nonceStr: createNonceStr(),
    timestamp: createTimestamp(),
    url: url
  };
  let string = raw(ret);
  console.log('string', string)
  let shaObj = new jsSHA(string, 'TEXT');
  ret.signature = shaObj.getHash('SHA-1', 'HEX');
  return ret;
};