最近做的微信网页要实现一个上传图片的功能,倒腾了半天终于搞好了,具体的步骤可以查看微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html,这里只是简答说一下,

JSSDK使用步骤

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js

第三步:请求后台接口,注入配置信息

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
下面是前端详细代码:
  1 (function () {
2 let url = 'caf/Verification/getConfig.do';
3 let myData = {};
4 myData['configUrl'] = location.href;
5 //alert(location.href);
6 sendAjax(url, myData, callback);
7
8 function callback(data) {
9 var timestamp = data.timestamp;
10 var noncestr = data.nonceStr;
11 var signature = data.signature;
12 //通过config接口注入权限验证配置
13 wx.config({
14 debug: false, //调试模式建议开启true
15 appId: "wx68df519fcf184a96", //微信公众号的appid,不是个人的
16 timestamp: timestamp.toString(),
17 nonceStr: noncestr, //生成签名的随机串
18 signature: signature, //签名
19 jsApiList: ['chooseImage', 'uploadImage', 'downloadImage'] //下面要调用的微信接口写在这里,否则不能使用
20 });
21 }
22 })();
//请求函数封装
function sendAjax(url,requestdata,callback) {
var getDataAddress = 'http://wx.ccnuoxin.cn/credit/'
mui.ajax({
type: "post",
url: getDataAddress+url,
async: true,
data: requestdata,
headers: {'Content-Type': 'application/json'},
dataType: "json",
//jsonp: "jsoncallback",
success: function (data) {
callback(data);
}
});
}

请求完成后,就可以调用上面配置的微信接口了

 function chooseImgfun(imgdesc, id) {
wx.chooseImage({
count: 1, // 默认9,1-9张
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
//上传图片
wx.uploadImage({
localId: '' + localIds + '', // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
let url = 'archives/Verification/uploadFile.do';
let myData = {};
myData['mediaId'] = serverId; sendAjax(url, myData, chooseImgfun_callback); function chooseImgfun_callback(data) {
mui.toast('上传成功');
var timestamp = parseInt((new Date()).valueOf());
var div = document.createElement("div");
div.className = "filebox";
div.id = "content" + timestamp;
div.innerHTML =
'<div class="uploadimg">' +
'<img class="uploadimgUrl" src="' + localIds + '" alt=""> ' +
'<span>' + imgdesc + '</span>' +
'</div>' +
'<div class="comm1 delete" id="delete' + timestamp + '" onclick="delefun(' + timestamp + ')"> ' +
'<img style="margin-right:0.4rem;width: 1.5rem;height: 1.5rem;vertical-align: middle" src="../image/delete.png" alt=""> ' +
'<span>删除</span> ' +
'</div>';
mui('#edcationContent')[0].append(div);
mui('#jnpopover').popover('hide'); //选择完关闭弹出框
var listData = {};
listData = {
"fileTypeId": id,
"filePath": data.filePath,
"dataid": timestamp
};
archivesList.push(listData);
}
}
}); }
})
}
wx.config的配置不需要前端做什么处理,都是后端处理好之后传到前端,前端拿来用即可,没有很复杂,希望帮到有需要的同行们

微信JS-SDK接口上传图片以及wx.config的配置的更多相关文章

  1. 关于微信JS SDK接口wx.previewImage预览接口的使用

    然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...

  2. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

  3. 微信开发(2):微信js sdk分享朋友圈,朋友,获取config接口注入权限验证(转)

    进行微信开发已经一阵子了,从最初的什么也不懂,到微信授权登录,分享,更改底部菜单,素材管理,等. 今天记录一下微信jssdk 的分享给朋友的功能,获取config接口注入. 官方文档走一下简单说:四步 ...

  4. 微信JS SDK接入的几点注意事项

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...

  5. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  6. 实战微信JS SDK开发:贺卡制作与播放(1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

  7. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  8. 微信JS SDK Demo 官方案例[转]

    摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...

  9. 微信JS SDK Demo

    微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置原文:http://www.cnblogs.com/txw1958/p/ ...

随机推荐

  1. 以IP地址的形式访问网站

    一致以来我都习惯于用域名的方式来访问网站,看到同事用IP地址来访问网站,也仅仅只是好奇,试了一下也没成功,于是就放弃了. 最近发布了站点,客户并没有提供域名,于是通过IP地址访问的方法又在我的脑子里蹦 ...

  2. shell脚本学习 (10) 从结构化文本提取数据

    1提取/ 后的数据 sed -e 's=/.*==' do.txt 2 sed -e 's=/.*=='\ -e 's=^\([^:]*\):\(.*\) \([^ ]*\)=\1:\3, \2=' ...

  3. Java JsonPath grab InvalidPathException in code, you must be catching Java 7's java.nio.file.InvalidPathException instead of JsonPath's com.jayway.jsonpath.InvalidPathExceptio

    I am using JsonPath and am able to parse my data and get the values when the path provided is correc ...

  4. Window随笔 - Windows Server 2012 評估版與延長使用期限【转载】

    Windows Server 2012 評估版與延長使用期限 下載與安裝 至 微軟的評估中心 下載 Windows Server 2012 SP1 180 天軟體試用版 (Windows Server ...

  5. 项目搭建(三):自定义DLL

    说明:程序中有些自定义的控件类型在TestStack.White框架中没有涉及,需要引入自定义的DLL,通过鼠标点击事件处理 使用:将自定义的ClassLibrary2.dll拷贝到项目/bin/de ...

  6. mongodb配置详解

    #启用日志文件,默认启用 journal=true #这个选项可以过滤掉一些无用的日志信息,若需要调试使用请设置为false quiet=false # 日志文件位置 logpath=/usr/loc ...

  7. C++内存修改器开源代码

    我们玩单机游戏时,游戏难度可能过大, 或者游戏已经比较熟练,想要增加游戏的玩法,这时候可以使用修改器. 内存式游戏修改器主要对游戏内存修改 修改时有两种方式,一是定时对内存数值进行修改.实现类似锁定的 ...

  8. Scrum 指南总结

    https://wenku.baidu.com/view/86e0979176eeaeaad1f3305a.html 原文地址:

  9. 2018 China Collegiate Programming Contest Final (CCPC-Final 2018)(A B G I L)

    A:签到题,正常模拟即可. #include<bits/stdc++.h> using namespace std; ; struct node{ int id, time; }; nod ...

  10. Pikachu漏洞练习平台实验——暴力破解(一)

    概述 一个有效的字典可以大大提高暴力破解的效率 比如常用的用户名/密码TOP500 脱裤后的账号密码(社工库) 根据特定的对象(比如手机.生日和银行卡号等)按照指定的规则来生成密码 暴力破解流程 确认 ...