抖音小程序的那些踩坑记录

前端社区征文

分享开发经验瓜分5000元大奖,聊聊#我写代码那些年#的故事 本文来源于【抖音开放平台】 本文记录下开发抖音小程序过程中遇到的坎坷。

  1. 自定义组件路径,引用到具体的组件上
  //相对路径引用到具体的组件上
    "usingComponents": {
        "intro-box":"/component/titleView"
    }

2.如果要修改富文本文字的样式,直接在标签里面添加类名或者style不生效,可以采取用正则进行替换的方法
这里以常用的小程序解析富文本的组件为例

<view>
	<u-modal :show="show"  :title="title" >
		<view class="slot-content">
			<rich-text :nodes="pluginTips"></rich-text>
		</view>
	</u-modal>
	<u-button @click="show = true">打开文本弹窗</u-button>
</view>
const text = `今天天气不错:<br> <p>风和日丽,晴空万里,万里无云,阳光灿烂。</p>`
//比如我要实现P标签里面的文字首行缩进以及文字颜色等效果
data(){
   textStyle: text.replace(/<p/gi,'<p style="text-indent:2em;color:#bfc"'),
}

3.小程序跳转直播间

tt.openWebcastRoom(options)
//提供从小程序跳转到直播间的能力。仅支持抖音 APP。
参数说明
options 为 Object 类型,属性如下:
属性名	      类型	  默认值 必填	说明	 最低支持版本
streamerId	string	  --	否	主播 id	1.87.0
success  	function  --	否	接口调用成功的回调函数	1.87.0
fail	   function	  --	否	接口调用失败的回调函数	1.87.0
complete	function  --	否	接口调用结束的回调函数(调用成功、失败都会执行)	1.87.0

回调成功
参数为 Object 类型,属性如下:
参数	参数类型	说明	最低支持版本
errMsg	string	回调信息	1.87.0

回调失败
参数为 Object 类型,属性如下:
参数	参数类型	说明	最低支持版本
errNo	number	错误码	1.87.0
errMsg	string	错误信息	1.87.0

代码示例:
<input
	value="{{streamerId}}"
	bindinput="changeStreamerId"
	placeholder="请输入主播id">
</input>
<button type="default" size="default" bindtap="openWebcastRoom">跳转直播</button>

Page({
  data: {
    streamerId: "",
  },
  changeStreamerId(e) {
    this.setData({
      streamerId: e.detail.value,
    });
  },
  openWebcastRoom(e) {
    tt.openWebcastRoom({
      streamerId: this.data.streamerId,
      success(res) {
        console.log("调用成功", res);
      },
      fail(res) {
        console.log("调用失败", res);
      },
    });
  },
});

4.图表插件

用Echarts图表时,发现平台不支持,可以转后台去做,让后端引入一个图表插件库转成base64传给前端,前端用小程序的canvas组件去绘制

5.真机调试request请求

这问题最烦人,本地好好的但是真机就出问题,最后自己查找发现是https安全证书的问题,还有就是网络的问题,网络问题也是值得研究,但是目前我没遇到

6.web-view 网页容器
该组件是一个用于承载网页的容器,将 H5 切入到小程序内部,铺满整个页面。使用该组件要进行业务域名配置,仅支持添加开发者可控制(能放置校验文件到域名根目录)的域名。个人类型的小程序暂不支持使用。

7.抖音禁止和允许跳转的场景

抖音中视频、小程序中向外跳转总体来讲是被抖音严格禁止的

8.tt.openAwemeUserProfile
跳转抖音个人主页tt.openAwemeUserProfile,需要在小程序后台开通相关功能,跳转个人抖音号主页,用户可以选择关注/取消关注抖音号。暂时只支持在抖音和抖音 Lite App 上使用。

9.消息推送客服

这个确实要好好阅读文档,当时没认真读,走了好多弯路,以下出自官方文档:

开启消息推送之后,用户发送的所有消息,今日头条服务器将会通过 POST 请求发送到开发者配置的 URL,格式为 JSON 或者 XML,开发者将收到的消息自行验证解密。转发用户消息到开发者服务器时,如果两秒内没收到响应,将认为失败,然后 sleep 几秒再重试,总共重试三次。每条消息都包含一个 createTime 字段,当收到多条消息时,可以根据 FromUserName 和 CreateTime 两个字段进行重排序。

开发者服务器收到请求必须作出相应的回复,以便今日头条服务器判断消息发送情况,回复方式建议:

  • 直接回复 success 或者长度为 0 的空串。
  • 其他。

第一种情况,今日头条服务端才会认为消息发送成功,第二种情况认为失败并也不会重试。

332
0
0
0
关于作者
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论