zoukankan      html  css  js  c++  java
  • 记一次使用vue+typescript做微信公众号网页分享的坑

    需求场景
    这个微信网页是一个用户测试的活动。开始测试之前需授权获取用户信息,所以新建一个firstPage页面作为/页面来判断需不需要授权。如果测试完成分享给用户,用户看到的是分享人的结果页面,这个页面是不需要授权的。扫描其中的二维码开始测试才需要授权。所以在前端路由里传一个query 的参数。根据这个参数(this.$route.query.xxx)判断,用户打开的是结果页(不需授权)还是测试页(需授权)。

    流程

     
    wx-liuc.png

    绑定域名
     
    wx-js.png

    引入JS文件
    import wx from 'wx-sdk-ts'    
    
    • vue-cli2.0 引入的是
    import wx from'weixin-js-sdk'
    

    通过config接口注入权限验证配置

    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用)

    • 所以获取微信配置的代码写在App.vue文件里。created钩子函数里调用一次。watch到route变化时也调用一次。
    • 分享给好友的结果页,里面动态生成的二维码url需携带当前用户的信息。以便在授权页面拿到分享人的信息。为了方便,授权页面最好独立写到一个文件里 page_relation.vue

    记录开发过程中几个坑

    • 如果项目采用非history模式(vue-router默认 hash 模式 ),则需要去掉url上#后的部分传给后端换取微信签名.
    • 授权这里由后端处理。授权完成后由后端将页面重定向到指定页面.
    let url = encodeURIComponent(
          " http://xxx.cn/h5/migrationQuiz/auth?router_path=home&fromwxuser="
        );
        
        url = url + userId;
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6e8235ac81ee7570&redirect_uri=" +
          url +
          "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect";
    

    这里注意:因为前端路由是带#的。比如重定向后跳转的页面是:http://xxx.cn?id=xxx#/home 这个时候如果直接给后端这个地址,发现这个页面是找不到的。在这个项目中后端在路由里传入了一个router_path的参数。我要重定向到#/home页面,就在地址中加上router_path=home即可。另外附上后端nodejs代码。看到这个,大家应该不难懂了。

     
    shouquan.png
    • 另外,为了方便前端测试,我们可爱的后端还兼容了本地配置的域名,参照如下代码
     let debug_redirect_url = encodeURIComponent("www.example.com");
    
     let url = encodeURIComponent(
     " http://xxx.cn/h5/migrationQuiz/auth?debug_redirect_url=" +
      debug_redirect_url +
      "&router_path=home&fromwxuser="
      );
    

    如上,本地开发配置的域名为:www.example.com
    这里注意:为了能够正常使用开发者工具调试,配置的域名应在公众号JS接口安全域名下

    • 分享给好友、分享到朋友圈时,发现左小角的图标找不到。正确做法时将这些图片放到服务器上。url使用服务器的链接。
    • 分享的link,根据分享后用户需要看到的内容而定,需要在子组件将link,emit到App.vue里进行获取。
      本项目中用户测试完成的结果页result.vue页面里,需将分享链接发送给 App.vue。其他情况下sharelink默认为网站的初始页。
    • 打包到服务器时发现文件都404,在vue-cli2.0的处理方式是:
    build -> config -> index.js -> build{} -> assetsPublicPath: './'
    
     
    1.png

    由于本项目中用到了vuecli3+typescript: 所以相应的配置如下:


     
    2.png
    • 由于本项目最后生成的结果页是一个html页面。而产品的需求是,在最终的结果页面,可以长按保存成图片,也就是要在前端将h5页面生成一张图片。用到了html2canvas。具体使用方式参见代码。在处理这个功能的时候,也遇到了一个大坑。参照如图所示:


       
      canvas.png

      就是因为最终要生成的图片有用户的微信头像,跨域了,不得不说,微信还是很坑的。最终后端给的解决方案是:
      将用户的微信头像改成通过我们这边h5的服务器来获取,然后再发给前端头像地址,改成用我们的服务器的地址。
      至此,这个项目就算完工了。

    最后

    由于本项目使用微信开发者工具进行本地测试,需配置本地域名(www.example.com),且配置的域名应在公众号JS接口安全域名下。测试过程中使用到了nginx,所以附上nginx的配置代码。

    • 找到本地host文件
      windows系统:C:WindowsSystem32driversetc
    127.0.0.1   localhost
    127.0.0.1   www.example.com
    
    • nginx开机:
    start nginx
    
    • 重启nginx
    nginx -s reload
    
    • 配置nginx: D: ginx-1.14.0 ginx-1.14.0conf ginx.conf
    server {
            listen       80;
            server_name  www.example.com;
            // 跨域配置
            location ^~ /h5/ {
                proxy_pass http://xxx.cn;
            }
            // 代理到本地
            location / {
                proxy_pass http://localhost:52152;
            }
            # location / {
            #     root   html;
            #     index  index.html index.htm;
            # }
        }
    

    其他情况请参考几篇不错的文章:
    https://juejin.im/post/5aef2db3f265da0b9c10899e
    https://www.jianshu.com/p/1a35e1dbe1ad
    另附本项目github地址:https://github.com/clara222/wxh5



    作者:Clario三岁啊
    链接:https://www.jianshu.com/p/25f1ac5b3d80
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    分布式系统学习笔记(2)-大型网站架构
    分布式系统学习笔记(1)-基础知识
    sql left join and right join
    java并发基础-Synchronized
    java内存模型
    JavaEE杂项--spring的异常体系
    javaEE杂项 --下载文件乱码的不同解决方案
    JavaEE杂项- spring AOP的几种实现方式(表面)
    字符编码:unicode,ascii,utf-8.
    Android SDK Manager国内无法更新的解决方案
  • 原文地址:https://www.cnblogs.com/ygunoil/p/12931239.html
Copyright © 2011-2022 走看看