【小程序】基于JetBrains的抖音小程序插件

douyin-miniprogram-plugin

基于JetBrains平台的抖音小程序插件

主要功能介绍

  • ttml/ttss/wxs文件支持
    • 语法解析
    • 代码完成
    • 代码高亮
    • ttml嵌入表达式支持
    • ttml 《sjs》 标签支持
    • ttml提取自定义组件
  • 创建抖音小程序组件以及页面
  • 相关文件导航
  • 抖音小程序自定义组件支持
    • 自动注册自定义组件
    • 组件配置解析
    • 重命名小程序自定义组件或页面
    • 同时移动自定义组件或页面的所有文件
  • 抖音小程序配置文件支持
  • 代码检查以及自动修复

总览

本插件致力于开发者在开发微信小程序时,能获得与开发web应用程序一致的开发体验

说明

  • TTSS的功能和配置几乎和CSS一致
  • TTML的特殊标签,如sjs,import,include,template具有独立支持.
  • TTML的功能和配置几乎和XML一致
  • 通过Typescript的声明文件让js文件能够进行抖音API的代码完成,这些文件取自官方开发工具生成的typescript项目.

创建界面

右键Project区域中的一项 New -> Create Douyin Mini Program Page 在弹窗中输入页面名称,并选择js文件使用的API(Component|Page),即可新建一个页面,也可以通过搜索Action找到 页面添加完成之后会在app.json中自动注册这个页面

js和json文件模板可以在File | Settings | Editor | File and Code Templates中修改

对应的文件模板名称是

  • Douyin mini program page js file(Component API)
  • Douyin mini program page js file(Page API)
  • Douyin mini program page json file(Component API)
  • Douyin mini program page json file(Page API)

paste image

创建自定义组件

右键Project区域中的一项 New -> Create Douyin Mini Program Component
在弹窗中输入组件名称即可新建一个自定义组件,也可以通过搜索Action找到

js和json文件模板可以在File | Settings | Editor | File and Code Templates中修改

对应的文件模板名称是

  • Douyin mini program component js file
  • Douyin mini program component json file

从ttml文件中创建ttss类选择器

在ttml文件中的元素的class属性中,输入一个新的class,将光标移动到class上,使用快捷键Alt + Enter,即可在当前组件的ttss文件或app.ttss中创建class

paste image

从ttml创建wxss ID选择器

在ttml文件中的元素的id属性中,输入一个新的id,将光标移动到id上,使用快捷键Alt + Enter,即可在当前组件的ttss文件中创建id选择器

paste image

从ttml中创建js事件处理函数

在ttml中监听元素的事件,可在对应的js文件中创建事件处理函数

paste image

其他

插件地址: douyin-miniprogram-plugin