认识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；

巴特西

认识WebStorm-小程序框架wepy

组件引用

最新文章

热门文章