寫在前面

上一篇文章我們運(yùn)行了第一個(gè)helloworld程序，為了后續(xù)功能開(kāi)發(fā)，我們需要對(duì)目錄結(jié)構(gòu)進(jìn)行相應(yīng)的改造，并完成第一個(gè)頁(yè)面的結(jié)構(gòu)部分。

項(xiàng)目改造

taro配置修改

這一步的目的是為了以后為小程序云開(kāi)發(fā)留出余地，修改的同時(shí)別忘了將miniprogram放到.gitignore中

項(xiàng)目根目錄下創(chuàng)建app文件夾，將項(xiàng)目根目錄下的project.config.json移動(dòng)到app目錄下

并修改 project.config.json

# 將"miniprogramRoot": "./dist",# 修改為"miniprogramRoot": "miniprogram/",

修改config/index.js

# 將outputRoot: 'dist'# 修改為outputRoot: 'app/miniprogram'# 添加別名，在后續(xù)開(kāi)發(fā)中直接使用別名導(dǎo)入模塊alias: {    '~assets': path.resolve(__dirname, '..', 'src/assets'),    '~services': path.resolve(__dirname, '..', 'src/services'),    '~components': path.resolve(__dirname, '..', 'src/components'),    '~styles': path.resolve(__dirname, '..', 'src/styles'),    '~config': path.resolve(__dirname, '..', 'src/config'),    '~store': path.resolve(__dirname, '..', 'src/store'),    '~utils': path.resolve(__dirname, '..', 'src/utils'),    '~schema': path.resolve(__dirname, '..', 'src/schema'),}

tsconfig.json修改

compilerOptions: {    ...,    # 添加    "paths": {        "~assets/*": ["src/assets/*"],        "~components/*": ["src/components/*"],        "~config/*": ["src/config/*"],        "~store/*": ["src/store/*"],        "~styles/*": ["src/styles/*"],        "~utils/*": ["src/utils/*"],        "~services/*": ["src/services/*"],        "~pages/*": ["src/pages/*"],        "~schema/*": ["src/schema/*"]    }}

添加一些文件夾

src/目錄下，文件結(jié)構(gòu)修改

├── assets # 存放靜態(tài)資源，如圖片等├── components # 存放通用組件├── config # 存放程序配置文件├── pages├── schema # 存放數(shù)據(jù)結(jié)構(gòu)定義文件├── services # 訪問(wèn)網(wǎng)絡(luò)訪問(wèn)方法├── store # 存放數(shù)據(jù)├── styles # 存放全局樣式├── subPages # 分包└── utils # 存放工具方

添加一些常用的庫(kù)

yarn add dayjs # moment 太大了，所以選擇了dayjsyarn add decimal.js # 后面會(huì)有一些計(jì)算，提前先引入了yarn add lodash # 用習(xí)慣了雖然很多功能原生都能寫了，但是還是喜歡它一點(diǎn)yarn add mobx-utils # mobx的一些工具庫(kù)還是很不錯(cuò)的，必自己寫來(lái)的方便yarn add taro-ui # taro的ui庫(kù)——懶人的邏輯就是能用成熟的絕不自己寫

開(kāi)發(fā)者工具選擇項(xiàng)目剛才新建的app目錄導(dǎo)入項(xiàng)目

第一個(gè)組件

新建文件 /src/components/chunk/index.tsx

這個(gè)組件現(xiàn)在的功能很簡(jiǎn)單，之所以抽出來(lái)單獨(dú)寫，主要是為了演示組件一般情況下是什么樣子

import Taro, { Component } from '@tarojs/taro';import { View } from '@tarojs/components';import { CSSProperties } from 'react';interface ChunkProps {  style?: CSSProperties;}interface ChunkState {}class Chunk extends Component {  render() {    const { children, style } = this.props;    return (              {children}          );  }}export default Chunk;

第一個(gè)頁(yè)面

src/pages/index/index.scss

page {    background: #ecedee;  }  .home {    padding: 0rpx 30rpx;    .header {        margin-top: 60rpx;        width: 100%;        background-repeat: no-repeat;        background-size: cover;        background-position: center;    }}

src/pages/index/index.tsx

import { ComponentType } from 'react';import Taro, { Component, Config } from '@tarojs/taro';import { View, Image, Navigator, Text } from '@tarojs/components';import Chunk from '~components/chunk';import './index.scss';interface IndexProps {}class Index extends Component {  config: Config = {    navigationBarTitleText: '攢局',    enablePullDownRefresh: true,    navigationBarBackgroundColor: '#ecedee',    backgroundColor: '#ecedee',  };  render() {    return (                                                  共攢了                              0                            個(gè)局                                      ￥              {0}                                                                      攢局記錄                                                            去提現(xiàn)                                                                                                                      攢局                報(bào)名活動(dòng)，自動(dòng)統(tǒng)計(jì)，簡(jiǎn)單高效                                                                    );  }}export default Index as ComponentType;

至此我們的第一個(gè)頁(yè)面已經(jīng)展示在我們面前了，下一期我將繼續(xù)和大家分享，后端基本框架的搭建，以及數(shù)據(jù)庫(kù)的設(shè)計(jì)。

推薦閱讀：中國(guó)融合網(wǎng)