认识WebStorm-小程序框架wepy

作者: 魔王哪吒 | 来源:发表于2019-05-18 09:55 被阅读8次

    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

    相关文章

      网友评论

        本文标题:认识WebStorm-小程序框架wepy

        本文链接:https://www.haomeiwen.com/subject/flpzaqtx.html