uniapp开发微信公众号（h5）项目如何引入微信jssdk，分享，扫一扫

最近在开发h5网页需要使用到微信jssdk，使用到了微信登录，微信分享，微信扫码，其中有很多的坑，做个笔记以备不时之需

1. 下载微信jssdk，查阅了很多资料，其中有

"jweixin-module": "^1.6.0",

"weixin-js-sdk": "^1.6.0"

两种jssdk实测都可以使用,采用 ------
npm install jweixin-module --save 

2.了解jssdk的使用流程，可查阅官方文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

// 在main.js中引入并挂载到vue的对象原型上
import wx from 'weixin-js-sdk';
Vue.prototype.$wechat = wx;

// 以分享为例，扫一扫类似const url = encodeURIComponent(window.location.href.split('#')[0]);getwxconfig({url: url}).then(res => {if (res.data.code === 1) {this.$wechat.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.data.data.appId, // 必填，公众号的唯一标识timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串signature: res.data.data.signature, // 必填，签名jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']});let _this = this;this.$wechat.ready(()=> {_this.$wechat.updateAppMessageShareData({ //分享给朋友title: _this.wxInfo.wx_share_f_title,desc: _this.wxInfo.wx_share_f_desc,imgUrl: _this.wxInfo.wx_share_f_img,link: _this.wxInfo.wx_share_f_url + _this.inviteCode, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致success: ()=> {_this.show = true;}});_this.$wechat.updateTimelineShareData({ //分享到朋友圈title: _this.wxInfo.wx_share_fq_title,desc: _this.wxInfo.wx_share_fq_desc,imgUrl: _this.wxInfo.wx_share_fq_img,link: _this.wxInfo.wx_share_fq_url + _this.inviteCode, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致success: ()=> {_this.show = true;}});})}})

切记：区分字段的大小写和驼峰命名,如果报错可以打开调试，h5的分享是点击右上角分享出去，与app端有所差异

uniapp开发微信公众号（h5）项目如何引入微信jssdk，分享，扫一扫相关推荐

微信公众号H5项目中用高德地图实现用户定位（vue）
遇到的问题:用高德官网的方法去定位时发现,ios可以在http的网址定位,而安卓手机只能在https的网址定位,这个也是很奇葩,查了官网文档说,是因为浏览器禁止了非安全域的定位请求.但是我们的站点就是 ...
微信公众号h5界面获取展示微信内置地图与地图坐标间的转换 — 微信地图（gcj02）转为百度地图
此文章中实例用测试号进行演示 .getLocation openLocation 主要运用微信JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信 ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
uniapp 开发微信公众号H5 隐藏右上角扩展按钮
uniapp 开发微信公众号H5 隐藏右上角扩展按钮 1.首先使用npm安装一下微信的jsApi (这个应该都会吧就跟vue使用npm安装依赖一样) 初始化: npm init -y 安装微信模块: ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
Java开源项目—通用CRM管理系统（微信小程序+微信公众号+H5网页+PC管理后台）
前言 CRM(客户关系管理)管理系统是一种用于管理客户关系的软件系统,通过收集.组织和分析客户关系数据,帮助企业更好地了解客户,提高客户满意度,提升客户服务水平,建立长期客户关系,提升企业的销售和服务 ...
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
微信（jspai版本即公众号h5版）支付-微信下单支付及企业转账到零钱
微信(jspai版本即公众号h5版)支付-微信下单支付及企业转账到零钱一.后端前置条件二.配置h5 devServer 三.后端开发代码四.前端开发代码(uniapp) 一.后端前置条件准备好 ...
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了 1.问题 2.原因这次可能的原因 3.过渡方案 4.解决方案 4.1 配置nginx服务器 4.2 前端打包保留两个版本 ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...

uniapp开发微信公众号（h5）项目如何引入微信jssdk，分享，扫一扫

uniapp开发微信公众号（h5）项目如何引入微信jssdk，分享，扫一扫相关推荐

最新文章

热门文章