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

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支持度

图文

weixin、sinaweibo

纯文字

weixin、qq

图片

weixin、qq

音乐

weixin、qq

视频

weixin、sinaweibo

小程序

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 MP
onShareAppMessage: 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 H5
import 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吧

uniapp中的分享功能实现(APP,小程序，公众号)相关推荐

智慧环卫管理系统方案/APP/小程序/公众号/网站
目前,环卫日常工作管理及运作上还是按照传统管理模式进行,业务工作建立在工序细分和工作简单化.专业化基础上,相应的组织都是多层次.多部门的"金字塔"型的职能型组织机构.有限的人力资源 ...
分享一个开源微信小程序+公众号商城后台管理系统
源码地址:http://github.crmeb.net/u/blue 功能 1.商品: 能够对商品的状态分类管理 (出售中.待上架.库存中.已售馨.库存警戒.回收站).添加产品.添加商品分类等功能 ...
VR全景电子商务方案/APP/小程序/公众号/网站
随着电子商务的发展,电商对产品展示有了更多的尝试:视频体验.flash动画.虚拟空间等方式层出不穷,都是为了加强产品的形象包装与用户体验,最终促进成交率,创造更多效益.而作为用户,最希望能在网站上真实 ...
小程序+公众号=App？小程序、公众号、App这三者间如何导流？
小程序+公众号=App,相信很多做小程序的产品和运营都会一下就看懂这条公式,公众号的内容+小程序的活动/功能可以说是完美的结合体,因此很多产品也将资源大量投入到公众号和小程序.这个公式究竟成立吗?小程 ...
APP、PC客户端抓包、小程序\公众号
APP.小程序.公众号抓包一.APP抓包 (一)BurpSuite抓取手机HTTP数据包 1.配置代理IP与端口 2.测试 (二)BurpSuite抓取手机HTTPS数据包 1.安装证书 2.测试 ...
fiddler使用教程+抓包实践+filder抓包APP+HTTPS,PC微信小程序公众号抓包笔记，fidder插件
fiddler使用教程+抓包实践+filder抓包APP+HTTPS,PC微信小程序公众号抓包笔记,fidder插件 fiddler使用教程界面 File->captur traffic 开启 ...
微信小程序公众号开发
微信小程序&公众号开发一.什么是微信开发二.微信开放平台三.微信公众平台四.小程序与公众号的区别 1. 用途不同 2. 运营方式不同 3. 操作方法不同 4. 用户体验不同(公众号操作 ...
美团饿了么外卖返利小程序公众号搭建外卖返利分销系统代cps源码
美团饿了么外卖返利小程序公众号搭建外卖返利分销系统代cps源码外卖CPS小程序源码分享饿了么.美团优惠开发(外卖cps,三级裂变源码) 源码或搭建 http://y.mybei.cn/ 截图功能 ...
开源全平台版知识付费系统源码支持微信小程序+公众号+H5+PC端
分享一个开源全平台版知识付费系统源码,系统支持微信小程序+公众号+H5+PC端,一套系统实现全端数据及用户体系全面打通,轻松实现店铺全网一站式运营.含完整代码包和详细搭建教程. 系统支持视频课程.音频 ...

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

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

uniapp中的分享功能实现(APP,小程序，公众号)相关推荐

最新文章

热门文章