位置: IT常识 - 正文

uniapp中的分享功能实现(APP,小程序,公众号)(uniapp分享图片)

编辑:rootadmin
uniapp中的分享功能实现(APP,小程序,公众号) uniapp中的分享功能实现(APP,小程序,公众号)

推荐整理分享uniapp中的分享功能实现(APP,小程序,公众号)(uniapp分享图片),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp分享到微信,uniapp生成图片分享,uniapp分享文件,uniapp分享文件,uniapp分享微信,uniapp的分享功能,uniapp公众号分享,uniapp分享微信,内容如对您有帮助,希望把文章链接给更多的朋友!

1.APP端的分享

app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信、QQ、微博的分享SDK,开发者可以直接调用相关功能。可以分享到微信、QQ、微博,每个社交平台被称为分享服务提供商,即provider。可以分享文字、图片、图文横条、音乐、视频等多种形式。同时注意,分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序(通常为内容页)方式直接分享给微信好友。直接上代码。

<!-- #ifdef APP-PLUS --><view class="item" @click="appShare('WXSceneSession')"><view class="iconfont icon-weixin3"></view><view class="">微信好友</view></view><view class="item" @click="appShare('WXSenceTimeline')"><view class="iconfont icon-pengyouquan"></view><view class="">微信朋友圈</view></view><!-- #endif -->appShare(scene) {let that = thislet routes = getCurrentPages(); // 获取当前打开过的页面路由数组let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由,也就是最后一个打开的页面路由uni.share({provider: "weixin", //分享服务提供商(即weixin|qq|sinaweibo)scene: scene, //场景,可取值参考下面说明。type: 0, //分享形式href: `${HTTP_IP_URL}${curRoute}&spread=${that.uid}`, //跳转链接title: that.storeInfo.storeName, //分享内容的标题summary: that.storeInfo.storeInfo, //分享内容的摘要imageUrl: that.storeInfo.image, //图片地址success: function(res) {that.posters = false; //成功后关闭底部弹框},fail: function(err) {uni.showToast({title: '分享失败',icon: 'none',duration: 2000})that.posters = false;}});},

type 值说明

说明

provider支持度

0

图文

weixin、sinaweibo

1

纯文字

weixin、qq

2

图片

weixin、qq

3

音乐

weixin、qq

4

uniapp中的分享功能实现(APP,小程序,公众号)(uniapp分享图片)

视频

weixin、sinaweibo

5

小程序

weixin

scene 值说明

说明

WXSceneSession

分享到聊天界面

WXSenceTimeline

分享到朋友圈

WXSceneFavorite

分享到微信收藏

uni.share 在App端各社交平台分享配置说明

打开 manifest.json -> App模块权限配置,勾选 Share(分享);按如下文档具体配置微信、微博、QQ的参数

在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈,并填写 appid,如需在iOS平台使用还需要配置通用链接。

2.小程序端的分享

小程序中的分享有两种,一种是通过右上角的胶囊分享,还可以通过在页面中写button,通过open-type="share"方式分享。

//onShareAppMessage 分享给朋友//onShareTimeline 分享到朋友圈// #ifdef MPonShareAppMessage: function(res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } let that = this; return { title:'这是标题', imageUrl: '这是描述', path: '/pages/goods_details/index?id=' + that.id, }},// #endif

3.公众号的分享

公众号中的分享需要使用微信的JS-SDK,可以直接下载js文件引入,也可以通过npm下载。 公众号的分享比较繁琐,我们可以将其封装一下,在需要使用的地方传入对应的title,link和jsapi,就可以简便操作。

新建wechat.js,并在main.js中将其挂载到vue的原型上

// #ifdef H5import WechatJSSDK from "@/plugin/jweixin-module/index.js";import {getWechatConfig,wechatAuth} from "@/api/public";import {WX_AUTH,STATE_KEY,LOGINTYPE,BACK_URL} from '@/config/cache';import {parseQuery} from '@/utils';import store from '@/store';import Cache from '@/utils/cache';class AuthWechat {constructor() {//微信实例化对象this.instance = WechatJSSDK;//是否实例化this.status = false;this.initConfig = {};}isAndroid(){let u = navigator.userAgent;return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;}signLink() {if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') { window.entryUrl = location.href.split('#')[0]}return /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;}/** * 初始化wechat(分享配置) */wechat() {return new Promise((resolve, reject) => {// if (this.status && !this.isAndroid()) return resolve(this.instance);getWechatConfig().then(res => {this.instance.config(res.data);this.initConfig = res.data;this.status = true;this.instance.ready(() => {resolve(this.instance);})}).catch(err => {console.log('微信分享配置失败',err);this.status = false;reject(err);});});}/** * 验证是否初始化 */verifyInstance() {let that = this;return new Promise((resolve, reject) => {if (that.instance === null && !that.status) {that.wechat().then(res => {resolve(that.instance);}).catch(() => {return reject();})} else {return resolve(that.instance);}})}// 微信公众号的共享地址openAddress() {return new Promise((resolve, reject) => {this.wechat().then(wx => {this.toPromise(wx.openAddress).then(res => {resolve(res);}).catch(err => {reject(err);});}).catch(err => {reject(err);})});} // 获取经纬度;location(){return new Promise((resolve, reject) => {this.wechat().then(wx => {this.toPromise(wx.getLocation,{type: 'wgs84'}).then(res => {resolve(res);}).catch(err => {reject(err);});}).catch(err => {reject(err);})});} // 使用微信内置地图查看位置接口;seeLocation(config){return new Promise((resolve, reject) => {this.wechat().then(wx => {this.toPromise(wx.openLocation, config).then(res => {resolve(res);}).catch(err => {reject(err);});}).catch(err => {reject(err);})});}/** * 微信支付 * @param {Object} config */pay(config) {return new Promise((resolve, reject) => {this.wechat().then((wx) => { this.toPromise(wx.chooseWXPay, config).then(res => {resolve(res);}).catch(res => {resolve(res);});}).catch(res => {reject(res);});});}toPromise(fn, config = {}) {return new Promise((resolve, reject) => {fn({...config,success(res) {resolve(res);},fail(err) {reject(err);},complete(err) {reject(err);},cancel(err) {reject(err);}});});}/** * 自动去授权 */oAuth(snsapiBase,url) {if (uni.getStorageSync(WX_AUTH) && store.state.app.token && snsapiBase == 'snsapi_base') return;const {code} = parseQuery();if (!code || code == uni.getStorageSync('snsapiCode')){return this.toAuth(snsapiBase,url);}else{if(Cache.has('snsapiKey'))return this.auth(code).catch(error=>{uni.showToast({title:error,icon:'none'})})}}clearAuthStatus() {}/** * 授权登录获取token * @param {Object} code */auth(code) {return new Promise((resolve, reject) => {wechatAuth(code, Cache.get("spread")).then(({data}) => {resolve(data);Cache.set(WX_AUTH, code);Cache.clear(STATE_KEY);// Cache.clear('spread');loginType && Cache.clear(LOGINTYPE);}).catch(reject);});}/** * 获取跳转授权后的地址 * @param {Object} appId */getAuthUrl(appId,snsapiBase,backUrl) {let url = `${location.origin}${backUrl}`if(url.indexOf('?') == -1){url = url+'?'}else{url = url+'&'}const redirect_uri = encodeURIComponent(`${url}scope=${snsapiBase}&back_url=` +encodeURIComponent(encodeURIComponent(uni.getStorageSync(BACK_URL) ?uni.getStorageSync(BACK_URL) :location.pathname + location.search)));uni.removeStorageSync(BACK_URL);const state = encodeURIComponent(("" + Math.random()).split(".")[1] + "authorizestate");uni.setStorageSync(STATE_KEY, state);return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;// if(snsapiBase==='snsapi_base'){// return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=${state}#wechat_redirect`;// }else{// return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;// } }/** * 跳转自动登录 */toAuth(snsapiBase,backUrl) {let that = this;this.wechat().then(wx => {location.href = this.getAuthUrl(that.initConfig.appId,snsapiBase,backUrl);})}/** * 绑定事件 * @param {Object} name 事件名 * @param {Object} config 参数 */wechatEvevt(name, config) {let that = this;return new Promise((resolve, reject) => {let configDefault = {fail(res) {if (that.instance) return reject({is_ready: true,wx: that.instance});that.verifyInstance().then(wx => {return reject({is_ready: true,wx: wx});})},success(res) {return resolve(res,2222);}};Object.assign(configDefault, config);that.wechat().then(wx => {if (typeof name === 'object') {name.forEach(item => {wx[item] && wx[item](configDefault)})} else {wx[name] && wx[name](configDefault)}})});}isWeixin() {return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;}}export default new AuthWechat();// #endif

在需要使用的地方:

// 微信分享;setOpenShare: function(data) {let that = this;if (that.$wechat.isWeixin()) {let configAppMessage = {desc: data.synopsis,title: data.title,link: location.href,imgUrl: data.img};that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],configAppMessage);}},

微信公众号环境中点击右上角三个点就可以分享,所以setOpenShare事件可以提前让他执行,如果需要通过自定义方式通过按钮点击分享,可以将setOpenShare事件放在按钮的点击事件里面。

h5示例: CRMEB-JAVA. gitee开源地址: CRMEB-JAVA. 都看到这里了,点击上面gitee链接给个star吧

本文链接地址:https://www.jiuchutong.com/zhishi/269209.html 转载请保留说明!

上一篇:如何创建一个空文件(如何创建一个空的dataframe)

下一篇:鸿蒙系统中智能充电模式和反向充电功能怎么使用?(鸿蒙系统智能设备怎么开启)

  • 博客推广流程(博客推广要钱吗)

    博客推广流程(博客推广要钱吗)

  • ipad pro2021怎么关机(iPad pro2021怎么关闭旁白)

    ipad pro2021怎么关机(iPad pro2021怎么关闭旁白)

  • 小米10指纹解锁闪光可以关闭吗(小米10指纹解锁不见了)

    小米10指纹解锁闪光可以关闭吗(小米10指纹解锁不见了)

  • 手机拍照af是什么意思(手机拍照里面的af是什么)

    手机拍照af是什么意思(手机拍照里面的af是什么)

  • 怎样关闭拼小圈功能(怎样关闭拼小圈不让别人看)

    怎样关闭拼小圈功能(怎样关闭拼小圈不让别人看)

  • 苹果怎么降级12.4(苹果怎么降级到15.6.1)

    苹果怎么降级12.4(苹果怎么降级到15.6.1)

  • 苹果se手写输入法在哪里设置(苹果se手写输入怎么设置)

    苹果se手写输入法在哪里设置(苹果se手写输入怎么设置)

  • 5g费流量吗

    5g费流量吗

  • 通信助理乐话提醒是什么意思(通信助理在哪里)

    通信助理乐话提醒是什么意思(通信助理在哪里)

  • airpods一打电话就断开(airpods为什么打电话就断)

    airpods一打电话就断开(airpods为什么打电话就断)

  • uhd610相当于什么显卡(uhd610多少钱)

    uhd610相当于什么显卡(uhd610多少钱)

  • 支付宝账号在哪查(淘宝的支付宝账号在哪)

    支付宝账号在哪查(淘宝的支付宝账号在哪)

  • 笔记本显卡和台式机显卡区别(笔记本显卡和台式机显卡性能对比)

    笔记本显卡和台式机显卡区别(笔记本显卡和台式机显卡性能对比)

  • 爱奇艺下载后不是会员还能看吗(爱奇艺下载后不用会员能看吗)

    爱奇艺下载后不是会员还能看吗(爱奇艺下载后不用会员能看吗)

  • 已设置过微信号怎么改(已设置过微信号什么意思)

    已设置过微信号怎么改(已设置过微信号什么意思)

  • 电脑除法符号在哪(电脑键盘上的除法标点符号怎么打)

    电脑除法符号在哪(电脑键盘上的除法标点符号怎么打)

  • 京东退款能不能取消(京东退款能不能加速审核)

    京东退款能不能取消(京东退款能不能加速审核)

  • 手机切图怎么切(手机怎么切图分成多个图片)

    手机切图怎么切(手机怎么切图分成多个图片)

  • 努比亚红魔3S有nfc功能吗(努比亚红魔3和红魔3s有什么区别)

    努比亚红魔3S有nfc功能吗(努比亚红魔3和红魔3s有什么区别)

  • 手机怎么改qq群名片(手机qq如何改群名称)

    手机怎么改qq群名片(手机qq如何改群名称)

  • 微信商家二维码怎么弄(微信商家二维码可以收款信用卡吗)

    微信商家二维码怎么弄(微信商家二维码可以收款信用卡吗)

  • 荣耀v20有没有耳机接口(荣耀v20pro有没有耳机孔)

    荣耀v20有没有耳机接口(荣耀v20pro有没有耳机孔)

  • 华为5g手机有哪些(华为5g手机有哪些款式)

    华为5g手机有哪些(华为5g手机有哪些款式)

  • 央视影音下载的视频在手机哪里(央视影音下载的视频为什么看不了)

    央视影音下载的视频在手机哪里(央视影音下载的视频为什么看不了)

  • app无法下载(怎样让一个app无法下载)

    app无法下载(怎样让一个app无法下载)

  • 什么是集成显卡(什么是集成显卡长什么样)

    什么是集成显卡(什么是集成显卡长什么样)

  • sethook.exe - sethook进程是什么文件 有何作用

    sethook.exe - sethook进程是什么文件 有何作用

  • 在公司交社保不满十年,女性按照什么退税
  • 去银行提取备用金开支票怎么填
  • 技术服务年费是什么
  • 收到样品费计入什么科目
  • 医疗器械销售初次拜访话术
  • 已抵扣红字发票信息表怎么开
  • 定额发票已经取得怎么办
  • 在线负利计算器
  • 购买税控盘的钱能全额抵扣增值税吗
  • 报关单出口退税联在哪打印
  • 非汉语是什么意思
  • 生活服务业包括哪些行业照片
  • 附加税减半征收政策是哪个文件
  • 工商年报报表
  • 股票股利为什么不影响所有者权益
  • 对子公司投资应采取的核算方法
  • 可转换公司债券可以在一定程度上解决的问题是
  • 计算土地增值税时契税可以扣除吗
  • 刚毕业的学生可以买学生票吗
  • 工程公司更换单位怎么办
  • win10如何禁止安装任何软件
  • 代发工资有什么弊端
  • php循环语句
  • php递归遍历文件夹
  • 代扣代缴企业所得税如何申报
  • 捐资民办学校可以盈利吗
  • 投标代理费应如何支付
  • 库存品处理的方式
  • 企业不年报会怎么样
  • 结转损益利息收入在哪方
  • 待处理财产损溢借方是增还是减
  • db2udb
  • 一般纳税人年收入500万交多少税
  • 旅行社的增值税税率
  • 长期股权投资成本法
  • 工程结算成本和主营业务成本一样吗
  • 让税务局代开的发票直接交纳的税金如何做会计分录?
  • 小企业期间费用包括
  • 免征水利建设基金条件
  • 回购注销库存股的会计处理
  • 奖金偶然所得税起征点
  • 收单清算款计入什么费用
  • 分公司办事处需要什么手续
  • 资产减值准则规范
  • 退税勾选选成抵扣勾选怎么办
  • 所有进项增值税怎么申报
  • 企业项目贷款所需资料
  • 损益表格式 最新
  • 怎么样建账做账
  • mysql优化实战
  • 对Windows Server 2008系统自带的磁盘分区进行无损分区的教程图文介绍
  • ububtu安装教程
  • mac怎么获取文件路径快捷键
  • 苹果mac系统怎么用
  • skydrive官网登录
  • win8资源管理器在哪
  • vnetd.exe
  • win7 64位系统提示"Windows7不能识别网络打印机"的故障原因及解决方法
  • 电脑连不上网怎么解决
  • u盘运行win10系统
  • win10电脑开机蓝屏怎么进入安全模式
  • 查看syslog
  • wp8.1升级10
  • linux bfs
  • js 高级技巧
  • cocos2d schedule
  • perl use vars pragma使用技巧
  • cocos2048
  • python true的用法
  • unity火球特效
  • python 解析算法
  • javascript 对象的this指向
  • jquery获取单选按钮的值
  • 新能源审核多久
  • 成品油和非成品油的税务知识
  • 百旺税控盘口令认证失败pin锁定怎么办
  • 车辆购置税是国家收还是地方收
  • 地税收税标准
  • 回迁房有没有装电梯的
  • 山西省国家税务总局山西省电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设