微信小程序 webview网页使用微信方法-jssdk及常见问题

这篇具有很好参考价值的文章主要介绍了微信小程序 webview网页使用微信方法-jssdk及常见问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在微信小程序的webview网页中,想要使用微信方法,需要使用微信的jssdk。

一、使用方式:

1.引入jssdk
// 注入微信jssdk
const _loadWxSdk = async () => {
  if (!window.wx) {
    return new Promise((res, rej) => {
      return Prof.requireRemote(
        {
          src: 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js',
        },
        async () => {
          await _initWxBridge()
          res()
        }
      )
    })
  }
  return _initWxBridge()
}
2.验证签名,注册要使用的方法
// 验签&注册要使用的webview方法
const _initWxBridge = async () => {
  const isIOS = /iphone os/i.test(window.navigator.userAgent.toLowerCase())
  // ios微信的坑,jssdk验签时的url不是官网文档上的动态获取当前url,而是进入页面时的初始url
  const urlLink = isIOS ? window.location.href : window.location.href.replace(/#.*/, '')
  // 该接口需要后端提供
  const result = await window.$store.dispatch('common/getSignatureV2', {
    url: urlLink,
    srvno: 'xxx',
    source: 'weixin',
  })

  window.wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: result.appId, // 必填,公众号的唯一标识
    timestamp: result.timestamp, // 必填,生成签名的时间戳
    nonceStr: result.noncestr, // 必填,生成签名的随机串
    signature: result.signature, // 必填,签名
    jsApiList: ['getLocation'], // 必填,需要使用的JS接口列表
  })
}
3.使用方法
    _loadWxSdk().then(() => {
      if (window.wx) {
        wx.ready(function() { //如果需要在页面加载完成后就使用sdk方法,可以放在wx.ready方法中使用
          wx.getLocation({
            type: 'wgs84',
            success(res: any) {
              const latitude = res.latitude
			  const longitude = res.longitude
			  const speed = res.speed
			  const accuracy = res.accuracy
            },
            complete(res: any) {
              console.log('getLocation-complete-res: ', res)
            },
          })
        })
        wx.error(function(res: any) {
          console.log('wx.error-res: ', res)
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        })
      }
    })

二、验证方式:

1.真机验证

需要在微信开发者平台中,添加域名(ip不能添加,http不能添加),添加后即可真机测试

2.本地测试

对于不方便添加域名的地址,如本地、测试环境等ip地址或http地址,可以在微信开发者工具中进行测试,

步骤一:切换为【公众号网页调试】
小程序jssdk,微信小程序,微信,小程序

步骤二:在地址栏中输入(可能会卡多请求两次稍微等等):
https://www.weixinsxy.com/jssdk/(用这个就行)
http://demo.open.weixin.qq.com/jssdk(这个好像没用)

步骤三:在地址栏输入自己要访问的地址并回车请求
http://localhost:8080

就好了

三、常见问题

官方文档提供的错误码及解决方案

1.config:fail, invalid url domain

意思是无效的url域名,此时需要登录公众号,检查【业务域名】、【网页授权域名】、【JS接口安全域名】跟网页是否匹配。

2.getLocation:invalid signature

无效的签名,此时需要检查wx.config里面配置的参数是否正确。

另外务必检查调用后端的获取JSSDK配置信息时,需要传入的当前页面url是否正确,注意应该采用location.href.split(‘#’)[0]这种样式。

3.showOptionMenu:permission denied

无权限的意思。

注意检查公众号是否有权限,登录公众号,在【设置与开发】-【接口权限】中检查。

另外检查config的jsApiList需要包含要调用的JSSDK。

最后务必注意,invalid signature中的错误,也会触发当前问题,尤其是向后端传递的url。

4.getLocation:fail, the permission value is offline verifying

可能是config配置错。

如果页面一开始就调用JSSDK,那么需要将调用放入wx.ready。

config的jsApiList需要包含要调用的JSSDK。

最后务必注意,invalid signature中的错误,也会触发当前问题,尤其是向后端传递的url。
参考链接:
https://blog.csdn.net/woshisangsang/article/details/122681496

四、相关文档

定位getLocation:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
小程序半屏打开:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/openEmbeddedMiniProgram.html
js-sdk文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
web-view文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
管理平台:https://mp.weixin.qq.com/wxamp/index/index?token=81477799&lang=zh_CN
开放社区:https://developers.weixin.qq.com/community/homepage
jssdk地址:https://res.wx.qq.com/open/js/jweixin-1.0.0.js
本地测试方案(开发者工具–公众号网页调试):https://blog.csdn.net/qq_45530512/article/details/129381813文章来源地址https://www.toymoban.com/news/detail-650713.html

到了这里,关于微信小程序 webview网页使用微信方法-jssdk及常见问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序报错“qqmap-wx-jssdk.js‘ is not defined”解决方法

    一、问题描述 在使用微信小程序开发过程中,有时会遇到“qqmap-wx-jssdk.js‘ is not defined”的报错信息。这个错误通常与腾讯地图SDK相关,表明小程序试图引用一个未定义的脚本。 二、解决方案 解决此问题的方法有多种,以下是一些常见的解决方案: 检查引用顺序:确保在使

    2024年04月15日
    浏览(49)
  • 微信小程序通过 node 连接 mysql——方法,简要原理,及一些常见问题

    博主自己在22年夏天根据课程要求做了一个小程序连接阿里云服务器的案例,在最近又碰到了相应的需求。 原参考文章:微信小程序 Node连接本地MYSQL_微信小程序nodejs连接数据库_JJJenny0607的博客-CSDN博客 ,还请多多支持原作者! 第二次尝试的时候已经熟练许多了,但是还是遇到

    2024年02月03日
    浏览(40)
  • Appium微信小程序自动化之开启webview调试功能方法封装

    Appium在微信小程序自动化时,需要开启微信的webview调试功能,以方便对webview的元素进行定位。 运行代码之后,可以顺利打开微信,通过向自己发送消息并点击消息,开启webview调试功能: 看到这个页面后,表示启动微信webview调试功能启动生效。 欢迎技术交流:

    2024年04月13日
    浏览(44)
  • 微信小程序使用webview实现文件上传功能

    项目开发了一个批示单的功能,用户填写批示单信息要上传正文及附件(多文件上传,有需要可在文章末尾查看),上传文件功能原调用的是uni.chooseMessageFile方法选择聊天记录中文件。 问题:用户在电脑端打开小程序后发现选择文件按钮点击无反应。 百度后发现此方法电脑

    2024年03月14日
    浏览(58)
  • 微信小程序和webview使用postMessage交互

    小程序和webview能交互,但是没有你想的那个完美 小程序向webview传递参数只能使用url携带参数 webview向小程序传递参数可以使用postMessage, 但是注意了,postMessage只会在特定的时机执行 ,请看官方文档 由此可见,如果你想点击webview中的一个按钮A,然后给小程序发消息,然后由

    2024年02月02日
    浏览(49)
  • 微信小程序使用webview打开第三方地址

    1、在page下创建一个webview目录文件包含index.js index.wxml,配置好路由 2、index.js 3、index.wxml 4、跳转 (地址后拼接参数需要转码) 注意:webview页面的title 取得是第三方地址的title标签的内容,且webview页面不支持自定义标题

    2024年02月10日
    浏览(62)
  • 微信小程序使用webview后点击左上角返回按钮一次性返回小程序

    当我们来到webview标签对应的网页地址的时候,在该页面内进行几次跳转后,发现点击小程序左上角返回按钮返回的是上一次跳转的内容,并没有达到我们返回小程序的需求,而是要一直点,然后才能返回小程序。 我的情况是webview标签放在一个单独的页面下宽高100%占比显示,

    2024年02月05日
    浏览(54)
  • uni-app 使用webview加载H5打开微信小程序

    最近公司有个需求要求在app里点击一个功能打开小程序,并且关闭小程序回到app,模仿平安保险app。 毕竟我也是刚学习uni-app,找了很多资料,找到了一个天天外链的网站可以生成一个小程序的链接,使用uni的webview去加载这个链接,很好,需求满足,但是收费,那能不能自己

    2023年04月18日
    浏览(71)
  • 小程序webview组件,小程序和webview交互,小程序内联h5页面,小程序webview内网页实现微信支付

    小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信

    2024年02月09日
    浏览(58)
  • 微信小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题

    背景 最近接到一个h5需求,和普通的h5不一样,这个h5页面是嵌入到小程序中使用的,需求简单来说就是展示一个跳转按钮,判断如果是小程序环境下就进行跳转到其他小程序页面。 实现思路 核心逻辑其实就是判断小程序环境这一块,我们可以直接使用wxsdk来进行判断小程序

    2024年02月09日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包