基于uniapp开发的小程序&APP的分享

Snackmachine
4,981 阅读9分钟

uniapp开发的小程序&APP的分享

具体以下三个大类考虑

  1. 小程序分享
  2. Android端分享
  3. iOS端分享

分享限制条件

每日最大分享次数 m次m次

分享形式

  • 复制链接，文字链接
  • 分享到微信好友（聊天框），小程序链接形式/小程序卡片
  • 分享到朋友圈，类小程序链接形式
  • 分享到QQ（聊天框），卡片链接（图文）形式

小程序端分享

使用的是原生分享，即通过onShareAppMessage和onShareTimeline事件函数来控制分享

image.png

分享到微信好友

分享次数同步函数updateShareCount,即每次点击分享时需要更新分享次数，当分享次数达到上限后updateShareCount接口函数返回相应的状态码，调用uni.hideShareMenu()置灰上图分享按钮。效果如下图所示。

image.png

踩坑回溯

最开始的想法是：一进入页面调用uni.hideShareMenu()置灰分享按钮，然后再通过接口查询今日分享是否已达上限，如果没有达到上限就调用uni.showShareMenu()高亮分享按钮（可点击操作）。但是！但是！但是！你会发现如下图所示

image.png

没错，只会高亮一个按钮，暂不清楚原因，我估摸着是微信小程序自己的bug，如知道原因，烦请告知。可通过以下代码进行试验

onLoad(){
    uni.hideShareMenu();
    setTimeout(()=>{
            uni.showShareMenu()
    },3000)
}
分享微信好友代码如下

updateShareCount函数可替换为你每次分享时要处理的事件函数

onShareAppMessage(res) {
	this.updateShareCount();
	return {
		title: this.title,
		path: `/pages/detail/detail?kewords=this.keywords`
        }
}

分享到微信朋友圈

分享的逻辑处理同分享到微信好友。不同点：分享到朋友圈不支持自定义路径，只能分享当前页面，所以onShareTimeline返回对象中不再是path而是参数query，具体如下代码所示

onShareTimeline(res) {
	this.updateShareCount();
	return {
		title: this.title,
		query: `?kewords=this.keywords`
        }
}
不信邪警告，你很细

官方没有提供下图所示三个按钮的回调事件，换句话说当你点击这三个按钮时，从代码层面上来说，开发者是没办法捕捉到的用户的行为的。所以别妄想在用户点击按钮时做一些事件处理等等。当然有人或许会问，欸，你不是在onShareTimeline和onShareAppMessage方法里不是添加了this.updateShareCount()方法吗？。很好，你很细，真的很细！。

点击分享按钮时，不会触发上面两个分享事件函数。只有当点击“发送给好友”并且唤起聊天页面时才会调用onShareAppMessage事件处理函数。同样只有当点击“分享到朋友圈”并且唤起朋友圈编辑页面时才会调用onShareTimeline事件处理函数。

image.png

Andorid端分享

前置条件

  1. 注册微信开放平台账号
  2. 在管理中心创建移动端应用，需要审核，创建好的截图如下
  3. 审核通过的应用，点击右侧《查看》按钮，获取移动应用APPID，如下图所示
  4. manifest.json文件，点击《App模块配置》，勾选“Share(分享)”、“微信分享”，填写移动应用APPID,截图如下所示

创建移动应用截图

image.png

查看APPID截图

image.png

应用签名截图

image.png

应用签名注意事项
需要固定使用一个包名
需要固定使用一个.keystore文件

image.png

manifest.json文件分享配置截图

image.png

页面分享图标设置

使用的是原生导航栏

pages.json文件，分享图标配置如下，图标是字体图标

{
	"path": "pages/detail/index",
	"style": {
		"navigationBarTitleText": "",
		"enablePullDownRefresh": false,
		"app-plus": {
			"background": "#F7F8FA",
			"titleNView": {
			"buttons": [{
				"text": "\ue66d",
				"fontSrc": "/static/font/iconfont.ttf",
				"fontSize": "40rpx"
				}]
			},
			"scrollIndicator":"none"
		}
	},
"preload": true

},

tip：原生导航栏中按钮右边距设置

假设UI要求导航栏分享图标距离右边20px,上述buttons不支持marginRight的属性。但是可以设置width:calc(图标宽度 + 右边距)也能达到同样的效果

image.png

隐藏页面滚动条，"scrollIndicator":"none"。为了截图不会出现灰色的滚动条，具体后面再讨论。

制作自定义基座&打包

important ！！！

manifest.json是配置文件，后续分享有效的前提是，制作自定义基座或者App打包。而且每次修改了配置文件需要重新制作自定义基座或者App打包。
uni-app官方原文： 真机运行时，分享调用的是HBuilder真机运行基座的sdk配置，分享出去的内容会显示为HBuilder。需自行在各社交平台注册账户，在manifest的sdk配置中填写自己的配置，打包后生效。

底部弹窗分享

image.png

分享到微信

App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）

分享代码如下图所示

uni.share({
    provider: 'weixin',
    scene: "WXSceneSession",
    type: 5,
    imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/share-logo@3.png',
    title: '欢迎体验uniapp',
    miniProgram: {
        id: 'gh_abcdefg',
        path: 'pages/index/index',
        type: 0,
        webUrl: 'http://uniapp.dcloud.io'
    },
    success: ret => {
        console.log(JSON.stringify(ret));
    }
});

上述代码中imageUrl是一张图片，是一张图片。但是如果想要在微信小程序中分享到好友一样的效果，形式满足都是图文，但是图片不满足，小程序分享的图片是默认截取的当前页面的缩略图，而在APP中分享的图片是需要开发者自己处理的，那该怎么达到一样的效果呢？截取当前页面的缩略图，具体思路如下：

参考：上述图片处理借鉴于

分享截图如下所示

image.png

问题回溯，又到了很细环节🤣

上述提到过"scrollIndicator":"none"用来隐藏滚动条。解答：不隐藏滚动条部分手机可能会出现绘制好的图片右侧有灰色的竖条即滚动条，也就是截图把滚动条也一并截取了。

分享到朋友圈

分享模式为图文（卡片）形式

  • 图：一般用当前APP应用的logo
  • 文：自定义
  • 链接：href一般为h5链接

官方示例代码如下

uni.share({
	provider: "weixin",
	scene: "WXSceneTimeline",
	type: 0,
	href: "http://uniapp.dcloud.io/",
	title: "uni-app分享",
	summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
	imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
	success: function (res) {
		console.log("success:" + JSON.stringify(res));
	},
	fail: function (err) {
		console.log("fail:" + JSON.stringify(err));
	}
});

分享截图如下所示

image.png

分享到QQ

分享模式为图文（卡片）形式

  • 图：一般用当前APP应用的logo
  • 文：自定义
  • 链接：href一般为h5链接

前置条件

  1. appid:腾讯QQ开放平台申请应用的APPID，申请地址QQ互联管理中心
  2. 申请好manifest.json填写appid

image.png

iOS端分享

通用链接
关联域名

注意事项

  • apple-app-site-association文件不需要.json后缀
  • 对apple-app-site-association文件的请求仅在App第一次启动时进行!!!。
  • iOS 9.2开始，在相同的domain内Universal Links不生效，必须要跨域才生效，也就是APP里面接口的域名不能和使用通用链接项目的域名相同。

跨域举例：h5在safari浏览器打开，h5页面中有个打开APP按钮，通过通用链接打开APP应用，即访问h5的域名和APP中使用的域名（接口等，有误请指出）不能相同。

踩坑记录 apple-app-site-association文件

当时这里调试了很久很久，通用链接始终无效，什么原因都找了，最后也不知道在哪里无意中看到该文件仅在APP第一次启动时请求。我这里的理解就是，在APP安装后第一次启动才会请求文件，如果你也遇到类似的，卸载APP，重新打自定义基座运行到手机（我是手机，模拟器也行）。

manifest.json文件配置通用链接

image.png

分享到微信

App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）

同上Android端分享到微信

分享到微信朋友圈

同上Android端分享到微信朋友圈

分享到QQ

同上Android端分享到QQ

分享模式为h5卡片（以分享到朋友圈示例）注意事项

uni.share({
	provider: "weixin",
	scene: "WXSceneTimeline",
	type: 0,
	href: `${baseUrlH5}/h5/#/?id=${this.mpnid}&mpn=${encodeURIComponent(this.mpnName)}&isExtenalLink=true&key=${this.mpnShareKey}&code=${this.mpnShareCode}`, //地址
	title: this.mpnName,
	imageUrl: "http://xxx.xxx.cn/xxxx-logo.png",
	success: (res) => {
            this.addShareCount();
	},
	fail: (err) => {
            this.handleInvokeError(err);
	}

	});

encodeURIComponent编码

上述代码中encodeURIComponent(this.mpnName),需要将你传递的参数进行编码，如果遇到特殊符号+号，不提前进行编码，h5在不同浏览器环境中打开，可能会无法解析+号或者解析错误。

结尾

本文只是简单列述了不同端不同模式的分享，其中很多细节没有罗列。写的不好，主要用于记录、查阅和提供思路，如有错误，请批评指正，当然也会随时更新并补充。

后续

与之关联的是h5中唤起APP应用的按钮，这里涉及的情况更多，大体分为urlscheme协议，和universallink通用链接这两种，后面有时间再出该文章。

补充

关于通用链接不起作用的问题？主要有以下几个方面，下面提到的域名是同一个域名

  • manifest.json文件是否正确配置iOS平台通用链接
  • apple-app-site-association文件配置是否正确
  • https://你自己的域名/.well-known/apple-app-site-association，https://你自己的域名/apple-app-site-association是否能够访问
  • https://app-site-association.cdn-apple.com/a/v1/你的关联域名是否能正确访问，其实就是apple-app-site-association文件，这里的你的关联域名和你自己的域名是同一个域名，这里配置可能需要运维同学协助。当修改完成后，并不能立即访问修改后的内容。苹果官方会定期访问你配置的关联域名，获取你服务器上面的apple-app-site-association文件，并同步到自己的服务器上。所以每次修改后需要等一段时间，一般第二天去访问就能看到最新的文件了。
  • 还有分享到不同的平台，比如微信、QQ、微博，需要在各自对应的开放平台配置iOS通用链接和Bundle ID，举个例子微信对应的是微信开放平台
avatar
文章
阅读
粉丝