小程式開發神兵利器-Taro實戰-02

首頁>技術>攻城獅來襲2020-01-31 17:13

小程式開發神兵利器-Taro實戰-02

寫在前面

上一篇文章我們運行了第一個helloworld程式，為了後續功能開發，我們需要對目錄結構進行相應的改造，並完成第一個頁面的結構部分。

專案改造taro配置修改

這一步的目的是為了以後為小程式雲開發留出餘地，修改的同時別忘了將miniprogram放到.gitignore中

專案根目錄下建立app資料夾，將專案根目錄下的project.config.json移動到app目錄下

並修改 project.config.json

# 將&#34;miniprogramRoot&#34;: &#34;./dist&#34;,# 修改為&#34;miniprogramRoot&#34;: &#34;miniprogram/&#34;,

修改config/index.js

# 將outputRoot: &#39;dist&#39;# 修改為outputRoot: &#39;app/miniprogram&#39;# 新增別名，在後續開發中直接使用別名匯入模組alias: {    &#39;~assets&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/assets&#39;),    &#39;~services&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/services&#39;),    &#39;~components&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/components&#39;),    &#39;~styles&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/styles&#39;),    &#39;~config&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/config&#39;),    &#39;~store&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/store&#39;),    &#39;~utils&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/utils&#39;),    &#39;~schema&#39;: path.resolve(__dirname, &#39;..&#39;, &#39;src/schema&#39;),}

tsconfig.json修改

compilerOptions: {    ...,    # 新增    &#34;paths&#34;: {        &#34;~assets/*&#34;: [&#34;src/assets/*&#34;],        &#34;~components/*&#34;: [&#34;src/components/*&#34;],        &#34;~config/*&#34;: [&#34;src/config/*&#34;],        &#34;~store/*&#34;: [&#34;src/store/*&#34;],        &#34;~styles/*&#34;: [&#34;src/styles/*&#34;],        &#34;~utils/*&#34;: [&#34;src/utils/*&#34;],        &#34;~services/*&#34;: [&#34;src/services/*&#34;],        &#34;~pages/*&#34;: [&#34;src/pages/*&#34;],        &#34;~schema/*&#34;: [&#34;src/schema/*&#34;]    }}

新增一些資料夾

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 &#39;@tarojs/taro&#39;;import { View } from &#39;@tarojs/components&#39;;import { CSSProperties } from &#39;react&#39;;interface ChunkProps {  style?: CSSProperties;}interface ChunkState {}class Chunk extends Component&lt;ChunkProps, ChunkState&gt; {  render() {    const { children, style } = this.props;    return (      &lt;View        style={{          background: &#39;#feffff&#39;,          borderRadius: &#39;32rpx&#39;,          padding: &#39;32rpx&#39;,          ...style,        }}      &gt;        {children}      &lt;/View&gt;    );  }}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 &#39;react&#39;;import Taro, { Component, Config } from &#39;@tarojs/taro&#39;;import { View, Image, Navigator, Text } from &#39;@tarojs/components&#39;;import Chunk from &#39;~components/chunk&#39;;import &#39;./index.scss&#39;;interface IndexProps {}class Index extends Component&lt;IndexProps, { showFloatLayout: boolean }&gt; {  config: Config = {    navigationBarTitleText: &#39;攢局&#39;,    enablePullDownRefresh: true,    navigationBarBackgroundColor: &#39;#ecedee&#39;,    backgroundColor: &#39;#ecedee&#39;,  };  render() {    return (      &lt;View className=&#34;home&#34;&gt;        &lt;View className=&#34;header&#34;&gt;          &lt;Chunk            style={{              backgroundRepeat: &#39;no-repeat&#39;,              backgroundSize: &#39;cover&#39;,              backgroundImage: &#39;url(https://cdn/cuanju/icon/bg.svg)&#39;,              display: &#39;flex&#39;,              justifyContent: &#39;center&#39;,              flexDirection: &#39;column&#39;,            }}          &gt;            &lt;View              style={{                marginTop: &#39;80rpx&#39;,                display: &#39;flex&#39;,                justifyContent: &#39;center&#39;,                alignItems: &#39;center&#39;,                fontSize: &#39;larger&#39;,              }}            &gt;              &lt;Text style={{ padding: &#39;4rpx&#39; }}&gt;共攢了&lt;/Text&gt;              &lt;Text                style={{                  backgroundColor: &#39;#fdf1d2&#39;,                  color: &#39;#d3bd46&#39;,                  padding: &#39;0rpx 10rpx&#39;,                }}              &gt;                0              &lt;/Text&gt;              &lt;Text style={{ padding: &#39;4rpx&#39; }}&gt;個局&lt;/Text&gt;            &lt;/View&gt;            &lt;Navigator              url=&#34;/subPages/home/wallet&#34;              style={{                marginTop: &#39;60rpx&#39;,                color: &#39;#f7eab8&#39;,                display: &#39;flex&#39;,                justifyContent: &#39;center&#39;,                alignContent: &#39;center&#39;,                borderRadius: &#39;4rpx&#39;,              }}            &gt;              &lt;Text style={{ margin: &#39;12rpx&#39;, fontSize: &#39;larger&#39; }}&gt;¥&lt;/Text&gt;              &lt;Text style={{ fontSize: &#39;80rpx&#39; }}&gt;{0}&lt;/Text&gt;            &lt;/Navigator&gt;            &lt;View              style={{                display: &#39;flex&#39;,                justifyContent: &#39;space-between&#39;,                alignContent: &#39;center&#39;,                marginTop: &#39;60rpx&#39;,                padding: &#39;20rpx 80rpx&#39;,                fontSize: &#39;larger&#39;,              }}            &gt;              &lt;Navigator                url=&#34;/subPages/project/index&#34;                style={{                  display: &#39;flex&#39;,                  justifyContent: &#39;center&#39;,                  alignItems: &#39;center&#39;,                }}              &gt;                &lt;Image                  style={{ width: &#39;50rpx&#39;, height: &#39;50rpx&#39; }}                  src=&#34;https://cdn/cuanju/icon/record.svg&#34;                /&gt;                &lt;Text&gt;攢局記錄&lt;/Text&gt;              &lt;/Navigator&gt;              &lt;Navigator                url=&#34;/subPages/home/wallet&#34;                style={{                  display: &#39;flex&#39;,                  justifyContent: &#39;center&#39;,                  alignItems: &#39;center&#39;,                }}              &gt;                &lt;Image                  style={{ width: &#39;50rpx&#39;, height: &#39;50rpx&#39; }}                  src=&#34;https://cdn/cuanju/icon/wallet.svg&#34;                /&gt;                &lt;Text&gt;去提現&lt;/Text&gt;              &lt;/Navigator&gt;            &lt;/View&gt;          &lt;/Chunk&gt;        &lt;/View&gt;        &lt;View style={{ padding: &#39;30rpx 0rpx&#39; }}&gt;          &lt;Chunk&gt;            &lt;Navigator              style={{                display: &#39;flex&#39;,                justifyContent: &#39;center&#39;,                alignItems: &#39;center&#39;,              }}              url=&#34;/subPages/part/index&#34;            &gt;              &lt;Image                style={{ width: &#39;100rpx&#39;, height: &#39;100rpx&#39;, margin: &#39;10rpx&#39; }}                src=&#34;https://cdn/cuanju/icon/part.svg&#34;              /&gt;              &lt;View style={{ width: &#39;100%&#39; }}&gt;                &lt;View style={{ fontSize: &#39;larger&#39; }}&gt;攢局&lt;/View&gt;                &lt;View style={{ fontSize: &#39;smaller&#39; }}&gt;報名活動，自動統計，簡單高效&lt;/View&gt;              &lt;/View&gt;              &lt;Image                style={{ width: &#39;80rpx&#39;, height: &#39;80rpx&#39;, margin: &#39;10rpx&#39; }}                src=&#34;https://cdn/cuanju/icon/right.svg&#34;              /&gt;            &lt;/Navigator&gt;          &lt;/Chunk&gt;        &lt;/View&gt;      &lt;/View&gt;    );  }}export default Index as ComponentType;

至此我們的第一個頁面已經展示在我們面前了，下一期我將繼續和大家分享，後端基本框架的搭建，以及資料庫的設計，如果大家有興趣也可以微信搜尋小程式 “攢局” 檢視真機執行效果，並且真機上已經有攢局的最基本的功能：釋出、加入、收款、提現等最基本的功能了，歡迎大家嘗試並提出寶貴意見

資料結構

∨ Ubuntu 中的 root 使用者：你應該知道的重要事情

劇多

小程式開發神兵利器-Taro實戰-02

Pages

資料結構