uniapp与hbuilder介绍、首页布局

• css中的变量
  • --变量名:值;
  • var(--变量名,默认值)
• 分包的概念
  • 能让一个整体的程序分成多分，提高第一次加载的速度，能解耦
  • 小程序对分包的规定是：
    • 不管是主包还是分包，单个都不能超过2m，总共不能超过20m
• 如何使用分包？
  • 在app.json里，添加一个配置，这个配置跟pages这些同级

"subpackages":  [
    {
        "root": "分包的根目录",
        "pages": [
            // 代表分包的页面
        ]
    }
]

- 例

"subpackages":  [
    {
        "root": "packageA",
        "pages": [
           "pages/cat/cat"
        ]
    }
]

• 独立分包：
  • 就是可以独立打开，不依赖主包
  • 如何变成独立分包？
    • independent: true
• 分包的使用原则：
  • 主包不能访问分包的资源，但是分包可以访问主包里的资源
  • 分包之间的资源互相不能访问
  • 独立分包不能访问主包的资源
• 分包预下载：
  • 是指可以设置进到某个页面后预先下载某些分包
  • 约束：预下载的分包加起来不能超过2m
  • 通过配置文件写预下载，跟subpackage平级的位置写一个

"preloadRule": {
    "页面路径": {
        "network": "all",
        "packages": ["包1","包2".....]
    }
}

• 混入：
  • behaviors
    • 可以把混入对象混入到当前组件里
  • 语法
    • 先定义一个混入对象，一般放到一个js文件里，并进行暴露

module.exports = Behavior({
    lifetimes: {
        
    },
    data: {
        
    },
    methods: {
        
    }
})

    - 组件里如何用？
        - 导入

const 对象 = require('混入对象的路径')

        - 注册

behaviors: [ 对象 ]

- 混入的规则是，生命周期钩子会按顺序依次调用，先混入再自己，如果是data和methods有重复的，就后面的覆盖前面的，有自己的用自己的

• 插槽
  • 跟vue里的差不多

<slot></slot>

- 传递

<组件>
    传递给默认插槽的内容
</组件>

- 小程序默认只允许一个插槽，要多个插槽，得给这个组件开启多个插槽的设置

options: {
    mutilpleSlots: true
}

- 小程序里的具名的定义跟vue一样，都是加name属性

<slot name="名字"></slot>

- 传递跟vue的废弃语法一样

<view slot="名字"></view>

项目介绍

• 见 项目接口与设计稿.md

uni-app介绍

• 是 Dcloud组织提供的一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台
• 官方文档地址：
• • https://uniapp.dcloud.net.cn/

开发工具 - HBuilder

官网

• 如果要使用 uni-app，官方推荐使用 HBuilder 来开发项目

• HBuilder 是一款代码编辑工具，它功能非常强大，特别是提示功能，强大到令人发指

• 先下载

• 安装

• • 它是一款绿色软件，即不用安装，只要解压到任意位置，即可使用

• 切换主题

  

• 切换快捷键方案

  

HBuilder插件安装 - scss支持

新建uni-app项目

uni-app目录结构说明

一个 uni-app 项目，默认包含如下目录及文件：

├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、应用级生命周期函数等
├─manifest.json         打包的配置、可以配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息（类似于之前的app.json，全局配置）

• main.js里条件编译的说明

import App from './App'
 
// 条件编译命令：意思，判断没有定义 Vue3就执行 #ifndef和#endif里的代码
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif
 
// 如果定义了vue3，就执行下面的代码
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

• • 因为我们此时用的是vue2，所以下面的那段代码完全可以删掉

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

1. 必须填写微信开发者appid

   

2. 打开微信开发者工具的设置

   

3. 打开服务端口（只要打开一次即可，以后都不用再打开）

   

4. 来到HBuilder配置微信开发者工具的位置（只要配置一次）

   

   

• 然后点击运行即可

  

• 后面每次改完代码就不用点运行，而是写完代码保存，即可去微信开发者工具里看效果

使用git管理项目

• 来到项目根目录新建.gitignore文件，内容如下

# 忽略 node_modules 目录
/node_modules
/unpackage/dist

• 初始化仓库

git init

• 初次提交

git add .
git commit -m'初始化完成'

• 托管到码云
• • 来到 gitee ，新建仓库，然后和本地仓库做关联，然后推送到远程仓库

git remote add origin 地址
git push -u origin "master"

tabbar - 分支

• 准备 tabbar分支

git checkout -b tabbar

tabbar - 四个页面

• 来到 pages，右键新建页面，分别创建 home（首页）、cate（分类）、cart（购物车）、my（我的）

tabbar - 配置

• 来到项目的 pages.json添加 tabbar的配置

"tabBar": {
    "selectedColor": "#d82009",
    "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"
      }
    ]
  },

tabbar - 修改导航条样式

• 就是来到 pages.json，修改对应的配置

"globalStyle": { // 相当于小程序里app.json的"window"
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "黑马优购",
  "navigationBarBackgroundColor": "#c00000",
  "backgroundColor": "#F8F8F8"
},

• 注意：此时会发现，背景颜色设置上去了，但是文字没有上去
• 原因：因为我们新建页码时，它会自动帮我们加配置加到pages项，pages项里有局部配置，把标题给设置为空，所以有局部时会用局部的样式，导致全局标题没有生效
• 解决办法：
• • 把pages里每一项的 "navigationBarTitleText": "" 全部删掉

tabbar 分支处理

• tabbar做完了，提交到git

git add .
git commit -m'tabbar完成'
git push --set-upstream origin tabbar
 
# 切换到master
git checkout master
# 合并tabbar
git merge tabbar
# 删除本地tabbar(不影响远程)
git branch -d tabbar

home - 分支准备

git checkout -b home

配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用

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

• 来项目文件夹，先进行npm的初始化

npm init -y

• 下载插件

npm install @escook/request-miniprogram

• 来到 main.js 导入使用并设置基地址，然后挂载到 uni 这个对象上，这样所有地方都能使用

// 按需导入 $http 对象
import { $http } from '@escook/request-miniprogram'
 
// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http
 
// 设置基地址
$http.baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'

• 为了更好的效果，所以每次需要发请求时弹出加载提示，请求完成就需要关闭加载提示，因此需要准备请求拦截和响应拦截

// 可能需求请求拦截
// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  // 这个代码一写相当于每次通过$http发请求都会出现加载框  
  uni.showLoading({
    title: '数据加载中...',
  })
}
 
// 响应拦截
// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

• 此时发现，请求的代码都写到main.js里，会导致main.js里的代码过于臃肿，所以可以抽取到一个独立的js文件里，再来到main.js做导入即可
• 所以在根目录新建了utils文件夹，里面放了一个request.js,代码就是把上面的代码挪过来

// 按需导入 $http 请求对象
import { $http } from '@escook/request-miniprogram'
 
// 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用
// wx这个东西是微信小程序里的顶级对象，也就是说所有页面都可以访问wx这个对象
// 所以我所有地方就可以用 wx.$http访问到请求对象了
// wx.$http = $http
 
// 设置基地址
$http.baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1'
 
// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
// 小程序里wx是顶级对象，但是在uniapp中，uni才是顶级对象
uni.$http = $http
 
// 请求开始之前做一些事情
// 因为咱们是uniapp项目，顶级对象不叫wx，叫uni，记得把wx这个改成uni
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}
 
// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

• 来到main.js导入即可

import "./utils/request.js"

home - 轮播图数据请求

• 先来到 pages/home，声明一个data里的数据叫 sliderList用来保存轮播图数据

data () {
    return {
        sliderList: []
    }
}

• 封装一个获取轮播图数据的方法

methods: {
      async getSliders () {
        const res = await uni.$http.get('home/swiperdata')
        this.sliderList = res.data.message
      }
}

• 写一个 onLoad钩子 调用即可

onLoad () {
    this.getSliders()
}

• 知识点总结：
• • 在页面的vue文件中，生命周期钩子还是跟微信小程序的一样（onLoad换成created可以，但是在页面中不推荐）
    • 但是在 组件的vue文件中，生命周期钩子跟vue的是一样的
    • uni是uniapp的顶级对象，wx这个顶级对象有的东西，uni也有

home - 轮播图渲染与样式调节

• 直接输入 swiper按回车，帮你生成一坨，然后用v-for进行渲染

<template>
  <view>
    <swiper circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="item in sliderList" :key="item.goods_id">
        <image :src="item.image_src"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

• 写个image的样式

swiper {
  image {
    width: 100%;
    height: 280rpx;
  }
}

home- 获取导航数据

• 声明data保存数据

data () {
    return {
        navList: []
    }
}

• 封装方法

// 这个函数一旦调用就是专门用来获得导航数据
async getCate () {
  const res = await uni.$http.get('home/catitems')
  this.navList = res.data.message
}

• 调用方法

onLoad () {
    .........
    this.getCate()
}

home - 导航数据渲染与样式

• 用大盒子包起来，为了日后跳转每个图片也再包小盒子

<!-- 导航区域 -->
<view class="nav-box">
  <view v-for="item in navList" :key="item.image_src" class="nav-item">
    <!-- 图片 -->
    <image :src="item.image_src" mode="widthFix"></image>
  </view>
</view>

• 样式：大盒子用弹性布局，然后图片给宽高

.nav-box {
  display: flex;
  margin: 20rpx 0;
  justify-content: space-around;
  .nav-item {
    width: 60px;
    image {
      width: 100%;
    }
  }
}

配置分包

• 分包原则：
• • tabbar一定放到主包（tabbar对应的页面也最好放到主包）
    • 其他页面就可以放到分包里
• 分包好处：
• • 提高加载速度
    • 为了能够成功发布小程序（官方对小程序每个包限制为2m，全部放到主包可能会超限）
• 步骤：
• • 来到项目根目录新建放分包的文件夹，名字叫 subpkg
  • 来到 pages.json 配置分包的根路径

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

• • 然后对着 subpkg右键选择新建页面，输入名字叫 goods_detail，那么默认就会帮我们自动在pages.json里配置好分包的路径，对应选择如下图

home - 点击轮播图进入商品详情页

• 回到home找到轮播图的image，给他包一个navgator，然后用url指定跳转，这里需要拼接参数，传递商品的id过去

<swiper-item v-for="item in sliderList" :key="item.goods_id">
  <navigator :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
    <image :src="item.image_src"></image>
  </navigator>
</swiper-item>

home - 点击第一个分类切换到分类页

• 给每个 导航数据加点击事件，点击事件需要传入当前的数据（item）

<view v-for="(item, index) in navList" :key="index" class="nav-item" @click="toSome(item)">
  <image :src="item.image_src"></image>
</view>

• 然后在方法里判断是不是分类，如果是则切换到分类的tabbar页面

toSome (item) {
  
  if (item.name === '分类') {
    // 跳转到分类的tabbar页面
    uni.switchTab({
      url: "/pages/cate/cate"
    })
  }
}

home - 获取楼层区域数据

• 声明数据

data () {
    return {
        floorList: []
    }
}

• 封装方法

// 这个函数调用可以用来发请求获取楼层数据
async getFloorData () {
  const res = await uni.$http.get('home/floordata')
  this.floorList = res.data.message
}

• onLoad里调用

onLoad () {
    this.getFloorData()
}

home - 渲染楼层标题图片

• 结构如下

<!-- 楼层区域 -->
<view class="floor-box">
  <view v-for="(item,index) in floorList" :key="index" class="floor-item">        
      <!-- 标题图片 -->
    <image :src="item.floor_title.image_src" mode="widthFix"></image>
    <!-- 放下面5张图片的大盒子 -->
  </view>
</view>

home - 渲染楼层图片

• 结构如下

<!-- 标题图片 -->
............................
 
<!-- 放下面5张图片的大盒子 -->
<view class="product-box">
<view class="left-img-box">
  <image :src="item.product_list[0].image_src"></image>
</view>
<view class="right-img-box">
  <image :src="item.product_list[1].image_src"></image>
  <image :src="item.product_list[2].image_src"></image>
  <image :src="item.product_list[3].image_src"></image>
  <image :src="item.product_list[4].image_src"></image>
</view>
</view>
 

• 说明：本代码跟上面的标题部分
• 核心思路是：一左一右两个区域，左边写死下标0的图片，然后右边是 下标1-4的图片
• 核心布局思路是：弹性布局

.product-box {
  display: flex;
  height: 408rpx;
  
  .left-img-box {
    flex:1;
    image {
      width: 100%;
      height: 202px;
    }
  }
  .right-img-box {
    flex: 2;
    image {
      width: 50%;
      height: 100px;
    }
  }
}

__EOF__

本文作者：Sternstunde
本文链接：https://www.cnblogs.com/strundent/p/17078324.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！