uniapp创建小程序

uniapp创建小程序

https://www.dcloud.io/

一、安装Hbuilder和对应基本操作

​ 安装Hbuilder这里就不在赘述。

(一)、插件安装:

​ 如果考虑到后续需要使用Scss,可以前往插件市场进行搜索安装,浏览器会提示我们是否需要打开对应的HbuilderX,然后进入应用进行安装。

(二)、快捷建方式修改

​ 当然其中也包括了开发工具的主题设置。

(三)、修改编辑器的基本设置

​ 通过工具中的设置,可视化配置,也可以在 Setting.json  文件中进行设置,这种配置在网上可以自行找。

(四)、新建uniapp项目

​ 通过新建-项目来的这里,选择对应的存放路径还有对应的vue版本。

(五)、目录结构

参考地址:https://uniapp.dcloud.net.cn/tutorial/project.html

│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源都应存放于此目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
(六)、把项目运行到微信开发者工具
1、填写自己对应的微信AppID:

2、在HBuilderX中,配置"微信开发者工具"的安装路径:

​ 在工具-设置中点击,提示:鼠标右击开发者工具打开文件所在位置。

3、在微信开发者工具中,通过 设置 --> 安全设置 面板,开启“微信开发者工具”的服务端口:

4、在HbuilderX中打开微信开发者工具

​ 点击菜单栏:运行 --> 运行到小程序模拟器 --> 微信开发者工具,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:

注意:使用对应代码的源时uniapp,不要直接在小程序中修改

比如我们需要配置小程序的project.config文件:

补充,如果微信开发者工具出现报错:routeDone with a webviewId 3 that is not the current page,把默认生成的页面内容删了

(七)、使用Git管理项目
1、首先构建忽略文件:.gitignore 参考内容:

​ 想要更为完善的可以上网去找来复用。

# 忽略依赖和打包文件
/node_modules
/unpackage/dist

注意:由于我们的 unpackage 目录中唯一的目录dist被忽略了,所以 unpackage 目录 也不会被Git追踪,所以添加一个占位文件:.gitkeep

2、初始化git

​ 怎么安装git和右击使用指令就不赘述了。

# 项目根目录
git init
3、将所有文件都添加到暂存区
git add .
4、提交修改到本地仓库
git commit -m "你的注释"
5、绑定远程仓库——gitee

​ 怎么注册码云的账号和操作不在赘述。推荐没有git基础的可以跳过或者自己找一个入门博客。

# 创建一个远程空仓库然后复制对应指令:
cd existing_git_repo		# 这里是说你自己到你的根目录
git remote add origin 你的地址	# 绑定远程仓库
git push -u origin "master"	# 推送到master分支

​ 操作完成后就可以到gitee刷新看看了。如果你自己初始化了仓库没有这个指令,把这里的地址换成你的克隆下载地址

二、开发骨架构建

(一)、tabBar
1、创建tabBar分支

​ 这里看个人习惯,没有也可以不必创建。 只是一定要注意,创建多个分支之后一定要知道自己当前操作的分支

# 创建 tabbar 分支
git branch tabbar

# 选择 tabbar 分支
git checkout tabbar

# 简化指令,也可以防止你忘记切换分支
git checkout -b tabbar
2、创建tabBar页面

​ 注意选择自己需要的 SCSS 还有勾选上对应的 创建同名目录 和 在pages.json中注册。依次创建:home、my、cate、cart几个页面。

3、放置静态资源

​ 这里的静态资源主要是对应的图标,如果需要可以前往:https://www.iconfont.cn/

​ 可以从里面截取一些图片用于测试,具体使用可以找教程。

4、配置tabber

对应配置与pages.json中的 "globalStyle" 同级,可以把默认生成的page删除掉

//这个就是一个参考
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/index/index",						//对应页面的地址
				"text": "首页",										   //对应页面的名称
				"iconPath": "static/tab_icons/home.png",				//对应页面的图标
				"selectedIconPath": "static/tab_icons/home-active.png"	//对应页面选中的图标
			},
            //以此类推继续配置
            {}....
		],
	}

对应配置后的效果:

5、配置导航栏

​ 该配置通过位于pages.json中

	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	},
6、补充

​ 当页面顶部标题不显示,可能是因为编译器创建页面时自动添加了样式:

	{
		"path" : "pages/home/home",
		"style" : 
		{
			// "navigationBarTitleText" : "",		//就是这个都注释了或者删除
			"enablePullDownRefresh" : false
		}
	},
7、分支的提交与合并
# 提交到本地仓库
git add .
git commit -m "完成了 rabBar 的开发"

# 将本地分支推送到远程仓库进行保存
git push -u origin tabbar

# 将本地的 tabbar 分支合并到本地的master分支
git checkout master
git merge tabbar

# 更新master
git push

# 删除本地的tabbar分支
git branch -d tabbar

​ 这里多提一下,如果后续想要改对应tabbar的代码,可以创建一个对应分支在进行绑定修改:

# 更新本地仓库
git fetch origin

# 通过远程分支在本地构建一个分支
git checkout -b [name] origin/[name]
posted @ 2024-10-12 00:06  如此而已~~~  阅读(996)  评论(0编辑  收藏  举报
//雪花飘落效果