Java初学小程序编写MBTI项目mini版

编写MBTI小程序第一版

原文链接,前端初学者，小程序初学者，欢迎在我的博客里进行评论

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

初始化项目后，安装依赖在这里插入代码片

npm install

正常启动项目，全局入口app.ts处引入taro ui 组件

import 'taro-ui/dist/style/index.scss'

2. 编写初始化页面代码

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. 编写相关样式

.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. 编译后就能出现结果了