How does the WeChat applet use webview to call the WeChat scan function?

The content of this article is about how the WeChat applet uses webview to call the WeChat scan function. It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

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 provided by the mini program. components. Regarding its benefits and development platform configuration, you can configure it according to the WeChat public platform
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, request our background to obtain basic configuration data , the parameter is the current page url path, 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 )
③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: &#39;wx97d97ea93ef96606&#39;,//小程序appid
           timestamp: &#39;1534925207&#39;,//时间搓，单位秒
           nonceStr: &#39;HT5Ab5moviaVdp7XegNnRBivrETgPmu2&#39;,//随机字符串
           signature: &#39;d73acd8eec5a4c1a6a86c7e0517bedff78e72fd9&#39;,//签名md5
           jsApiList: [&#39;startRecord&#39;,&#39;stopRecord&#39;,&#39;playVoice&#39;,&#39;uploadVoice&#39;,&#39;downloadVoice&#39;,&#39;onVoiceRecordEnd&#39;,&#39;translateVoice&#39;,&#39;downloadVoice&#39;, &#39;onMenuShareTimeline&#39;,&#39;onMenuShareAppMessage&#39;,&#39;scanQRCode&#39;,&#39;getLocation&#39;,&#39;chooseImage&#39;,&#39;getLocalImgData&#39;,&#39;uploadImage&#39;]//当前html需要用到的接口
          });
  </script>

Backend JAVA logic:

Processing process:

①Page No. A request is made to obtain the configuration information. The background uses the WeChat interface to calculate the configuration information, store it together, and then return it to the front end
② If 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 will be 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.

Backend code:

 /**
     * 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;
        }
    }

Related recommendations:

WeChat development WeChat scan login

WeChat development - How to receive the callback value in notify.php returned by WeChat v3 scan code payment 2

Share the problems and solutions encountered in the development of WeChat scan code payment - Attached is the Ecshop WeChat payment plug-in _php example

The above is the detailed content of How does the WeChat applet use webview to call the WeChat scan function?. For more information, please follow other related articles on the PHP Chinese website!