当前位置:   article > 正文

外部浏览器h5打开微信小程序 微信内置也可用_浏览器打开微信小程序

浏览器打开微信小程序

这个方法使用的是微信官方api 请求url scheme 实现的 

因为前端请求在手机上会有跨域错误  所以请求代码放到了后端

后端不会写  但是后端需要调用的api及参数如下 

首先拿到小程序的access_token  这个也是后端调用 微信官方api拿到的  

拿到后 调用   看官方文档比较省劲  

微信api地址

https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN

前端调用例子

  1. $.post('https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN', {
  2. "jump_wxa":
  3. {
  4. "path": "/pages/home",
  5. "query": "",
  6. "env_version": "release"
  7. },
  8. "is_expire":true,
  9. "expire_type":1,
  10. "expire_interval":1
  11. }, function(res) {
  12. // 请求成功后的处理逻辑
  13. location.href = res.data
  14. }, "json")
  15. .done(function() {
  16. // 请求成功完成后的操作
  17. console.log("请求成功完成");
  18. })

前端代码只做最后的请求跳转 

  1. <script>
  2. $(function() {
  3. if (isPCBrowser()) {
  4. console.log('当前在PC浏览器中打开');
  5. $('.box').hide()
  6. $('.boxToo').show()
  7. } else {
  8. console.log('当前不在PC浏览器中打开');
  9. $('.boxToo').hide()
  10. $('.box').show()
  11. getOpenLink()
  12. }
  13. });
  14. // 判断是否在pc浏览器中打开
  15. function isPCBrowser() {
  16. const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  17. // 判断是否是PC浏览器
  18. return /android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos/i.test(userAgent) === false;
  19. }
  20. function getOpenLink() {
  21. $.post('https://url', {}, function(res) {
  22. // 请求成功后的处理逻辑
  23. location.href = res.data
  24. }, "json")
  25. .done(function() {
  26. // 请求成功完成后的操作
  27. console.log("请求成功完成");
  28. })
  29. .fail(function(err) {
  30. // 请求失败后的操作
  31. console.log("请求失败",err);
  32. })
  33. .always(function() {
  34. // 不论请求成功还是失败,执行的操作
  35. console.log("请求完成");
  36. });
  37. }
  38. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/268057
推荐阅读
相关标签
  

闽ICP备14008679号