用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 工具/框架 查看內容

Remax One - 重新設計小程序的跨平臺開發

Rolan 2020-3-31 00:55

跨平臺開發的挑戰小程序作為一項非標準的技術,各個小程序平臺之間雖然大體上相似,但依然有非常多的差異。“一次開發多端運行”當然是非常美好的愿望,但我們在設計 Remax 之初就意識到各個小程序平臺之間的差異是 ...

跨平臺開發的挑戰

小程序作為一項非標準的技術,各個小程序平臺之間雖然大體上相似,但依然有非常多的差異。“一次開發多端運行”當然是非常美好的愿望,但我們在設計 Remax 之初就意識到各個小程序平臺之間的差異是無法被抹平的,每家小程序平臺有太多的私貨,更沒有一個標準來指導我們該如何抹平這些差異。

所以我們在最開始,為每個小程序平臺提供了獨立的基礎組件。開發者如果要做跨平臺開發,需要自己去封裝基礎組件。但很快,我們也意識到這對開發者來說是一件很麻煩的事情,特別是后面我們要支持更多平臺的話。

Remax One

受 CSS 屬性名前綴的啟發,我們重新設計了 Remax 的跨平臺方案。我們非常克制地選取了 9 個基礎組件,統一了他們之間非平臺私有的屬性,并且以屬性名前綴的方式來支持各個平臺私有的特性。我們希望開發者在做跨平臺開發時能清楚地意識到你寫下的這行代碼只會在特定的平臺上生效。

Remax One 就是我們提供的跨平臺解決方案。通過 remax/one 提供跨平臺的組件。

import * as React from 'react';
import { View, Button } from 'remax/one';

export default () => {
  const [count, setCount] = React.useState(0);

  return (
    <View alipay-onAppear={() => console.log('Aha!')}>
      <View>{count}</View>
      <Button onTap={() => setCount(count + 1)}>+1</Button>
    </View>
  );
};

可以看到,對于 onTap 這樣通用的屬性我們進行了統一,而支付寶獨有的 onAppear 屬性,則需要加上 alipay- 的前綴。

完整的示例項目

使用

從模板創建項目:

$ npx degit remaxjs/template-one my-app
$ cd my-app

或者在已有的項目中引入:

// remax.config.js
module.export = {
  // 通過設置 one: true 來開啟 Remax One。
  one: true,
  // 通過環境變量區分不同平臺的輸出目錄
  output: 'dist/' + process.env.REMAX_PLATFORM,
};

小程序配置

app.config.js 以及頁面的 config.js 配置文件支持多端配置方式:

// app.config.js
const title = '小程序標題';
const bgColor = '#fff';
const pages = ['pages/index/index'];

// 支付寶
exports.alipay = {
  pages,
  window: {
    defaultTitle: title,
    titleBarColor: backgroundColor,
  },
};

// 微信
exports.wechat = {
  pages,
  window: {
    navigationBarTitleText: title,
    navigationBarBackgroundColor: backgroundColor,
  },
};

使用文件名后綴區分不同平臺代碼

通過創建不同平臺的同名文件來封裝跨平臺組件和 API。例如:

// src/api/showToast/index.js
import { showToast } from 'remax/alipay';

export default showToast;
// src/api/showToast/index.wechat.js
import { showToast } from 'remax/wechat';

export default options => {
  showToast({
    ...options,
    title: options.content,
  });
};
// src/pages/index.js
import { View } from 'remax-one';
import showToast from '@/api/showToast';

export default () => {
  return (
    <View
      onClick={() => {
        showToast({ content: 'Hello World!' });
      }}
    >
      CLICK ME!
    </View>
  );
};

remax-cli 會優先讀取 [target].js 文件,這個規則針對 CSS 等其他文件同樣有效。

組件

如上面所說,我們非常克制謹慎地對 remax/one 中提供的組件做了篩選和重新設計,只保留了我們能保證在各個平臺之間行為一致的組件和屬性。

如果需要使用某個平臺特有的組件,可以直接從對應平臺導入。如:

import * as React from 'react';
import { View, Text } from 'remax/one';
import { ScrollView } from 'remax/wechat';

export default () => {
  return (
    <ScrollView>
      <View>view</View>
      <Text>text</Text>
    </ScrollView>
  );
};

如果需要使用某個平臺特有的屬性,可以通過 {平臺前綴}-{平臺原生屬性名稱} 來設置,例如:

import * as React from 'react';
import { View, TapEvent } from 'remax-one';

export default () => {
  return (
    <View
      id="id"
      className="class"
      alipay-onAppear={() => {}}
      wechat-bindanimationend={() => {}}
      wechat-disable-scroll={true}
      onTap={(event: TapEvent) => {
        console.log(event);
      }}
    >
      view
    </View>
  );
};

通過 Remax One 開發者可以非常方便地構建跨小程序平臺的應用。

另外社區同學開發的跨平臺組件也正在路上: https://github.com/AnnaSearl/...

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: yesmeck 來自: segmentfault
河北20选5大星走势图 内蒙古快三早知道 安徽十一选五走势图一定牛手机版 彩经网 广西快3 天津十一选五走势图一定牛 世界赌博城市排名 吉林快三是国家彩票吗 北京赛车公式官方网 排列三走势图带连线的300 股票融资亏钱 银行股票涨跌由什么决定 河北十一选五现在的最新开奖 安徽快三计划团队谁 广西快乐双彩最新开奖结果 时时彩最新开奖结果查询 福建11选五走势图电脑版 著名股票分析师排名