微信小程式如何使用webview呼叫微信掃一掃的功能

這篇文章帶給大家的內容是關於微信小程式如何使用webview呼叫微信掃一掃的功能，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

我們在做web開發時是按照web開發流程進行的，當需要快速將web專案移植到小程式裡面，就需要用到小程式提供的webview組件。關於它的好處以及開發平台配置大家可以按照微信公眾平台進行配置
我這裡主要說下怎麼在webview（html）裡面使用高級功能。
首先：在不取得jssdk配置時，我們只能使用跳轉等一些基礎函數。但牽涉到要在webview（我們的html）裡面直接呼叫微信掃一掃、開啟相簿等進階功能時就需要對這個html檔進行註冊。

 前端邏輯：

特定流程是：

          ①html頁面初始化時向我們的後台請求取得基本設定資料，參數就是目前頁面url路徑，包括帶參部分。
          ②取得到資料呼叫wx.config方法，對這個html頁面註冊（注意前提是html載入了js才可以呼叫） 
          ③config方法成功後，就可以愉快的使用一些進階功能了。

特定程式碼展示

<!-- 这个地方是在加载配置，实际页面中是页面渲渲染时通过“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>

後台JAVA邏輯：

 處理流程：

    ①頁面第一次請求獲取配置信息，後台使用微信接口計算得到配置信息，並存起來，然後返回給前端 
    ②頁面不是第一次請求，不是大於兩小時，直接找到對應頁面的配置信息返回給用戶。大於2小時，如果大於兩小時再次呼叫微信介面計算配置訊息，返回用戶，更新儲存的資料。 （這裡我用的java類別存在內存裡面的，改成資料庫儲存可以相應減輕服務端內存）
    ③為什麼要判斷是否超過兩小時在從新計算呢。因為第一頁面一般會刷新比較頻繁，其次微信的取得jssdk設定介面有使用次數限制，每天只能取得多少次，所以我們不能每次請求過來都去計算。

後台程式碼：

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

 相關建議：

微信開發 微信掃描登陸

#微信開發- 微信v3掃碼支付二回傳的notify.php怎麼接收回呼的值

#分享微信掃碼支付開發遇到問題及解決方案-附Ecshop微信支付插件_php實例
 

#

以上是微信小程式如何使用webview呼叫微信掃一掃的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！