认识WebStorm-小程序框架wepy

布满荆棘的人生 2021-09-19 11:24 403阅读 0赞

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][https_www.jetbrains.com_webstorm_download_section_windows]

Windows 安装：  
运行您下载的文件。

![ws\_welcomeScreen.png][ws_welcomeScreen.png]

自定义快捷方式

![ws\_getting\_started\_create\_new\_file.png][ws_getting_started_create_new_file.png]

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

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

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

Alt+Enter  
改进或优化代码构造。

快捷方式  
按下Ctrl+Shift+A  
![寻找行动][1240]

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

![WebStorm和插件更新][WebStorm]

idea.config.path  
目录位于：

<SYSTEM DRIVE>\Users\<USER ACCOUNT NAME>\.<PRODUCT><VERSION>

窗口的主要元素  
1.主菜单  
2.主工具栏  
3.导航栏  
4.上下文菜单  
5.弹出菜单

查看| 导航栏  
Alt+Home  
![选择配色方案][1240 1]

![颜色方案设置下的“语言默认值”部分][1240 2]

小程序框架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后，会生成类似配置文件。

![5 small][]

程序入口app.wpy

页面index.wpy

![image.png][]

组件com.wpy

## 组件引用 ##

![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]

![image.png][image.png 2]

1、父组件可以使用 props 把数据传给子组件。  
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件
    
    vm.$on( event, fn );//监听event事件后运行 fn；

![image.png][image.png 3]

![image.png][image.png 4]

[https_www.jetbrains.com_webstorm_download_section_windows]: https://www.jetbrains.com/webstorm/download/#section=windows
[ws_welcomeScreen.png]: /images/20210724/433aeb94956541929c0d314d0f6d6594.png
[ws_getting_started_create_new_file.png]: /images/20210724/51f7777de41945b3bf1737c0c412a7e6.png
[1240]: /images/20210724/feefb9112b2c42df94e0bfa775a967bf.png
[WebStorm]: /images/20210724/ea6d24bb5f0c4aa3a69cba45e45cff57.png
[1240 1]: /images/20210724/182ebaf3c0cd4dbcb4d93b84bf3f7a01.png
[1240 2]: /images/20210724/2a24fdcd6e02405d9345767018e71d32.png
[npm]: /images/20210724/3b0cd0a94a0c4c18a1f9b92ab13d8109.png
[5 small]: /images/20210724/076320a068874e1a930ca33dfcf028aa.png
[image.png]: /images/20210724/6fcfc3e932b64173901f9626bf880b06.png
[6 small]: /images/20210724/565fd23d35464e2787ee76d1d7dd6b5a.png
[7 small]: /images/20210724/38de0882a2b24ed9a678fd4e017f74de.png
[8 small]: /images/20210724/7e5534df49224f0086ae3250196ed875.png
[image.png 1]: /images/20210724/6bb5a381ef904294a196cc3c162e4744.png
[image.png 2]: /images/20210724/0376b55f09bc424fb1d509631d903dc8.png
[image.png 3]: /images/20210724/3f5b137f4c564a5dbe82cffef187fba3.png
[image.png 4]: /images/20210724/4a1824b7bf5f427185eec01906195c5d.png