(一)使用AI、CodeFun开发个人名片微信小程序

0.准备

  1. AI代码助手:javashop.aptus.xin(网站接入了文心一言,可以直接使用)
  2. UI 设计稿智能生成源代码:CodeFun,网站地址(CodeFun – UI 设计稿智能生成源代码)
  3. HBuilderX:网站地址(简介 – HBuilderX 文档 (dcloud.net.cn))这是一个代码编辑器
  4. 微信开发者工具:网站地址(下载 / 开发版更新日志 (qq.com))微信小程序开发工具
  5. 微信小程序:准备一个微信小程序AppID

HBuilderX、微信开发者工具网上有安装部署文档,可以自己搜索
微信小程序自己先注册一下
持续更新中…

1.创建uniapp项目

本地打开HBuilderX编辑器,点击【新建项目】开始创建

(一)使用AI、CodeFun开发个人名片微信小程序_第1张图片

(一)使用AI、CodeFun开发个人名片微信小程序_第2张图片

2.运行微信小程序项目

(一)使用AI、CodeFun开发个人名片微信小程序_第3张图片

(一)使用AI、CodeFun开发个人名片微信小程序_第4张图片

(一)使用AI、CodeFun开发个人名片微信小程序_第5张图片

此时你已经拥有一个uniapp项目了

3.配置tabbar底部导航栏

在pages.json下配置tabbar导航栏

(一)使用AI、CodeFun开发个人名片微信小程序_第6张图片

代码:

// 配置tabbar导航栏
		"tabBar": {
			"borderStyle": "black",
			"selectedColor": "#2c2c2c",
			"color": "#444444",
			"list": [
				{
					"pagePath": "pages/index/index",
					"iconPath": "static/tabbar/home-no.png",
					"selectedIconPath": "static/tabbar/home.png",
					"text": "名片"
				},{
					"pagePath": "pages/my/my",
					"iconPath": "static/tabbar/my-no.png",
					"selectedIconPath": "static/tabbar/my.png",
					"text": "我的"
				}
			]
		},

效果演示:

(一)使用AI、CodeFun开发个人名片微信小程序_第7张图片

 查阅更多设计方案(云岩福兴信息科技工作室-定制化开发 (aptus.xin))

你可能感兴趣的:(个人名片微信小程序,uni-app,微信小程序,团队开发)