WeChat applet webview directly calls WeChat scan related functions
When we do web development, we follow the web development process. When we need to quickly transplant the web project into the mini program, we need to use the webview component provided by the mini program. Regarding its benefits and development platform configuration, you can configure it according to the WeChat public platform.
Here I will mainly talk about how to use advanced functions in webview (html).
First of all: when we do not obtain the jssdk configuration, we can only use some basic functions such as jumps. But when it comes to directly calling advanced functions such as WeChat scanning and opening photo albums in the webview (our html), you need to register this html file.
Front-end logic:
The specific process is:
① When the HTML page is initialized, it requests basic configuration data from our backend. The parameter is the URL path of the current page, including the parameter part.
② Get the data and call the wx.config method to register this html page (note that the premise is that the html has loaded js before you can call <script type="text/javascript" src="https://res.wx.qq.com/ open/js/jweixin-1.3.2.js"></script>)
③After the config method is successful, you can happily use some advanced functions.
Specific code display
<!-- 这个地方是在加载配置，实际页面中是页面渲渲染时通过“java后台jssdkconfig”接口从我们的后台获取参数，然后赋值给下面对应的字段”-->
<script type="text/javascript">
wx.config({
debug: true,//是否开启调试
appId: 'xxxxxxxxxxx',//小程序appid
timestamp: '1534925207',//时间搓，单位秒
nonceStr: 'HT5Ab5moviaVdp7XegNnRBivrETgPmu2',//随机字符串
signature: 'd73acd8eec5a4c1a6a86c7e0517bedff78e72fd9',//签名md5
jsApiList: ['startRecord','stopRecord','playVoice','uploadVoice','downloadVoice','onVoiceRecordEnd','translateVoice','downloadVoice', 'onMenuShareTimeline','onMenuShareAppMessage','scanQRCode','getLocation','chooseImage','getLocalImgData','uploadImage']//当前html需要用到的接口
});
</script>
Background JAVA logic:
Processing flow:
① The page requests the configuration information for the first time. The background uses the WeChat interface to calculate the configuration information, stores it, and then returns it to the front end. ②
The page is not requested for the first time, and it is not more than two hours ago. The configuration information of the corresponding page is directly found and returned to the user. More than 2 hours. If it is more than two hours, the WeChat interface is called again to calculate the configuration information, return to the user, and update the stored data. (The java class I use here is stored in the memory. Changing to database storage can reduce the server memory accordingly)
③Why do you need to judge whether it takes more than two hours to recalculate? Because the first page is generally refreshed more frequently, and secondly, WeChat's jssdk configuration interface has a limit on the number of times it can be used, and it can only be obtained a number of times a day, so we cannot calculate it every time we request it.
Code behind:
/**
* webview——JSSDK使用配置信息获取
*/
@ResponseBody
@RequestMapping(value = "User/GetJsSdk_Config")
public Map<String, Object> GetJsSdk_Config(@RequestBody HashMap<String, Object> data, HttpSession session)
throws KeyStoreException, NoSuchAlgorithmException, CertificateException, Exception {
Map<String, Object> resultmap = new HashMap<String, Object>();
User user = (User) session.getAttribute("user");
if (user == null) {
resultmap.put("state", false);
resultmap.put("message", "未登录或登录超时");
return resultmap;
}
if (data.get("url") == null) {
resultmap.put("state", false);
resultmap.put("message", "参数不全");
return resultmap;
}
String url = data.get("url").toString();
Map<String, Object> one_jassdkcofig = AllJssdkConfig.TheconfigBeoVerdue(url);
if (one_jassdkcofig != null)// 如果当前页面配置信息还未过期
{
resultmap.put("sate", true);
resultmap.put("message", "");
resultmap.put("beta", one_jassdkcofig.get("beta"));
resultmap.put("debug", one_jassdkcofig.get("debug"));// 是否开启调试
resultmap.put("appId", one_jassdkcofig.get("appId"));// 公众号的appid
resultmap.put("timestamp", one_jassdkcofig.get("timestamp"));// 时间搓、秒
resultmap.put("nonceStr", one_jassdkcofig.get("nonceStr"));// 随即字符
resultmap.put("signature", one_jassdkcofig.get("signature"));// sha1加密码
resultmap.put("jsApiList", "所有需要用到的接口");// 需要使用的接口
System.out.println("找到配置！不用计算");
System.out.println(resultmap);
return resultmap;
}
String token = user_wxAPI.GetInstance().get_jssdk_accesstoken();
String ticket = user_wxAPI.GetInstance().get_jssdk_ticket(token);
resultmap = user_wxAPI.GetInstance().get_jssdk_config(ticket,url);
if (resultmap!=null) {
resultmap.put("sate", true);
resultmap.put("message", "");
AllJssdkConfig.SaveOneConfig(url, resultmap);// 更新jasdk数组配置
System.out.println("没有找到配置！重新计算");
System.out.println(resultmap);
return resultmap;
} else {
resultmap=new HashMap<String, Object>();
resultmap.put("sate", false);
resultmap.put("message", "后台获取jssdk_ticket出错");
return resultmap;
}
}