WebStorm是一个功能强大的IDE，适用于JavaScript开发，适合使用Node.js进行复杂的客户端开发和服务器端开发。

WebStorm具有对JavaScript，HTML， CSS及其现代替代品以及Angular或React等框架的高级支持。

WebStorm集成了各种Web开发工具和版本控制系统。

提供JavaScript，Node.js，ECMAScript 6，TypeScript，CoffeeScript和Dart以及HTML，CSS，Less，Sass和Stylus的编码帮助。

整个项目的强大导航和高级重构。

支持现代框架：React，Angular，AngularJS，Vue.js，Express等。

用于客户端代码和Node.js的内置调试器。

与构建工具（Grunt，Gulp），代码质量工具（JSHint，JSLint，ESLint，TSLint），测试运行器（Karma，Mocha，Jest，Protractor）和VCS（Git，GitHub，Mercurial，SVN）集成。

安装和设置WebStorm

JRE 1.8与WebStorm发行版捆绑在一起。您无需在计算机上安装Java即可运行WebStorm。

https://www.jetbrains.com/webstorm/download/#section=windows

Windows 安装：
运行您下载的文件。

自定义快捷方式

要查看文件或文件夹，请选择VCS | 当地历史| 在主菜单上显示历史记录。

Ctrl+Shift+A
查找命令并执行它，打开工具窗口或搜索设置。

Ctrl+E
从列表中选择最近打开的文件。

Alt+Enter
改进或优化代码构造。

快捷方式
按下Ctrl+Shift+A

开箱即用，独立的WebStorm安装配置为自动检查更新。它会在新版本可用时通知您：

idea.config.path
目录位于：

<SYSTEM DRIVE>\Users\<USER ACCOUNT NAME>\.<PRODUCT><VERSION>

窗口的主要元素
1.主菜单
2.主工具栏
3.导航栏
4.上下文菜单
5.弹出菜单

查看| 导航栏
Alt+Home

小程序框架wepy

安装 wepy 命令行工具。

npm install wepy-cli -g

在开发目录生成开发DEMO。

wepy new myproject

切换至项目目录。

cd myproject

开发实时编译。

wepy build --watch

项目目录结构

    distnode_modulessrccomponentscom_a.wpycom_b.wpypagesindex.wpypage2.wpyapp.wpypackage.json

官方DEMO代码：

//index.js
//获取应用实例
var app = getApp()
Page({data: {motto: 'Hello World',userInfo: {}},//事件处理函数bindViewTap: function() {console.log('button clicked')},onLoad: function () {console.log('onLoad')}
})

基于wepy的实现：

import wepy from 'wepy';export default class Index extends wepy.page {data = {motto: 'Hello World',userInfo: {}};methods = {bindViewTap () {console.log('button clicked');}};onLoad() {console.log('onLoad');};
}

支持组件化开发。

// index.wpy
<template><view><component id="pannel" path="pannel"></component><component id="counter1" path="counter"></component><component id="counter2" path="counter"></component><component id="list" path="list"></component></view>
</template>
<script>
import wepy from 'wepy';
import List from '../components/list';
import Panel from '../components/panel';
import Counter from '../components/counter';export default class Index extends wepy.page {config = {"navigationBarTitleText": "test"};components = {panel: Panel,counter1: Counter,counter2: Counter,list: List};
}
</script> 

支持加载外部NPM包。

app必须有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。

默认使用babel编译

默认开启使用了一些新的特性如promise，async/await等等。

示例代码：

import wepy from 'wepy';export default class Index extends wepy.page {getData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve({data: 123});}, 3000);});};async onLoad() {let data = await this.getData();console.log(data.data);};
}

针对原生API进行优化。

onLoad = function () {var self = this;wx.login({success: function (data) {wx.getUserInfo({success: function (userinfo) {self.setData({userInfo: userinfo});}});}});
}

基于wepy实现代码：

async onLoad() {await wx.login();this.userInfo = await wx.getUserInfo();
}

执行wepy new demo后，会生成类似配置文件。

let prod = process.env.NODE_ENV === 'production';module.exports = {"wpyExt": ".wpy","babel": {"presets": ["es2015","stage-1"],"plugins": ["transform-export-extensions","syntax-export-extensions","transform-runtime"]}
};if (prod) {// 压缩sassmodule.exports['sass'] = {"outputStyle": "compressed"};// 压缩lessmodule.exports['less'] = {"compress": true};// 压缩jsmodule.exports.plugins = {'UglifyJsPlugin': {filter: /\.js$/,config: {compress: {warning: false}}},'TestPlugin': {filter: /\.wxml$/,config: {}}};
}

程序入口app.wpy

<style type="less">
/** less **/
</style>
<script>
import wepy from 'wepy';
export default class extends wepy.app {config = {"pages":["pages/index/index"],"window":{"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"}};onLaunch() {console.log(this);}
}
</script>

页面index.wpy

<style type="less">
/** less **/
</style>
<template type="wxml"><view></view><component id="counter1" path="counter"></component>
</template>
<script>
import wepy form 'wepy';
import Counter from '../components/counter';
export default class Index extends wepy.page {config = {};components = {counter1: Counter};data = {};methods = {};events = {};onLoad() {};// Other properties
}
</script>

组件com.wpy

<style type="less">
/** less **/
</style>
<template type="wxml"><view>  </view>
</template>
<script>
import wepy form 'wepy';
export default class Com extends wepy.component {components = {};data = {};methods = {};events = {};// Other properties
}
</script>

组件引用

组件通信与交互

wepy.component基类提供三个方法$broadcast，$emit，$invoke

组件的事件监听需要写在events属性下，如：

import wepy form 'wepy';
export default class Com extends wepy.component {components = {};data = {};methods = {};events = {'some-event': ($event, ...args) {console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);}};// Other properties
}

$broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；