Skip to content

海报使用

预览海报效果

在海报管理列表中,点击预览即可查看海报效果 预览模式下会执行这段逻辑代码 插件根据自身业务实现(参考:niucloud/addon/shop/app/listener/poster/ShopPoster.php)

uni-app 手机端调用海报

系统框架定义了share-poster组件 关键代码:

vue
<share-poster ref="sharePosterRef" posterType="friendspay" :posterId="poster_id" :posterParam="posterParam" :copyUrl="copyUrl" :copyUrlParam="copyUrlParam" />

import sharePoster from '@/components/share-poster/share-poster.vue'

const sharePosterRef = ref(null);
const copyUrl = ref('/app/pages/friendspay/money') // 页面地址
const copyUrlParam = ref('') // 页面地址参数
let posterParam = {}

// 打开分享海报
const openShare = ()=>{
    posterParam.id = friendsInfo.value.trade_id;
    posterParam.type = friendsInfo.value.trade_type;
    if (userInfo.value && userInfo.value.member_id) {
        posterParam.member_id = userInfo.value.member_id;
    }
	sharePosterRef.value.openShare()
}

// 主动预加载海报
const load = () => {
	posterParam.id = friendsInfo.value.trade_id;
	posterParam.type = friendsInfo.value.trade_type;
	if (userInfo.value && userInfo.value.member_id) {
		posterParam.member_id = userInfo.value.member_id;
	}
	sharePosterRef.value.loadPoster();
}

设置预加载海报,可以提高用户体验,减少等待海报生成的时间 效果图

基于 MIT 协议发布