半屏内容发布器带服务版

基础库 3.100.4 版本及以上调起原生半屏内容发布器，以下版本调起扩展组件半屏内容发布器带服务版。

解释： 支持开发者自定义配置选择原生框架发布器中的模块，此组件带服务版带后端服务，开发者接入各自平台的后端服务，同时自动接入百度互动消息推送。

属性说明

属性名类型必填默认值说明
show-publishBoolean是falseNA 和组件版支持，半屏发布器默认是隐藏状态，需要通过设置此属性调起，写法：show-publish="{= showPublish =}"
content-placeholderString否请输入内容NA 和组件版支持，提示占位文案
module-listArray否仅 NA 版支持，显示模块 list
emoji-pathString否仅NA版支持，设置自定义表情配置路径
foucsBoolean否false仅组件版支持，true 代表调起，false 则不调起
is-upLoad-imageBoolean否false仅组件版支持，是否展示上传图片按钮
request-urlStringis-upLoad-image为true，则必填仅组件版支持，由于小程序图片预览只能是 http 或 https，所以上传图片需要先上传到服务器
comment-paramObject是-NA 和组件版支持，内容评论成功后返回给百度服务测的参数，在点击发表按钮时回传
comment-param.openidString是-NA 和组件版支持，用户身份唯一标识，获取方法半屏内容发布器带服务版 - 图1
comment-param.snidString是-NA 和组件版支持，动态id，是动态在开发者侧的唯一标识。不应为空。若此时小程序侧没有对应的标识，则会先创建动态。
comment-param.spidString是/否-NA 和组件版支持，一级评论id。当对评论进行评论时为必填项，不传表示对动态评论。
comment-param.sridString是-NA 和组件版支持，此条评论id
comment-param.titleString是-NA 和组件版支持，动态标题
comment-aram.contentString是-NA 和组件版支持，动态内容
comment-param.imagesArray否-NA 和组件版支持，动态图集, json 数组, 格式 ["a.jpg","b.jpg"]
comment-param.appkeyString是NA 和组件版支持，小程序 App Key，在小程序管理中心>设置>开发设置中获取
comment-param.pathString是NA 和组件版支持，用于跳转的 schema 的 path 和 query 的拼接，参考如下：path='/page/a/b?query=q'
bind:failEventHandleNA版和组件版支持，调用百度服务失败的回调
bind:errorEventHandle仅组件版支持，点击按钮时在用户未登录状态下触发的事件
bind:browsemodeEventHandle仅组件版支持，当输入框失焦后会触发事件(NA版不支持，降级版支持)
bind:relasecommentEventHandleNA和组件版支持，点击发表按钮时触发的事件。在NA版中相当于success成功回调中status为reply状态
bind:closeEventHandle仅NA版支持，点击空白处关掉发布器的回调，相当于NA版success成功回调中status为draft的状态
bind:previewimageEventHandle仅组件版支持，点击输入框中已经上传的图片时触发的事件(NA版不支持，降级版支持)

*由于此组件对原生NA半屏发布器进行了包装，所以需要透传NA发布器的一些参数，同时会返回一些原生发布器的状态，但部分会有一些差异，本文档中都有描述，如还有疑问也可以参考原生半屏内容发布器文档半屏内容发布器带服务版 - 图2

relasecomment/browsemode/error返回草稿内容说明

参数名类型说明
inputValueString正文输入框中的内容
uploadImgUrlArray.<object>图片的本地文件列表，每一项是一个 File 对象。

module-list 列表

若module-list传空数组或不传，则默认展示正文、图片模块、表情模块。若传值，则只展示所传 list 中配置的模块。如：module-list: ['image'] 则只展示图片模块。

module-list类型描述
imageString图片模块
emojiString表情模块

emoji-path 参数说明

开发者在配置 emoji 模块后，可以选择是否使用自定义表情表。若使用自定义表情功能，则将自定义表情的资源文件夹路径传入 emojiPath 字段。若不传 emojiPath 字段则使用默认表情包。

自定义表情资源文件夹格式：文件夹中包括：emoji.json 和所有表情图片资源。外层文件夹名字可以由开发者自由定义，路径配置在 emojiPath 中即可，emoji.json 为固定文件名，请开发者按格式创建。表情没有数量和大小限制，但是表情资源会占用包体大小。

图片

emoji.json 格式：

图片

示例

在开发者工具中预览效果

扫码体验

半屏内容发布器带服务版 - 图5请使用百度APP扫码

图片示例

半屏内容发布器带服务版 - 图6

半屏内容发布器带服务版 - 图7

半屏内容发布器带服务版 - 图8

代码示例

安装组件：

  1. npm install @smt-ui/content-component

在 页面json 文件中：

  1. {
  2.     "usingComponents": {
  3.         "c-comment-publisher": "@smt-ui/content-component/src/comment-publisher"
  4.     }
  5. }
  1. <view class="btn-comment" bind:tap="clickComment">点击评论</view>
  2. <c-comment-publisher
  3.     show-publish="{= showPublish =}"
  4.     comment-param="{{commentParam}}"
  5.     is-upLoad-image="true"
  6.     request-url="https:xxx.xxx.com"
  7.     bind:browsemode="browseModeEventHandler"
  8.     bind:relasecomment="relaseCommentEventHandler"
  9.     bind:error="error"
  10.     bind:previewimage="previewImageHandler">
  11. </c-comment-publisher>
  1. // 测试用例
  2. const getSrid = () => {
  3.     let openid = '';
  4.     for (let i = 0; i < 12; i++) {
  5.         openid += Math.floor(Math.random() * 10);
  6.     }
  7.     return openid + 'dd';
  8. };
  9. Page({
  10.     relaseCommentEventHandler() {
  11.         let param = {
  12.             snid: '999999999999',
  13.             path: '332222',
  14.             appkey: 'mkItFCpOGQDyGqitHh0VKrxP2jBGU20V',
  15.             srid: getSrid(),
  16.             title: '评论的文章的标题',
  17.             openid: '36GetTsw0nWRMVaYnlswLQ9t7y',
  18.             content: 'cascsahclsahcslchdls'
  19.         };
  20.         this.setData('showPublish', false);
  21.         this.setData('commentParam', param);
  22.     },
  23.     clickComment() {
  24.         this.setData('showPublish', true);
  25.     },
  26.     error() {
  27.         // 这里处理未登录
  28.         swan.login({
  29.             success: res => {
  30.                 console.log('login success', res);
  31.             },
  32.             fail: err => {
  33.                 console.log('login fail', err);
  34.             }
  35.         });
  36.     }
  37. });

Bug&Tip

  • Tip：对比基础组件中的半屏发布器差异说明
    • 增加了一个必填属性 comment-param，此属性是百度请求后端时的必传参数，需要在 relasecomment 事件中回传；
    • 增加了一个 error 事件，点击发表按钮时在用户未登录状态下触发，开发者可在此时处理用户登录相关操作；
    • 增加了一个 close 事件，仅 NA 版支持，点击空白处关掉发布器的回调，相当于 NA 版 success 成功回调中 status 为 draft 的状态；
    • npm 地址发生了变化，内容全屏发布器请安装 @smt-ui/content-component，在上文中有介绍；
    • 修复了调不起 NA 版半屏发布器问题；
    • 配合 NA 原生半屏发布器，将原组件的默认显示状态修改为默认隐藏状态，需要设置 show-publish 属性显示隐藏。
  • Bug：组件半屏发布器使用的是 textarea，textarea 在 IOS 百度 App版本 11.17 以下，placeholder 和内容在滑动页面时不跟随页面滑动。textarea 在 Android 百度 App版本 11.18 以下 placeholder 文案过长溢出。