上一篇文章我们运行了第一个helloworld程序,为了后续功能开发,我们需要对目录结构进行相应的改造,并完成第一个页面的结构部分。
这一步的目的是为了以后为小程序云开发留出余地,修改的同时别忘了将miniprogram放到.gitignore中
项目根目录下创建app文件夹,将项目根目录下的project.config.json移动到app目录下
并修改 project.config.json
# 将"miniprogramRoot": "./dist",# 修改为"miniprogramRoot": "miniprogram/",
修改config/index.js
# 将outputRoot: 'dist'# 修改为outputRoot: 'app/miniprogram'# 添加别名,在后续开发中直接使用别名导入模块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'),}
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/目录下,文件结构修改
├── assets # 存放静态资源,如图片等├── components # 存放通用组件├── config # 存放程序配置文件├── pages├── schema # 存放数据结构定义文件├── services # 访问网络访问方法├── store # 存放数据├── styles # 存放全局样式├── subPages # 分包└── utils # 存放工具方
yarn add dayjs # moment 太大了,所以选择了dayjsyarn add decimal.js # 后面会有一些计算,提前先引入了yarn add lodash # 用习惯了虽然很多功能原生都能写了,但是还是喜欢它一点yarn add mobx-utils # mobx的一些工具库还是很不错的,必自己写来的方便yarn add taro-ui # taro的ui库——懒人的逻辑就是能用成熟的绝不自己写
新建文件 /src/components/chunk/index.tsx
这个组件现在的功能很简单,之所以抽出来单独写,主要是为了演示组件一般情况下是什么样子
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;
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 个局 ¥ {0} 攒局记录 去提现 攒局 报名活动,自动统计,简单高效 ); }}export default Index as ComponentType;
至此我们的第一个页面已经展示在我们面前了,下一期我将继续和大家分享,后端基本框架的搭建,以及数据库的设计。
推荐阅读:小米手环3nfc支持城市