2021版小程序开发5——小程序项目开发实践(1)

2021版小程序开发5------小程序项目开发实践(1)

学习笔记 2025

使用uni-app开发一个电商项目；

Hbuidler

• 首选uni-app官方推荐工具：
• https://www.dcloud.io/hbuilderx.html
• https://dev.dcloud.net.cn/pages/app/list

微信小程序

• 管理后台：https://mp.weixin.qq.com/?token=\&lang=zh_CN
• 小程序IDE：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

uni组件库：

• https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html

字体图标

• https://www.iconfont.cn/

z-paging 插件用法：

• https://z-paging.zxlee.cn/

1 开发环境

uni-app

• https://uniapp.dcloud.net.cn/
• 使用vue语法开发所有前端应用的框架；
• 跨平台，只需编写一套代码，可以开发app、h5、各类小程序；

HBuilderX

IDE推荐使用HBuilderX（下载安装app开发板）

• 提供了丰富的模版
• 完善的智能提示
• 一键运行

在HBuilderX中安装Sass编译的插件

scss/sass编译插件

• 登录dcloud插件市场（https://ext.dcloud.net.cn/），下载相应的编译插件`compile-node-sass`；
• 使用HBuilderX导入安装即可；
• 这样后续项目中的css样式，就都可以使用sass语法进行编写了；

<style lang="scss"></style>

HBuilderX个性化配置

工具->预设快捷键方案切换->VSCode；

工具->设置->打包Settings.json按需配置；

2 项目初始化

新建 项目 uni-app

• 指定项目名、存放路径，推荐使用uni-ui项目模版；
• uni-ui：https://uniapp.dcloud.net.cn/component/#uniui

项目目录结构：

components
  comp-a.vue
pages
  index
    index.vue
  list
    list.vue
static  // 静态资源存放位置（视频 图片等）
main.js  // vue初始化入口文件
App.vue  // 应用全局配置
manifest.json   // 应用信息配置
pages.json   // 配置小程序页面路径、窗口样式 tabbar navigationBar等页面类信息

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

• 在manifest.json 微信小程序配置中填写微信小程序的AppID；
• 工具->设置->打包Settings.json，在运行配置中的小程序运行配置，配置微信开发者工具的路径；
• 在微信开发者工具中，设置->安全设置，开启服务端口；
• HBuilderX中，运行->运行到小程序模拟器->微信开发者工具（编译后自动运行）；

在manifest.json（源码视图下）中的mp-weixin对应的就是微信小程序中的配置对象，其setting节点可以配置以前我们在小程序的project.config.json中setting节点的配置项；

Git管理项目：

• 新建.gitignore，配置：/node_modules和/unpackage/dist
  • 如果要跟踪一个空目录，可以在该目录下新建一个.gitkeep的文件进行占位；
• 相关git操作，如git init等；
  • 本地git
  • 配置远程ssh公钥
  • 远程创建仓库，本地推送至远程仓库

3 项目开发

创建页面

新建页面：

• 使用 scss页面
• 勾选 在pages.json中注册
• 勾选 创建同名目录
• 输入页面名称 创建即可，页面内容如下

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

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

</style>

新建四个页面

• home
• cate
• cart
• my

在小程序开发者工具中，配置某一个页面的编译模式，仍然是可用的；

配置tabBar效果

将图标等静态资源放到static目录（根据功能划分子目录）；

在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"
      },
      // cate  cart  my 等tabBar页面配置
      // 删除默认的index页面及配置
    ]
  }
} 

修改导航条样式

在pages.json配置文件的globalStyle节点进行配置：

"globalStyle": {
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "Title", // 每个page的style节点同名属性会覆盖该值；
  "navigationBarBackgroundColor": "#C00000",
  "backgroundColor": "#FFFFFF"
}

网络请求配置

小程序中不支持axios，而wx.request()功能简单，不支持拦截器等全局定制，uni-app中使用@escook/request-miniprogram三方包发起网络请求；

• npm init -y
• npm install @escook/request-miniprogram

文档：https://www.npmjs.com/package/@excook/request-miniprogram

在main.js中进行配置：

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

// uni 类似 wx 同为全局对象，也可以在uni上挂载一些全局的自定义方法
uni.$http = $http
$http.baseUrl = "https://www.test.com"
// ...
// 拦截器
$http.beforeRequest = function(options){
  uni.showLoading({
    title:"Loading..."
  })
}
$http.afterRequest = function(){
  uni.hideLoading()
}

一般在页面的onLoad中发送网络请求；另外这是vue语法，因此方法需要定义到methods中；

// 使用示例
async getDatas(){
  const {data: res} = await uni.$http.get("/suburl")
  // 结构返回信息的data赋值给res
  if (res.meta.status !== 200){
    return uni.showToast({
      title:"Error",
      duration: 1500,
      icon: 'none'
    })
  }
  this.datalist = res.datas
}

轮播图

键入uswiper，就可以填入预设的代码段；

• circular：衔接滚动

<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
  <swiper-item v-for="(item, index) in datalist" :key="index">
    <view class="swiper-item">
      <image :src="item.image_src"></image>
    </view>
  </swiper-item>
</swiper>

<style lang="scss">
swiper {
  height: 330rpx;
  <!-- 同时为两个选择器对应的视图添加样式 -->
  .swiper-item, image {
    width: 100%;
    heitht: 100%;
  }
}
</style>

《2021版小程序开发1------起步》-8 轮播图组件

为了使轮播图点击可以跳转到相应页面，可使用navigator组件替换掉包括image的view组件；url指定目标页面的路径，同时传递了一个id参数；

<swiper-item v-for="(item, index) in datalist" :key="index">
  <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.id">
    <image :src="item.image_src"></image>
  </navigator>
</swiper-item>

《2021版小程序开发3------视图与逻辑》-1 页面导航

如果通过点击事件触发导航，可以使用uni.navigateTo方法：

gotoDetail(id){
  uni.navigateTo({
    url: '/subpkg/detail/detail?id=' + id
  })
}

uni-app如何配置小程序分包

• 在项目根目录，创建分包根目录subpkg
• 在pages.json中，和pages节点平级生命subPackages节点，以定义分包相关结构；

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

• 分包页面，在subpkg目录右击新建页面（注意在选项页面，还要选择小程序所属分包，如subpkg）；

选择分包的页面创建，会自动修改json配置；
《2021版小程序开发4------基础加强》-7 分包

Flex布局

《弹性布局-更优秀的Flex》https://blog.csdn.net/baby_hua/article/details/105952517

四个分类导航按钮，就可以通过Flex布局方便的实现样式；

抛掉iOS布局的经验，深入理解流式布局；

点击分类导航到分类tab页面

<view v-for="(item, index) in navList" :key="index" @click="navClickHandler(item)"></view>

navClickHandler(item){
  if (item.name == "cate"){
    uni.switchTab({
      url:"/pages/cate/cate"
    })
  }
}

图片动态绑定样式和显示模式设置

<imag :src="" :style="{width: img_width + 'rpx'}" mode="widthFix">宽度固定 高度自适应</imag>

git基本操作

# 创建分支
git chechout -b branch_a

# 提交本地修改
git add .  
git commit -m 'tag info'

# 将分支推送到远程
git push -u origin branch_a

# 本地分支合并
git chechout master
git merge home

# 删除分支
git branch -d branch_a

滑动区域-滚动视图

scroll-view组件

• 指定滑动方向，如 scroll-y；
• 如果是纵向可滑动，还需要指定一个固定的高度(对于确定的宽度或高度，可以直接使用px单位，而无需使用rpx)；

该组件还支持一个属性scroll-top，用于设置滚动条到顶部的距离；值的话可以0和1切换，以响应变化；

<scroll-view scroll-y="true" :style="{height: scroll_height + 'px'}"></scroll-view>

如果想让滚动视图纵向充满全屏，需要使用uni提供的获取系统信息的同步接口：uni.getSystemInfoSync()

• screenHeight：屏幕高度；
• windowHeight：可用窗口高度（一般是减去navigationBar和tabBar高度后的值）；

onLoad() {
  const systemInfo = uni.getSystemInfoSync()
  this.scroll_height = systemInfo.windowHeight
}

多类名样式SCSS

<view class="classP classS">xxx</view>

<!-- 动态绑定多类名设置 -->
<view :class="['classP', index === action_index ? 'classS' : '']">xxx</view>

.classP{
  line-height: 30px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  color: #EEEEEE,
  /* 既包含classP 又包含classS 则额外添加如下样式 */
  &.classS {
    backgroundColor: #EEEEEE;
    position: relative;
    /* 通过尾元素添加额外样式: 靠左 居中的 小红条 */
    &::before {
       content: ' ';
       display: block;
       width: 3px;
       height: 30px;
       backgroundColor: #C00000;
       position: absolute;
       top: 50%;
       left: 0;
       transform: translateY(-50%);
    }
  }
}

自定义组件

在components目录上，右击新建组件，使用scss并创建同名目录，点击创建即可；

创建后的组件，可以直接使用标签形式进行使用；

自定义组件绑定click事件（和其他事件），需要在组件中使用this.$emit("click")进行触发；

组件属性：

props: {
  bgColor: {
    type: String,
    default: "#ffffff"
  },
  radius: {
    type: Number,
    default: 18
  }
}

组件吸顶效果

position: sticky;是 CSS 中的一个定位属性，它可以让元素在滚动时"粘"在页面的某个位置，直到达到指定的阈值。这个属性结合了 position: relative; 和 position: fixed; 的特点，常用于实现滚动时固定在页面某个区域的元素，比如导航栏、表头或侧边栏。

/* 组件包裹容器 */
.op-box {
  position: sticky;
  /* 元素距离视口顶部的距离，当滚动超过这个距离时，元素会粘在顶部;或其他方向的值，如 bottom, left, right; */
  top: 0;
  /* 提高层级 防止覆盖 */ 
  z-index: 999;
}

默认行为：

• 元素在页面中正常渲染，表现为 position: relative; 的效果。
• 元素会跟随页面滚动。

触发粘性行为：

• 当页面滚动到指定的阈值（通过 top, bottom, left, 或 right 设置），元素会"粘"在容器的边界上，表现为 position: fixed; 的效果。
• 当滚动回到阈值范围内，元素会恢复为 position: relative; 的行为。

uni-app中uni组件的修改

uni的组件会存档到一个单独的目录中uni_modules；

可以到组件的源代码中，对样式进行修改；

搜索框自动获取焦点

这里使用的是 uni-search-bar，可以修改其源码属性值：

show: true,
showSync: true,

需要真机预览；

搜索文本框的防抖处理

// data中定义
{
keyword: '',
timer: null,
},
// input事件：每输入一个字符都会回调 并返回当前值
input(e){
  // 清除延时器
  clearTimeout(this.timer)
  // 500ms内没有新回调 才为keyword赋值
  this.timer = setTimeout(()=>{
    this.keyword = e.value
    // 随即可以发送网络请求
  }, 500)
}

文本单行省略显示处理

.line-1{
  /* 文字不换行 */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 文本溢出 使用...代替 */
  text-overflow: ellipsis;
  margin-right: 3px;
}

uni组件库提供的组件 标签名即类名

.uni-tag{
  margin: 5px;
}

数组解构初始化一个新数组

computed: {
  datalistShow() {
    return [...this.datalist].reverse()
  }
}

利用Set对象去重数组

const set = new Set(this.datalist)
set.delete(this.kw) // 删除是为了调关键词顺序
set.add(this.kw)
this.datalist = Array.from(set)

检索历史记录数据存本地Storage

// 存
uni.setStorageSync("keywords", JSON.stringfy(this.datalist))

// 取
this.datalist = JSON.parse(uni.getStorageSync("keywords") || '[]')