配置 tabBar 效果及导航栏

修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

"globalStyle": {
    "navigationBarTextStyle": "black", // 文本颜色
    "navigationBarTitleText": "uni-app", // 文本内容
    "navigationBarBackgroundColor": "#F8F8F8", // 背景颜色
    "backgroundColor": "#F8F8F8", // 背景颜色
    "app-plus": {
        "background": "#efeff4"
    }
},
"tabBar": {
    "selectedColor": "#c00000", // 设置选中颜色
    "list": [
        {
            "pagePath": "/pages/home/home", // 页面路径
            "text": "首页", // 显示文本
            "iconPath": "", // 未选中图标
            "selectedIconPath": "" // 选中图标
        }
    ]
}

具体配置参数可参考：小程序基本配置

配置网络请求

下载 @escook/request-miniprogram 包

// https://www.npmjs.com/package/@escook/request-miniprogram
npm i -S @escook/request-miniprogram

最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

import { $http } from '@escook/request-miniprogram'

uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}

// 调用
await uni.$http.get('')

调用提示框

uni.showToast({
    title: '数据请求失败！',
    duration: 1500, // 显示时间
    icon: 'none', // 图标
})

轮播图效果

v-for 语法 循环语句

< !--轮播图区域 -->
<swiper : indicator-dots="true" : autoplay="true" : interval="3000" : duration="1000" : circular="true">
  <!-- 循环渲染轮播图的 item 项 -->
  <swiper-item v-for="(item, i) in swiperList" :key="i">
    <view class="swiper-item">
      <!-- 动态绑定图片的 src 属性 -->
      <image :src="item.image_src"></image>
    </view>
  </swiper - item >
</swiper >

语法可看 微信小程序组件的运用

分包

1. 在项目根目录中，创建分包的根目录，命名为 subpkg

2. 在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

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

3. 在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：

页面跳转

<navigator :url="'/subpkg/goods_detail?goods_id=123'">跳转</navigator>

事件绑定

<view @click="onclick(1232)"></view>

数据绑定

<view :seyle=""></view>

if 判断

<view :if="true"></view>

滑动组件

// scroll-y scroll-x
<scroll-view class="left-scroll-view" scroll-y ></scroll-view>

获取当前系统信息

文档 ：https://uniapp.dcloud.net.cn/api/system/info.html#getsysteminfosync

uni.getSystemInfoSync()