2022
我们一起努力

vue项目中使用微信jssdk如何实现调用微信相册并将图片上传 - 开发技术

vue项目中使用微信jssdk如何实现调用微信相册并将图片上传?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

vue 使用微信jssdk

1、引入weixin-js-sdk

npm install weixin-js-sdk

使用文档 https://www.npmjs.com/package/weixin-js-sdk

2、配置 vue中微信jssdk配置

import wx from 'weixin-js-sdk'
 created(){ //微信jssdk配置
 let timestamp=new Date().getTime();//时间戳
 let noncestr=Math.random().toString(36).substr(2);//随机字符串
 let url = "http://"+window.location.host+'/' ;//获取锚点之前的链接 
 let dataJ={
  timestamp,
  noncestr,
  url
 }
 //获取签名 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 getSignatureApi(dataJ).then(res=>{//调用获取签名方法
  wx.config({
  debug: false,
  appId: '12312312312312', // 必填,公众号的唯一标识
  timestamp:timestamp , // 必填,生成签名的时间戳
  nonceStr: noncestr, // 必填,生成签名的随机串
  signature:res.signature,
  jsApiList: [
   'chooseImage',//选择图片
   'uploadImage'//上传图片
  ] // 必填,需要使用的JS接口列表
  });
 })
}

3、使用

methods: {
  choseFile:function(id,index){//点击事件选择图片
 var _this=this;
 wx.chooseImage({//
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
  let localId=res.localIds;//获取到本地localIds
  wx.uploadImage({//上传到微信服务器
   localId: localId.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
   isShowProgressTips: 1, // 默认为1,显示进度提示
   success: function (ret) {}
  });
  }
 });
 }
}

补充知识:Vue公众号开发调用微信扫一扫接口实现扫码功能(JSSDK)

1、安装、引用微信js-sdk

#通过yarn安装 yarn add weixin-js-sdk

#通过npm安装 npm i weixin-js-sdk

vue项目中使用微信jssdk如何实现调用微信相册并将图片上传 - 开发技术

项目中的引用 import wx from 'weixin-js-sdk'

2、调用sign接口传入当前环境的url、公众号签名信息

3、methods(数据处理)

wx.scanQRCode 调用微信的扫一扫接口(官方文档地址可查看参数介绍)

needResult 默认为0,扫描结果由微信处理,1则直接返回扫描结果(根据自己的项目需求)

resultStr 二维码中携带的参数 (needResult为1时,扫码返回结果)

处理扫码后的参数并赋值,调用项目中的接口跳转页面等操作(根据自己的项目需要)

关于vue项目中使用微信jssdk如何实现调用微信相册并将图片上传问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注云行业资讯频道了解更多相关知识。

赞(0)
文章名称:《vue项目中使用微信jssdk如何实现调用微信相册并将图片上传 - 开发技术》
文章链接:https://www.fzvps.com/83192.html
本站文章来源于互联网,如有侵权,请联系管理删除,本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
图片版权归属各自创作者所有,图片水印出于防止被无耻之徒盗取劳动成果的目的。

评论 抢沙发

评论前必须登录!