元内容

简介

《元内容》 是我个人成果的展示和分享平台,主要与编程有关。目前分享的 wepy-plugin-intellij 插件适合 PhpStorm/WebStorm ,专为小程序的 WePY 框架设计,更新至2.6

 

设置

  1. 支持ES6

    • 正常情况下你并不需要做此设置,除非你的IntelliJ不认识单文件里的ES6

    • Settings => Language Injections 添加 XML Tag Injection

      setting

      图1

    • 如果xPaht condition灰色不让输入,就需要在plugin中开启 xPathView+XSLT Support 插件

  2.  

  3. 主题/配置

    • 目的:解决IDE出现很多下划线提示等问题
    • 方法1:更换到合适你的主题

    • 方法2:在现有主题基础上定制下划线等提示 图2

      scheme

      图2

  4.  

  5. Namespace

    • 目的:解决 wx:if 等 IDE 提示 Namespace 'wx' is not bound
    • 方法:取消选项 Editor/Inspections/XML/Unbound XML namespace prefix

 

安装

 

新建

支持新建、识别、高亮三种类型的WePY单文件:App/Page/Component。并且无需依赖其他,比如Vue插件

new

图3

 

官方组件

  1. 支持所有的官方组件和属性。如果该属性有默认枚举值(例如mode),则提示该枚举 图4

  2. 属性自动完成被唤醒时,会提示该属性的类型要求

  3. 属性绑定

    1. 支持 @ 键唤醒 @attribute="someFunction" 这种方法的绑定。并且支持在 " " 内通过 ` 键再次唤醒自动完成 图5
    2. 支持 ` 键唤醒 :attribute="someVariable" 对子组件的动态传值。同上,支持 " " 内的 ` 键唤醒 图6
    3. 支持在 attribute="" 的双(单)引号内,通过 ` 键唤醒包裹 {{ }} 的变量绑定,或则通过 ~ 来唤醒没有包裹的变量绑定。v2.0开始支持 图7
  4. 属性绑定变量时,自动提示在 <script></script> 中定义过的属性和方法

  5. 支持行内表达式,并识别表达式中的变量 图8

  6. 如果属性和属性值的类型不符合官方要求会提示错误 图9

    tag

    图4

    attrbindfun

    图5

    attrbindcom

    图6

    attrbindmus

    图7

    expression

    图8

    wrongtype

    图9

 

自定义组件

  1. 支持自定义组件标签名的自动完成,并以『 custom component 』字样与官方组件区分

  2. 支持关联子组件中的属性定义,方便在父组件调用时进行相关属性提示

  3. 暂不支持组件的属性类型判断

  4. 支持 @ / ` / ~ 键唤醒属性绑定。属性绑定

  5. 支持行内表达式,并识别表达式中的变量

  6. 如果 import 子组件出问题,会提示错误

  7. 如果发现组件的标签和属性没有关联过来,请检查 import 语句和父组件中的 components 属性,以及子组件里的 props 属性

    customcomponent

    图10

 

标签值

  1. 支持通过 ` ~ 来唤醒自动完成。两者区别

  2. 支持行内表达式,并识别表达式中的变量

  3. 最终会插入WePY认可的 {{ }}

    tagvalue

    图11

 

API

  1. 基本采用liveTemplate完成

  2. 覆盖小程序自身的所有API

  3. API以 wx_ 开头,方便唤醒小程序专属API

  4. 原生API采用ES5语法,主要担心大家会被箭头函数的 this 搞崩溃

  5. 支持WePY-Promised-API。键入 we_ 可以唤醒被Promise化的API。v1.1开始支持

  6. Abbreviation无需输入完整的名字,IntelliJ的自动筛选功能非常强大图13

  7. Abbreviation的命名方式有层级关系,各层级以 _ 分割。例如 wx_createInnerAudioContext_prop_autoplay_rw 代表这是一个 InnerAudioContext 的实例属性(prop表示属性,rw代表可读可写)。所以需要先通过 wx_createInnerAudioContext 来创建这个实例(如果实例已经创建忽略这一步),然后再通过 wx_createInnerAudioContext_prop_autoplay_rw 进行赋值或取值。结果如下:

     

    api

    图12

    faster-api

    图13

 

绑定方法

  1. 保留了小程序原生组件的bind属性,如 canvasbindlongtap 属性
  2. 同时增加WePY的 @ 绑定属性方式,如 @longtap ,实现见属性绑定
  3. 我并没有对原生的 bind 属性做属性自动完成提示,因此建议你全部采用 @ 的绑定方式
  4. 我测试过多个属性,原生的 bind 都可以采用 @ 方式来绑定,如有例外,请告诉我
  5. 时机合适时我会删除所有 bind 属性

 

开发环境

  1. macOS High Sierra 10.13.4
  2. Java(TM) SE Runtime Environment (build 1.8.0_91-b14)
  3. IntelliJ IDEA #IU-173.4548.28 (插件开发)
  4. (macOS/windows)PhpStorm/WebStorm #PS-173.4674.46 (插件测试)

 

补充

  1. 感谢moxun制作的weex插件,他的源码为我写WePY节约了大量时间
  2. 感谢IntelliJ官方技术人员Peter Gromov,他的态度和耐心令我敬佩
  3. 请升级你用于开发小程序的 PhpStorm/WebStorm 。老版本的包在ES6的识别上有问题,而WePY依赖ES6
  4. 最好不要同时开启Vue插件和本插件
  5. 如果某款浏览器下载此插件时出问题,换一款试试
  6. 转发请注明来源。此项开发工作并不以『 无偿 』为导向
  7. 暂未上官方插件库,会上
  8. 暂不会开源。联系和反馈:metaer@iniself.com 或则 811046605(QQ群)

 

更新

wepy-plugin-intellij.jar (v2.6)

wepy-plugin-intellij.jar (v2.5)

wepy-plugin-intellij.jar (v2.4)

wepy-plugin-intellij.jar (v2.3)

wepy-plugin-intellij.jar (v2.2)

wepy-plugin-intellij.jar (v2.1)

wepy-plugin-intellij.jar (v2.0)

wepy-plugin-intellij.jar (v1.1)

wepy-plugin-intellij.jar (v1.0)