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