webstorm html框架集,认识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。

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

目录位于：

\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包。

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

/** 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

}

image.png

组件com.wpy

/** less **/

import wepy form 'wepy';

export default class Com extends wepy.component {

components = {};

data = {};

methods = {};

events = {};

// Other properties

}

组件引用

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