AI答题应用平台之MBTI小程序 - 编程导航 | 一线开发者编程经验和技术实战分享

做完了MBTI小程序，小改了一下页面，用了鱼聪明生成的封面和chatgpt帮我生成的slogan，我很喜欢这个slogan。上效果图。

踩坑与改动

1、在操作的时候发现不知道我的微信开发者工具左上角总会有一个home图标。暂时Taro.hideHomeButton()隐藏了，但是切换页面的时候还是会有一闪而过，除了这种方式之外，还可以自定义导航栏，后续再改吧。

参考链接：https://developers.weixin.qq.com/community/minihome/doc/00084aef46c71801298ba208c54400?blockType=99

2、在开发主页的时候，我观察到皮总的图片是淡蓝色的，于是他给上面的标题和按钮加了一个相同颜色的背景颜色，使得看上去整个背景的样式基本一致，而我是使用子绝父相的定位和z-index调整层叠来进行定位，把AI生成的整一张图片都作为背景了（我生成的图片比例是9:16的）。此处附上我的代码。

import { Image, View } from '@tarojs/components'

import React from 'react'

import { AtButton } from 'taro-ui'

import Taro from '@tarojs/taro'

import cbg from '../../assets/cbg.jpg'

import './index.scss'

const Index = () => {

const goToQuestionPage = () => {

Taro.reLaunch({

url: '/pages/question/index'

})

}

return (

MBTI 性格测试

</View>

<View>

发现真正的自我

</View>

用我们的MBTI测试解锁你的个性秘密!

</View>

<AtButton type='primary' circle className='startBtn' onClick={()=>goToQuestionPage()}>开始测试</AtButton>

</View>

)

}

export default Index

.indexPage {

position: relative;

}

.bgImage {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100vh;

z-index: -1;

}

.content {

position: relative;

z-index: 1;

margin-top: 100px;

.title {

color: white;

text-align: center;

}

.subtitle {

color: white;

text-align: center;

}

.startBtn {

width: 80vw;

margin-top: 80px;

background-color: #1890ff;

border-color: #1890ff;

}

3、在开发主页的时候，发现React引用图片要用import或者require的方式，之前写习惯了直接放路径，结果放进去之后报错了。附上百度搜到的链接。

https://www.cnblogs.com/chenbeibei520/p/10930281.html

4、开发过程中突然想在小程序中突然想清除默认样式，于是我写了

* {

margin: 0;

padding: 0;

}

结果页面报错了，一查发现是不支持，我改成了view之后不报错了

view {

margin: 0;

padding: 0;

}

5、微信开发者工具体验不好的地方在于莫名其妙的报错！！！！所以还是听皮总说的，遇事不决清缓存、重启一下试试。重启大法好啊。