微信小程序开放能力:web-view中使用微信JSSDK(注意事项以及样例)

使用样例:

 //使用jssdk
            useJssdk(){
              let href= window.location.href.split('#')[0]
                let that=this
                $.ajax({
                    url:'${base}/resources/common/js/getJsSDKConfig',
                    data:{url:href}
                }).then(res=>{
                    console.log(res)
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                        appId: res.appId, // 必填,公众号的唯一标识
                        timestamp: res.timestamp, // 必填,生成签名的时间戳
                        nonceStr: res.nonceStr, // 必填,生成签名的随机串
                        signature: res.signature,// 必填,签名
                        jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表
                    });
                    wx.error(function (res) {
                        console.log('wxerr',res)
                    });
                    wx.ready(function(){
                        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
                        wx.getLocation({
                            type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                            success: function (ads) {
                                that.lat = ads.latitude; // 纬度
                                that.lng = ads.longitude; // 经度
                                that.getTradingInfo()(个人封装的获取信息代码)
                            },
                        });
                    });

                })
            },

注意事项:
中JSSDK
如果只是使用wx.miniProgram.navigateTo这种导航的接口,jssdk可以不用做配置,引用js后直接使用就行,如果chooseImage这种,就需要获取配置了,步骤如下:

先在后端通过AppID和AppSecret取到access_token,并缓存access_token
再通过access_token获取到jsapi_ticket,jsapi_ticket的值也要缓存
使用jsapi_ticket、当前URL、随机字符串、1970年1月1日00:00:00至今的秒数生成签名及及配置,返回给前端,签名记得使用https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign校验是否正确
前端拿到config后放到wx.config里执行
在wx.ready中注册事件
步骤比较多但是并不复杂,主要是这其中几个坑需要避开别踩到:

AppID和AppSecret不能用小程序的,要用公众号的,否则会报invalid url domain的错误,官方文档上并没有说明这一点,所以这个坑非常深非常隐蔽,另外这个公众号要不要与小程序关联还不清楚,我用的是关联的。
签名用到的当前URl不要解码,拿到的是什么就用什么,否则即使签名校验通过也会报签名错误
如果你用了chooseImage这个api,需要获取到选择的图片的话,官方文档上说是在success的tempFilePaths参
Bug & Tip
tip:网页内 iframe 的域名也需要配置到域名白名单。
tip:开发者工具上,可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。
tip:每个页面只能有一个 web-view,web-view 会自动铺满整个页面,并覆盖其他组件。
tip:web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
tip:在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 web-view 的 src 后面加个#wechat_redirect解决。
tip:避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent里,实际上并不是,是在localIds里面

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alaia.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值