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


Posted in Javascript onNovember 13, 2020

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

项目中的引用 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,调用微信相册上传图片功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 #Javascript
vue 授权获取微信openId操作
Nov 13 #Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
You might like
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
python+os根据文件名自动生成文本
2019/03/21 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
个人自我评价分享
2013/12/20 职场文书
优秀会计求职信
2014/07/04 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
大连导游词
2015/02/12 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
队名及霸气口号大全
2015/12/25 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang