天天看点

认识WebStorm-小程序框架wepy

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 安装:

运行您下载的文件。

认识WebStorm-小程序框架wepy

自定义快捷方式

认识WebStorm-小程序框架wepy

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

Ctrl+Shift+A

查找命令并执行它,打开工具窗口或搜索设置。

Ctrl+E

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

Alt+Enter

改进或优化代码构造。

快捷方式

按下Ctrl+Shift+A

认识WebStorm-小程序框架wepy

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

idea.config.path

目录位于:

窗口的主要元素

1.主菜单

2.主工具栏

3.导航栏

4.上下文菜单

5.弹出菜单

查看| 导航栏

Alt+Home

认识WebStorm-小程序框架wepy
认识WebStorm-小程序框架wepy

小程序框架wepy

安装 wepy 命令行工具。

在开发目录生成开发DEMO。

切换至项目目录。

开发实时编译。

项目目录结构

官方DEMO代码:

基于wepy的实现:

支持组件化开发。

支持加载外部NPM包。

认识WebStorm-小程序框架wepy

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

默认使用babel编译

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

示例代码:

针对原生API进行优化。

基于wepy实现代码:

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

认识WebStorm-小程序框架wepy

程序入口app.wpy

页面index.wpy

认识WebStorm-小程序框架wepy

组件com.wpy

认识WebStorm-小程序框架wepy

组件通信与交互

组件的事件监听需要写在events属性下,如:

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

认识WebStorm-小程序框架wepy
认识WebStorm-小程序框架wepy
认识WebStorm-小程序框架wepy
认识WebStorm-小程序框架wepy

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

认识WebStorm-小程序框架wepy
认识WebStorm-小程序框架wepy

继续阅读