字節(jié)跳動(dòng)小程序

讓我們?cè)谝环昼妰?nèi)開(kāi)啟一個(gè)字節(jié)跳動(dòng)小程序項(xiàng)目吧！

創(chuàng)建項(xiàng)目

$ npx degit remaxjs/template-toutiao my-app
$ cd my-app && npm install

運(yùn)行項(xiàng)目

$ npm run dev

打開(kāi)頭條調(diào)試器，選中項(xiàng)目 dist 目錄，你將看到

成功！

項(xiàng)目結(jié)構(gòu)

現(xiàn)在我們來(lái)看一下 Remax 應(yīng)用的結(jié)構(gòu)：

my-app/
┳ package.json
┣ dist/
┣ node_modules/
┣ src/
┗━┓ app.js
  ┣ app.css
  ┣ app.config.js
  ┣ pages/
  ┗━┓ index/
    ┗━┓
      ┣ index.js
      ┣ index.module.css
      ┣ index.config.js

dist 為打包編譯后的文件目錄。

在開(kāi)發(fā)階段我們無(wú)需關(guān)心打包結(jié)果的兼容性及體積，所以 remax 打包結(jié)果為未壓縮版本，在需要上傳代碼時(shí)應(yīng)勾選小程序的 代碼壓縮，樣式補(bǔ)全選項(xiàng)

src 為源文件目錄

app.js 入口文件

app.css 全局樣式文件

app.config.js 為小程序全局配置文件，對(duì)應(yīng) app.json

module.exports = {
  pages: ['pages/index/index'],
  window: {
    navigationBarTitleText: 'My App',
  },
};

pages 存放項(xiàng)目頁(yè)面

pages/index/index.js 頁(yè)面文件，對(duì)應(yīng)小程序 Page 方法

import * as React from 'react';
import { View, Text } from 'remax/toutiao';
import './index.module.css';
export default () => {
  return (
    <View>
      <Text>pages/index/index</Text>
    </View>
  );
};

默認(rèn)導(dǎo)出的的 React 組件就是當(dāng)前的頁(yè)面，關(guān)于生命周期的使用方式參考 

Remax 針對(duì)不同平臺(tái)有對(duì)應(yīng)的實(shí)現(xiàn)，如 remax/alipay，remax/wechat，remax/toutiao 等等，開(kāi)發(fā)者可根據(jù)需要選擇對(duì)應(yīng)的平臺(tái)。。

index.module.css 頁(yè)面樣式文件

index.config.js 頁(yè)面配置文件，會(huì)自動(dòng)轉(zhuǎn)換成小程序頁(yè)面配置文件 index.json