微信小程序官方只提供了原生的DEMO,并没有说明uniApp,本文详细说明如何引入短剧播放器
uniApp前端微短剧项目开源分享
开源地址:git开源下载地址
前言
后续将逐步分享开发微短剧所遇到的各种坑以及解决办法,敬请关注不迷路,谢谢
一、添加插件
在小程序-设置-第三方设置-插件管理中点击添加插件,输入“短剧播放器”或搜索“wx94a6522b1d640c3b”点击添加则自动通过
二、接入插件
1.引入之前
在接入之前需要先处理以下两个问题
1、在开发者工具调试时,需要先去掉app.json的设置"lazyCodeLoading": “requiredComponents”,否则可能会碰到黑屏,或者是报错Plugin module “wx/plugin-private-api” is not defined
解决方法:在manifest.json的源码视图中找到lazyCodeLoading": "requiredComponents直接给注销掉2、如果用的是uniapp,碰到自定义运营区域组件,或者充值组件无法渲染的问题,是因为没有对应的组件。可通过创建一个空的页面,去引用对应的组件
第一步:创建充值组件
第二步:注册充值组件
//写在App.vue文件里
export default {
usingComponents: {
"charge-dialog": "/components/charge-dialog/charge-dialog",
"open-area-left": "/components/open-area-left/open-area-left",
"open-area-left-side": "/components/open-area-left-side/open-area-left-side",
"open-area-right": "/components/open-area-right/open-area-right",
"playlet-plugin":"/pages/playlet/playlet"
},
}
1.引入插件
在manifest.json的源码视图中引入插件
"provider"字段为插件提供方的appid,设置为"wx94a6522b1d640c3b"即可。请确保将 “version” 字段设置为 “latest”,以使用最新版本的插件。意思就是不要去改他。
"mp-weixin" : {
"appid" : "",
//引入短剧播放器插件
"plugins" : {
"playlet-plugin" : {
"version" : "latest",
"provider" : "wx94a6522b1d640c3b",
"genericsImplementation" : {
"playlet" : {
"charge-dialog" : "/components/charge-dialog/charge-dialog"
}
}
}
}
},
2.接入流程
官方文档:下面的接入流程涉及的一些字段的含义,先提前说明下(官方都提前说明了,那肯定有需要注意的地方,如果不注意基本上就是一步一个坑)
● srcAppid: 提审方appid,通过小程序媒资管理上传了剧目的账号appid
就是你微信小程序的AppID(小程序ID),后续再去跳转至播放器时需要传递这个参数
● dramaId: 剧目ID,通过小程序媒资管理提审的剧目id
如果你的小程序微短剧类目(类目审核得单独分一章来讲,不难但是麻烦需要注意的细节也多)已经审核通过,那么会自动开通媒资管理功能,如果没有短剧的同学来说得提前准备提审就行,花个几百块钱买一部短剧用来提审测试即可,一定要提前准备,这是入坑的开始。审核通过后才会有剧目ID
● serialNo: 剧集ID,从1开始递增,比如第1集则serialNo是1,注意这里跟媒资管理的mediaNo是不一样的
serialNo相当于是这个短剧的第几集,后续的解锁剧集的时候相当有用,但是这个从后台提审到媒资审核后不一定能拿到这个serialNo,所以建议另外存个字段进行关联即可
总结
以上就是今天要讲的内容,本文仅简单介绍了短剧播放器插件的引入和注意事项,接下来将详细分享短剧播放器的开发。