weex-nuke/src/node_modules/nuke-env/docs/basic.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Env 环境系统等信息

- order: 0
- title_en: Env demo

---

```js
<NukePlayGround>
{
  isWeex:true, // is weex env
  isWeb:false, // is web env
  appInfo:{
    deviceModel:'iPhone 9,1', // phone model
    platform:'iOS', // android or iOS
    osVersion:'11.4', // current os version
    appName:'TB', //current app ua
    appVersion:'8.1.1', //current app version
  },
  deviceWidth:'1242', // device width
  deviceHeight:'2208', // device height
  scale:'3' // dpi

}
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Env from 'nuke-env';
import Page from 'nuke-page';
const { isWeex, isWeb, appInfo, params } = Env;

let App = class NukeDemoIndex extends Component {
  renderAppInfo = () => {
    return Object.keys(appInfo).map((key) => {
      const str = `- [${key}] ${appInfo[key]}`;
      return <Text style={styles.resultText}>{str}</Text>;
    });
  };

  renderParamInfo = () => {
    return Object.keys(params).map((key) => {
      const str = ` - [${key}] ${params[key]}`;
      return <Text style={styles.resultText}>{str}</Text>;
    });
  };

  render() {
    return (
      <Page title="Env">
        <Page.Intro main="获取系统变量信息" />
        <View style={styles.result}>
          <Text style={styles.resultText}>
            isWeex:
            {isWeex}
          </Text>
          <Text style={styles.resultText}>
            isWeb:
            {isWeb}
          </Text>
          <Text style={styles.resultText}>appInfo:</Text>
          {this.renderAppInfo()}
          <Text style={styles.resultText}>data:</Text>
          {this.renderParamInfo()}
          <Text style={styles.resultText}>
            iOS:
            {appInfo.platform === 'iOS'}
          </Text>
          <Text style={styles.resultText}>
            appName:
            {appInfo.appName}
          </Text>
        </View>
      </Page>
    );
  }
};
const styles = {
  result: {
    minHeight: '480rem',
    margin: '30rem',
    padding: '10rem',
    backgroundColor: '#ffffff'
    // justifyContent: 'center',
    // alignItems: 'center'
  },
  resultText: {
    fontSize: '28rem',
    lines: 5,
    wordBreak: 'break-all' //for web
  },
  btns: {
    margin: '30rem'
  }
};
render(<App />);
```