耗时一天，我用AI开发了AI小程序

小码哥从事前后端开发近十年，但是随着技术的更新迭代，有时候没有时间和精力去优化UI、实现一些前后端功能，以及解决一些bug。特别是我想开发小码哥AI的移动端，但觉得自己没有那么多时间去研究移动端了，准备放弃了，后来尝试了国产AI（后面会介绍），测试了一下，完全能满足我的开发需求，瞬间感觉我又行了。

AI一边帮我写代码，我一边刷剧，不吹牛P的，可以看看我的成果。我使用uniapp框架，一举多得，可以发布微信小程序、h5页面、手机端app，目前微信小程序、h5都是已经跑通了，后续测试手机端app，后端统一使用springboot框架，统一管理和维护，后台试了试国产的AI大模型，直接帮我开发前端，以及完成和后端的对接。小码哥承诺：

目前一句话改图，免费、免费、免费！ 如果访问不了，可能是浏览器自动加了https，把https改成http即可。

01、移动端

02、PC端

我使用了vue3款框架，开发起来还是比较顺畅的

这是原图

这是AI修改后的图，提示词为：改成红色短发

效果

这是原图

这是效果图，出图时间大概是20秒左右。

03、代码部分

我使用了deepseek和通义灵码，大家可以去对比一下，各有各的优势，比如给我实现一个手机号和验证码登录的页面，我的提示词如下：我在使用uniapp开发，帮我优化一下UI和功能，第一，点击获取验证码时，必须要输入手机号，手机号必须要校验正确性，点击注册时，必须要输入手机号和验证码，请给我完整代码，方便我复制。

完整代码如下：

javascript 复制代码

<template>
 <view class="register-container">
    <view class="register-content">
      <uni-forms ref="registerForm" :model="formData">
        <uni-forms-item label="手机号" name="phone">
          <uni-easyinput type="number" v-model="formData.phone" placeholder="请输入手机号" />
        </uni-forms-item>
        <uni-forms-item label="验证码" name="code">
          <view class="code-container">
            <uni-easyinput type="number" v-model="formData.code" placeholder="请输入验证码" />
            <button :disabled="isCounting" @click="getVerificationCode" class="code-button">{{ codeButtonText }}</button>
          </view>
        </uni-forms-item>
        <button type="primary" @click="submitForm" class="submit-button">注册</button>
      </uni-forms>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { get,post } from '/common/api/request.js';

const formData = reactive({
  phone: '',
  code: ''
});

// 校验手机号格式
const isPhoneValid = computed(() => {
  return /^1[3456789]\d{9}$/.test(formData.phone);
});



const useCountdown = (seconds) => {
  const isCounting = ref(false);
  const countdownText = ref(seconds);

  const startCountdown = () => {
    isCounting.value = true;
    countdownText.value = seconds;

    const interval = setInterval(() => {
      countdownText.value--;
      if (countdownText.value <= 0) {
        clearInterval(interval);
        isCounting.value = false;
      }
    }, 1000);
  };

  return {
    isCounting,
    countdownText,
    startCountdown
  };
};

const { isCounting, countdownText, startCountdown } = useCountdown(60);

const codeButtonText = computed(() => isCounting.value ? `${countdownText.value}秒后重试` : '获取验证码');


const smsVO = reactive({
	smsCode: {
		mobile: '',
		scene: 21
	},
	loginSms: {
	  mobile: '',
	  code: ''
	}
})


const getVerificationCode = async () => {
  smsVO.smsCode.mobile = formData.phone;
  if (!formData.phone) {
    uni.showToast({
      title: '手机号不能为空',
      icon: 'none'
    });
    return;
  }

  if (!isPhoneValid.value) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none'
    });
    return;
  }

  console.log("isCounting value:", isCounting.value);
  if (!isCounting.value) {
    startCountdown();
    try {
      const response = await post('/system/auth/send-sms-code', smsVO.smsCode);
      if (response.code === 0) {
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '验证码发送失败',
          icon: 'none'
        });
      }
    } catch (error) {
      console.error("发送验证码失败", error);
      uni.showToast({
        title: '验证码发送失败，请重试',
        icon: 'none'
      });
    }
  }
};

// 注册提交
const submitForm = async () => {
  if (!formData.phone) {
    uni.showToast({
      title: '手机号不能为空',
      icon: 'none'
    });
    return;
  }

  if (!isPhoneValid.value) {
    uni.showToast({
      title: '手机号格式不正确',
      icon: 'none'
    });
    return;
  }

  if (!formData.code) {
    uni.showToast({
      title: '验证码不能为空',
      icon: 'none'
    });
    return;
  }
	console.info('smsVO.smsCode',smsVO.smsCode);
    smsVO.loginSms.mobile = formData.phone;
    smsVO.loginSms.code = formData.code;
	const response = await post('/system/auth/sms-login', smsVO.loginSms);

	if (response && response.code == 0) {
		uni.showLoading({
			title: '注册登录中...'
		});
		const { accessToken, expiresTime, refreshToken, userId } = response.data;
		uni.setStorageSync('token', accessToken);
		uni.setStorageSync('expiresTime', expiresTime);
		uni.setStorageSync('refreshToken', refreshToken);
		uni.setStorageSync('userId', userId); // 缓存 token
		
		// 缓存用户头像和昵称
		
		uni.setStorageSync('avatarUrl', 'https://www.cells88.com/wp-content/uploads/2023/11/2023110300595934.png');//使用网络图片
		uni.setStorageSync('nickName', userId);
		
		
		// 导航到标签栏页面
		uni.switchTab({
			url: '/pages/tabbar/index/index'
		});
	} else {
	  console.log('登录失败:', response);
	  uni.showToast({
	    title: response.msg,
	    icon: 'none'
	  });
	}
};
</script>

<style lang="scss">
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;

  .register-content {
    width: 80%;
    max-width: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .code-container {
      display: flex;
      align-items: center;

      .code-button {
        margin-left: 10px;
        padding: 5px 10px;
        background-color: #007aff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;

        &:disabled {
          background-color: #ccc;
          cursor: not-allowed;
        }
      }
    }

    .submit-button {
      width: 100%;
      margin-top: 20px;
    }
  }
}
</style>

这只是一个简单的例子，实现的效果如下：

如果大家感兴趣，文末点击名片，欢迎一起交流，后续我将逐步分享我是如何实现AI功能的。

耗时一天，我用AI开发了AI小程序

01、移动端

02、PC端

03、 代码部分

03、代码部分