Realization of sharing function in uniapp (APP, applet, official account)
1. Sharing on APP side
Sharing on the app side can directly use the uni.share method encapsulated by uniapp. The app engine of uni-app has encapsulated the sharing SDKs of WeChat, QQ, and Weibo, and developers can directly call related functions. It can be shared to WeChat, QQ, Weibo, and each social platform is called a sharing service provider, that is, a provider. You can share text, pictures, graphic bars, music, video and other forms. At the same time, note that sharing as a mini program also uses this API. That is, in the App, you can directly share a content with WeChat friends in the form of a small program (usually a content page) through this API. Go directly to the code.
<!-- #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 value description
value
illustrate
provider support
0
graphic
weixin, sinaweibo
1
plain text
weixin, qq
2
picture
weixin, qq
3
music
weixin, qq
4
video
weixin, sinaweibo
5
Applets
weixin
scene value description
value
illustrate
WXSceneSession
Share to chat interface
WXSenceTimeline
Share to circle of friends
WXSceneFavorite
Share to WeChat Favorites
uni.share Share configuration instructions on various social platforms on the App side
- Open manifest.json -> App module permission configuration, check Share (share);
- Configure the parameters of WeChat, Weibo, and QQ according to the following documents
In the App SDK configuration of manifest.json, check WeChat messages and Moments, and fill in the appid. If you want to use it on the iOS platform, you need to configure a universal link.
2. Small program sharing
There are two types of sharing in the applet, one is sharing through the capsule in the upper right corner, and you can also share by writing a button on the page and sharing through 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. Sharing of official accounts
The sharing in the official account needs to use WeChat's JS-SDK, which can be directly downloaded and imported from the js file, or downloaded through npm. The sharing of the public account is cumbersome, we can encapsulate it, and pass in the corresponding title, link and jsapi where it needs to be used, so that it can be easily operated.
Create a new wechat.js and mount it on the prototype of vue in main.js
// #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
Where needed use:
// 微信分享；
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);
}
},
Click the three dots in the upper right corner of the WeChat official account to share, so the setOpenShare event can be executed in advance. If you need to share by clicking the button in a custom way, you can put the setOpenShare event in the click event of the button.
h5 example: CRMEB-JAVA .
gitee open source address: CRMEB-JAVA .
I have seen it here, click the gitee link above to give a star