About WeChat JS-SDK's function of selecting mobile phone photos to upload

This article mainly introduces the WeChat JS-SDK's function of selecting mobile phone photos to upload in detail. It has a certain reference value. Interested friends can refer to

if you encounter the need to select photos in the project. For upload requirements, because the web page runs in WeChat's browser, the photo selection function provided by WeChat's js-sdk is used for project development. WeChat web developer tools need to be used in actual development. Detailed reference link: https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html.

1. Configure WeChat JS-SDK related files

1), JSSDk uses the latest 1.2.0 version: https://res.wx.qq.com /open/js/jweixin-1.2.0.js.

ios web development adaptation issues:

Changes: JSSDK versions below 1.2.0 no longer support localld returned by using the chooseImage api, such as: "img src=wxLocalResource: //50114659201332" to preview the image.

Adaptation suggestions: Directly upgrade the JSSDK to the latest version 1.2.0 to help the page automatically adapt, but it may not be effective in some scenarios. In this case, you can use the getLocalImgData interface to directly obtain the data.

(Detailed code attached)

2), jsapiSign.js file:

/**
 * 使用jssdk接口的页面，必须引用该文件
 * actionUrl：后台服务请求地址
 * url：微信jssdk授权页面地址
 */
$.post("/getJsapiSign", {'url':location.href.split('#')[0]}, function(data) {
 wx.config({
 debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appId : data.appid, // 必填，公众号的唯一标识
 timestamp : data.timestamp, // 必填，生成签名的时间戳
 nonceStr : data.noncestr, // 必填，生成签名的随机串
 signature : data.signature,// 必填，签名，见附录1
 jsApiList : [ 'checkJsApi',
  'onMenuShareTimeline',
  'onMenuShareAppMessage',
  'onMenuShareQQ',
  'onMenuShareWeibo',
  'hideMenuItems',
  'showMenuItems',
  'hideAllNonBaseMenuItem',
  'showAllNonBaseMenuItem',
  'translateVoice',
  'startRecord',
  'stopRecord',
  'onRecordEnd',
  'playVoice',
  'pauseVoice',
  'stopVoice',
  'uploadVoice',
  'downloadVoice',
  'chooseImage',
  'previewImage',
  'uploadImage',
  'downloadImage',
  'getNetworkType',
  'openLocation',
  'getLocation',
  'hideOptionMenu',
  'showOptionMenu',
  'closeWindow',
  'scanQRCode',
  'chooseWXPay',
  'openProductSpecificView',
  'addCard',
  'chooseCard',
  'openCard',
  'getLocalImgData'
 ]
 });
 
 wx.error(function(res) {
 alert("wx.config加载失败");
 });
}, 'json');

2. Specific implementation process

1), select photos

Here we use the chooseImage method of WeChat js-sdk to get the id of the photo stored locally, which is very simple:

2). Obtain photo data

According to WeChat’s official development documentation, the obtained localId can be displayed directly as the src attribute of the img element

3). Photo upload

Here Using the uploadImage method of WeChat js-sdk

wx.chooseImage({
 count: 1, // 默认9
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
 success: function (res) {
  var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  wx.uploadImage({
  localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
  isShowProgressTips: 1, // 默认为1，显示进度提示
  success: function (res) {
   var medias = {'lid':localIds[0].toString(), 'sid':res.serverId};
   $('#img_media').attr('src', medias.lid);
  },fail:function(res){
   alert("上传失败");
  }
  });
 }
});

3. iOS WKWebview web development adaptation

JSAPI related adaptation

1), cache will no longer be supported

Change: cache jsapi will not be supported in WKWebview.

Adaptation suggestion: All developers using this API can remove page-related logic.

2), the page previews the image through LocalID

Change: JSSDK versions below 1.2.0 no longer support localld returned by using the chooseImage api, such as: "img src=wxLocalResource:// 50114659201332" to preview the image.

Adaptation suggestion: Directly upgrade the JSSDK to the latest version 1.2.0 to help the page automatically adapt, but it may not be effective in some scenarios. In this case, you can use the getLocalImgData interface to directly obtain the data.

(The current online versions of JSSDk are 1.0.0 and 1.1.0, and the updated version is 1.2.0, https://res.wx.qq.com/open/js/jweixin-1.2.0. js )

if (window.__wxjs_is_wkwebview) {
 wx.getLocalImgData({
 localId: localIds[0], // 图片的localID
 success: function (res) {
  var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
  localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
  $('#img_media').attr('src', localData);
 },fail:function(res){
  alert("显示失败");
 }
 });
}

3. If you use JSSDK and use wx.config for permission authorization, you need to pay attention to the failure of jsapi call

Changes: The internal implementation changes of WKWebview have caused us to make certain logical adjustments to the jsapi permission management of the page in WeChat. There is a very small possibility that the jsapi that was previously authorized normally will not obtain permissions normally, resulting in calling jsapi. fail.

Adaptation suggestions:

1. iOS WeChat 6.5.1, WKWebview is known to have the following problems in this version: the page uses HTML5 History API pushState; popstate; replaceState, etc. to control page navigation (typically a single application page), and use wx.config of JSSDK to authorize jsapi. At this time, there is a high probability that jsapi will fail to call due to lack of permission. If possible, Anchor hash technology can be used to replace History technology on the page in 6.5.1 to solve this problem.

2. iOS WeChat 6.5.2 and later versions will not have the above problems, but it cannot be 100% confirmed that pages that use history or hash technology to change the page navigation address will not have such problems at all. Still Developers need to pay attention to such issues.

This article has been compiled into "Summary of JavaScript WeChat Development Skills". Everyone is welcome to learn and read.

I would like to recommend a tutorial on WeChat Mini Program that is getting a lot of attention right now: "WeChat Mini Program Development Tutorial" which the editor has carefully compiled for you. I hope you like it.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Asynchronous notification and verification order method of calling SDK after payment in WeChat applet

##WeChat Network requests in mini programs (post requests and get requests)

The above is the detailed content of About WeChat JS-SDK's function of selecting mobile phone photos to upload. For more information, please follow other related articles on the PHP Chinese website!