微信小程序开放能力: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里面

Supongo que te gusta

Origin blog.csdn.net/weixin_42842069/article/details/115953064
Recomendado
Clasificación