首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
18
uni_modules/uni-share/changelog.md
Normal file
18
uni_modules/uni-share/changelog.md
Normal file
@ -0,0 +1,18 @@
|
||||
## 2.0.2（2021-12-16）
|
||||
修复在某些情况下报：`Cannot read property 'hide' of undefined`的问题
|
||||
## 2.0.1（2021-11-29）
|
||||
修改错误的scene值WXSenceTimeline(分享到朋友圈)更正为WXSceneTimeline
|
||||
## 2.0.0（2021-10-14）
|
||||
支持监听返回操作(如：物理返回，全面屏手机侧滑)关闭分享弹窗
|
||||
## 1.0.6（2021-08-25）
|
||||
兼容vue3
|
||||
## 1.0.5（2021-08-05）
|
||||
优化代码实现，修改原来用`eval()`函数实现的逻辑
|
||||
## 1.0.4（2021-06-07）
|
||||
为符合苹果应用市场的审核，只显示存在对应的分享客户端的选项。如：配置包含微信分享，但是用户手机上并没有安装微信，就不显示微信分享。
|
||||
## 1.0.2（2021-05-06）
|
||||
修复错误的提示：“打包时未添加oauth模块”
|
||||
## 1.0.1（2021-04-30）
|
||||
新增完整示例
|
||||
## 1.0.0（2021-04-28）
|
||||
第1版发布
|
||||
204
uni_modules/uni-share/js_sdk/uni-image-menu.js
Normal file
204
uni_modules/uni-share/js_sdk/uni-image-menu.js
Normal file
@ -0,0 +1,204 @@
|
||||
var nvMask, nvImageMenu;
|
||||
class NvImageMenu {
|
||||
constructor(arg) {
|
||||
this.isShow = false
|
||||
}
|
||||
show({
|
||||
list,
|
||||
cancelText
|
||||
}, callback) {
|
||||
if (!list) {
|
||||
list = [{
|
||||
"img": "/static/sharemenu/wechatfriend.png",
|
||||
"text": "图标文字"
|
||||
}]
|
||||
}
|
||||
//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
|
||||
var screenWidth = plus.screen.resolutionWidth
|
||||
//以360px宽度屏幕为例，上下左右边距及2排按钮边距留25像素，图标宽度55像素，同行图标间的间距在360宽的屏幕是30px，但需要动态计算，以此原则计算4列图标分别的left位置
|
||||
//图标下的按钮文字距离图标5像素，文字大小12像素
|
||||
//底部取消按钮高度固定为44px
|
||||
//TODO 未处理横屏和pad，这些情况6个图标应该一排即可
|
||||
var margin = 20,
|
||||
iconWidth = 60,
|
||||
icontextSpace = 5,
|
||||
textHeight = 12
|
||||
var left1 = margin / 360 * screenWidth
|
||||
var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
|
||||
if (iconSpace <= 5) { //屏幕过窄时，缩小边距和图标大小，再算一次
|
||||
margin = 15
|
||||
iconWidth = 40
|
||||
left1 = margin / 360 * screenWidth
|
||||
iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距，再减去4个图标的宽度，就是3个同行图标的间距
|
||||
}
|
||||
var left2 = left1 + iconWidth + iconSpace
|
||||
var left3 = left1 + (iconWidth + iconSpace) * 2
|
||||
var left4 = left1 + (iconWidth + iconSpace) * 3
|
||||
var top1 = left1
|
||||
var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
|
||||
|
||||
const TOP = {
|
||||
top1,
|
||||
top2
|
||||
},
|
||||
LEFT = {
|
||||
left1,
|
||||
left2,
|
||||
left3,
|
||||
left4
|
||||
};
|
||||
|
||||
nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
|
||||
top: '0px',
|
||||
left: '0px',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0.2)'
|
||||
});
|
||||
nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
|
||||
bottom: '0px',
|
||||
left: '0px',
|
||||
height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 +
|
||||
'px', //'264px',
|
||||
width: '100%',
|
||||
backgroundColor: 'rgb(255,255,255)'
|
||||
});
|
||||
nvMask.addEventListener("click", () => { //处理遮罩层点击
|
||||
// console.log('处理遮罩层点击');
|
||||
this.hide()
|
||||
callback({
|
||||
event: "clickMask"
|
||||
})
|
||||
})
|
||||
let myList = []
|
||||
list.forEach((item, i) => {
|
||||
myList.push({
|
||||
tag: 'img',
|
||||
src: item.img,
|
||||
position: {
|
||||
top: TOP['top' + (parseInt(i / 4) + 1)],
|
||||
left: LEFT['left' + (1 + i % 4)],
|
||||
width: iconWidth,
|
||||
height: iconWidth
|
||||
}
|
||||
})
|
||||
myList.push({
|
||||
tag: 'font',
|
||||
text: item.text,
|
||||
textStyles: {
|
||||
size: textHeight
|
||||
},
|
||||
position: {
|
||||
top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace,
|
||||
left: LEFT['left' + (1 + i % 4)],
|
||||
width: iconWidth,
|
||||
height: textHeight
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
//绘制底部图标菜单的内容
|
||||
nvImageMenu.draw([{
|
||||
tag: 'rect', //菜单顶部的分割灰线
|
||||
color: '#e7e7e7',
|
||||
position: {
|
||||
top: '0px',
|
||||
height: '1px'
|
||||
}
|
||||
},
|
||||
{
|
||||
tag: 'font',
|
||||
text: cancelText, //底部取消按钮的文字
|
||||
textStyles: {
|
||||
size: '14px'
|
||||
},
|
||||
position: {
|
||||
bottom: '0px',
|
||||
height: '44px'
|
||||
}
|
||||
},
|
||||
{
|
||||
tag: 'rect', //底部取消按钮的顶部边线
|
||||
color: '#e7e7e7',
|
||||
position: {
|
||||
bottom: '45px',
|
||||
height: '1px'
|
||||
}
|
||||
},
|
||||
...myList
|
||||
])
|
||||
nvMask.show()
|
||||
nvImageMenu.show()
|
||||
// 开始动画
|
||||
/*
|
||||
plus.nativeObj.View.startAnimation({
|
||||
type: 'slide-in-bottom',
|
||||
duration: 300
|
||||
}, nvImageMenu, {}, function() {
|
||||
console.log('plus.nativeObj.View.startAnimation动画结束');
|
||||
// 关闭原生动画
|
||||
plus.nativeObj.View.clearAnimation();
|
||||
nvImageMenu.show()
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
this.isShow = true
|
||||
nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件，根据点击位置触发不同的逻辑
|
||||
// console.log("click menu"+JSON.stringify(e));
|
||||
if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
|
||||
// callback({event:"clickCancelButton"})
|
||||
this.hide()
|
||||
} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
|
||||
//屏幕左右边缘5像素及菜单顶部5像素不处理点击
|
||||
} else { //点击了图标按钮
|
||||
var iClickIndex = -1 //点击的图标按钮序号，第一个图标按钮的index为0
|
||||
var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
|
||||
var iCol = -1
|
||||
if (e.clientX < (left2 - (iconSpace / 2))) {
|
||||
iCol = 0
|
||||
} else if (e.clientX < (left3 - (iconSpace / 2))) {
|
||||
iCol = 1
|
||||
} else if (e.clientX < (left4 - (iconSpace / 2))) {
|
||||
iCol = 2
|
||||
} else {
|
||||
iCol = 3
|
||||
}
|
||||
if (iRow == 0) {
|
||||
iClickIndex = iCol
|
||||
} else {
|
||||
iClickIndex = iCol + 4
|
||||
}
|
||||
// console.log("点击按钮的序号: " + iClickIndex);
|
||||
// if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑，此处也可以自行定义逻辑。如果增减了按钮，此处也需要跟着修改
|
||||
// }
|
||||
callback({
|
||||
event: "clickMenu",
|
||||
index: iClickIndex
|
||||
})
|
||||
}
|
||||
})
|
||||
/* nvImageMenu.addEventListener("touchstart", function(e) {
|
||||
if (e.screenY > (plus.screen.resolutionHeight - 44)) {
|
||||
//TODO 这里可以处理按下背景变灰的效果
|
||||
}
|
||||
})
|
||||
nvImageMenu.addEventListener("touchmove", function(e) {
|
||||
//TODO 这里可以处理按下背景变灰的效果
|
||||
if (e.screenY > plus.screen.resolutionHeight - 44) {}
|
||||
})
|
||||
nvImageMenu.addEventListener("touchend", function(e) {
|
||||
//TODO 这里可以处理释放背景恢复的效果
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this.isShow) {
|
||||
nvMask.hide()
|
||||
nvImageMenu.hide()
|
||||
this.isShow = false
|
||||
}
|
||||
}
|
||||
}
|
||||
export default NvImageMenu
|
||||
98
uni_modules/uni-share/js_sdk/uni-share.js
Normal file
98
uni_modules/uni-share/js_sdk/uni-share.js
Normal file
@ -0,0 +1,98 @@
|
||||
import UniImageMenu from './uni-image-menu.js';
|
||||
class UniShare extends UniImageMenu{
|
||||
constructor(arg) {
|
||||
super()
|
||||
this.isShow = super.isShow
|
||||
}
|
||||
async show(param, callback){
|
||||
var menus = []
|
||||
plus.share.getServices(services => { //只显示有服务的项目
|
||||
services = services.filter(item => item.nativeClient)
|
||||
let servicesList = services.map(e => e.id)
|
||||
param.menus.forEach(item => {
|
||||
if (servicesList.includes(item.share.provider) || typeof(item.share) == 'string') {
|
||||
menus.push(item)
|
||||
}
|
||||
})
|
||||
super.show({
|
||||
list: menus,
|
||||
cancelText: param.cancelText
|
||||
}, e => {
|
||||
callback(e)
|
||||
if(e.event == 'clickMenu'){
|
||||
if (typeof(menus[e.index]['share']) == 'string') {
|
||||
this[menus[e.index]['share']](param)
|
||||
} else {
|
||||
uni.share({
|
||||
...param.content,
|
||||
...menus[e.index].share,
|
||||
success: res=> {
|
||||
console.log("success:" + JSON.stringify(res));
|
||||
super.hide()
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log("fail:" + JSON.stringify(err));
|
||||
uni.showModal({
|
||||
content: JSON.stringify(err),
|
||||
showCancel: false,
|
||||
confirmText: "知道了"
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}, err => {
|
||||
uni.showModal({
|
||||
title: '获取服务供应商失败：' + JSON.stringify(err),
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
});
|
||||
console.error('获取服务供应商失败：' + JSON.stringify(err));
|
||||
})
|
||||
}
|
||||
hide(){
|
||||
super.hide()
|
||||
}
|
||||
copyurl(param) {
|
||||
console.log('copyurl',param);
|
||||
uni.setClipboardData({
|
||||
data: param.content.href,
|
||||
success: ()=>{
|
||||
console.log('success');
|
||||
uni.hideToast() //关闭自带的toast
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'none'
|
||||
});
|
||||
super.hide();
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(err),
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 使用系统分享发送分享消息
|
||||
shareSystem(param) {
|
||||
console.log('shareSystem',param);
|
||||
plus.share.sendWithSystem({
|
||||
type: 'text',
|
||||
content: param.content.title + param.content.summary || '',
|
||||
href: param.content.href,
|
||||
}, (e)=> {
|
||||
console.log('分享成功');
|
||||
super.hide()
|
||||
}, (err)=> {
|
||||
console.log('分享失败：' + JSON.stringify(err));
|
||||
uni.showModal({
|
||||
title: '获取服务供应商失败：' + JSON.stringify(err),
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
export default UniShare
|
||||
80
uni_modules/uni-share/package.json
Normal file
80
uni_modules/uni-share/package.json
Normal file
@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "uni-share",
|
||||
"displayName": "uni-share",
|
||||
"version": "2.0.2",
|
||||
"description": "底部弹出宫格图标式的分享菜单，可覆盖原生组件。",
|
||||
"keywords": [
|
||||
"分享菜单"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "n",
|
||||
"Android Browser": "n",
|
||||
"微信浏览器(Android)": "n",
|
||||
"QQ浏览器(Android)": "n"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "n",
|
||||
"IE": "n",
|
||||
"Edge": "n",
|
||||
"Firefox": "n",
|
||||
"Safari": "n"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "n",
|
||||
"阿里": "n",
|
||||
"百度": "n",
|
||||
"字节跳动": "n",
|
||||
"QQ": "n"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
95
uni_modules/uni-share/readme.md
Normal file
95
uni_modules/uni-share/readme.md
Normal file
@ -0,0 +1,95 @@
|
||||
#### 本功能基于[底部图标菜单](https://ext.dcloud.net.cn/plugin?id=4858)封装而成。
|
||||
### 示例代码
|
||||
```
|
||||
<template>
|
||||
<button type="default" @click="uniShare">显示</button>
|
||||
</template>
|
||||
<script>
|
||||
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
|
||||
export default {
|
||||
onBackPress({from}) {
|
||||
console.log(from);
|
||||
if(from=='backbutton'){
|
||||
this.$nextTick(function(){
|
||||
uniShare.hide()
|
||||
})
|
||||
return uniShare.isShow;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uniShare() {
|
||||
uniShare.show({
|
||||
content: { //公共的分享参数配置 类型（type）、链接（herf）、标题（title）、summary（描述）、imageUrl（缩略图）
|
||||
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);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user