uniapp创建小程序
uniapp创建小程序
一、安装Hbuilder和对应基本操作
安装Hbuilder这里就不在赘述。
(一)、插件安装:
如果考虑到后续需要使用Scss,可以前往插件市场进行搜索安装,浏览器会提示我们是否需要打开对应的HbuilderX,然后进入应用进行安装。
(二)、快捷建方式修改
当然其中也包括了开发工具的主题设置。
(三)、修改编辑器的基本设置
通过工具中的设置,可视化配置,也可以在 Setting.json 文件中进行设置,这种配置在网上可以自行找。
(四)、新建uniapp项目
通过新建-项目来的这里,选择对应的存放路径还有对应的vue版本。
(五)、目录结构
│─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]