美文网首页
微信公众号开发之vue整理

微信公众号开发之vue整理

作者: 蒋蒋_dbfe | 来源:发表于2020-10-11 19:57 被阅读0次

一、公众号开发与html5移动端开发区别

从前端开发角度上来说,没有什么差别.不一样的有:1)需要网页授权登录,2)使用微信的一些方法(拍照 扫描等)需要引入wx-js sdk.

jsSdk引入步骤分为3部(此处以vue项目中为例):

1、需要在vue项目中安装weixin-js-sdk
2、在页面中需要用到wx的一些方法中引入js-sdk,引入方法:import wx from 'weixin-js-sdk';
3、开始正在的使用wx的js-sdk

      由于使用微信js需要进行授权配置,所以需要使用ajax请求从服务端获取微信jssdk的授权参数

  • 首先需要向服务器发送一个ajax请求 (我们需要将当前页面路径(不包含#以及以后的数据)传给后台,从服务端获取微信jssdk的授权参数)
  • 调用wx.config()方法,获取到使用js-sdk的权限,以及配置需要使用的sdk
  • 使用具体的sdk方法(分两种情况a: 在wx.config()页面使用,需要确保wx.config()已经成功拿到了授权参数,常常需要在wx.ready()中调用js-sdk方法;b:页面点击按钮触发js-sdk方法,可以直接使用)
    (具体有哪些方法可以查看:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)
    (在使用jsSDK一般使用hash路由模式)

借用别人写的方法:

  method: 'post',
  url: 'http://my.service.com/index.php/opcode/6002',   //请求后端接口
  data:{ url:location.href.split('#')[0] } //向服务端提供授权url参数,并且不需要#后面的部分
}).then((res)=>{
    debug: true, // 开启调试模式(上线的时候需要关闭)
    appId: res.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
    timestamp: res.timestamp, // 必填,生成签名的时间戳
    nonceStr: res.nonceStr, // 必填,生成签名的随机串
    signature: res.signature,// 必填,签名,见附录1
    jsApiList: ['scanQRCode'] // 必填,需要使用的微信API接口列表,所有JS接口列表见附录2
  });
})

二、关于微信授权问题(经常需要获取微信头像和昵称)

需要进行网页授权

  • 当用户关注了公众号后,默认已经授权成功咯,此时后端能够拿到客户的微信信息(头像\昵称等)
  • 当用户未关注公众号,直接打开网页链接,会有授权弹框(网页授权可以由后端处理,具体情况需要前后端协商)

三、常遇问题:

1、在使用js-sdk时,需要在微信公众号平台配置相应的域名
2、在jssdk的授权参数获取成功之前调用了js-sdk方法
3、需要在wx.config中的jsApiList配置需要使用的js-sdk方法
4、分享功能需要注意:

  • 使用的分享图片必须为绝对路径;
  • 图片协议必须和网站一一对应(网站是http,则图片引用的也是http的图片路径);
  • 分享朋友可以设置标题、描述、图片、跳转链接;分享到朋友圈可设置标题、图片、跳转链接;
  • 目前情况下,分享页文字限制(标题:最多30个 描述内容:不超过36 分享图片:正方形)

四、参考链接

相关文章

  • 微信公众号开发之vue整理

    一、公众号开发与html5移动端开发区别 从前端开发角度上来说,没有什么差别.不一样的有:1)需要网页授权登录,2...

  • 基于Node.js的微信JS-SDK后端接口实现(三)

    微信公众号开发之五微信网页授权 开始之前建议先阅读微信官方文档 微信公众号开发之五微信网页授权 一.网页授权的作用...

  • Go 语言之微信公众号开发

    前言 前两天分享了一下 网抑云之微信公众号开发, 现已整理开源,还有许多要完善的地方 微信公众号开发 详情请点击 ...

  • SPA单页面应用微信授权

    基于单页面应用开发了几个微信公众号,梳理下微信公众号网页开发授权流程以便日后查阅。 概述 前端框架为vue 后端只...

  • 微信 公众平台 开发(授权一)

    hello 大家好,最近公司的项目在做微信公众号的二次开发,我也在这里做一个微信公众号的开发整理。首先微信公众号的...

  • 微信开发

    微信开发 公众号开发 微信WEB开发 JSSDK 小程序开发 公众号开发 公众号 订阅号 服务号 企业号 公众号开...

  • 微信公众号开发 (4) 网页授权

    一、前言 微信公众号开发 (1) 微信接入认证成为开发者 微信公众号开发 (2) 消息处理 微信公众号开发 (3)...

  • 公众号开发 vue项目 微信授权一直不通过

    微信公众号开发,需要通过微信授权,但是使用vue 开发到项目,默认域名一般是http://localhost:80...

  • vue开发微信公众号

    哎丫丫,最近需要开发微信公众号,前端使用的vue框架,看完腾讯的,我的内心无比沉重,天噜啦,生无可恋~~~简单的总...

  • 微信公众号开发:微信服务号和订阅号的区别!

    微信开发又称微信公众平台开发、或微信公众号开发,分为微信服务号、微信订阅号、以及微信企业号,其中服务号和订阅号是企...

网友评论

      本文标题:微信公众号开发之vue整理

      本文链接:https://www.haomeiwen.com/subject/nffdnctx.html