使用uni-share插件实现APP页面分享
插件封装
首先先下载插件：
https://ext.dcloud.net.cn/plugin?id=4860#detail
从官方插件地址可以看到，本插件只支持APP下的分享功能。
可以使用HX直接下载插件，下载的插件会默认安装在“根目录/uni_modules/uni-share”下，当然也可以手动下载压缩包，并在根目录创建uni_modules，并放入其下。
在'@/common/mixin_unishare.js' @代表根目录。新建mixin_unishare.js文件：
mport UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
const uniShare = new UniShare();
export const uniShareCon = {
onBackPress({from}) {
console.log(from);
if(from=='backbutton'){
this.$nextTick(function(){
uniShare.hide()
})
return uniShare.isShow;
}
},
methods: {
uniShare() {
//#ifdef APP-PLUS
uniShare.show({
//公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
content: {
type: 0,
href: 'https://uniapp.dcloud.io/',
title: '标题',
summary: '描述',
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
},
menus: [{
"img": "/static/app-plus/sharemenu/wechatfriend.png",
"text": "微信好友",
"share": { //当前项的分享参数配置。可覆盖公共的配置如下：分享到微信小程序，配置了type=5
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/app-plus/sharemenu/wechatmoments.png",
"text": "微信朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSceneTimeline"
}
},
{
"img": "/static/app-plus/sharemenu/mp_weixin.png",
"text": "微信小程序",
"share": {
provider: "weixin",
scene: "WXSceneSession",
type: 5,
miniProgram: {
id: '123',
path: '/pages/list/detail',
webUrl: '/#/pages/list/detail',
type: 0
},
}
},
{
"img": "/static/app-plus/sharemenu/weibo.png",
"text": "微博",
"share": {
"provider": "sinaweibo"
}
},
{
"img": "/static/app-plus/sharemenu/qq.png",
"text": "QQ",
"share": {
"provider": "qq"
}
},
{
"img": "/static/app-plus/sharemenu/copyurl.png",
"text": "复制",
"share": "copyurl"
},
{
"img": "/static/app-plus/sharemenu/more.png",
"text": "更多",
"share": "shareSystem"
}
],
cancelText: "取消分享",
}, e => { //callback
console.log(uniShare.isShow);
console.log(e);
});
//#endif
}
}
}然后在相关的组件中：
<view class="share">
<button @click="uniShare">分享</button>
</view>
<script>
import { uniShareCon } from '@/common/js/mixin_unishare.js';
export default {
name: 'detail',
mixins: [ uniShareCon ],
data() {...}
...
}
</script>引入mixins，然后使用即可。
注意：里面的分享图标图片必须使用png格式，尺寸在200X200或者300X300均可。
现实使用中遇到的问题
插件的使用效果如图：https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/uni-share_0.jpg
（里面的分享图需要自己在配置项里指定）
这里我遇到的问题：下载示例项目使用模拟器运行只能显示复制和更多，qq、微信这些图标和文字都不显示的?
要解决这个问题，首先请参考以下链接：
App端Share(分享)模块开启：
https://uniapp.dcloud.net.cn/tutorial/app-share.html
以微信为例，微信开启分享：
https://uniapp.dcloud.net.cn/tutorial/app-share-weixin.html
微信开放平台
uni.share方法介绍
https://uniapp.dcloud.net.cn/api/plugins/share.html#share
uni-share-在app端各社交平台分享配置说明
https://uniapp.dcloud.net.cn/api/plugins/share.html##uni-share-在app端各社交平台分享配置说明
新浪appkey
https://ask.dcloud.net.cn/article/209
当我们使用过程中，发现打开的分享只有“复制”和“更多”两项的时候，原因其实因为是没有在uniapp中的manifest.json中添加相关的分享配置，或者是添加了配置，但是没有重新打包并更新APP版本和APP基座，导致插件中plus.share.getServices方法在手机上找不到添加的配置，因此查看不到效果。
plus.share.getServices的API
https://www.html5plus.org/doc/zh_cn/share.html
所以当，发现添加了uni-app配置，但是没有在手机上生效的时候（没出现微信等项）：
首先需要在manifest.json中的APP模块，选中share，以及下面的微信、QQ等
注意appid等必须填入正确的格式！！比如，我填入的微信的appid为：wx3d45eb2bef3cbfc7（仅供测试）
APP模块配置-share（分享）-勾选需要的配置项。只有勾选后，手机端，使用plus.share.getServices才能够检测到相应的服务。
如果填入了错误的格式，或者不存在的id，微信的配置项不会显示。新浪与QQ的配置同理。
修改APP基本的版本信息，1.0.x以及10x等
每次添加插件后，记得都要修改图中红线处的版本以及版本号等。只有修改后，再制作基座时候，才会更新新的插件。
重新自定义基座
自定义基座
https://ask.dcloud.net.cn/article/35115
https://uniapp.dcloud.net.cn/tutorial/run/run-app.html
官方提示：三方分享模块参数配置需提交云端打包后才能生效，真机运行调试时请使用自定义基座
使用分享功能基本流程：
- 向三方分享平台申请开通，有些平台（如微信分享）申请成功后会获取appid
- 在HBuilderX中配置申请的参数（如appid等），提交云端打包生成自定义基座
(opens new window) - 在App项目中调用API进行分享操作
支持的三方分享平台：
目录