编写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;
}
}