编写MBTI小程序第一版(初始化项目、编写首页代码)

源代码在这里嗷 ✈

1. 初始化项目 使用taro + ts

初始化项目后，安装依赖

1
npm install

正常启动项目，全局入口app.ts处引入taro ui 组件
1
import 'taro-ui/dist/style/index.scss'

2. 编写初始化页面代码

初始化前端index首页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { View, Image } from "@tarojs/components";
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import { AtButton } from "taro-ui";
import homeBg from "../../ImglistDir/homeBg.png";

import "./index.scss";
import GlobalFooter from "../../components/GlobalFooter";

export default () => {
  return (
    <View className="homePage">
      <View className="oneTitle">MBTI 性格测试</View>
      <View className="twoTitle">
        只需 2 分钟，就能非常准确的描述出你是谁，以及你的性格特点
      </View>
      <AtButton className="txtBtn" type="primary" circle>
        开始测试
      </AtButton>
      <Image className="homeBg" src={homeBg} />
      <GlobalFooter />
    </View>
  );
};

3. 编写相关样式

编写相关样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.homePage {
  background-color: #A2C7D7;

  .oneTitle {
    text-align: center;
    color: red;
    font-size: 6vw;
    margin-top: 10px;
  }

  .twoTitle {
    color: darkgoldenrod;
    font-size: 4vw;
    padding-top: 5px;
  }

  .txtBtn {
    width: 60vw;
  }
}

4. 导入微信开发者工具, 选择测试号

导入微信开发者工具

5. 编译后就能出现结果了

出现结果