登录  /  注册

微信小程序如何使用webview调用微信扫一扫的功能

不言
发布: 2018-09-06 11:48:34
原创
7952人浏览过

本篇文章给大家带来的内容是关于微信小程序如何使用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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号