uniapp 微信分享
利用uniapp的uni.share实现微信分享的效果
·
前言
微信分享是uniapp开发中常见的需求,大部分的app或者小程序都会具备微信分享的功能,但微信分享效果并不难实现,因为uniapp本身自带了一个微信分享的api,我们只需要调用微信分享的api即可实现
前置条件
要完成微信分享首先得打开微信分享的功能,打开manifest.json文件,点击app模块配置,找到微信分享并选中即可
注意:appid不是必填项,如果appid为空时分享出去的内容来源会显示为HBuilder,如果需要显示的内容来源是自身的app则需自行在各微信平台注册appid,填写注册的appid,打包后生效。
分享到聊天界面
<template>
<view>
<button @click="share">点我微信分享</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
share() {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle", // 分享跳转的链接
title: "微信分享", // 分享标题
summary: "微信分享示例", // 分享内容文字
imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7", //分享封面图片
success: function(res) {
// 此处是调起微信分享成功的回调
},
fail: function(err) {
// 此处是调起微信分享失败的回调
}
});
}
}
}
</script>
<style>
</style>
分享到朋友圈
<template>
<view>
<button @click="share">点我微信分享</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
share() {
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 0,
href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle", // 分享跳转的链接
title: "微信分享", // 分享标题
imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7", //分享封面图片
success: function(res) {
// 此处是调起微信分享成功的回调
},
fail: function(err) {
// 此处是调起微信分享失败的回调
}
});
}
}
}
</script>
<style>
</style>
分享到微信收藏
<template>
<view>
<button @click="share">点我微信分享</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
share() {
uni.share({
provider: "weixin",
scene: "WXSceneFavorite",
type: 0,
href: "https://cn.bing.com/images/search?q=%e5%a5%b6%e8%8c%b6&form=HDRSC2&first=1&tsc=ImageHoverTitle", // 分享跳转的链接
title: "微信分享", // 分享标题
imageUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.4dMFZeNZTSghjY1RpuOqlgHaLH?w=182&h=273&c=7&r=0&o=5&dpr=1.25&pid=1.7", //分享封面图片
success: function(res) {
// 此处是调起微信分享成功的回调
},
fail: function(err) {
// 此处是调起微信分享失败的回调
}
});
}
}
}
</script>
<style>
</style>
以上就是微信分享的基本用法了,关于微信分享更多的信息可以前往uniapp 微信分享查看
更多推荐
已为社区贡献2条内容
所有评论(0)