01 uniapp/微信小程序 项目day01

一.起步

1.1 配置uni-app开发环境

什么是uni-app，就是基于vue的一个开发框架，可以将我们写的一套代码，同时发布到ios、安卓、小程序等多个平台

官方推荐使用Hbuilderx来写uni-app项目

下载之后可以将预设改为vscode

进入hbuilder插件市场下载scss插件

1.2 初始化uni-app项目

创建一个uni-app项目

如果把小程序项目运行到微信开发者工具：

首先manifest.json配置自己的id

然后工具 设置 运行设置 找到微信开发者工具的安装路径

然后记得我们的开发者工具需要开启端口

然后运行到微信小程序

关闭提示：

以前的做法是直接在config.json里面改

但是我们这个项目是hbuilder渲染过来的，所以应该在这边改，具体在

manifest里面源码视图，最下面的mp-weixin，checkSiteMap为fasle

git管理项目：

首先需要创建一个忽略文件

里面写上两个要忽略的目录

首先我们说过node_modules都是存放的第三方包，再进行传输的时候不需要传来传去，所以直接忽略

第二个文件下面放的其实就是打包出来的文件，我们的微信小程序也就是读取的这里面的文件

但是要注意一点

然后打开目录，运行git init初始化git目录，再 git add .将所有文件放到暂存区，最后 git commit提交一次所有文件

将项目上传到gitee：

创建仓库后通过这两个命令关联项目并把它上传上来

1.3 配置tabBar效果

这次采用不同分支来做，首先创建一个tabbar的分支

快速创建page页，在page上新建页面即可

四个页面出来就去配置tabbar，直接在pages.json里面配置

注意把pages.json还有pages里面的index删除，否则可能渲染不出来

1.4 导航条

直接在page.json修改 globeStyle

注意先把每个页面设置里面的style的标题为空删除才行

1.5 分支提交与合并

作为一个分支如何来提交合并

首先在tabbar分支进行暂存和本地提交

然后将本地的tabbar分支推送到远程仓库保存

这个时候远程仓库只是有了新的分支，但是还没有文件目录

继续和主分支合并

合并之后没有冲突记得push上来

如果有错误记得主分支暂存并提交一次仓库

最后删除tabbar分支即可

二.首页

2.1 配置网络请求

首先创建一个home分支

由于小程序没有axios，而wx.request功能也比较简单，不支持拦截器等一些功能，所以推荐使用一个包 @escook/request-miniprogram来发起网络请求

官方文档：https://www.npmjs.com/package/@escook/request-miniprogram

安包之前记得初始化

然后参考文档进行引用，uni的网络请求是在main.js操作

需要注意的是，uni的顶级对象是uni.不再是wx.

请求和响应拦截器都在main入口文件里面定义

2.2 轮播图

首先获取轮播图数据：

注意这里虽然是回到vue的语法，但是生命钩子还是用的微信的

入口文件配置baseUrl

渲染结构：

目前scss语法跟less一样展现出嵌套关系

2.3 配置小程序分包

首先需要创建分包的目录

然后再pages.json里面和pages同级声明subPackages配置

root表示分包的目录，pages表示分包的每一个页面

注意对象包裹，以及里面都有引号

接下来右键subpkg创建一个页面，注意勾选在pages中注册

注意要先保存上面的才会出现选择分包按钮

2.4 点击轮播图跳转详情页

首先要将我们之前图片外面包裹的view组件改为navigator

注意怎么来跳分包的，直接写路径

然后我要传参数过去

2.5 封装toast

因为我们每次请求数据，回来都会去发一次toast这个api去告诉失败或者成功很麻烦，所以可以直接封装一个在入口文件里面

2.6 分类导航

首先获取数据

渲染结构

接下来做一个编程式导航跳转

注意要跳tabBar只能switchTap

2.7 楼层区域

楼层标题：

首先还是获取楼层的数据

然后渲染上去先渲染标题部分

内容区域：

注意回顾一下vue style要写为｛｝，mode为widthFix表示宽度固定高度自适应

右边怎么来排除第一个

点击每一项进入详情页：

首先创建分包

然后查看一下我们的数据

你会发现接口要跳转的地址跟我们的分包的地址不同，所以这个时候应该在我们获取接口这里做一下处理

这里最重要的是将我们的参数转为数组用？分割然后拼接进我们新的url字符串这一个处理思路

然后将我们之前的代码修改一下作声明式导航

2.8 分支合并与提交

完成了分支的暂存、提交、以及推送之后就回到主分支

注意切换到主分支后，主分支要进行一次暂存，并提交到本地仓库，然后再合并merge，在git push推送就不会冲突

最后删除home分支