认识WebStorm |
您所在的位置：网站首页 › webstorm官网进不去 › 认识WebStorm |
认识WebStorm
|
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 目录位于： \Users\\.窗口的主要元素 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 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 }; }支持加载外部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: { } } }; }
程序入口app.wpy /** less **/ 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); } }页面index.wpy /** less **/ 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 }
组件com.wpy /** less **/ import wepy form 'wepy'; export default class Com extends wepy.component { components = {}; data = {}; methods = {}; events = {}; // Other properties } 组件引用
组件通信与交互 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；
|
【本文地址】
今日新闻 |
推荐新闻 |