https://github.com/baotlake/periodic-table-pro

元素周期表Pro，高颜值化学必备小程序，提供全面的元素属性、图片和百科知识等
https://github.com/baotlake/periodic-table-pro

app chemistry miniapp next pwa taro weapp webapp website wechat

Last synced: 6 days ago
JSON representation

元素周期表Pro，高颜值化学必备小程序，提供全面的元素属性、图片和百科知识等

• Host: GitHub
• URL: https://github.com/baotlake/periodic-table-pro
• Owner: baotlake
• Created: 2018-05-15T14:12:43.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-08-21T15:15:19.000Z (5 months ago)
• Last Synced: 2024-12-30T01:07:37.892Z (13 days ago)
• Topics: app, chemistry, miniapp, next, pwa, taro, weapp, webapp, website, wechat
• Language: TypeScript
• Homepage: https://pt.ziziyi.com
• Size: 46.3 MB
• Stars: 293
• Watchers: 5
• Forks: 57
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome - baotlake/periodic-table-pro - 元素周期表Pro，高颜值化学必备小程序，提供全面的元素属性、图片和百科知识等 (TypeScript)

README

        


    

    


    


    元素周期表PRO



高颜值的化学元素周期表工具，提供全面的元素属性、图片和百科知识等








## 简介

元素周期表 Pro 是由欢洋精心打造的**原创化学元素周期表工具**，采用全新的设计风格，支持[Web（H5）](https://pt.ziziyi.com)、微信小程序、QQ 小程序和支付宝小程序等多种平台，适配不同尺寸的屏幕设备。

    

        

            

        

        

            

        

    







## 网站

Nextjs 构建的网站，项目目录 `periodic-table-pro/website`



    

    元素周期表PRO - 高颜值化学必备小工具






## 小程序

Tarojs 构建的多端兼容小程序，项目目录 `periodic-table-pro/weapp`

    

        

        
微信小程序

    

    

        

        
QQ小程序

    

    

        

        
支付宝小程序

    








## 环境变量

- `PLATFORM` —— 代替 `process.env.TARO_ENV`， 在 Nextjs 项目中值为 `next`

- `STATIC_BASE` —— 静态资源地址




## 小程序与 Web 端的兼容方案简介

该项目网站采用 Nextjs, 小程序端采用 Tarojs + React, 并在网站和小程序之间复用了大量的组件。

在 Taro 项目中使用 `@tarojs/plugin-html` 插件将 html 标签转译为对应小程序的模版。

在 [`periodic-table-pro/packages/components/compact`](./packages/components/compat/) 目录中实现了一些根据环境变量同时兼容 Nextjs 与 Tarojs 环境的组件和 API。例如`Image`、`Navigator`、`previewImage`、`navigatorTo` 等。

最后在需要复用的组件中使用这些兼容版的组件和 API。