Skip to content

Commit 1c6dce2

Browse files
SyMindSyMind
committed
refactor data-fetch example
1 parent 6af711f commit 1c6dce2

File tree

18 files changed

+147
-125
lines changed

18 files changed

+147
-125
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ npx next start dist -p 10086
6666

6767
插件默认 Pre-rendering 所有页面。这意味着提前为每个页面生成 HTML，而不是让浏览器端 JavaScript 完成所有工作。预渲染可以带来更好的性能和搜索引擎优化。
6868

69+
示例 - [房贷计算器](https://github.com/SyMind/Taro-Mortgage-Calculator)
70+
6971
> 阅读 Next.js 文档了解更多：[Pre-rendering](https://nextjs.org/docs/basic-features/pages#pre-rendering)。
7072
7173
### SSR - 服务端渲染
@@ -80,6 +82,8 @@ export async function getServerSideProps(context) {
8082
}
8183
```
8284

85+
示例 - [Data Fetch](https://github.com/SyMind/tarojs-plugin-platform-nextjs/tree/main/examples/data-fetch)
86+
8387
> 阅读 Next.js 文档了解更多：[getServerSideProps](https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props)。
8488
8589
### ISR - 增量静态生成
@@ -192,10 +196,6 @@ class MyComponent extends Component {
192196
+ export default withRouter(MyComponent)
193197
```
194198

195-
## 示例
196-
197-
[房贷计算器](https://github.com/SyMind/Taro-Mortgage-Calculator)
198-
199199
## License
200200

201201
[MIT](https://github.com/SyMind/tarojs-plugin-platform-nextjs/blob/main/LICENSE)

‎examples/data-fetch/config/index.js

+70-62
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,80 @@
11
const config = {
2-
projectName: 'data',
3-
date: '2022-4-16',
4-
designWidth: 750,
5-
deviceRatio: {
6-
640: 2.34 / 2,
7-
750: 1,
8-
828: 1.81 / 2
9-
},
10-
sourceRoot: 'src',
11-
outputRoot: 'dist',
12-
plugins: [
13-
'tarojs-plugin-platform-nextjs'
14-
],
15-
defineConstants: {
16-
},
17-
copy: {
18-
patterns: [
2+
projectName: 'data',
3+
date: '2022-4-16',
4+
designWidth: 375,
5+
deviceRatio: {
6+
640: 2.34 / 2,
7+
750: 1,
8+
828: 1.81 / 2,
9+
375: 2 / 1
10+
},
11+
sourceRoot: 'src',
12+
outputRoot: 'dist',
13+
plugins: [
14+
'tarojs-plugin-platform-nextjs'
1915
],
20-
options: {
21-
}
22-
},
23-
framework: 'react',
24-
mini: {
25-
postcss: {
26-
pxtransform: {
27-
enable: true,
28-
config: {
29-
30-
}
31-
},
32-
url: {
33-
enable: true,
34-
config: {
35-
limit: 1024 // 设定转换尺寸上限
36-
}
37-
},
38-
cssModules: {
39-
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
40-
config: {
41-
namingPattern: 'module', // 转换模式，取值为 global/module
42-
generateScopedName: '[name]__[local]___[hash:base64:5]'
16+
defineConstants: {
17+
},
18+
copy: {
19+
patterns: [
20+
],
21+
options: {
4322
}
44-
}
45-
}
46-
},
47-
h5: {
48-
publicPath: '/',
49-
staticDirectory: 'static',
50-
postcss: {
51-
autoprefixer: {
52-
enable: true,
53-
config: {
23+
},
24+
framework: 'react',
25+
mini: {
26+
postcss: {
27+
pxtransform: {
28+
enable: true,
29+
config: {
30+
31+
}
32+
},
33+
url: {
34+
enable: true,
35+
config: {
36+
limit: 1024 // 设定转换尺寸上限
37+
}
38+
},
39+
cssModules: {
40+
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
41+
config: {
42+
namingPattern: 'module', // 转换模式，取值为 global/module
43+
generateScopedName: '[name]__[local]___[hash:base64:5]'
44+
}
45+
}
5446
}
55-
},
56-
cssModules: {
57-
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
58-
config: {
59-
namingPattern: 'module', // 转换模式，取值为 global/module
60-
generateScopedName: '[name]__[local]___[hash:base64:5]'
47+
},
48+
h5: {
49+
publicPath: '/',
50+
staticDirectory: 'static',
51+
postcss: {
52+
autoprefixer: {
53+
enable: true,
54+
config: {
55+
}
56+
},
57+
cssModules: {
58+
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
59+
config: {
60+
namingPattern: 'module', // 转换模式，取值为 global/module
61+
generateScopedName: '[name]__[local]___[hash:base64:5]'
62+
}
63+
}
64+
},
65+
router: {
66+
mode: 'browser',
67+
customRoutes: {
68+
'/pages/index/index': '/',
69+
'/pages/stars/index': '/stars'
70+
}
6171
}
62-
}
6372
}
64-
}
6573
}
6674

6775
module.exports = function (merge) {
68-
if (process.env.NODE_ENV === 'development') {
69-
return merge({}, config, require('./dev'))
70-
}
71-
return merge({}, config, require('./prod'))
76+
if (process.env.NODE_ENV === 'development') {
77+
return merge({}, config, require('./dev'))
78+
}
79+
return merge({}, config, require('./prod'))
7280
}

‎examples/data-fetch/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"next": "^12.1.5",
4242
"react": "^17.0.0",
4343
"react-dom": "^17.0.0",
44-
"tarojs-plugin-platform-nextjs": "^0.0.11"
44+
"tarojs-plugin-platform-nextjs": "latest"
4545
},
4646
"devDependencies": {
4747
"@babel/core": "^7.8.0",

‎examples/data-fetch/src/app.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default defineAppConfig({
22
pages: [
33
'pages/index/index',
4-
'pages/tarojs-plugin-platform-nextjs-stars/index'
4+
'pages/stars/index'
55
],
66
window: {
77
backgroundTextStyle: 'light',

‎examples/data-fetch/src/app.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body {
2+
font-size: 16px;
3+
margin: 8px;
4+
font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
5+
line-height: 1.5;
6+
}
7+
8+
.paragraph {
9+
margin: 16px 0 16px;
10+
}
11+
12+
.taro-nav {
13+
text-decoration: underline;
14+
}

‎examples/data-fetch/src/pages/index/index.config.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export default definePageConfig({
2-
navigationBarTitleText: '首页'
3-
})
1+
export default {
2+
navigationBarTitleText: '首页'
3+
}

‎examples/data-fetch/src/pages/index/index.h5.tsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import {request} from '@tarojs/taro'
2-
32
export {default} from './view';
43

54
export async function getStaticProps() {
6-
const res = await request({
7-
method: 'GET',
8-
url: 'https://api.github.com/repos/NervJS/taro'
9-
})
5+
const res = await request({
6+
method: 'GET',
7+
url: 'https://api.github.com/repos/NervJS/taro'
8+
})
109

11-
return {
12-
props: {
13-
stars: res.data.stargazers_count
10+
return {
11+
props: {
12+
stars: res.data.stargazers_count
13+
}
1414
}
15-
}
1615
}

‎examples/data-fetch/src/pages/index/index.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ import {request} from '@tarojs/taro'
33
import IndexView from './view';
44

55
function Index() {
6-
const [stars, setStars] = useState()
6+
const [stars, setStars] = useState()
77

8-
useEffect(() => {
9-
(async function() {
10-
const res = await request({
11-
method: 'GET',
12-
url: 'https://api.github.com/repos/NervJS/taro'
13-
})
14-
setStars(res.data.stargazers_count)
15-
})()
16-
}, [])
8+
useEffect(() => {
9+
(async function () {
10+
const res = await request({
11+
method: 'GET',
12+
url: 'https://api.github.com/repos/NervJS/taro'
13+
})
14+
setStars(res.data.stargazers_count)
15+
})()
16+
}, [])
1717

18-
return <IndexView stars={stars} />
18+
return <IndexView stars={stars} />
1919
}
2020

2121
export default Index

‎examples/data-fetch/src/pages/index/view.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import {View, Navigator} from '@tarojs/components'
22

3-
const IndexView = ({stars}) => (
4-
<View>
5-
<View>tarojs has {stars} ⭐️</View>
6-
<Navigator
7-
target='self'
8-
openType='navigate'
9-
url='/pages/tarojs-plugin-platform-nextjs-stars/index'
10-
>
11-
How about tarojs-plugin-platform-nextjs?
12-
</Navigator>
13-
</View>
3+
const IndexView = ({ stars }) => (
4+
<>
5+
<View className='paragraph'>Tarojs has {stars} ⭐️</View>
6+
<Navigator
7+
target='self'
8+
openType='navigate'
9+
url='/pages/stars/index'
10+
>
11+
How about tarojs-plugin-platform-nextjs?
12+
</Navigator>
13+
</>
1414
)
1515

1616
export default IndexView

‎examples/data-fetch/src/pages/tarojs-plugin-platform-nextjs-stars/index.h5.tsx ‎examples/data-fetch/src/pages/stars/index.h5.tsx

File renamed without changes.

‎examples/data-fetch/src/pages/tarojs-plugin-platform-nextjs-stars/index.tsx ‎examples/data-fetch/src/pages/stars/index.tsx

File renamed without changes.

‎examples/data-fetch/src/pages/stars/view.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {View, Navigator} from '@tarojs/components'
2+
3+
const TarojsPluginPlatformNextjsStarsView = ({ stars }) => (
4+
<>
5+
<View className='paragraph'>tarojs-plugin-platform-nextjs has {stars} ⭐</View>
6+
<Navigator
7+
target='self'
8+
openType='navigate'
9+
url='/pages/index/index'
10+
>
11+
I bet tarojs has more stars (?)
12+
</Navigator>
13+
</>
14+
)
15+
16+
export default TarojsPluginPlatformNextjsStarsView

‎examples/data-fetch/src/pages/tarojs-plugin-platform-nextjs-stars/view.tsx

-16
This file was deleted.

‎examples/reactions/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# 数据请求示例
1+
# ISR 示例
22

33
这个演示展示了 Next.js 的 ISR 功能，使用 GitHub Issues 作为数据源。
44

‎examples/reactions/config/index.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
const config = {
22
projectName: 'data',
33
date: '2022-4-16',
4-
designWidth: 640,
4+
designWidth: 375,
55
deviceRatio: {
66
640: 1,
77
750: 1,
8-
828: 1.81 / 2
8+
828: 1.81 / 2,
9+
375: 2 / 1
910
},
1011
sourceRoot: 'src',
1112
outputRoot: 'dist',

‎examples/reactions/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"next": "^12.1.5",
4141
"react": "^17.0.0",
4242
"react-dom": "^17.0.0",
43-
"tarojs-plugin-platform-nextjs": "^0.0.6"
43+
"tarojs-plugin-platform-nextjs": "latest"
4444
},
4545
"devDependencies": {
4646
"@babel/core": "^7.8.0",

‎examples/reactions/src/app.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body, html {
1+
body {
22
padding: 0;
33
margin: 0;
44
font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

‎examples/reactions/src/pages/index/index.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export default definePageConfig({
1+
export default {
22
navigationBarTitleText: '首页'
3-
})
3+
}

0 commit comments

Comments
 (0)