认识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 安装：

运行您下载的文件。

自定义快捷方式

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

Ctrl+Shift+A

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

Ctrl+E

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

Alt+Enter

改进或优化代码构造。

快捷方式

按下Ctrl+Shift+A

开箱即用，独立的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包。

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

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

组件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>

组件引用

组件通信与交互

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；