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
构建基本主要页面并进行实现相互跳转