When you encounter the need to select photos to upload your project, because the web page runs in WeChat's browser, you can use the photo selection function provided by WeChat's js-sdk to carry out project development. Wechat web developer tools are required in actual development. For detailed reference:/wiki/10/。
1. Configure WeChat JS-SDK related files
1) JSSDk uses the latest version 1.2.0:/open/js/jweixin-1.2.。
IOS web development adaptation issues:
Change: JSSDK below version 1.2.0 no longer supports locald returned by using the choiceImage api as follows: "img src=wxLocalResource://50114659201332” way to preview the picture.
Adaptation suggestions: directly upgrade JSSDK to the latest version of 1.2.0 to help the page automatically adapt, but it may not work in some scenarios. You can use it at this time.getLocalImgData Interface to directly obtain data.
(Add detailed code attached)
2) Documents:
/**
* Pages using jssdk interface must refer to this file
* actionUrl: background service request address
* url: WeChat jssdk authorization page address
*/
$.post("/getJsapiSign", {'url':('#')[0]}, function(data) {
({
debug : false, // Turn on debug mode, the return values of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side. The parameter information will be printed through the log and will only be printed on the PC side. appId : , // Required, unique identification of the official account timestamp : , // Required to generate a signature time stamp nonceStr : , // Required to generate a random string of signatures signature : ,// Required, signature, see Appendix 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'
]
});
(function(res) {
alert("Loading failed");
});
}, 'json');
2. Specific implementation process
1) Select photos
Here we use the choiceImage 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 document, the obtained localId can be displayed directly as the src attribute of the img element
3) Upload photos
Here we use the uploadImage method of WeChat js-sdk
({
count: 1, // Default 9 sizeType: ['original', 'compressed'], // You can specify whether it is an original or a compressed image, and both are default sourceType: ['album', 'camera'], // You can specify whether the source is an album or a camera, and both are default success: function (res) {
var localIds = ; // Return the local ID list of the selected photo. LocalId can display the picture as the src attribute of the img tag. ({
localId: localIds[0], // The local ID of the image to be uploaded is obtained from the choiceImage interface isShowProgressTips: 1, // Default is 1, display progress prompts success: function (res) {
var medias = {'lid':localIds[0].toString(), 'sid':};
$('#img_media').attr('src', );
},fail:function(res){
alert("Upload failed");
}
});
}
});
WKWebview web development adaptation
JSAPI related adaptation
1) cache will no longer be supported
Change: cache jsapi will not be supported in WKWebview.
Adaptation suggestions: All developers using this API can remove page-related logic.
2) The page previews the pictures through LocalID
Change: JSSDK below 1.2.0 no longer supports previewing images by using the locald returned by the choiceImage API in a way like: "img src=wxLocalResource://50114659201332".
Adaptation suggestions: directly upgrade JSSDK to the latest version of 1.2.0 to help the page automatically adapt, but it may not work in some scenarios. You can use it at this time.getLocalImgData Interface to directly obtain data.
(Currently, the online version of JSSDk is 1.0.0 and 1.1.0, and the updated version is 1.2.0./open/js/jweixin-1.2. ）
if (window.__wxjs_is_wkwebview) {
({
localId: localIds[0], // The localID of the picture success: function (res) {
var localData = ; // localData is the base64 data of the image, which can be displayed with the img tag localData = ('jgp', 'jpeg');//The data obtained in the iOS system is of image/jgp, so it needs to be replaced $('#img_media').attr('src', localData);
},fail:function(res){
alert("Show failed");
}
});
}
3. If you use JSSDK and use permission authorization, you need to pay attention to the failure of jsapi calls.
Changes: The internal implementation changes of WKWebview have made certain logical adjustments to the page jsapi permission management in WeChat. It is very likely that the jsapi who authorized normal permissions to obtain permissions abnormally, resulting in the call to jsapi failure.
Adaptation suggestions:
1. iOS WeChat 6.5.1, WKWebview has the following problems in this version: the page uses HTML5's History API pushState; popstate; replaceState and other control page navigation (typical like single application page), and the JSSDK uses jsapi authorization. At this time, there is a high probability that jsapi will fail to call because it has no permissions. If possible, the page in 6.5.1 can use Anchor hash technology to replace History technology to solve this problem.
2. The above problems will not exist in iOS WeChat 6.5.2 and later versions, but it cannot be 100% confirmed that there are pages that use history or hash technology to change the page navigation address without such problems at all. Developers still need to pay attention to such problems.
This article has been compiled intoSummary of JavaScript WeChat development skills》, everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.