认识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 安装：
运行您下载的文件。
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
