服务器之家

服务器之家 > 正文

vue 使用微信jssdk,调用微信相册上传图片功能

时间:2021-11-18 15:31     来源/作者:只会切图的前端

vue 使用微信jssdk

1、引入weixin-js-sdk

npm install weixin-js-sdk

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

2、配置 vue中微信jssdk配置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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、使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

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

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

vue 使用微信jssdk,调用微信相册上传图片功能

3、methods(数据处理)

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

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

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

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

vue 使用微信jssdk,调用微信相册上传图片功能

以上这篇vue 使用微信jssdk,调用微信相册上传图片功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_41786458/article/details/83009701

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部