webview中使用微信jssdk

﹏ヽ暗。殇╰゛Y 2022-10-05 06:52 313阅读 0赞

**在webview中使用微信小程序的sdk需完成微信的签名认证，按照以下步骤依次进行即可**

**注意：**

1.  axios中的请求url均使用nginx转发到了**https://api.weixin.qq.com**，若不转发会存在跨域问题，也可以采用后端发起请求的方式。
2.  在vue cli开发环境下，可以通过配置vue.config.js中的devServer.proxy来代理到**https://api.weixin.qq.com**

'/cgi-bin': { 
                    target: 'https://api.weixin.qq.com',
                    // target: 'http://10.10.10.193:12110',
                    changeOrigin: true,
                },在这里插入代码片

import axios from 'axios'
    import jshashes from 'jshashes' //加密库 完成sha1加密
    
    async wxUploadImage() { 
         try { 
           //获取access_token
             let accessTokenRes = await axios({ 
                 method: 'get',
                 url: '/cgi-bin/token',
                 params: { 
                     grant_type: 'client_credential',
                     appid: '自己的appid',
                     secret: '自己的secret',
                 },
             })
             if (accessTokenRes.status == 200) { 
               //通过access_token，获取jsapi_ticket
                 let access_token = accessTokenRes.data.access_token
                 let jsapiTicketRes = await axios({ 
                     method: 'get',
                     url: '/cgi-bin/ticket/getticket',
                     params: { 
                         type: 'jsapi',
                         access_token,
                     },
                 })
                 if (jsapiTicketRes.status == 200) { 
                   //生成签名
                     let jsapi_ticket = jsapiTicketRes.data.ticket
                     let noncestr = Math.random().toString(36).substr(2, 16)
                     let timestamp = Math.floor(new Date().getTime() / 1000)
                     let url = location.href.split('#')[0]
                     let str =
                         'jsapi_ticket' +
                         '=' +
                         jsapi_ticket +
                         '&' +
                         'noncestr' +
                         '=' +
                         noncestr +
                         '&' +
                         'timestamp' +
                         '=' +
                         timestamp +
                         '&' +
                         'url' +
                         '=' +
                         url
                     console.log(str)
                     let sha1 = new jshashes.SHA1().hex(str)
                     console.log(sha1)
                   //初始化配置
                     wx.config({ 
                         debug: true, // 开启调试模式
                         appId: '自己的appid', // 必填，公众号的唯一标识
                         timestamp, // 必填，生成签名的时间戳
                         nonceStr: noncestr, // 必填，生成签名的随机串
                         signature: sha1, // 必填，签名
                         jsApiList: ['chooseImage', 'getLocalImgData'], // 必填，需要使用的JS接口列表
                     })
                   //初始化配置成功后会执行ready方法，将业务逻辑放在其中
                     wx.ready(function () { 
                         wx.chooseImage({ 
                             count: 1, // 默认9
                             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                             success: function (res) { 
                                 console.log(res)
                             },
                             fail(e) { 
                                 console.log(e)
                             },
                             complete() { },
                         })
                     })
                 }
             }
         } catch (e) { 
             console.log(e)
         }
     }