01 uniapp/微信小程序 项目day01

  • 01 uniapp/微信小程序 项目day01已关闭评论
  • 138 次浏览
  • A+
所属分类:Web前端
摘要

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


一.起步

1.1 配置uni-app开发环境

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

01 uniapp/微信小程序 项目day01

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

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

1.2 初始化uni-app项目

创建一个uni-app项目

01 uniapp/微信小程序 项目day01

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

首先manifest.json配置自己的id

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

然后运行到微信小程序

01 uniapp/微信小程序 项目day01

关闭提示:

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

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

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

01 uniapp/微信小程序 项目day01

git管理项目:

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

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

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

01 uniapp/微信小程序 项目day01

但是要注意一点

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

将项目上传到gitee:

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

1.3 配置tabBar效果

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

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

1.4 导航条

直接在page.json修改 globeStyle

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

1.5 分支提交与合并

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

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

继续和主分支合并

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

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

最后删除tabbar分支即可

01 uniapp/微信小程序 项目day01

二.首页

01 uniapp/微信小程序 项目day01

2.1 配置网络请求

首先创建一个home分支

01 uniapp/微信小程序 项目day01

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

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

安包之前记得初始化

01 uniapp/微信小程序 项目day01

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

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

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

2.2 轮播图

首先获取轮播图数据:

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

01 uniapp/微信小程序 项目day01

入口文件配置baseUrl

01 uniapp/微信小程序 项目day01

01 uniapp/微信小程序 项目day01

渲染结构:

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

2.3 配置小程序分包

首先需要创建分包的目录

01 uniapp/微信小程序 项目day01

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

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

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

01 uniapp/微信小程序 项目day01

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

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

01 uniapp/微信小程序 项目day01

2.4 点击轮播图跳转详情页

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

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

01 uniapp/微信小程序 项目day01

然后我要传参数过去

01 uniapp/微信小程序 项目day01

2.5 封装toast

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

01 uniapp/微信小程序 项目day01

2.6 分类导航

首先获取数据

01 uniapp/微信小程序 项目day01

渲染结构

01 uniapp/微信小程序 项目day01

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

注意要跳tabBar只能switchTap

01 uniapp/微信小程序 项目day01

2.7 楼层区域

楼层标题:

首先还是获取楼层的数据

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

内容区域:

01 uniapp/微信小程序 项目day01

注意回顾一下vue style要写为{},mode为widthFix表示宽度固定高度自适应

右边怎么来排除第一个

01 uniapp/微信小程序 项目day01

点击每一项进入详情页:

首先创建分包

01 uniapp/微信小程序 项目day01

然后查看一下我们的数据

01 uniapp/微信小程序 项目day01

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

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

01 uniapp/微信小程序 项目day01

01 uniapp/微信小程序 项目day01

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

01 uniapp/微信小程序 项目day01

2.8 分支合并与提交

01 uniapp/微信小程序 项目day01

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

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

01 uniapp/微信小程序 项目day01

最后删除home分支