單語(yǔ)言片段模式定義組件

單語(yǔ)言片段模式定義組件為avm.js支持的兩種編程模式之一，使用純js即可完成組件的定義，或者頁(yè)面的開(kāi)發(fā)，開(kāi)發(fā)風(fēng)格類似于React。

使用JS定義一個(gè)組件 / 頁(yè)面

JS組件 / 頁(yè)面符合Web Components 規(guī)范，使用define函數(shù)進(jìn)行組件定義，使用render函數(shù)渲染到終端。

定義組件：

// api-test.js:


avm.define('api-test', class extends Component {
    render() {
        return (
            <view>
                <text>Hello APP</text>
            </view>
        );
    }
});

添加樣式：

avm.define('api-test', class extends Component {

    
    css(){
        return `.header {
            height: 45
        }`
    }

    
    render() {
        return (
            <view class='header'>
                <text>Hello APP</text>
            </view>
        );
    }
});

引入外部樣式：

import commoncss from './assets/common.css';


avm.define('api-test', class extends Component {

    
    css(){
        return commoncss;
    }

    
    render() {
        return (
            <view class='header'>
                <text>Hello APP</text>
            </view>
        );
    }
});

數(shù)據(jù)綁定：

avm.define('api-test', class extends Component {

    
    data = {
        title: 'Hello APP'
    }

    
    css(){
        return `.header {
            height: 45
        }`
    }

    
    render() {
        return (
            <view class='header'>
                <text>{this.data.title}</text>
            </view>
        );
    }
});

在其他頁(yè)面使用組件：

// app-index.js:


import './components/api-test.js';


avm.define('app-index', class extends Component {

    
    data = {
        title: 'Hello APP',
        errorState: false
    }

    
    css(){
        return `#app {   
            text-align: center;  
            color: #2c3e50;  
            margin-top: 60px;  
        }`;
    }

    
    render() {
        return (
            <view id="app">  
                <img src="./assets/logo.png" />  
                <api-test></api-test>
            </view>
        );
    }
});


avm.render(<app-index />);
//avm.render(<app-index />, 'body');
//avm.render(<app-index />, $('body'));