微信小程序开发 Vim 插件。

提供包含文件检测、智能补全、文档跳转、语法高亮、缩进、代码段、单词列表、语法检查等功能。

安装方式

以下分别是使用NeoBundleVundle vim-plug 安装的命令：

NeoBundle 'chemzqm/wxapp.vim'
 Plugin 'chemzqm/wxapp.vim'
 Plug 'chemzqm/wxapp.vim'

效果图

文件生成

插入代码块

使用unite 查找并插入代码

功能列表

• 页面目录生成
• 智能刷新开发者工具映射(仅支持 macos)
• wxml 和 wxss 文件检测, 代码高亮, 缩进函数 (推荐快捷键=at=a{)
• wxml, wxss 以及 javascript dictionary 文件, 使用参考： vim dictionary 的使用方式
• wxml 和 javascriptUltisnips 代码块补全
• wxml 和 wxss 的语法检查支持

智能补全

本插件提供比官方 IDE 更为完整实用的智能补全, 具体实现和使用方式如下：

• 针对 wxcss 使用的 vim runtime 自带的 css 补全，插件内已进行如下配置：

  setl omnifunc=csscomplete#CompleteCSS

• 针对 wxml 实现并且配置了函数wxmlcomplete#Complete, 它能提供标签、 属性、属性值的智能补全（官方 IDE 仅支持标签）

• 针对 javscript 本插件提供了tern 的插件，内含所有 API 的函数补全，使用前需要首先安装tern-for-vim 插件，使用npm install命令安装 tern 之后将文件tern/wxapp.js拷贝到tern_for_vim/node_modules/tern/plugin目录下，最后在小程序项目根目录下配置文件.tern-project为：

  {
     "libs": [
       "ecmascript"
     ],
     "plugins": {
       "wxapp": {}
     }
   }

  即可为项目的 javscript 文件启用omnicomplete了

目录生成

使用命令Wxgen [folder] name可以快速生成并打开一个页面所需的wxmlwxss以及javascript文件，例如：

:Wxgen component product

将在 component 目录下生成 product 目录以及相关的三个文件并打开，如果命令只有一个参数则在当前目录下生成。

刷新开发者工具

只需要.vimrc中添加一个映射：

nmap <leader>r <Plug>WxappReload

就可以使用快捷键就行刷新开发者工具的操作了，函数内部做了判定，如果当前文件类型为wxml或wxss时执行刷新操作，否则执行项目重建操作。

因为实现用到了 MacOS 独有的osascript，所以只能在 Mac 系统上正常使用。

如果需要保存时让开发者工具自动刷新，请参考： https://chemzqm.me/vim-wxapp-reload

推荐插件

• xml.vim 用于辅助编辑 xml 文件, 包含自动添加匹配标签、快速修改/删除标签等功能。

• emmet-vim 快速生成 xml 和 css, 参考配置：

  let g:user_emmet_settings = {
       \ 'wxss': {
       \   'extends': 'css',
       \ },
       \ 'wxml': {
       \   'extends': 'html',
       \   'aliases': {
       \     'div': 'view',
       \     'span': 'text',
       \   },
       \  'default_attributes': {
       \     'block': [{'wx:for-items': '{{list}}','wx:for-item': '{{item}}'}],
       \     'navigator': [{'url': '', 'redirect': 'false'}],
       \     'scroll-view': [{'bindscroll': ''}],
       \     'swiper': [{'autoplay': 'false', 'current': '0'}],
       \     'icon': [{'type': 'success', 'size': '23'}],
       \     'progress': [{'precent': '0'}],
       \     'button': [{'size': 'default'}],
       \     'checkbox-group': [{'bindchange': ''}],
       \     'checkbox': [{'value': '', 'checked': ''}],
       \     'form': [{'bindsubmit': ''}],
       \     'input': [{'type': 'text'}],
       \     'label': [{'for': ''}],
       \     'picker': [{'bindchange': ''}],
       \     'radio-group': [{'bindchange': ''}],
       \     'radio': [{'checked': ''}],
       \     'switch': [{'checked': ''}],
       \     'slider': [{'value': ''}],
       \     'action-sheet': [{'bindchange': ''}],
       \     'modal': [{'title': ''}],
       \     'loading': [{'bindchange': ''}],
       \     'toast': [{'duration': '1500'}],
       \     'audio': [{'src': ''}],
       \     'video': [{'src': ''}],
       \     'image': [{'src': '', 'mode': 'scaleToFill'}],
       \   }
       \ },
       \}

  如果你已经配置了变量g:user_emmet_settings, 注意避免重复设置。

语法检查

• javascript 推荐使用 eslint , 然后在.eslintrc中加入

  "globals": {
     "App": true,
     "Page": true,
     "wx": true
   },

  避免小程序变量的未定义错误。

• wxss 推荐使用stylelint, 针对 wxss 的参考配置, 安装本插件后可添加配置：let g:neomake_wxss_enabled_makers = ['stylelint']启用 neomake 的 wxss 的代码检测。

• wxml 推荐使用tidy-html5, 可使用命令brew install tidy-html5进行安装, 安装本插件后添加配置let g:neomake_wxml_enabled_makers = ['tidy']启用 neomake 的 wxml 代码检测。

待完成

• 文档跳转支持