一.起步

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分支

01 uniapp/微信小程序 项目day01的更多相关文章

  1. uniapp/微信小程序 项目day03

    一.商品列表 1.1 获取数据 首先能够进入商品列表的途径 传的数据有 了解了这个之后就可以开始了,先创建分支 创建编译模式,并分配初试数据 这个时候就可以获取数据了 需要的数据 所以在发起请求之前需 ...

  2. 05 uniapp/微信小程序 项目day05

    ​ 一.登录与支付 1.1 登录 1.1.1 条件判断 当我们点击结算应当进行条件判断 第一个如果没有勾选商品 第二个是没选择地址 第三个是未登录 1.1.2 页面布局 应该有两个页面,一个点击登录, ...

  3. 04 uniapp/微信小程序 项目day04

    一.加入购物车 1.1 购物车数量 先创建购物车git 这里的数据肯定要做全局数据,因为不能只在details这个页面去操作他,他到底有几个也是由购物车页面获取到的 所以需要vuex 创建store文 ...

  4. 02 uniapp/微信小程序 项目day02

    一.分类 1.1 页面布局 首先创建cate的分支 定义基本结构,因为是两个需要滚动的区域,所以这里要用到组件 scroll 这个组件如果是y scroll那就要固定高度,x scroll那就要固定宽 ...

  5. 使用uni-app(Vue.js)创建运行微信小程序项目步骤

    使用uni-app(Vue.js)开发微信小程序项目步骤 1. 新建一个uni-app项目   创建完成后的目录结构 2. 打开微信小程序开发工具端的端口调试功能 3. 运行创建的项目 效果

  6. 微信小程序项目转换为uni-app项目

    一.它是谁? [miniprogram-to-uniapp]转换微信小程序"项目为uni-app项目.原则上混淆过的项目,也可以进转换,因为关键字丢失,不一定会完美. 二.它的原理是什么? ...

  7. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

  8. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

  9. 高仿Readhub小程序 微信小程序项目【原】

    # News #### 项目介绍微信小程序项目涉及功能 https://gitee.com/richard1015/News https://github.com/richard1015/News 高 ...

随机推荐

  1. Timer和ScheduledThreadPoolExecutor的区别

    Timer 基于单线程.系统时间实现的延时.定期任务执行类.具体可以看下面红色标注的代码. public class Timer { /** * The timer task queue. This ...

  2. Linux操作系统(7):rpm包管理和yum软件包在线管理

    一.rpm 包的管理 介绍:一种用于互联网下载包的打包及安装工具,它包含在某些 Linux 分发版中.它生成具有.RPM 扩展名的文件.RPM 是 RedHat Package Manager(Red ...

  3. 在矩池云使用Disco Diffusion生成AI艺术图

    在 Disco Diffusion 官方说明的第一段,其对自身是这样定义: AI Image generating technique called CLIP-Guided Diffusion.DD ...

  4. 阈值PSI代码

    阈值PSI 若交集数量超过某个给定阈值时,允许分布式的各个参与方在自己集合中找到交集,且除了交集外,得不到其他额外信息. 实现论文: Multi-Party Threshold Private Set ...

  5. C++类中的常成员和静态成员

    常变量.常对象.常引用.指向常对象或常变量的指针等在定义时都使用了const关键字,这是C++语言引入的一种数据保护机制,称为const数据保护机制.例如通过const关键字主动地将被调函数形参进行限 ...

  6. Java对接拼多多开放平台API(加密上云等全流程)

    前言 本文为[小小赫下士 blog]原创,搬运请保留本段,或请在醒目位置设置原文地址和原作者. 作者:小小赫下士 原文地址:Java对接拼多多开放平台API(加密上云等全流程) 本文章为企业ERP(I ...

  7. 网站加了CDN后,字体图标报错Access-Control-Allow-Origin

    这两天将自己做的网站(PM老猫)上线了,上线后发现因为之前购买的服务器带宽较小,第一次打开网站页面就会比较慢,想着给网站加了个CDN,让静态文件直接通过CDN访问.网上一找发现可以白嫖的CDN服务挺多 ...

  8. 使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_132 最近疫情比较严重,很多公司依靠阿里旗下的办公软件钉钉来进行远程办公,当然了,钉钉这个产品真的是让人一言难尽,要多难用有多难用 ...

  9. JUC源码学习笔记4——原子类,CAS,Volatile内存屏障,缓存伪共享与UnSafe相关方法

    JUC源码学习笔记4--原子类,CAS,Volatile内存屏障,缓存伪共享与UnSafe相关方法 volatile的原理和内存屏障参考<Java并发编程的艺术> 原子类源码基于JDK8 ...

  10. MySQL8.0错误日志Error log

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 理论知识 错误日志内容 错误日志包含mysqld启动和关闭的时间信息,还包含诊断消息,如服务器启动和关闭期间以及服务器运行 ...