认识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
目录位于:

\Users\\.

窗口的主要元素
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

 

支持加载外部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



页面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、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn; 
image.png
image.png

你可能感兴趣的:(认识WebStorm-小程序框架wepy)