开发Shopify应用记录
风中勁草 2020-11-13 JSReactShopify
# 开发环境准备
创建前端项目其实不必按照官方给出的方法使用nextjs以及使用ngork～～这里踩了很多坑。
# 1. 可以使用单页应用的方式，使用nginx做http服务器。
# 2. 使用umijs作为路由框架
# 3. UI库为了统一，使用官方的polaris。
# 4. 请求工具以及其他工具库可以根据自己的喜好选择。
# 开发项目
# 请先安装好node前端环境这里就不多介绍了!
# 1. 使用umijs 脚手架创建umi项目，安装过程中可以选择最简单的配置即可，目的只是使用umi做前端路由。
yarn create @umijs/umi-app
# 2. 创建BasicLayout
在src 目录下创建layout文件夹,创建BasicLayout.jsx
// BasicLayout.jsx
const BasicLayout = ({chidren}) => {
const myHistory = useHistory();
useEffect(() => {
const init = async () => {
await dispatch({
type: 'global/login',
payload: myHistory.location.query,
});
};
init();
}, []);
return (
<React.Fragment>
<AppProvider
i18n={translations}
features={{ newDesignLanguage: true }}
theme={{
colors: {
interactive: theme.color,
primary: theme.color,
},
}}
>
<div style={{ padding: '32px' }}>
<Card title={<TitleBar />}>
<Card.Section>{children}</Card.Section>
</Card>
</div>
</AppProvider>
</React.Fragment>
);
};
export default BasicLayout;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
这里使用了ahooks获取shopify传递给前端的参数,也可以使用其他办法。目的是获取后端的登陆token。
const myHistory = useHistory();
useEffect(() => {
const init = async () => {
await dispatch({
type: 'global/login',
payload: myHistory.location.query,
});
};
init();
}, []);
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3. 创建相关页面
在src/page下创建相关页面
# 4. 路由配置
配置 .umirc.ts/.umirc.js 或者在config根据umi官方文档配置
// .umirc.ts
export default defineConfig({
favicon: 'logo.png',
dva: {
immer: true,
hmr: true,
},
nodeModulesTransform: {
type: 'none',
},
routes: [
{
path: '/',
component: '@/layouts/BasicLayout',
routes: [
{ path: '/app', component: '@/pages/index' },
{ path: '/app/page1', component: '@/pages/page1' },
{ path: '/app/page2', component: '@/pages/page2' },
],
},
],
...
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
配置过后BasicLayout中的children就是配置底下的页面组件。
# 4. 路由跳转
由于本人比较喜欢使用hooks这里就使用函数的跳转方式进行跳转配合polaris的tab组件
// src/components/TitleBar.jsx
import { Tabs } from '@shopify/polaris';
import React, { useState } from 'react';
import { useHistory } from 'umi';
const TitleBar = () => {
const history = useHistory();
const tabs = [
{
id: '1',
href: '/app',
content: '',
},
{
id: '2',
href: '/app/page1',
content: 'page1',
},
{
id: '3',
href: '/app/page2',
content: 'page2',
},
];
const [selected, setSelected] = useState(
tabs.findIndex(item => item.href.includes(history.location.pathname)),
);
const handleSelect = selectedTabIndex => {
setSelected(selectedTabIndex);
history.push(tabs[selectedTabIndex].href+history.location.search);
};
return <Tabs tabs={tabs} onSelect={handleSelect} selected={selected} />;
};
export default TitleBar;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 嵌入shopify应用商店
由于本人在官方的开发者文档并没有看到单页应用的部署方法，这里建议采用后端重定向链接通过nginx转发的方式进行部署。这样的好处是只需要安装一个应用，并且后端可以保证数据来源。
# 总结
开发shopify应用并不难，主要问题是文档里面之告诉了使用node+react的创建及部署方式，以及官方组件缺失功能,只能另辟蹊径寻找其他方式解决。
由于平时经常使用umi框架开发后台应用，以及查看了其他应用的交互方式，觉得应该可以部署spa应用，于是选择了umi框架。
这样做的好处有很多，可以降低开发难度react-redux、react-router等包不用自己配置，不必重新学习nextjs,并且如果项目使用某些图表库若使用ssr有可能会出现问题(之前使用G2图表就出现过)。