anext-support README

anext小程序框架的代码提示和自动补全插件

本插件和文档的冲突之处，请以文档为准。欢迎联系 [一帜] 改进本插件。

插件特性

标签hover提示及代码自动补全
标签属性hover提示及代码自动补全
anext 基本能力的代码片段，包括组件和 API
支持 vue3
参考 anext 官方组件文档
参考 Vue.js 风格指南

支持的标签有

button
image
view
text
map
rich-text
canvas
input

Requirements

依赖于Vetur插件对vue文件高亮

anext基础组件自动补全

自动补全

anext代码片段

代码片段

条件编译高亮

可配置的参数

参数anyuiSupport.enableHighlight 可以切换是否高亮默认为true 参数anyuiSupport.highlightConfig 可以配置高亮的颜色，例如修改 #ifdef的颜色：

"anyuiSupport.highlightConfig": {
  "#ifdef": {
    "color": "#fff",
    "backgroundColor": "",
    "border": "1px solid #eee",
    "borderRadius": "2px",
    "isWholeLine": true, // 是否通栏展示
  }
}

可操作的命令

anext.toggleHighlight 可以切换anext是否高亮快捷键：Cmd + Shift + P，然后输入 anext.toggleHighlight 回车即可。

代码片段

ANEXT模板

API	Prefix	Description
`<template>`	`anext-page`	一键生成 ANEXT page 模板
`<template>`	`anext-components`	一键生成 ANEXT component 模板

HTML

API	Prefix	Description
`<!-- -->`	`<!--`	注释
`<!-- #ifdef -->`	`#ifdef`, `<!-- #ifdef`	anext 条件编译，处理某平台。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`<!-- #ifndef -->`	`#ifndef`, `<!-- #ifndef`	anext 条件编译，排除某平台。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`<!-- #endif -->`	`#endif`, `<!-- #endif`	anext 结束条件编译。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`<view>`	`view`, `<view>`	anext 视图容器，用于包裹各种元素内容。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/view.html。
`<scroll-view>`	`scroll-view`, `<scroll-view>`	anext 可滚动视图区域。竖向滚动时，需要给一个固定高度。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/scroll-view.html。
`<swiper>`	`swiper`, `<swiper>`	anext 滑块视图容器。子组件只能是 swiper-item。竖向滑动时，需要给一个固定高度。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/swiper?id=swiper.html。
`<swiper-item>`	`swiper-item`, `<swiper-item>`	anext swiper 的子组件，宽高自动设置为 100%。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/swiper?id=swiper-item.html。
`<icon>`	`icon`, `<icon>`	anext 图标。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/icon.html。
`<text>`	`text`, `<text>`	anext 文本组件。用于包裹文本内容。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/text.html。
`<rich-text>`	`rich-text`, `<rich-text>`	anext 富文本。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/rich-text.html。
`<button>`	`button`, `<button>`	anext 按钮。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/button.html。
`<checkbox-group>`	`checkbox-group`, `<checkbox-group>`	anext 多选框组。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/checkbox?id=checkbox-group.html。
`<checkbox>`	`checkbox`, `<checkbox>`	anext 多选框。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/checkbox?id=checkbox.html。
`<input>`	`input`, `<input>`	anext 输入框。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/input.html。
`<label>`	`label`, `<label>`	anext 用来改进表单组件的可用性。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/label.html。
`<picker-view>`	`picker-view`, `<picker-view>`	anext 比 picker 更灵活的嵌入页面的滚动选择器。子组件只能是 picker-view-column。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/picker-view?id=picker-view.html。
`<picker-view-column>`	`picker-view-column`, `<picker-view-column>`	anext picker-view 的子组件。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/picker-view?id=picker-view-column.html。
`<radio-group>`	`radio-group`, `<radio-group>`	anext 单选框组。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/radio?id=radio-group.html。
`<radio>`	`radio`, `<radio>`	anext 单选框。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/radio?id=radio.html。
`<switch>`	`switch`, `<switch>`	anext 开关选择器。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/switch.html。
`<textarea>`	`textarea`, `<textarea>`	anext 多行输入框。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/textarea.html。
`<image>`	`image`, `<image>`	anext 图片组件。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/image.html。
`<video>`	`video`, `<video>`	anext 视频组件。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/video.html。
`<map>`	`map`, `<map>`	anext 地图组件。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/map.html。
`<canvas>`	`canvas`, `<canvas>`	anext 画布组件。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/canvas.html。
`<web-view>`	`web-view`, `<web-view>`	anext 浏览器组件，自动铺满整个页面。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/web-view.html。
`<open-data>`	`open-data`, `<open-data>`	anext 用于展示平台开放的数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/components/open-data.html。

CSS/LESS/SCSS/SASS

API	Prefix	Description
`/* */`	`/*` , `//`	多行注释
`/* #ifdef */`	`#ifdef`, `/* #ifdef`	anext 条件编译，处理某平台。更多信息查看 https://anextapp.dcloud.io/platform。
`/* #ifndef */`	`#ifndef`, `/* #ifndef`	anext 条件编译，排除某平台。更多信息查看 https://anextapp.dcloud.io/platform。
`/* #endif */`	`#endif`, `/* #endif`	anext 结束条件编译。更多信息查看 https://anextapp.dcloud.io/platform。
`:global()`	`:global(){}`	anext 结束条件编译。

JavaScript/TypeScript

API	Prefix	Description
`vue`	`h5`, `vue`	anext H5 对应的 compileType 值。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`wx`	`wx`, `wechat`	anext 微信小程序对应的 compileType 值。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`alimini`	`alimini`, `alipay`, `ali`	anext 支付宝小程序对应的 compileType 值。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`//`	`//`	单行注释
`// @vue/component`	`// @vue/component`	标记当前为 vue 组件。。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/eslint.html。
`// #ifdef ${1\|ALIPAY,ALIPAY-CN,ALIPAY-HK,WX,WEB,VUE,ALIMINI\|}`	`#ifdef`, `// #ifdef`, `/* #ifdef`	anext 条件编译，处理某平台。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`// #ifndef ${1\|ALIPAY,ALIPAY-CN,ALIPAY-HK,WX,WEB,VUE,ALIMINI\|}`	`// #ifndef`	anext 条件编译，排除某平台。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`// #endif`	`// #endif`	anext 结束条件编译。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`/* */`	`/*`	多行注释
`/* #ifdef */`	`#ifdef`, `/* #ifdef`	anext 条件编译，处理某平台。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`/* #ifndef */`	`#ifndef`, `/* #ifndef`	anext 条件编译，排除某平台。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`/* #endif */`	`#endif`, `/* #endif`	anext 结束条件编译。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/conditionalCompile.html。
`anext.compileType === '${1\|alimini,wx,vue\|}'`	`anext.compileType`, `compileType`	anext if语句条件编译。
`if ().compileType === '${1\|alimini,wx,vue\|}') {`	`if-anext.compileType`, `anext.compileType-if`, `compileType-if`	anext if语句条件编译。
`console.log();`	`log`	Log output to console
`// TODO: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE ${1:name} ${2:some comment}`	`todo`	todo 待办项
`process.env.NODE_ENV === 'dev'`	`process.env.NODE_ENV === 'dev'`	anext 判断是否为开发环境。
`process.env.NODE_ENV !== 'dev'`	`process.env.NODE_ENV !== 'dev'`	anext 判断是否不为开发环境。
`process.env.NODE_ENV === 'prod'`	`process.env.NODE_ENV === 'prod'`	anext 判断是否为生产环境。
`process.env.NODE_ENV !== 'prod'`	`process.env.NODE_ENV !== 'prod'`	anext 判断是否不为生产环境。
`onLaunch()`	`onLaunch`	anext 应用生命周期，只能在 App.vue 中监听。anext 初始化完成时触发，全局只触发一次。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onShow()`	`onShow`	anext 应用生命周期，只能在 App.vue 中监听。anext 启动时或从后台进入前台时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onHide()`	`onHide`	anext 应用生命周期，只能在 App.vue 中监听。anext 从前台进入后台时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onError()`	`onError`	anext 应用生命周期，只能在 App.vue 中监听。anext 报错时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onUnhandledRejection()`	`onUnhandledRejection`	anext 应用生命周期，只能在 App.vue 中监听。监听未处理的 Promise 拒绝事件。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onPageNotFound()`	`onPageNotFound`	anext 应用生命周期，只能在 App.vue 中监听。anext 页面不存在时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onThemeChange()`	`onThemeChange`	anext 应用生命周期，只能在 App.vue 中监听。系统主题变化时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onShow()`	`onShow`	anext 页面生命周期。页面在屏幕上显示时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onHide()`	`onHide`	anext 页面生命周期。页面在屏幕上隐藏时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onResize()`	`onResize`	anext 页面生命周期。窗口尺寸变化时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onPullDownRefresh()`	`onPullDownRefresh`	anext 页面生命周期。用户下拉时触发，一般用于下拉刷新。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onReachBottom()`	`onReachBottom`	anext 页面生命周期。页面滚动到底部时触发，一般用于触底加载数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onShareAppMessage()`	`onShareAppMessage`	anext 页面生命周期。点击右上角分享时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onPageScroll()`	`onPageScroll`	anext 页面生命周期。页面滚动时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onShareTimeline()`	`onShareTimeline`	anext 页面生命周期。点击右上角转发到朋友圈时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`onAddToFavorites()`	`onAddToFavorites`	anext 页面生命周期。点击右上角收藏时触发。更多信息查看 https://docs.antfin-inc.com/ANEXT/guide/grammar/lifecycle.html。
`getApp()`	`getApp`	anext 获取当前应用实例，可以进一步获取 globalData。请考虑使用 vuex 实现同样的效果。
`getCurrentPages()`	`getCurrentPages`	anext 获取当前页面栈实例，数组形式，第一个元素是首页。
`anext.request()`	`anext.request`	anext 发起网络请求。请考虑使用已经封装好的库。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/request.html。
`anext.navigateTo()`	`anext.navigateTo`	anext 保留当前页面，跳转到某个非 TabBar 页面。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/navigateTo.html。
`anext.redirectTo()`	`anext.redirectTo`	anext 关闭当前页面，跳转到某个非 Tab 页面。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/redirectTo.html。
`anext.reLaunch()`	`anext.reLaunch`	anext 关闭所有页面，打开到某个页面。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/reLaunch.html。
`anext.switchTab()`	`anext.switchTab`	anext 关闭所有非 TabBar 页面，跳转到 TabBar 页面。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/switchTab.html。
`anext.navigateBack()`	`anext.navigateBack`	anext 关闭当前页面并返回。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/navigateBack.html。
`anext.setStorage()`	`anext.setStorage`	anext 异步存储本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/setStorage.html。
`anext.setStorageSync()`	`anext.setStorageSync`	anext 同步存储本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/setStorageSync.html。
`anext.getStorage()`	`anext.getStorage`	anext 异步读取本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getStorage.html。
`anext.getStorageSync()`	`anext.getStorageSync`	anext 同步读取本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getStorageSync.html。
`anext.getStorageInfo()`	`anext.getStorageInfo`	anext 异步读取存储信息。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getStorageInfo.html。
`anext.getStorageInfoSync()`	`anext.getStorageInfoSync`	anext 同步读取存储信息。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getStorageInfoSync.html。
`anext.removeStorage()`	`anext.removeStorage`	anext 异步移除本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/removeStorage.html。
`anext.removeStorageSync()`	`anext.removeStorageSync`	anext 同步移除本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/removeStorageSync.html。
`anext.clearStorage()`	`anext.clearStorage`	anext 异步清空本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/clearStorage.html。
`anext.clearStorageSync()`	`anext.clearStorageSync`	anext 同步清理本地数据。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/clearStorageSync.html。
`anext.getLocation()`	`anext.getLocation`	anext 获取当前地理位置。如果需要转换坐标到不同坐标系，建议使用已经封装好的库，如 gcoord 和 coordtransform。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getLocation.html。
`anext.chooseLocation()`	`anext.chooseLocation`	anext 打开地图选择位置。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/chooseLocation.html。
`anext.openLocation()`	`anext.openLocation`	anext 使用内置地图查看位置。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/openLocation.html。
`anext.createMapContext()`	`anext.createMapContext`	anext 创建地图上下文对象。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/createMapContext.html。
`anext.chooseImage()`	`anext.chooseImage`	anext 选择相册图片或使用相机拍照。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/chooseImage.html。
`anext.previewImage()`	`anext.previewImage`	anext 预览图片。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/previewImage.html。
`anext.getImageInfo()`	`anext.getImageInfo`	anext 获取图片信息。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getImageInfo.html。
`anext.saveImage()`	`anext.saveImage`	anext 保存图片到相册。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/saveImage.html。
`anext.compressImage()`	`anext.compressImage`	anext 压缩图片。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/compressImage.html。
`anext.getSystemInfo()`	`anext.getSystemInfo`	anext 异步获取系统信息。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getSystemInfo.html。
`anext.getSystemInfoSync()`	`anext.getSystemInfoSync`	anext 同步获取系统信息。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getSystemInfoSync.html。
`anext.canIUse()`	`anext.canIUse`	anext 判断 API、回调、参数、组件等是否在当前版本可用。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/canIUse.html。
`anext.getNetworkType()`	`anext.getNetworkType`	anext 获取网络类型。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/getNetworkType.html。
`anext.onNetworkStatusChange()`	`anext.onNetworkStatusChange`	anext 监听网络状态变化。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/onNetworkStatusChange.html。
`anext.offNetworkStatusChange()`	`anext.offNetworkStatusChange`	anext 取消监听网络状态变化。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/offNetworkStatusChange.html。
`anext.makePhoneCall()`	`anext.makePhoneCall`	anext 拨打电话。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/makePhoneCall.html。
`anext.showToast()`	`anext.showToast`	anext 显示消息提示框。这可能与加载提示框冲突，请在测试时以真机测试为准。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/showToast.html。
`anext.hideToast()`	`anext.hideToast`	anext 隐藏消息提示框。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/hideToast.html。
`anext.showLoading()`	`anext.showLoading`	anext 显示加载中提示框。这可能与消息提示框冲突，请在测试时以真机测试为准。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/showLoading.html。
`anext.hideLoading()`	`anext.hideLoading`	anext 隐藏加载中提示框。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/hideLoading.html。
`anext.alert()`	`anext.alert`	anext 显示模态弹窗。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/alert.html。
`anext.confirm()`	`anext.confirm`	anext 显示模态弹窗。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/confirm.html。
`anext.prompt()`	`anext.prompt`	anext 显示模态弹窗。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/prompt.html。
`anext.showActionSheet()`	`anext.showActionSheet`	anext 显示操作菜单。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/showActionSheet.html。
`anext.setNavigationBar()`	`anext.setNavigationBar`	anext 动态设置当前页面标题。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/setNavigationBar.html。
`anext.createAnimation()`	`anext.createAnimation`	anext 创建动画实例。更多信息查看 https://docs.antfin-inc.com/ANEXT/api/createAnimation.html。
`anext.setEnabledDebug()`	`anext.setEnableDebug`	anext 设置调试开关。更多信息查看 https://anextapp.dcloud.io/api/other/set-enable-debug。

Anyui Support

zhou1212

anext-support README

插件特性

支持的标签有

Requirements

anext基础组件自动补全

anext代码片段

条件编译高亮

可配置的参数

可操作的命令

代码片段

ANEXT模板

HTML

CSS/LESS/SCSS/SASS

JavaScript/TypeScript