小程序开发神兵利器-Taro实战-02

2020年04月01日 08:24:50   [来源:互联网]   [阅读:1024]
字体:【

写在前面

上一篇文章我们运行了第一个helloworld程序,为了后续功能开发,我们需要对目录结构进行相应的改造,并完成第一个页面的结构部分。

项目改造

taro配置修改

这一步的目的是为了以后为小程序云开发留出余地,修改的同时别忘了将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'),}

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/目录下,文件结构修改

├── 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库——懒人的逻辑就是能用成熟的绝不自己写

开发者工具选择项目刚才新建的app目录导入项目


第一个组件

新建文件 /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;


小程序开发神兵利器-Taro实战-02


至此我们的第一个页面已经展示在我们面前了,下一期我将继续和大家分享,后端基本框架的搭建,以及数据库的设计。

推荐阅读:手机刚买来要注意什么


相关新闻
新闻焦点
近年来,随着中国经济快速发展,化妆品市场呈现出一片红火景象,中国已成为全球化妆品消费第二大国。我国化妆品市场前期虽然起步较晚,但潜力不容小觑,许[更多]
近日,新浪与近20家全国头部地面频道、王牌民生节目、优秀的融媒体平台及自媒体平台签订融媒体深度战略合作协议,并宣布正式启动“温暖70城”活动。合[更多]
最近护肤界掀起了一股“国潮风”,最本人也对一款少女杀手面膜动心了,没管住自己的手入了名膜壹号的梦幻面膜。名膜壹号的面膜一直有不少小红书护肤达人的[更多]
【今年平均每人花44元看电影】截至12月14日,据灯塔专业版数据显示,国内累计电影票房已达609.6亿元,超过了去年全年606.88亿元的票房总[更多]
关于我们 | 联系我们 | 老版地图 | 网站地图 | 版权声明
版权所有:科技杂谈网未经授权禁止复制或建立镜像
相关作品的原创性、文中陈述文字以及内容数据庞杂本站无法一一核实,如果您发现本网站上有侵犯您的合法权益的内容,请联系我们,本网站将立即予以删除!
中国互联网违法和不良信息举报中心 网络警察报警岗亭