制作教程|WebStorm插件安装及使用教程

让HTML五UX程序员使用WebStorm迅速制作原生苹果与安卓移动应用。 WebStorm 一门A

让HTML五UX制作者使用WebStorm迅速制作原生苹果与安卓移动应用。

WebStorm 一门APP Plugins是一门APP为制作者提供的一套开源的WebStorm扩展插件

包括:应用管理、应用框架、页面模型、代码提示、代码管理、Widget封装、真机同步、日志输出、管理自定义AppLoader等功能,其他的功能插件也在不断递增;所有插件都已开源,制作者能够下载这些插件在自己的WebStorm中安装后使用,制作者也能够在此基础上按需求扩展自己的插件。

依赖环境java当前支持环境Windows 或 MacAndroid 和 ios手机第一下载插件1、通过一门APP平台网站下载webStorm-一门APP.zip文件。

二、把webStorm-一门APP.zip解压到WebStorm的工作空间中。

打开WebStorm 的 ‘External Tools’选项Mac点击 状态栏中WebStorm ,在下拉菜单中,点击 PreferencesWindows安装”创建新应用”插件一.新建空白应用。

在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : 新建空白应用Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_app.jar $ProjectFileDir$ $Prompt$ default二.新建底部导航应用。

在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : 新建底部导航应用Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_app.jar $ProjectFileDir$ $Prompt$ bottom三.新建首页导航应用。

在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : 新建首页导航应用Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_app.jar $ProjectFileDir$ $Prompt$ home四.新建侧边导航应用。

在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : 新建侧边导航应用Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_app.jar $ProjectFileDir$ $Prompt$ slide安装”创建一门APP文件”插件在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : 创建一门APP文件Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_app.jar $ProjectFileDir$ $Prompt$ new $FileDir$安装”android真机同步”插件在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : android真机同步Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_loader.jar $ProjectFileDir$/webStorm-一门APP/ $FileDir$/安装”Android日志输出”插件在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : Android 日志输出Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_log.jar $ProjectFileDir$/webStorm-一门APP安装”ios真机同步”插件在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容:name : ios真机同步Program : javaParameters : -jar $ProjectFileDir$/webStorm-一门APP/webStorm_loader.jar $ProjectFileDir$/webStorm-一门APP/ $FileDir$ ios插件的使用右键点击 工作空间(文件夹) -> 弹出菜中选用 ‘External Tools’ -> 依据想要选用相应的插件。

假设有弹出的输入框,请输入对应的项目名称或者文件名称。

注意事项,目录结构为:workspace-项目根目录-项目文件。

假设是workspace-项目文件, 这样是错误的,会导致无法WiFi真机同步。

插件的快捷键设置打开WebStorm 的 ‘Keymap’ 中’External Tools’选项勾选要设置快捷键的插件,点击右键 -> Add Keyboard Shortcut。

在首先个输入框中,输入快捷键。

平台 Loader 真机同步Android设备真机同步1、启动Android模拟器,例如:海马玩模拟器下载,或通过 USB 线连接 Android 手机,确保 ‘USB 调试’ 已打开,等待手机与电脑连接成功二、真机同步快捷键。

在widget项目的任何编辑页面通过快捷键可直接进行真机同步。

iOS设备真机同步iOS设备在 MAC 系统和Windows 系统下真机同步想要的环境略有不同,Windows系统想要安装配置iTunes 和 iTools;MAC系统只需安装JDK即可。

暂不支持iOS 十 以上版本的手机。

1、Windows 下 iOS 真机同步安装 iTunes 和 iTools (MAC 下无需此步骤)。

下载地址分别为 iTunes 下载。

iTools 下载。

安装成功后想要把相关目录放到系统环境变量中。

环境变量设置如下:注意:MAC系统无需此配置,只想要安装JDK即可。

右键我的电脑->属性 将弹出 “系统” 界面Path 变量的设置 为iTools和iTunes安装位置,如 C:\ProgramData\ThinkSky\iTools\Driver\;C:\Program Files (x八六)\Common Files\Apple\Apple Application Support\二、设置好相关环境后通过 USB 线连接 iOS 手机,等待手机与电脑连接成功三、右键点击 一门APP 应用文件夹 -> External -> ‘iOS真机同步..’四、由于 iOS 不会自动启动应用,想要等待 WebStorm 提示同步成功代表同步完成。

注意事项:工作空间的全路径中,不要有空格。

平台 Loader 怎么更新1、到文档的 Download 页面下载最新的平台 AppLoader二、替换已安装的真机同步插件里的平台 AppLoader(\插件安装目录\webStorm-一门APP\appLoader\yimenapp-loader\),想要重命名为 ‘load.apk’。

三、iOS的平台loader替换已安装的真机同步插件里的平台 AppLoader(\插件安装目录\webStorm-一门APP\appLoader\yimenapp-loader-ios\),想要重命名为 ‘load.ipa’。

自定义 Loader 真机同步1、在 一门APP 云官方先创建一种应用,比如叫:moduleTest二、用 WebStorm 在本地也创建一种应用(方法同创建新应用),名字自定义,比如也叫:moduleTest三、打开本地创建的 moduleTest 应用的 config.xml 文件,把其中的 id 修改成云官方创建的应用 ID四、进入 一门APP 云官方的代码页面 -> 点击’上传代码’按钮 -> 点击’选用zip’按钮 -> 选用moduleTest的压缩包 -> 等待上传成功五、在 一门APP 控制台中,配置好应用的端设置、证书、包名等,再进入 -> 模块页面 -> 添加自己想要的模块六、到 一门APP 官方 -> 模块页面 -> 选用’自定义Loader’标签七、点击自定义 Loader 编译按钮 -> 等待编译完成 -> 下载成功八、Android 应用的真机同步: 找到 webStorm-一门APP 安装目录 -> \安装目录\webStorm-一门APP\appLoader\custom-loaderiOS 应用的真机同步: 找到 webStorm-一门APP 安装目录 -> \安装目录\webStorm-一门APP\appLoader\custom-loader-ios新建一种文件夹,以云端应用 ID 命名,把刚下载的自定义 Loader 放入此目录,重命名为 ‘load.apk’九、新建一种 ‘load.conf’ 文件(version – 自定义 Loader 版本号,packageName – 应用包名),格式如图:**注意,iOS 假设使用平台默认的证书,没有上传自己的iOS证书,则自定义Loader的包名统一为:com.api.customloader十、右键点击本地应用 moduleTest 文件夹 -> 弹出菜中选用 ‘External Tools’ -> Android真机同步 或者 ios真机同步。

11、等待 Android 手机自动打开刚同步的应用,代表同步成功,iOS不会自动打开应用,想要手动打开同步完的应用1二、暂不支持iOS 十 以上版本的手机。

WiFi真机同步和WiFi真机预览请看 WebStorm WiFi真机同步和WiFi真机预览专题文档( //docs.yimenapp.com/Dev-Tools/webStorm-wifi-sync )WiFi日志输出插件安装,使用windows 版插件安装、使用把插件包中 wifilog.jar 放到目录C:\一门APP\workspace 下。

在 Settings-Tools-Terminal 面板配置如图所示内容:cmd.exe /K “chcp 九三六 && java -jar C:/一门APP/workspace/wifilog.jar C:/一门APP/workspace/log_info”按快捷键 Alt+F1二启动WiFi日志输出。

有些键盘可能想要同时按fn键。

Mac 版插件安装、使用在 ‘External Tools’选项中,点击 ‘+’ 。

在Create Tool中,填写如下内容,填完后点击ok。

如图:-jar $ProjectFileDir$/webStorm-一门APP/wifilog.jar $ProjectFileDir$/webStorm-一门APP/wifisync_tools/log_info安装 一门APP 代码提示插件1、点击顶部菜单 ‘file’ ,选用 ‘Import Settings’。

二、弹出的对话框输入插件路径,点击OK即可。

三、弹出的对话框如图选用’Live templates’,点击OK即可,等待重启 ‘webstorm’,即可使用。

代码提示功能保证 一门APP 代码提示插件安装成功,无需额外配置即可使用,在 JS 文件或  标签内部能够触发提示。

api 对象上面的属性及方法,在输入 api. 时触发提示,按 ‘↑ ↓方向键’ 选用想要的 API,勾选后按回车键完成代码补全。

$api 对象上面的方法,在输入 $api. 时触发提示,按 ‘↑ ↓方向键’ 选用想要的 API,勾选后按回车键完成代码补全。

模块代码提示:以 fs 模块为例,先输入 ‘api.req’ 触发代码提示,require 相应的模块,然后输入’模块名.’时能够触发模块代码提示,按 ‘↑ ↓方向键’ 选用想要的 API,勾选后按回车键完成代码补全。

注意: 假设想新增自定义的模块代码提示,能够参照webStorm 一门APP代码提示插件编写文档。

使用 subversion选用svn项目名称的路径 ,如图可能想要输入svn的账户和密码选用按钮 No

开发APP从一门开始www.yimenapp.com
APP打包:https://www.yimenapp.com/more.html
EXE打包:https://www.yimenapp.com/exe.html
商城APP:https://www.yimenapp.com/shop.html
IOS免签打包:https://www.yimenapp.com/iosmianqian.html
APP上架:https://www.yimenapp.com/iosup.html
APP软著申请:https://www.yimenapp.com/softpage.html
SSL申请:https://www.yimenapp.com/ssl.html
Discuz APP:https://www.yimenapp.com/discuz.html
教程汇总:https://www.yimenapp.com/jiaocheng.html

编辑:yimen,如若转载,请注明出处:https://www.yimenapp.com/kb-yimen/6714/

部分内容来自网络投稿,如有侵权联系立删

(0)
上一篇 2022年7月22日 上午10:08
下一篇 2022年7月22日 上午10:47

相关推荐