uniapp中使用微信SDK

uniapp的分享不支持h5，所以要在uniapp中使用微信SDK,但总是遇到很多问题，下面一起来探讨一下

首先，先引入微信sdk文件

npm install weixin-js-sdk

记得调用

var wx = require('weixin-js-sdk');

然后进行配置，单页面引入在onLoad或onReady中调用

setShareConfig() {//对url 进行编码 这里看情况选择// var localUrl = encodeURIComponent(location.href.split('#')[0]);var localUrl = location.href.split('#')[0] //分享的地址，按实际需要写let currentUrl = 'https://xxxx' //这里的地址一定要配置过相关权限，否则无效 我用的uview封装的接口，实际用的时候换成自己封装的this.$u.api.getjsSDKApi({appId: 'wxd657ebae1b63429d',url: localUrl}).then(res => {// console.log(res.data)//根据实际接口返回参数填写，这里只是我 的形式const {appId,nonceStr,signature,timestamp} = res.data//通过微信config接口注入配置wx.config({debug: false, //默认为false 为true的时候是调试模式，会打印出日志appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,//这里引入了新旧各两种方式，单独引入新的或旧的没有效果，不知道什么原因jsApiList: ['checkJsApi','onMenuShareAppMessage','onMenuShareTimeline','updateAppMessageShareData','updateTimelineShareData',],});//配置自定义分享内容window.share_config = {share: {//最好不要包含现金，红包等字眼，有些时候可能会有问题title: '一起敲代码！', // 这是分享展示卡片的标题desc: '机会先到先得!', // 这是分享展示的摘要//要是https的网址，否则失败link: currentUrl, // 这里是分享的网址//图片如果是https的网址，测试ios正常，安卓无法显示图片，不知道具体原因，改为http正常，注意不支持相对路径imgUrl: 'http://tob-h5.runyie.com/agent-reg/static/icon.jpg', // 这里是需要展示的图标success: function(rr) {// console.log('成功' + JSON.stringify(rr))},cancel: function(tt) {// console.log('失败' + JSON.stringify(tt));}}};// configwx.ready(function() {// console.log("开始配置")wx.updateAppMessageShareData(window.share_config.share);wx.updateTimelineShareData(window.share_config.share);wx.onMenuShareTimeline(window.share_config.share);wx.onMenuShareAppMessage(window.share_config.share);});wx.error(function(res) {console.log('wx error :', res)});}).catch(err => {console.log(err);})},

一定记得要调用！！！只能在微信中
如果配置失败，可以打开debug查看具体原因，总之，坑还是有的，
也测试过uniapp推荐的jweixin，
但失败了，最后还是用的wx.
新手上路，多多指教！

uniapp中使用微信SDK相关推荐

UNIAPP中H5微信登录
UNIAPP中H5微信登录 UNIapp中自带封装好的接口,但是在打包成H5中,微信登录对于新手来说网上教程比较少,大部分是分享的教程 H5微信登录之前你需要先在微信公众平台配置js接口安全域名,切记 ...
uni-app中使用微信一键登录
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.微信一键登录是什么? 二.使用步骤 1.在onLoad获取用户登录信息code 2.编写页面button按钮 3. ...
uniapp中实现微信H5定位、解决跨域问题
uniapp中实现微信H5定位跨域问题: 移动端h5中直接使用WebServiceAPI可能会有跨域问题,前端最简单的解决方法就是jsonp, 但uniapp中再使用jQuery的ajax就不太友好 ...
简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......
写在前面: 刚做了一个微信端的网页,用到了微信分享,在网上看了好多的资料,发现好多文档都写得云里雾里,让人看的头疼.通过对很多大佬文章的综合整理,才完成了微信分享的部分.所以我想着自己写一篇文章,能让 ...
uniapp中使用微信jssdk
在做自定义分享时,用到了微信jssdk,记录一下. 声明:本文演示uniapp中使用jssdk,示例为网页自定义分享 npm方式使用下方指令进行安装,正文部分为非npm方式. npm install ...
h5微信本地调试 vue_vueh5中使用微信sdk
微信官方sdk教程安装vue 微信sdk 使用NPM安装,不会的百度学npm install jweixin-module --save 创建一个wxsdk.js 文件// 引入微信sdk var ...
uni-app中实现微信|支付宝支付
一.主要逻辑 1.支付可能需要哪些东西支付的方式[微信][支付宝] 支付的金额订单的标题订单号订单的有效期支付完成跳转的链接 2.支付 2.1.点击立即购买的时候,想后端发送ajax请求,请 ...
在vue-cli项目中使用微信sdk的解决方案
在vue-cli 创建的项目中,引入微信分享的sdk的方法. 说明: 仅将官方 js-sdk 发布到 npm,便于 browserify 使用 js源码: https://res.wx.qq.com/ ...
uni-app中使用微信小程序 checkbox 组件案例
微信官网:https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html uni-app官网:https://unia ...
在uniapp中实现微信分享功能（分享给好友+朋友圈+收藏）
前言: 我们现在微信开发者工具中启动项目,我们点击三个点点就是进行调取下方分享界面,在开始的时候显示如下:是没有权限去分享的方法: 一.在common下新建share.js公共的js文件,方便可以在 ...

uniapp中使用微信SDK

uniapp中使用微信SDK

uniapp中使用微信SDK相关推荐

最新文章

热门文章