uni-app——項目day01

配置uni-app開發環境

uni-app快速上手 | uni-app官网

 

创建项目

图中四个划线就是要配置的地方.

选择vue2还是vue3看个人选择。

目录结构

但是现在新版本创建的项目已经没有components目录了,需要自己创建。

项目运行到微信开发者工具

使用git管理项目

node-modules是第三方包,没有必要进行git管理。

/unpackage/dist是运行时自动生成的目录。

tabBar开发

创建tabBar分支

然后使用git branch可以查看当前所在分支。

 

创建tabbar页面 

四个页面创建好后在pages.json里面会自动多四个页面路径。 

配置tabBar效果

"tabBar": {
"selectedColor": "#C00000",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "static/tab_icons/home.png",
"selectedIconPath": "static/tab_icons/home-active.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/tab_icons/cate.png",
"selectedIconPath": "static/tab_icons/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "static/tab_icons/cart.png",
"selectedIconPath": "static/tab_icons/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png"
}
]
}

删除默认的index页面 

1. 在 HBuilderX 中,把 pages 目录下的 index首页文件夹 删除掉

2. 同时,把 page.json 中记录的 index 首页 路径删除掉

3. 为了防止小程序运行失败,在微信开发者工具中,手动删除 pages 目录下的 index 首页文件 夹 4. 同时,把 components 目录下的 uni-link 组件文件夹 删除掉

修改导航栏条的样式效果

1. 打开 pages.json 这个全局的配置文件

2. 修改 globalStyle 节点如下:

{
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "鼠鼠优购",
"navigationBarBackgroundColor": "#C00000",
"backgroundColor": "#FFFFFF"
}
}

分支的提交与合并

首页

创建home分支

配置网络请求

@escook/request-miniprogram - npm (npmjs.com) 

跟着官方文档里面的指引做,可以将配置请求响应拦截器和请求根路径等等。

首先在项目根目录初始化一个npm的包管理配置文件。

git init -y

 安装网络请求的包

npm install @escook/request-miniprogram

然后在main.js里面进行如下配置 

凡是wx.的方法都可以使用uni.代替。

这部分的代码必须要放在ifndef vue3外面,否则微信开发者哪里会有报错,具体就是下面这个

【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError-CSDN博客

//导入网络请求的包
import { $http } from '@escook/request-miniprogram'

uni.$http=$http
//配置根路径
$http.baseUrl='https://api-hmugo-web.itheima.net'
//请求拦截器
$http.beforeRequest=function(options){
  uni.showLoading({
    title:'数据加载中...'
  })
}
//响应拦截器
$http.afterRequest=function(){
  uni.hideLoading()
}

轮播图区域

请求轮播图的数据

const { data : res} 是解构赋值,res可以换,前面的data不能

home.vue中

<template>
  <view>
    home
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //轮播图的数据列表
        swiperList:[]
      };
    }, 
    onLoad(){
      this.getSwiperList()
    },
    methods:{
     async getSwiperList(){
      const {data:res}= await uni.$http.get('/api/public/v1/home/swiperdata')
      //请求失败
      if(res.meta.status!==200){
        return uni.showToast({
          title:'数据请求失败!',
          duration:1500,
          icon: 'none' 
        })
      }
      //请求成功  
      this.swiperList=res.message
      console.log(this.swiperList)
      }
    }
  }
</script>

<style lang="scss">

</style>

渲染轮播图的UI结构

<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item,i) in swiperList" :key="i">
        <view class="swiper-item">
          <image :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<style lang="scss">
swiper{
  height:330rpx;
  .swiper-item,
  image{
    width:100%;
    height:100%;
  }
}
</style> 

 效果如下

配置小程序分包

  "subPackages": [
    {"root":"subpkg",
    "pages":[]}
  ],

 点击轮播图跳转商品详情页

将view组件改为navigator组件,

跳转页面的同时将商品id也传过去

封装uni.$showMsg()方法

分类导航区域

获取分类导航的数据

用到的接口如下

 

渲染分类导航的UI结构

点击跳转分类页面

楼层区域

获取楼层数据

 

渲染楼层标题 

 得到如下

 

渲染楼层图片

  <view class="floor-list">
    <view class="floor-item" v-for="(item,i) in floorList" :key="i">
      <image :src="item.floor_title.image_src" class="floor-title"></image>
      <view class="floor-img-box">
        <!--左侧大图片的盒子-->
        <view class="left-img-box">
          <image :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width+'rpx'}" mode="widthFix"> </image>
        </view>
        <!--右侧4个小图片的盒子-->
        <view class="right-img-box">
          <view class="roght-img-item" v-for="(item2,i2) in item.product_list" :key="i2" v-show="i2 !== 0">
            <image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width+'rpx'}" ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
.floor-title{
  height: 60rpx;
  width: 100%;
  display: flex;
}

.right-img-box{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.floor-img-box{
  display: flex;
  padding-left: 10rpx
}

效果如下 

点击楼层图片跳转到商品列表页面

 用到的返回数据如下所示.这里返回的路径有问题,要对路径做替换。

 

 

合并分支并提交

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/128829.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【神印王座】林鑫和李馨甜蜜接吻,团灭七阶恶魔,温馨结尾

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 深度爆料&#xff0c;《神印王座》80话最新剧情解析。有关李馨与林鑫的爱情故事源于一场争执。那时&#xff0c;两人都年轻气盛&#xff0c;不肯向对方低头。但是&#xff0c;经过一段时间的相处&#xff0c;…

ARM day4

LED灯亮灭控制 .text .global _start _start: 1ldr r0,0x50000a28ldr r1,[r0]orr r1,r1,#(0x3<<4)str r1,[r0] 2ldr r0,0x50006000ldr r1,[r0]bic r1,r1,#(0x3<<20)orr r1,r1,#(0x1<<20)bic r1,r1,#(0x3<<16)orr r1,r1,#(0x1<<16)str r1,[r0]…

java语法:继承与多态

导言: 在Java中&#xff0c;继承和多态是面向对象编程的两个重要概念&#xff0c;它们允许我们创建更加灵活和可扩展的代码。本文主要对继承和多态的语法和一些细节做一个介绍和解释。 目录 导言: 正文&#xff1a; 一.继承 1. 基本语法 2. 继承的特点 3.子类中访问父类…

补坑:Java的字符串String类(1)

常用方法 字符串构造 来看看源码里面String的构造方法 普通字符串 //"hello" 是字符串常量&#xff0c;没有\0标记结尾String str "hello";System.out.println(str);//helloString str2 new String();System.out.println(str2);//没有输出String str3…

“三位一体”超级混沌工程主要特点及功能

“三位一体”超级混沌工程X-Chaos主要包括基础故障编排、业务场景故障编排、演练场景编排、故障库管理、演练场景管理、演练计划管理、演练观测和演练报告等模块&#xff0c;支持对传统架构、云环境以及国产化基础环境的IT系统进行故障演练。本文将介绍混沌工程主要特点及主要功…

归并分治 笔记

归并分治 前置知识&#xff1a;讲解021-归并排序 原理&#xff1a; (1&#xff09;思考一个问题在大范围上的答案&#xff0c;是否等于&#xff0c;左部分的答案 右部分的答案 跨越左右产生的答案(2&#xff09;计算“跨越左右产生的答案”时&#xff0c;如果加上左、右各自…

GeoGebra:数学动画制作工具重磅来袭

【线性代数】线性代数可视化工具&#xff1a;manim manim是之前我跟大家分享的一个线性代数动画制作工具。 但我之前的描述有些许偏差&#xff0c;这里要更正一下&#xff0c;manim不仅限于制作线性代数动画&#xff0c;也可以制作数学其他学科的动画&#xff0c;例如微积分&…

Selenium是什么,带你了解自动化测试的神奇之处

一、使用测试工具 工欲善其事&#xff0c;必先利其器。在开始具体的自动化测试之前&#xff0c;我们需要做好更多的准备&#xff0c;包括以下几个方面&#xff1a; 认识自动化测试 准备自动化测试工具 使用有效的方式 针对具体的测试对象 接下来的第一部分内容&#xff0c;我…

JavaScript如何实现钟表效果,时分秒针指向当前时间,并显示当前年月日,及2024春节倒计时,源码奉上

本篇有运用jQuery&#xff0c;记得引入jQuery库&#xff0c;否则不会执行的喔~ <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <meta name"chenc" content"Runoob"> <met…

人工智能中的基础之一——Python

Python作为一种简洁、易学、功能丰富的高级编程语言&#xff0c;被广泛应用于数据分析、人工智能、Web开发等各个领域。本文将介绍Python的基础语法和使用&#xff0c;帮助读者快速上手Python编程。 一、Python基础语法 1. 变量和数据类型 在Python中&#xff0c;可以使用变…

C#,Python实践,用CodeFormer实现人脸重建(Face Restoration),模糊清晰、划痕修复及黑白上色

无论是自己、家人或是朋友、客户的照片&#xff0c;免不了有些是黑白的、被污损的、模糊的&#xff0c;总想着修复一下。作为一个程序员 或者 程序员的家属&#xff0c;当然都有责任满足他们的需求、实现他们的想法。除了这个&#xff0c;学习了本文的成果&#xff0c;或许你还…

【Unity程序小技巧】如何消除多次Destory带来的性能消耗

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Linux学习第36天:Linux RTC 驱动实验:时间是一条流淌的河

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 RTC就是实时时钟。 本笔记主要学习Linux RTC驱动试验&#xff0c;主要内容包括Linux内核RTC驱动简介、I.MX6U内部RTC分析、RTC时间查看与设置。因为Linux内核已经…

Docker - 常用命令

Docker - 常用命令 帮助命令 docker version # 查看docker版本信息 docker info # 显示docker的系统信息&#xff0c;包括镜像和容器的数量 docker 命令 --help # 帮助命令官网帮助文档&#xff1a;https://docs.docker.com/engine/reference/commandline/cli/ 镜像…

接口测试及常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

【算法与数据结构】77、LeetCode组合

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;如果k是固定的&#xff0c;最直接的方法就是建立k个for循环&#xff0c;将结果全部压入result容器中。…

联合阿里在职测开工程师耗时一个星期写的 【接口测试+自动化接口接口测试详解]

1&#xff1a;json模块的使用  2&#xff1a;接口自动化测试概叙 3&#xff1a;swagger工具能导出接口文档的 4:前端页面: 5:后端: 6:前端和后端的数据交互&#xff08;接口&#xff09;通过接口 7&#xff1a;接口的概念 8&#xff1a;常用的接口方式&#xff08;协议…

自动化测试中的失败截图和存log

如果我们在执行自动化测试的时候&#xff0c;希望能在失败的时候保存现场&#xff0c;方便事后分析。 对于UI自动化&#xff0c;我们希望截图在测试报告中。 对于api自动化&#xff0c;我们希望截取出错的log在测试报告中。 我开始自己蛮干&#xff0c;写了两个出错截图的方法。…

Essential Math for AI:高效的人工智能数学原理晋级读物

今天给大家介绍一本人工智能数学原理书籍&#xff1a;Essential Math for AI。作者是Hala Nelson&#xff0c;一位应用数学领域的美女博士&#xff0c;James Madison University (JMU) 大学的助理教授。 关注微信公众号&#xff1a;人工智能大讲堂&#xff0c;后台回复【ema】获…

【Android】Debug时禁用主线程ANR限制

ANR全称Application Not Response&#xff0c;指主线程超过5s无响应&#xff0c;应用会自动退出 由于这个线程&#xff0c;如果我们给主线程加了断点&#xff0c;就会触发ANR&#xff0c;导致调试时应用退出 这样调试起来会非常麻烦&#xff0c;其实对于Debug应用&#xff0c…