关于微信js-sdk:微信内h5页面打开小程序

相干配置微信js文件版本大于等于1.6.0https://res.wx.qq.com/open/js/jweixin-1.6.0.js微信受权配置 window.wx.config({ ...otherConfig, openTagList: ['wx-open-launch-weapp']})调用示例 const style = { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0,};function OpenWeapp({ originId, pagePath }) { return ( <wx-open-launch-weapp username={originId} path={pagePath} style={style}> <script type="text/wxtag-template"> <div style={style} /> </script> </wx-open-launch-weapp> );}// 应用形式<div style={{ position: 'relative' }}>点击跳转小程序<OpenWeapp originId="gh_xxxxxxxx" pagePath="pages/home/index?user=123&action=abc" /></div>为什么给div增加position: relative呢?因为wx-open-launch-weapp设置款式比拟艰难,故放弃设置款式,将wx-open-launch-weapp作为一个通明的占位元素,撑满父元素,也能达到预期的性能

July 30, 2021 · 1 min · jiezi

关于微信js-sdk:微信jssdk本地调试方案

此计划为共事探索得出,现自己行将到职,特此记录下该计划,以备后续查找。 解决的问题微信js-sdk初始化须要校验域名,本地调试无奈通过,需伪装成生产/测试时拜访的域名也实用于抓取手机端的申请,在PC端进行剖析(Charles)计划思路要点批改Host, 使得指标域名映射到本机(127.0.0.1)nginx开启HTTPS server,将指标域名proxy_pass到要测试的我的项目本地地址(如http://localhost:8080)手机通过Charles代理到电脑本机批改Hostssudo vi /etc/hosts# 增加指标域名映射127.0.0.1 [target-host-name]装置nginx倡议通过Homebrew装置 brew install nginxnginx -vnginx -h胜利装置截图 # 胜利装置后摘录如下Docroot is: /usr/local/var/wwwThe default port has been set in: /usr/local/etc/nginx/nginx.conf to 8080 so that nginx can run without sudonginx will load all files in /usr/local/etc/nginx/servers/.能够批改下默认端口,而后跑nginx启动, 能够在浏览器看到默认的http server,示意nginx装置好了,没什么问题。 mkcert生成ssl证书要开启https server,须要有ssl证书,应用mkcert能够在本地装置证书。 mkcert: https://github.com/FiloSottil... 生成证书的形式,请通读其README,次要理解装置、生成证书命令、装置CA命令 倡议将证书放到nginx装置目录下usr/local/etc/nginx/ssl,命名自行依据理论命名即可。 mkcert -key-file [key.pem] -cert-file [cert.pem] [target-host-name] [target-host-name]配置https server...http { ... # HTTPS server server { listen 443 ssl; server_name [target-host-name]; proxy_buffering off; ssl_certificate /usr/local/etc/nginx/ssl/[cert.pem]; ssl_certificate_key /usr/local/etc/nginx/ssl/[key.pem]; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { root html; index index.html index.htm; proxy_pass [本地服务,如 http://localhost:8080]; } }}设置结束重启nginx, 拜访指标域名,若能拜访到你开启的本地服务,则示意设置好了。 ...

April 28, 2021 · 1 min · jiezi

关于微信js-sdk:企业微信内嵌H5引入-JSSDK-调用-wxpreviewFile-预览下载文件vue20适用

业务场景基于vue2.0开发企业微信内嵌H5,实现文件下载性能。我司的文件存储门路是阿里云oss,应用其余凋谢资源也一样。 应用步骤1. 引入企业微信 JS-SDK留神: 引入源码必须是 "//res.wx.qq.com/open/js/jweixin-1.2.0.js",否则 wx.previewFile 会有未知的问题;vue2.0我的项目,你可能在有的文章里见过 npm install weixin-js-sdk 形式引入。非官方,不举荐;你可能会发现,//res.wx.qq.com/open/js/jweixin-1.2.0.js 里找不到previewFile函数,window.wx上也没有。不必在意,previewFile是原生实现的,看不到并不影响调用。/public/index.html<!DOCTYPE html><html lang="en"> <head> ... </head> <body> <div id="app"></div> <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> </body></html>2. 配置 wx.configSPA(单页面利用)要在每次url变动时进行调用 wx.config,倡议写在 router.js 路由配置文件里,全局后置导航守卫触发。 /src/router/index.jsrouter.afterEach((to, from) => { // 通过config接口注入权限验证配置,我封装在了 vuex 里 $store.dispatch("handleWxConfig");});/src/store/index.jshandleWxConfig({ state }) { // 从接口获取微信签名,须要后端同学提供 $apiCommon.getWxSign({ url: location.href.slice(0, location.href.indexOf("#")) // 留神:location.href最初如果有'/',必须保留 }).then(res => { // 步骤二:通过config接口注入权限验证配置 window.wx.config({ beta: true, // 必须这么写,否则wx.invoke调用模式的jsapi会有问题 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert进去 appId: res.data.appId, // 必填,企业微信的corpID。公司的惟一标识‘ww20745c5e79cfa434’ timestamp: new Date().getTime(), // 必填,生成签名的工夫戳 nonceStr: $utils.getRandomString(16), // 必填,生成签名的随机串,这里用的是自定义办法 signature: res.data.sign, // 必填,签名,见附录-JS-SDK应用权限签名算法 https://work.weixin.qq.com/api/doc/90000/90136/90506 jsApiList: ["previewFile"] // 必填,须要应用的JS接口列表,但凡要调用的接口都须要传进来。所有JS接口列表见附录2 }); // 步骤三:通过ready接口解决胜利验证。没有须要立刻调用的api,能够不写 window.wx.ready(function() {}); // 步骤四:通过error接口解决失败验证 window.wx.error(function(err) {}); }) }3. 调用 wx.previewFile当初就能够在 vue 里欢快地应用 wx.previewFile 了~留神: ...

November 17, 2020 · 1 min · jiezi