1、在开发过程中,客户要求使用用户要有分享功能,且每天只可以分享一次。
如果只有实现分享功能那十分简单,只需要打开目录中的manifest.json->App模块配置->Share(分享)
示图如下:
点击详情进入官网进行一一配置,这里我们就不详细说了。
2、配置分享后的代码编写
我使用的是uvui的框架,之前使用的是uview的ui但是在不在更新后就只好换别的用了,能够熟练使用各种框架也是开发者的基本功之一喔!UVui官网请点击官网自行配置。样式就不再多少主要是看js编码部分。
<view style="background-color: #dcdcdc;margin-top: 50rpx;">
<uv-list>
<uv-list-item thumb="../../static/grzx/hyzx.png" thumb-size="medium" title="会员中心"
to="/pages/pay/pay" link="navigateTo">
</uv-list-item>
<uv-list-item thumb="../../static/grzx/lxwm.png" thumb-size="medium" title="联系我们" to="CallWe"
link="navigateTo" :border="true">
</uv-list-item>
<uv-list-item thumb="../../static/grzx/fxapp.png" thumb-size="medium" title="分享APP"
link="navigateTo" @click="Fengxiang" :border="true">
</uv-list-item>
<uv-list-item thumb="../../static/grzx/gyapp.png" :show-badge="true" :badge="{value: isRenew}"
thumb-size="medium" title="关于" to="GuanGU" link="navigateTo" :border="true">
</uv-list-item>
</uv-list>
</view>
3、JS编码部分
1、初始化内部存储值shareApp
初始化内部存储值:shareApp
在created生命周期是实例创建完成后被立即调用在这里初始化目的是为了让用户每次进入到分享页面时都会去进行用户今天是否有分享过。以保障后续程序的可靠性。
created() {
if (this.gs("shareOverTime") != this.GetNowTime()) {
// 如果shareOverTime要与当前时间不相等
/**
* 如果时间不相等则代表用户已经是第二天或者往后的某天了
* 再次初始化shareApp用于判断用户是否分享过的内部存储
*/
this.ss("shareApp", 0)
console.log("可以分享");
}else{
this.ss("shareApp", 1)
}
},
2、创建函数formatTime和GetNowTime
创建formatTime函数用于格式化获取当前系统时间,时间格式为YYYY-MM-DD(比如:2024-03-28)使用这个时间格式是因为我们只需要获取用户当前的年月日,不需要具体的时分秒来进行判断当天用户是否已经分享过。再创建GetNowTime函数获取系统当前时间,new Date();获取到的当前时间对象。传入formatTime()函数后返回格式化后的时间字符串。调用GetNowTime()函数即可获取到当前时间。那么现在我们已经可以获取到当前的时间了,解决用户一天只可以分享一次就可以通过判断时间来解决了。
formatTime(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始,需要加1
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
},
GetNowTime() {
const currentTime = new Date();
const formattedTime = this.formatTime(currentTime);
console.log(`当前时间:${formattedTime}`);
return formattedTime;
},
3、分享功能主要逻辑代码
const that = this; 在函数内部保存当前上下文的引用,防止在回调函数中丢失 this 的指向。
uni.share({…}) - 调用UniApp的分享API,配置如下:
- provider: “weixin” - 表明使用微信作为分享提供商。
- scene: “WXSceneSession” - 设置分享到微信聊天窗口。
- type: 1 - 分享类型,这里是未知类型,通常在微信分享中不需要此参数。
- summary: “http://zichushi.cn/zhixietong/software.html” - 设置分享摘要,这里可能是分享链接的地址。
- 成功回调函数会打印分享成功的日志,并执行后续操作。
- 成功分享后的逻辑:
- 调用 uni.request 向服务器发送一个POST请求,用于增加用户的使用次数;
shareApp() {
const that = this;
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 1,
summary: "http://zichushi.cn/zhixietong/software.html",
success: function(res) {
console.log("success:" + JSON.stringify(res));
/**
* @param {分享成功后,添加一次使用次数}
*/
uni.request({
url: that.baseIp() + '/my/counts/add/use/count',
method: 'POST',
header: that.header(),
data: {
userId: that.listOb.id,
usageCount: 1
},
success: res => {
if (res.data.code == 200) {
/**
*
*/
if (that.gs("shareApp") == 0) {
const shareAppCount = that.gs("shareApp")
that.ss("shareApp", shareAppCount + 1)
console.log("分享次数生效", that.gs("shareApp"));
}
console.log("添加成功", res);
//重新查询次数更新次数
that.getCount();
console.log("使用次数%s", res.data.data.usageCount);
uni.showToast({
title: `您当前使用次数剩余${res.data.data.usageCount}次`,
icon: 'none',
duration: 3000
})
}
},
fail: () => {},
complete: () => {}
});
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
},
4、分享逻辑最终代码
在main.js全局配置和初始化操作中创建这两种在代码中常用到的方法
// 这是存入内部存储数据以键值对方式传入数据
Vue.prototype.ss = function(key, value) {
uni.setStorageSync(key, value)
}
// 这是获取内部存储数据以键方式获取,有返回值。
Vue.prototype.gs = function(key) {
return uni.getStorageSync(key)
}
这是具体的判断逻辑
1、如果用户当天已经分享过了,那么shareApp则会是1,并且shareOverTime也会是当前的时间,用户则不可以分享了
2、如果用户没有分享过,那么旧的系统时间,就会与新的不同,则会把shareApp存为0。用户则可以继续分享。
Fengxiang() {
const that = this;
uni.showToast({
title: `每天仅可分享1次,分享APP即可获得一次免费使用Ai的次数,您当前的使用次数剩余${this.vipCount}次`,
icon: 'none'
});
/**
* 这里分为两种情况
* 1、如果用户当天已经分享过了,那么shareApp则会是1,并且shareOverTime也会是当前的时间,用户则不可以分享了
* 2、如果用户没有分享过,那么旧的系统时间,就会与新的不同,则会把shareApp存为0。用户则可以继续分享。
*/
if (this.gs("shareApp") == 1 && this.gs("shareOverTime") == this.GetNowTime()) {
//说明次数用尽
this.ss("shareOverTime", this.GetNowTime());
/**
* 用当前时间和上一次分享结束的时间作对比,如果时间相同则代表该用户今天无法再分享了
* @param {shareOverTime LocalStoage} 分享用尽的时间
* @param {this.GetNowTime Function} 获取到的当前时间
*/
console.log("分享次数用尽的时间", this.gs("shareOverTime"));
return this.tt("您当天的分享次数已用尽")
} else {
this.shareApp();
}
},