Vue集成微信开发趟坑：公众号以及JSSDK相关

首先，类库方面，Vue中引入JSSDK的话，请引入weixin-js-sdk，而不是weixin-jsapi，原因在于weixin-jsapi不是最新版；还要注意JS接口安全域名，不需要http前缀，直接输入网址即可！

第二，开发流程官网已经说得很清楚，需要获取微信配置，然后才能调用微信的JSSDK相关API：

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

获取配置方面，由于路由采用hash模式，URL只有一个，因此直接传入#前面的部分即可：

const getWxConfig = () => {let currentUrl = encodeURIComponent(window.location.href.split("#")[0]);//请求配置post(api_getWxConfig, {requestUrl: currentUrl}).then((res) => {//let {data} = res;// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作wx.config({debug: false, // 开启调试模式,开发时可以开启appId: res.appId,   // 必填，公众号的唯一标识   由接口返回timestamp: res.timestamp, // 必填，生成签名的时间戳 由接口返回nonceStr: res.nonceStr,    // 必填，生成签名的随机串 由接口返回signature: res.signature,   // 必填，签名 由接口返回jsApiList: ['getLocation', 'openLocation', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] // 此处填你所用到的方法});});};

然后服务端处理方面，签名算法，请注意：

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

然后注意前台用得字段名称为nonceStr，签名算法中拼接的为noncestr。

第三，接口调用方面，微信下载图片等素材的接口已经变为如下的链接，而不是百度搜索出来的链接

https://api.weixin.qq.com/cgi-bin/material/get_material?access_token=ACCESS_TOKEN

http请求方式: POST,https协议

第四，iOS网页适配方面，获取本地图片接口的时候，需要判断是否为WKWebview，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题：

if (window.__wxjs_is_wkwebview) {wx.getLocalImgData({localId: localId, // 图片的localIDsuccess: (result) => {let localData = result.localData;//console.log("getLocalImgData", localData);}});

第五，获取地理位置描述，即将微信接口返回的坐标转换为真实的地址，需要借助腾讯地图webservice接口，注意这里需要使用gcj02坐标：

import wx from "weixin-js-sdk";wx.getLocation({type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。let speed = res.speed; // 速度，以米/每秒计let accuracy = res.accuracy; // 位置精度Vue.jsonp('http://apis.map.qq.com/ws/geocoder/v1/', {location: `${latitude},${longitude}`,coord_type: 5,key: 'xxxx',output: 'jsonp',callback: 'calllocation'}).then(json => {let {address, formatted_addresses} = json.result;//处理数据});}});

转载于:https://www.cnblogs.com/univalsoft-mobile-team/p/9199656.html

Vue集成微信开发趟坑：公众号以及JSSDK相关相关推荐

【转】微信开发出现“该公众号暂时无法提供服务，请稍后再试”的坑
转自 : http://blog.csdn.net/buoll/article/details/54150865 从刚开始接触微信开发就发现网上都在吐槽,微信开发到处是坑!在开发的过程中也确实不断的遇 ...
微信公众平台开发软件测试工具,微信开发系列——使用公众号测试号测试公众号webAPP...
这是自己在学习和使用公众号记录下的傻瓜式测试号使用内容.基本一看就会,事无巨细.以免自己哪天忘了还要重新摸索. 衢山岛旅行合影一.申请测试号首先要有微信公众平台的账号(如何申请等这里省略),进入开 ...
【微信开发】WeChat公众号开发接口及完整过程
直接上代码 constant.java为基础常量类 import com.douples.common.util.CommonUtil; import com.douples.framework.ut ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
微信公众号如何和Salesforce集成，然后后台给公众号的关注者推送模板消息？
这个问题其实蛮常见的.[自由侠部落]的学习群里,之前也有人讨论过,Salesforce既然可以和推特集成,那同微信的集成也一样,都是可以通过配置和部署实现的. 目前我所了解到的Salesforce与微 ...
微信开放平台之公众号第三方平台开发及全网发布验证
技术交流请加QQ群:Jeewx微信开发④[289709451] 微信公众号第三方平台的开放,让公众号运营者在面向垂直行业需求时,可以通过一键登录授权给第三方开发者,来完成相关的处理能力,方便快捷,那如 ...
微信小程序和公众号开发流程
最近在公司参与微信小程序的开发,小程序近几年非常火,通过最近的学习分享一下开发微信小程序的流程 1.了解一下微信官方开发公众号文档微信官方文档-公众号对文档介绍有一个大致的印象,然后开始动手配置 ...
该微信用户未开启“公众号安全助手”的消息接收功能，请先开启后再绑定，Java微信公众号开发消息推送公众号用户绑定问题的解决办法
问题概述在进行微信公众号开发的时候遇到的这个问题,通过Web开发公众号的模板消息推送,在调试的过程中,需要进行开发者接口联调&调试,在调试之前需要将当前的公众号与用户的微信号进行绑定, 绑定 ...
微信公众号开发(一)------对接公众号
微信公众号开发(一)------对接公众号前言一直以来对微信公众号开发想去了解一下,刚好最近有时间去学习,在这里记录一下,方便以后查阅. 正文微信公众号对接服务器一.接入首先我们要去申请一个 ...

Vue集成微信开发趟坑：公众号以及JSSDK相关

Vue集成微信开发趟坑：公众号以及JSSDK相关相关推荐

最新文章

热门文章