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 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
javascript绘制简单钟表效果
Apr 07 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
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
yii添删改查实例
2015/11/16 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
在Python中使用元类的教程
2015/04/28 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python3 翻转二叉树的实现
2019/09/30 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
综合实践教学反思
2014/01/31 职场文书
小小的船教学反思
2014/02/21 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
小组口号霸气押韵
2015/12/24 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python
PHP正则表达式之RCEService回溯
2022/04/11 PHP
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技