当前位置： 首页 > news >正文

百战商店项目学习心得

news 2025/7/4 17:31:38

一、对微信小程序 中最初的框架的了解

1. api

1.1 base.js

 这是存储接口地址的一个文件,通常就是由最基础的baseUrl(后端接口的基础地址) , 和其他的具体路径组成 , baseUrl + 其他的具体路径 = API的地址(即后端接口的地址).

扩展相关知识点:

1.  API

一般指的就是后端暴露出来让前端调用的数据接口,就是我们常说的后端接口 . (可以把它理解成一组规则/约定，前端按照这个规则“提问”，后端按照这个规则“回答”

比如这张图片, 就是API(后端接口)的调用文档.

1.2 index.js

 在这个.js文件中 , 里面都是存放的网络请求方法.这些方法都是用于向后端发送请求

const { request } = require("../utils/request.js")
const { baseUrl, banner, goods ,hotSearch ,search, gooodsDetails,cart,addCart, category } = require("./base")

上述代码: 这里是引用 , 因为request和 baseUrl等等这些都是定义在其他文件中的 , 不可以直接在本文件中去用 , 必须先导入才可以使用. 导入的格式如上面的代码 .

function getCategory(data){return request(baseUrl + category,"GET",data)
}function getBuy(data){return request(baseUrl + buy,"GET",data)
}
module.exports = {getBanner,getGoods,getHotSearch,getSearch,getGoodsDetails,getCart,addGoodsCart,getCategory,getBuy
}

上述代码: 这里是方法的定义以及导出 

这里我着重于这里的方法的理解:

request这个方法是一个网络请求工具方法, 一般单独放在utils目录下的request.js文件中,用于向后端接口发送请求 . 因为后端接口的请求全是GET类型的 , 所以 , 这里创建的函数都是以get名字开头,方便理解, 这里的其他函数实现的功能就是 , 将baseUrl和具体路径合并在一起 , 向后端接口发送网络请求.接受并返回.  

对于业务函数（如 getBuy）：

该方法返回后端接口响应的数据

对于 request 工具函数：

request 方法返回一个 Promise 对象，resolve 的内容是后端接口返回的数据对象.

因为返回的是对象 , 所以需要具体需要去指示:

如res.data.data之类的格式.

扩展相关知识点:

1.  导出与导出

要想用 其他文件中的内容, 必须在其他文件中先导出 . 就拿baseUrl(这是属于api/base.js文件中的内容) 举例:

/**存储接口地址 */
module.exports = {baseUrl: "http://iwenwiki.com:3001",   //  公共地址}

如上述代码: 它就是用module.exports = {  }  进行导出的 , 只不过这里是将导出的行为和定义baseUrl融合在一起了 , 也可以分开 , 先定义 , 再导出.比如:

const baseUrl = "http://iwenwiki.com:3001"; // 公共地址module.exports = {baseUrl
};

再在需要用到baseUrl的文件中进行导入:

const { baseUrl} = require("./base")

2. require如何应用的认识

这里有一个知识点就是: ../ 回到的是当前文件所处的文件夹的上一级目录 , 而不是当前文件的上一级. 这一点尤其重要

 比如这里的两张图:

对于这里的require , 先 ../ 回到上级目录MP-SHOP , 再/utile/request.js 进入到request.js文件中,就找到了request方法的定义. 完成导入.

2. components

用于存放自己项目的组件

3. images

存放图片的地方

可在app.json中的"tabBar"中这样子写 ,就可以正确的显示图片 , 第一行是未选中时展示的图片 , 第二行是选中时展示的图片

4. pages

pages 目录一般用来存放页面级别的代码。每一个文件夹或文件，通常都代表一个页面（即用户可以直接跳转或路由到的界面）。

 4.1 如何在pages目录中创建文件夹

进入到app.json文件中, 在pages中去创建,这样就会pages这个文件下自动生成. 

就拿pages/index/index举例 . 这个的意思就是 在pages文件夹中创建一个index文件夹 ,再在其中创建四个以index命名的文件(index.js index.json index.wxml index.wxss)

 4.2 .js .json .wxml. wxss 这些页面的作用

4.2.1 .js

.js 文件就是页面的 JavaScript 逻辑，负责和后台接口交互、页面数据管理、响应用户操作等。

Page({data: {// 页面数据},onLoad(options) {// 页面加载时执行，options 为页面传递的参数console.log('页面加载', options);}});

data作用:

data 里的内容定义了页面用到的所有动态数据，这些数据会和页面的视图（wxml）自动“绑定”。 当 data 里的数据发生变化，页面会自动更新显示（类似于 Vue 的 data、React 的 state）.

举例:

data: {search: "",         // 搜索框当前输入的内容hotSearch: [],      // 热门搜索的关键字数组value: "",          // 可能是选中的值或者临时变量goodsData: []       // 商品数据列表
},

 search：你在输入框里输入的内容就会绑定到这里。

hotSearch：用于存储热门搜索关键词，可能从接口获取。

value：看业务，可能用来做选中项或临时缓存。

goodsData：用于存储商品列表的数据，页面显示商品用到。

在 .wxml 里可以直接用这些变量:

<input value="{{search}}" bindinput="onInput"/>
<view wx:for="{{hotSearch}}">{{item}}</view>
<view wx:for="{{goodsData}}">{{item.name}}</view>

4.2.2 .json

配置页面用到的第三方组件（比如 Vant Weapp 的组件）。

.json 文件在小程序里有不同层级，不同作用，尤其是 app.json 和每个页面下的 xxx.json，它们的功能不一样！

4.2.3 .wxml

.wxml 类似于 HTML，是页面的结构（模板）。 你在这里写页面显示的内容、组件、标签，负责“页面长什么样”。

4.2.4 .wxss

.wxss 是WeiXin Style Sheets，其实就是微信小程序专用的 CSS（层叠样式表）。 用来写页面的样式，让页面变好看，比如颜色、字体、布局、间距等等。 语法和 CSS 几乎一样，但有小程序独特的特性，比如 rpx（响应式像素单位），适配各种屏幕宽度。 

5. utils

utils 目录就是专门放各种全局通用、不属于某个页面或组件的“小工具函数”的地方，方便复用和管理。

6.  app.js && app.json

6.1 app.js

用来注册小程序，处理全局生命周期、全局数据、一些全局事件。 你可以在这里定义小程序启动时要执行的代码，比如本地缓存初始化、自动登录、获取用户信息等。

6.2 app.json

(1) 配置小程序包含哪些页面"pages"(2)设置全局的窗口表现"window"（如导航栏样式） (3)"tabBar"（底部导航栏）配置 (4)全局样式和默认行为设置 (5)配置全局自定义组件库（usingComponents，少用）

{"pages": ["pages/index/index","pages/category/category","pages/cart/cart","pages/user/user","pages/search/search","pages/goods/goods","pages/details/details","pages/buy/buy"],"window": {"backgroundTextStyle":"light","navigationBarTextStyle": "black","navigationBarTitleText": "百战商城","navigationBarBackgroundColor": "#ffffff"},"sitemapLocation": "sitemap.json", "tabBar": {"color": "#666","selectedColor": "#fa2c19","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./images/shouye.png","selectedIconPath": "./images/shouye_s.png"},{"pagePath": "pages/category/category","text": "分类","iconPath": "./images/fenlei.png","selectedIconPath": "./images/fenlei_s.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "./images/gouwuche.png","selectedIconPath": "./images/gouwuche_s.png"},{"pagePath": "pages/user/user","text": "用户","iconPath": "./images/yonghuguanli.png","selectedIconPath": "./images/yonghuguabli_s.png"}]}
}

 二、学习的内容

方式请求时机数据传递适用场景
1搜索页面直接传递数据简单传递即可
2goods页面传递关键词，自己请求需要二次处理、分页等

1. 两种网络请求方式

1.1 方式一 :搜索页请求数据、传递给 goods 页

搜索页面 search.js

// 用户点击搜索时
onSearch() {const keyword = this.data.searchKeyword;// 1. 先在当前页面发起请求wx.request({url: 'https://api.xxx.com/search?keyword=' + encodeURIComponent(keyword),success: res => {// 2. 请求到数据后，把数据用 JSON 字符串传给 goods 页面wx.navigateTo({url: '/pages/goods/goods?data=' + encodeURIComponent(JSON.stringify(res.data))});}});
}

 goods 界面 goods.js

onLoad(options) {// 3. goods 页直接拿到传过来的数据，解析使用if (options.data) {const goodsData = JSON.parse(decodeURIComponent(options.data));this.setData({ goodsData });}// goods 页面不需要再发请求！
}

1.2 方式二 : 只传关键字，goods 页自己请求

 搜索页面 search.js

// 用户点击搜索时
onSearch() {const keyword = this.data.searchKeyword;// 1. 只把关键字传给 goods 页面wx.navigateTo({url: '/pages/goods/goods?keyword=' + keyword});
}

goods 界面 goods.js

onLoad(options) {// 2. goods 页根据关键字自己发请求const keyword = options.keyword;wx.request({url: 'https://api.xxx.com/search?keyword=' + encodeURIComponent(keyword),success: res => {this.setData({ goodsData: res.data });}});
}

 二者区别和对比:

方案一方案二
请求时机搜索页面goods 页面
数据传递直接把“完整数据”传过去（通常用 JSON 字符串，可能较大）只传递“关键词”
goods 页不需要再请求，只用 setData 展示自己拿 keyword 请求，setData 展示
适用场景数据小、一次性传递，场景简单数据可能很大，需要分页/二次处理等复杂页面

 2. 数据序列化

就拿这个举例子 , 原先代码就是这个样子 ,  因为数据过大的话 ,是无法正确上传的, 所以就需要到序列化的操作. 先将数据序列化再上传:

同样的,在接受数据的时候也需要完成数据的转换:

3. 简单的认识前后端交互

简单的举一个例子:

就以百战商店这个项目中的的这个函数来解释:

 3.1 前端发起请求，获取后端数据

getSearch({search}).then(res => {// ...
});

这行代码就是前端调用一个接口（getSearch）去后端拿搜索结果, 参数是 search.

3.2 处理后端返回结果

 res.data 是后端接口返回的数据.

通过 JSON.stringify(res.data.data) 把数据转成字符串, 为了传递给下一个页面.

判断是否有 msg 字段，如果没有，说明搜索正常.

 3.3 页面跳转并传递数据

wx.navigateTo({url: '/pages/goods/goods?goodsData=' + goods,
});

通过 wx.navigateTo 跳转到 goods 页面, 并通过 URL 参数把数据带过去.

这种方式, 就是前端把后端查到的数据“传递”到下一个页面, 下一页直接用, 不再请求.

3.4 处理异常情况

wx.showToast({title: res.data.msg,
});

 如果接口有错误信息, 弹个提示.

总结

这个函数就是典型的前端通过接口请求后端数据 → 前端处理数据 → 页面跳转传递数据，属于标准的“前后端交互”流程。

三、在学习过程中的一些疑惑以及解答

 1. 代码:

1.1 代码片段一

wx.navigateTo({url: '/pages/goods/goods?goodsData=' + goods,
})

后来查询了些资料 , 得出了这段代码的功能 ,如下所示:

1.1 页面跳转

通过 wx.navigateTo 方法, 把用户从当前页面跳转到 /pages/goods/goods 这个页面( 通常是商品列表页或搜索结果页 ).

1.2 携带参数

在跳转的 URL 后面加了参数：?goodsData=xxx，其中 goods 是上一步 , 通过 JSON.stringify 得到的搜索结果（即商品数据）.  也就是说, 把数据通过 URL 参数带到了 goods 页面。 

为了便于理解做一下假设:

假设你的 goods 是 [{id:1,name:"苹果"}, {id:2,name:"香蕉"}]， 那实际跳转的地址会变成：

/pages/goods/goods?goodsData=[{"id":1,"name":"苹果"},{"id":2,"name":"香蕉"}]

这样，goods 页面在 onLoad 生命周期里，可以通过 options.goodsData 拿到这个数据（字符串），再用 JSON.parse 变回数组，就能直接用来展示啦。

这行代码的作用就是:

跳转到下一个页面（goods）,并把数据通过参数的方式一块带过去.

 1.2 代码片段二

<view class="list-keywords"><text data-hotkey="{{ item.content }}" bindtap="clickGetKeyWords" class="item" wx:for="{{ hotSearch }}" wx:key="index">{{ item.content }}</text>
</view>

 动态渲染 hotSearch 数组里的每个元素, 每个都生成一个 <text> 标签，显示关键词内容. 给每个关键词绑定了点击事件, 用户点击后会触发 clickGetKeyWords 这个 JS 方法.

在.js文件中是这样配合使用的:

clickGetKeyWords(e){this.http(e.currentTarget.dataset.hotkey)
}

1.2.1 wx:for="{{ hotSearch }}"

让 <text> 标签循环遍历 hotSearch 数组, 每个元素叫 item.

1.2.2 wx:key="index"

用索引作为每一项的唯一标识（ 性能更好 ).

1.2.3 data-hotkey="{{ item.content }}"

自定义属性, 把当前 item 的 content 字段( 即关键词内容 )放到 data-hotkey 里, 便于事件处理时获取.

1.2.4 bindtap="clickGetKeyWords"

给每个 <text> 绑定点击事件, 用户点击某个关键词时, 会自动调用 JS 里的 clickGetKeyWords 方法.

1.2.5 {{ item.content }}

显示每个关键词的内容.

总结:

1. 工作原理

    用户点击页面上的某个热门关键词 <text> 时，事件处理函数 clickGetKeyWords 会被触发。 框架自动把事件对象 e 传进来，你可以通过 e.currentTarget.dataset.hotkey 取到被点击的那一项的关键词内容。 然后你把这个内容作为参数传给了 this.http() 方法，完成后续搜索。

2. 如何自动将对象传进来?

    在小程序 wxml 里, 写 bindtap="clickGetKeyWords", 当点击这个元素时, 框架自动调用 JS 里定义的 clickGetKeyWords 函数. 并且自动把事件对象 e 当作第一个参数传进来, 不用手动传.

 1.3 代码片段三

这里我看见,它往addGoodsCart里面传了4个参数 , 我就很疑惑了 ,不是在定义这个函数的时候就只在参数列表放了一个参数嘛. 后来才知道 ,那四个参数是放在一个{  }里面的,代表的是一个对象 .

所以它的意思是:向参数列表传一个对象(也就是一个参数) , 是符合要求的

http://www.lryc.cn/news/579726.html

相关文章：

  • Qt Creator自定义控件开发流程
  • visio画大括号和失败的大模型画图尝试
  • Doris 数据导入性能优化全攻略：深度诊断与全面提速指南
  • 冒泡排序及其优化方式
  • LED闪烁 + PWM呼吸灯
  • 【React Native原生项目不能运行npx react-native run-android项目】
  • Redis 持久化详解、使用及注意事项
  • 《C++MLpack库 聚类算法》实战指南
  • day15——Java常用API（二）：常见算法、正则表达式与异常处理详解
  • 玄机——某医院系统被脱库
  • 板凳-------Mysql cookbook学习 （十一--------3)
  • 项目中数据库表设计规范与实践（含案例）
  • OS15.【Linux】gdb调试器的简单使用
  • 力扣网编程第80题：删除有序数组中的重复项（简单）
  • springsecurity---使用流程、加密机制、自定义密码匹配器、token字符串生成
  • 【STM32实践篇】：I2C驱动编写
  • Vue如何处理数据、v-HTML的使用及总结
  • 8分钟讲完 Tomcat架构及工作原理
  • Node.js与Webpack
  • 前端面试专栏-算法篇：17. 排序算法
  • Spring SseEmitter 系统详细讲解
  • XILINX FPGA如何做时序分析和时序优化？
  • 手机内存融合是什么意思
  • Redis—哨兵模式
  • C++之路：类基础、构造析构、拷贝构造函数
  • 算法学习笔记：5.后缀数组——从原理到实战，涵盖 LeetCode 与考研 408 例题
  • MySQL 学习 之 你还在用 TIMESTAMP 吗？
  • Functionize 结合了 AI 与云平台的现代化自动化测试工具
  • MySQL 8.0 OCP 1Z0-908 题目解析(16)
  • curl for android