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 安装:
运行您下载的文件.
ws_welcomeScreen.PNG
自定义快捷方式
ws_getting_started_create_new_file.PNG
要查看文件或文件夹, 请选择 VCS | 当地历史 | 在主菜单上显示历史记录.
Ctrl+Shift+A
查找命令并执行它, 打开工具窗口或搜索设置.
Ctrl+E
从列表中选择最近打开的文件.
Alt+Enter
改进或优化代码构造.
快捷方式
按下 Ctrl+Shift+A
寻找行动
开箱即用, 独立的 WebStorm 安装配置为自动检查更新. 它会在新版本可用时通知您:
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
项目目录结构
- dist
- node_modules
- src
- components
- com_a.wpy
- com_b.wpy
- pages
- index.wpy
- page2.wpy
- App.wpy
- package.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 包.
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) {
- // 压缩 Sass
- module.exports['sass'] = {"outputStyle": "compressed"};
- // 压缩 Less
- module.exports['less'] = {"compress": true};
- // 压缩 JS
- module.exports.plugins = {
- 'UglifyJsPlugin': {
- filter: /\.JS$/,
- config: {
- compress: {
- warning: false
- }
- }
- },
- 'TestPlugin': {
- filter: /\.wxml$/,
- config: {
- }
- }
- };
- }
5 small
程序入口 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>
image.PNG
组件 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>
组件引用
6 small
组件通信与交互
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 事件是由父组件发起, 所有子组件都会收到此广播事件, 除非事件被手动取消.
7 small
8 small
image.PNG
image.PNG
1, 父组件可以使用 props 把数据传给子组件.
2, 子组件可以使用 $emit 触发父组件的自定义事件.
- vm.$emit( event, arg ) // 触发当前实例上的事件
- vm.$on( event, fn );// 监听 event 事件后运行 fn;
image.PNG
image.PNG
来源: http://www.jianshu.com/p/58432fd82af9