WeChat JS-SDK choose mobile phone photo upload function, js-sdk select photo upload

JS-SDK choose mobile phone photo upload function, js-sdk select photo upload

The project needs to select the photo to upload. Because the webpage runs in the browser, the js-sdk provides the photo selection function for project development. Web Developer Tools are required in actual development. For details, refer to the following link: development.

1. Configure JS-SDK Related Files

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

Ios webpage development adaptation:

Changed: JSSDK versions earlier than 1.2.0 no longer support localld returned by using the chooseImage api to preview images in the form of "img src = wxLocalResource: // 50114659201332.

Suggestion: Upgrade JSSDK to the latest version 1.2.0 to help automatically adapt the page. However, this may not work in some scenarios. In this case, you can use the getLocalImgData interface to directly obtain data.

(The detailed code is attached)

2) jsapiSign. js file:

/*** The page using the jssdk interface must reference this file * actionUrl: backend service request address * url: jssdk authorization page address */$. post ("/getJsapiSign", {'url': location. href. split ('#') [0]}, function (data) {wx. config ({debug: false, // enable the debugging mode. The returned values of all called APIs are displayed in the client alert. To view the input parameters, you can open them on the pc, the parameter information is output through log and printed only on the pc end. AppId: data. appid, // required. timestamp is the unique identifier of the public number. timestamp, // required. The signature timestamp nonceStr: data. noncestr, // required. The random string signature: data. signature, // required, signature. For details, see Appendix 1 jsApiList: ['checksapi ', 'hangzhou', 'onmenushareappmessage', 'onmenushareqq', 'onmenushareweio', 'hidemenuitems ', 'showmenitems ', 'callback', 'wallnonbasemenuitem', 'translateevobice', 'startrecord ', 'stoprecord', 'onrecordend', 'playvoic', 'pausevoice ', 'stopvoice ', 'uploadobject', 'downloadobject', 'choooimage', 'previewimage', 'uploadimage', 'downloadimage', 'getnetworktype', 'openlocation', 'getlocation', 'hideoptionmenu ', 'showoptionmenu ', 'closewindow', 'scanqrcode', 'choosewxpay', 'openproductspecificview', 'addcard', 'choosecard', 'opencard', 'getlocalimgdata']}); wx. error (function (res) {alert ("wx. config loading failed ") ;};}, 'json ');

2. Specific implementation process

1) Select a photo

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

2) obtain photo data

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

3) upload photos

The uploadImage method of js-sdk is used here.

Wx. chooseImage ({count: 1, // default 9 sizeType: ['original', 'compressed '], // you can specify whether the source image or the compressed image is used. Both have sourceType by default: ['alipay', 'camera '], // you can specify whether the source is an album or a camera. Both have success: function (res) {var localIds = res by default. localIds; // return the local ID list of the selected image. localId can be used as the src attribute of the img label to display the image wx. uploadImage ({localId: localIds [0], // The local ID of the image to be uploaded. The chooseImage interface obtains the isShowProgressTips: 1, // The default value is 1, and the Progress prompt is success: function (res) {var medias = {'lid': localIds [0]. toString (), 'sid ': res. serverId}; $ ('# img_media '). attr ('src', medias. lid) ;}, fail: function (res) {alert ("Upload Failed ");}});}});

3. iOS WKWebview webpage development adaptation

JSAPI adaptation

1) cache is no longer supported

Change: cache jsapi is not supported in WKWebview.

Suggestion: All developers who use this api can remove the page-related logic.

2) preview the image through LocalID on the page

Changed: JSSDK versions earlier than 1.2.0 no longer support localld returned by using the chooseImage api to preview images in the following way: "img src = wxLocalResource: // 50114659201332.

Suggestion: Upgrade JSSDK to the latest version 1.2.0 to help automatically adapt the page. However, this may not work in some scenarios. In this case, you can use the getLocalImgData interface to directly obtain data.

(Currently JSSDk online version is 1.0.0 and 1.1.0, 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 is the base64 data of the image. You can use the img label to display localData = localData. replace ('jgp ', 'jpeg'); // the data in the iOS system. The data type is image/jgp. Therefore, replace $ ('# img_media '). attr ('src', localData) ;}, fail: function (res) {alert ("show failed ");}});}

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

Change: the internal implementation of WKWebview changes the logic of jsapi permission management on our internal pages. A very small number of errors may occur when the jsapi permission authorized previously is abnormal, thus, jsapi call fails.

Adaptation suggestions:

1. iOS6.5.1, WKWebview is known to have the following problems in this version: The page uses the HTML5 History API pushState, popstate, replaceState, and so on to control the page navigation (such as a typical single application page ), use the wx of JSSDK. config is jsapi authorization. In this case, it is likely that jsapi fails to be called because it has no permission. If possible on the page in 6.5.1, you can use Anchor hash technology to replace History technology to solve this problem.

2. iOS6.5.2 and later versions will not have the above problems, but it cannot be confirmed that there are any pages using history or hash technology to change the page navigation address, developers still need to pay attention to such issues.

This article has been compiled into JavaScript development skills summary. You are welcome to learn and read it.

I recommend a small program tutorial with a high degree of attention: I hope you like it.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.