EmmmuaCode
wufan
2024-11-21
目录

从基础概念到uni-app项目搭建

视频地址：点击转跳 (opens new window)

配套资料：https://pan.baidu.com/s/1VSMC23T0_tA3g6Bpe7rk_Q?pwd=4c6h

提取码：4c6h

# 前言

为什么会有微信小程序？微信小程序是什么？

对于用户：

场景1：感冒了，要买药，下载叮当快药，过半个月卸载

场景2：出去自驾游，没有车租个车，下载某某租车，旅游完卸载

对于微信：

获得更多留存时间，提高用户粘性，不管干什么都可以想到微信

# 1. 小程序简介

什么是小程序：小程序是一种不需要下载、安装即可使用的应用，它实现了触手可及的梦想，用户扫一扫或者搜一下就能打开应用， 也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。

# 1.0 问题

  • 小程序和普通网页的区别都有什么？

# 1.1 小程序/网页区别

  1. 运行环境不同
  • 网页运行在浏览器环境中
  • 小程序运行在微信环境中
  1. API 不同

由于运行环境不同，小程序中可以调用微信环境提供的各种 API，例如：

  • 扫码

  • 支付

  • 震动

  • 调整屏幕亮度

  1. 开发模式不同 网页的开发模式：浏览器 + 代码编辑器 小程序有自己的一套标准开发模式
    • 申请小程序开发账号

  • 安装小程序开发者工具

  • 创建和配置小程序项目

  • 小程序账号 + 微信开发者工具：原生小程序开发模式

  • 小程序账号+vscode/HBuilderX + 微信开发者工具：uni-app开发模式

# 2. 第一个小程序

# 2.1 注册小程序账号

  1. 点击注册按钮 使用浏览器打开 微信公众平台 (opens new window) 网址，点击右上角的 "立即注册" 即可进入到小程序开发账号的注册流程，主要流程截图如下：

  1. 选择注册的帐号类型

  1. 填写账号信息

  1. 邮箱激活

  1. 点击链接激活账号

  1. 选择主体类型

  1. 主体登记信息

  1. 注册完毕

# 2.2 小程序的 AppID

  • 如何查看AppID？
  1. 登录微信开发者工具创建项目
  2. 进行小程序的预览
  3. 调用小程序给提供的 API，例如：支付、登录

# 2.3 微信开发者工具

为什么要使用微信开发者工具？

  1. 了解微信开发者工具 微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：

  • 快速创建小程序项目

  • 代码的查看和编辑

  • 对小程序功能进行调试

  • 小程序的预览和发布

  1. 下载并安装微信开发者工具

    • 推荐下载和安装最新的稳定版 Stable Build 的微信开发者工具

    • 微信开发者工具下载地址 (opens new window)

    • 安装方式： 下一步 --> 下一步

# 2.4 登录微信开发者工具

# 2.5 设置外观和代理

  1. 为什么需要代理设置 ?
    • 因为部分同学可能电脑安装了网络加速器或者翻墙工具，导致网络不稳定
  • 为了防止加速器造成网络的不稳定，所以推荐代理设置为 不使用任何代理

# 2.6 演示新建小程序的步骤

填写项目信息

# 2.7 微信开发者工具主界面

  1. 主界面的 5 个组成部分，从上到下，到左到右，依次是
    • 菜单栏
  • 工具栏
  • 模拟器
  • 代码编辑区
  • 调试区

# 3. uni-app

# 3.1 uni-app 简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/

# 3.2 开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

  • 完善的智能提示
  • 一键运行
  • 一键打包

当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！

# 3.3 下载 HBuilderX

windows版本

HBuilderX.3.6.14.20221215.zip (opens new window)

mac版本

HBuilderX.3.6.14.20221215.dmg.zip (opens new window)

  1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
  2. 点击首页的 DOWNLOAD 按钮
  3. 选择下载 正式版 -> App 开发版

# 3.4 安装 HBuilderX

  1. 将下载的 zip包 进行解压缩
  2. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
  3. 双击 HBuilderX.exe 即可启动 HBuilderX

# 3.5 安装 scss/sass 编译

为了方便编写样式（例如：<style lang="scss"></style>），建议安装 scss/sass 编译 插件。插件下载地址：

scss：css的预编译语言

https://ext.dcloud.net.cn/plugin?name=compile-node-sass

进入插件下载页面之后，点击右上角的 使用 HBuilderX 导入插件 按钮进行自动安装，截图如下：

# 3.6 快捷键方案切换

操作步骤：工具 -> 预设快捷键方案切换 -> VS Code

# 4. HBuilderX创建项目

# 4.1 创建uni-app项目

  1. 文件 -> 新建 -> 项目
  2. 填写项目基本信息 image-20230721113725557
  3. 项目创建成功

# 4.2 运行项目

  1. 填写自己的微信小程序的 AppID：
  2. 在 HBuilderX 中，配置“微信开发者工具”的安装路径：
  3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：
  4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：
  5. 初次运行成功之后的项目效果：

# 4.3 目录结构

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

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

# 5. uni-app配置tabBar

# 5.1 创建 tabBar 页面

在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：

  1. 在 pages 目录上鼠标右键，选择新建页面
  2. 在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下： image-20230721121919032

# 5.2 配置 tabBar 效果

globalStyle：官方文档 (opens new window)

  1. 将 资料 目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹
  2. 修改项目根目录中的 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"
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 5.3 删除默认的 index 首页

  1. 在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉
  2. 同时，把 page.json 中记录的 index 首页 路径删除掉
  3. 为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件夹

# 5.4 修改导航条的样式效果

globalStyle：官方文档 (opens new window)

  1. 打开 pages.json 这个全局的配置文件
  2. 修改 globalStyle 节点如下：
{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "黑马优购",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF"
  }
}
1
2
3
4
5
6
7
8
  1. pages数组中每一项的配置为局部配置, 局部配置高于全局配置
{
    "path": "pages/home/home",
    "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
    }
}
1
2
3
4
5
6
7

# 6. 首页轮播图

# 6.1 rpx单位介绍

微信小程序开发中新出的尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx

px：单位大小是固定的，屏幕发生变化大小无法改变

rpx：屏幕发生变化，大小会自动调整

开发中建议：ui采用iphone6的屏幕的2倍图进行设计

iphone6：屏幕宽度为375；

iphone6的2倍图：设计稿宽度：一整屏 = 750px 750rpx = 一整屏

盒子：375px、375px

# 6.2 轮播图基本效果

通过swiper组件快速实现，参考uni-app官方文档：https://uniapp.dcloud.net.cn/component/swiper.html#swiper

结构

<template>
	<view class="home">
		<swiper indicator-dots circular autoplay :interval="3000" :duration="1000">
			<swiper-item>
				<image src="https://api-hmugo-web.itheima.net/pyg/banner2.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://api-hmugo-web.itheima.net/pyg/banner2.png"></image>
			</swiper-item>
		</swiper>
	</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

样式

<style lang="scss">
	.home {
		swiper {
			height: 330rpx;

			swiper-item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 6.3 请求数据-flyio简介

npm：https://www.npmjs.com/package/flyio

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

浏览器支持

Chrome Firefox Safari Opera Edge IE
✔ ✔ ✔ ✔ ✔ > 8

其它支持的平台

node logo (opens new window) Mini Program logo (opens new window) mpvue logo (opens new window) weex logo (opens new window) quick app logo (opens new window) 支付宝小程序 支付宝小程序 (opens new window)

目前Fly.js支持的平台包括：Node.js (opens new window) 、微信小程序 (opens new window) 、Weex (opens new window) 、React Native (opens new window) 、Quick App (opens new window) 和浏览器，这些平台的 JavaScript 运行时都是不同的。更多的平台正在持续添加中，请保持关注。

# 6.4 使用flyio

  1. 安装包

    npm i flyio
    1

  2. 封装flyio,新建utils目录，在utils目录下新建flyio文件

    let Fly = require("flyio/dist/npm/wx")
let fly = new Fly()
//设置请求基地址
fly.config.baseURL = "https://api-hmugo-web.itheima.net/api/public/v1"

export default fly;
    1
    2
    3
    4
    5
    6

  3. 测试使用flyio进行请求

    <script>
	import fly from '../../utils/flyio.js'
	export default {
		data() {
			return {

			};
		},
		created() {
			fly.get('/home/swiperdata').then(res => {
				console.log(res)
			})
		}
	}
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

# 6.5 获取轮播图数据

  1. 封装method方法,调用获取数据

    <script>
	import fly from '../../utils/flyio.js'
	export default {
		data() {
			return {
				swipers: []
			};
		},
		methods: {
			getHomeSwiper() {
				fly.get('/home/swiperdata').then(res => {
					this.swipers = res.data.message
				})
			}
		},
		created() {
			this.getHomeSwiper()
		}
	}
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

  2. 渲染轮播图数据

    <template>
	<view class="home">
		<swiper indicator-dots circular autoplay :interval="3000" :duration="1000">
			<swiper-item v-for="item in swipers" :key="item.goods_id">
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>
	</view>
</template>
    1
    2
    3
    4
    5
    6
    7
    8
    9

# 6.6 跳转到商品详情页

  1. 新建商品详情页

    image-20230721085238838

  2. 注册点击事件

    <!-- 轮播图 -->
<swiper indicator-dots circular autoplay :interval="3000" :duration="1000">
    <swiper-item v-for="item in swipers" :key="item.goods_id">
        <image @click="goGoodsDetail" :src="item.image_src"></image>
    </swiper-item>
</swiper>
    1
    2
    3
    4
    5
    6

  3. 定义事件函数进行跳转

    跳转api：https://uniapp.dcloud.net.cn/api/router.html#navigateto

    goGoodsDetail() {
    uni.navigateTo({
        url: "/pages/goods_detail/goods_detail"
    })
}
    1
    2
    3
    4
    5

# 6.7 传递id

  1. 在模板中获取到id将id传到事件函数中

    <!-- 轮播图 -->
<swiper indicator-dots circular autoplay :interval="3000" :duration="1000">
    <swiper-item v-for="item in swipers" :key="item.goods_id">
        <image @click="goGoodsDetail(item.goods_id)" :src="item.image_src"></image>
    </swiper-item>
</swiper>
    1
    2
    3
    4
    5
    6

  2. 在事件函数中接收id并通过页面跳转转递到商品详情页

    goGoodsDetail(id) {
    uni.navigateTo({
        url: "/pages/goods_detail/goods_detail?id=" + id
    })
}
    1
    2
    3
    4
    5

  3. 通过onLoad接收参数

    onLoad(e) {
    console.log(e.id)
}
    1
    2
    3

# 7. 分类

# 7.1 分类基本结构

  1. 定义如下的 UI 结构：
<!-- 分类导航区域 -->
<view class="nav-list">
   <view class="nav-item">
     <image src="item.image_src" class="nav-img"></image>
   </view>
</view>
1
2
3
4
5
6
  1. 通过如下的样式美化页面结构：
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
1
2
3
4
5
6
7
8
9
10

# 7.2 分类数据渲染

  1. 发送请求

    <script>
	import fly from '../../utils/flyio.js'
	export default {
		data() {
			return {
				swipers: [],
				cates: []
			};
		},
		methods: {
			getHomeSwiper() {
				fly.get('/home/swiperdata').then(res => {
					this.swipers = res.data.message
				})
			},
			getHomeCate() {
				fly.get('/home/catitems').then(res => {
					this.cates = res.data.message
				})
			}
		},
		created() {
			this.getHomeSwiper()
			this.getHomeCate()
		}
	}
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

  2. 渲染数据

    <!-- 分类导航 -->
<view class="nav-list">
    <view class="nav-item" v-for="(item, i) in cates" :key="i">
        <image :src="item.image_src" class="nav-img"></image>
    </view>
</view>
    1
    2
    3
    4
    5
    6

# 7.3 页面跳转

  1. 注册点击事件

    <view class="nav-list">
    <view class="nav-item" v-for="(item, i) in cates" :key="i" @click="navJump">
        <image :src="item.image_src" class="nav-img"></image>
    </view>
</view>
    1
    2
    3
    4
    5

  2. 导航跳转

    navJump() {
    uni.switchTab({
        url: "/pages/cate/cate"
    })
}
    1
    2
    3
    4
    5
#uni-app#小程序
上次更新: 2024/11/21, 11:04:33
Vue 快速上手
页面优化与数据处理的深入实践

← 页面优化与数据处理的深入实践→

最近更新
01
微信支付功能的实现与流程
11-21
02
购物车与结算区域的深入优化与功能完善
11-21
03
购物车与结算区域的功能实现与优化
11-21
更多文章>
Theme by Vdoing | Copyright © 2023-2024 EmmmuaCode | 黔ICP备2022009864号-2