미니앱 오픈소스 프로젝트

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

import {h, Component} from 'preact';
import './index.css';

class Counter extends Component {
  state = {count: 1};

  sub = () => {
    this.setState((prevState) => {
      return {count: --prevState.count};
    });
  };

  add = () => {
    this.setState((prevState) => {
      return {count: ++prevState.count};
    });
  };

  clickHandle = () => {
    if ('undefined' != typeof wx && wx.getSystemInfoSync) {
      wx.navigateTo({
        url: '../log/index?id=1',
      });
    } else {
      location.href = 'log.html';
    }
  };

  render({}, {count}) {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{count}</span>
        <button onClick={this.add}>+</button>
        <div onClick={this.clickHandle}>跳转</div>
      </div>
    );
  }
}

export default Counter;

import {render, WeElement, define} from 'omi';

define(
  'my-counter',
  class extends WeElement {
    data = {
      count: 1,
    };

    static css = `
    span{
        color: red;
    }`;

    sub = () => {
      this.data.count--;
      this.update();
    };

    add = () => {
      this.data.count++;
      this.update();
    };

    render() {
      return (
        <div>
          <button onClick={this.sub}>-</button>
          <span>{this.data.count}</span>
          <button onClick={this.add}>+</button>
        </div>
      );
    }
  },
);

render(<my-counter />, 'body');

<style lang="less">
  @color: #4d926f;
  .num {
    color: @color;
  }
</style>

<template>
  <div class="container">
    <div class="num" @tap="num++">{{num}}</div>
    <custom-component></custom-component>
    <vendor-component></vendor-component>
    <div>{{text}}</div>
    <input v-model="text" />
  </div>
</template>

<config>
  { usingComponents: { customComponent: '@/components/customComponent',
  vendorComponent: 'module:vendorComponent' } }
</config>

<script>
  import wepy from '@wepy/core';

  wepy.page({
    data: {
      num: 0,
      text: 'Hello World',
    },
  });
</script>