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 = this
let 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
视频
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 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吧
2297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
