![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序实战1_购物商城
༺鲸落༻
Life is transient
展开
-
13 | 小程序实战之意见反馈
前言其实微信小程序的button按钮,open-type可以跳转到内置的意见反馈界面,你如果想自己自定义一个意见反馈界面可以看看这篇文章,可以上传图片的哟13.1 效果13.2 静态页面<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"> <view class="fb_main"> <view class="fb_title">问题的种类</view>原创 2020-08-22 17:07:31 · 3906 阅读 · 1 评论 -
12 | 小程序实战之搜索页面
12.1 效果12.2 页面布局+渲染搜索结果+防抖实现+页面痕迹重置(1)思路1 输入框绑定 值改变事件 input事件1 获取到输入框的值2 合法性判断3 检验通过 把输入框的值 发送到后台4 返回的数据打印到页面上2 防抖 (防止抖动) 定时器 节流1 防抖 一般 输入框中 防止重复输入 重复发送请求2 节流 一般是用在页面下拉和上拉3 定义全局的定时器id3 页面痕迹重置1 取消按钮绑定事件2 按取消后取消按钮隐藏,搜索框和搜索出来的商品清空(2)代码<vi原创 2020-08-22 17:04:44 · 432 阅读 · 0 评论 -
11 | 小程序实战之商品收藏页面
这块没什么好说的,可以套用之前的模板<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"> <view class="collect_main"> <view class="collect_title"> <text class="collect_tips active">全部</text> <text class="collect原创 2020-08-22 17:03:37 · 862 阅读 · 0 评论 -
10 | 小程序实战之个人中心
10.1 效果10.2 获取用户信息+个人头像背景展示10.2.1 思路如果没有获取用户权限只显示一个登录按钮,当获取用户权限后,会显示个人头像背景和用户信息10.2.2 代码login文件夹下<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo"> 登录</button>button{ margin-top: 40rpx;原创 2020-08-22 17:02:32 · 671 阅读 · 1 评论 -
9 | 小程序实战之支付(莫点,卑微的我还没有资格完成)
9 | 小程序实战之支付9.1 效果9.2 页面布局与数据显示9.2.1 思路页面加载的时候,从缓存中获取购物车数据并把数据渲染到页面中,但是这些数据的checked=true ,可以使用 filter函数filter函数对数组中的每个元素都执行一次指定的函数(callback),并且创建一个新的数组,该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略,同时,新创建的数组也不会包含这些元素。参考9.2.2原创 2020-08-20 23:27:31 · 190 阅读 · 0 评论 -
8 | 小程序实战之购物车(收货地址授权 + 商品全选反选 + 总价格和总数量的计算 + 结算按钮功能)
8.1 效果8.2 收货地址8.2.1 收获地址按钮样式注意在cart文件夹下<!-- 收货地址 --><view class="revice_address_row"> <view class="address_btn"> <button bindtap="handleChooseAddress" type="primary" plain >获取收货地址 </button>原创 2020-08-20 16:31:24 · 1963 阅读 · 0 评论 -
7 | 小程序实战之商品详情页面(轮播图&价格&名称&图文详情动态渲染 + 实现轮播图可放大预览图片 + 底部工具栏如购物车 + 收藏按钮状态)
1. 效果2. 获取商品详情数据接口2.1 数据接口地址https://api-hmugo-web.itheima.net/api/public/v1/goods/detail如果发现为null,别慌,记得传个goods_id参数2.2 调用请求先添加一个商品详情编译模式3. 分析接口数据4. 轮播图&价格&名称&图文详情动态渲染index.jsimport {request} from "../../request/index.js"import r原创 2020-08-18 17:21:44 · 6673 阅读 · 0 评论 -
6 | 小程序实战之商品列表(搜索框 + tabs组件 + 启用上拉页面功能加载下一页 + 启用下拉刷新 + 添加全局的正在加载图标)
1. 效果2. 获取商品列表的数据接口https://api-hmugo-web.itheima.net/api/public/v1/goods/search3. 获取分类id因为需要在分类页面的商品种类中点击一个种类,就会跳转到对应商品种类的商品列表,固然,需要在分类页面中的配置 url 并含有传递的参数,才能返回对应的商品列表。以下是需要传递的参数,这里先暂时传递分类id(cid)修改分类页面的index.wxml<view class="goods_list">原创 2020-08-17 16:27:07 · 2135 阅读 · 4 评论 -
5 | 小程序实战之使用es7的async语法优化接口
1. 提取公共接口路径上图是之前写的接口路径,这种数据长且可读性差,所以我们要提取公共接口路径。看上图,你应该发现公共接口路径是怎样的啦https://api-hmugo-web.itheima.net/api/public/v1然后,我们要修改request文件的index.js// export代表导出promise对象(这里指request变量名)export const request=(params)=>{ // 定义公共的url const baseUrl = "h原创 2020-08-16 11:28:21 · 302 阅读 · 0 评论 -
4 | 小程序实战之分类页面(点击菜单切换商品种类并且右侧菜单置顶 + 使用缓存技术)
1. 效果2. 分析接口数据3. 获取分类页面的数据接口https://api-hmugo-web.itheima.net/api/public/v1/categories4. 调用接口(1)为了方便演示,添加一个编译模式(2)现在分类页面的index.js文件中创建三个空数组index.jsdata: { // 左侧的菜单数据 leftMenuList: [], // 右侧的商品数据 rightContent: [] },// 为了方便使用数据原创 2020-08-15 18:16:09 · 7631 阅读 · 0 评论 -
3 | 小程序实战之首页设计(tabbar + 头部搜索框+ 轮播图 + 使用promise优化原生的请求 + 分类导航 + 楼层)
前言由于项目很多数据(如图片等)都是从后台调用的,这里给一个API接口文档,但是,我不会讲解怎么在后台写代码,因为这是一个小程序实战,主要学的是怎么去设计一个小程序,至于未来,我会再写一个基于SpringBoot的小程序开发实战的笔记!1. 效果2. tabbar底部导航栏已在上一节(2 | 小程序实战之项目搭建)完成3. 头部搜索框由于很多页面都需要使用头部搜索框,所以,为了实现动态化,我们需使用自定义组件3.1 新增组件在components文件夹下新增 SearchInput 组件原创 2020-08-14 16:18:59 · 1826 阅读 · 0 评论 -
2 | 小程序实战之项目搭建
1. 新建小程序项目填入自己的appid2. 搭建目录结构当创建好小程序项目后,把不必要的初始数据删除,再创建以下目录3. 搭建项目的页面页面名称英文名称⾸⻚index分类⻚⾯category商品列表⻚⾯goods_list商品详情⻚⾯goods_detail购物⻋⻚⾯cart收藏⻚⾯collect订单⻚⾯order搜索⻚⾯search个⼈中⼼⻚⾯user意⻅反馈⻚⾯feedback登录⻚⾯lo原创 2020-08-13 11:31:48 · 437 阅读 · 0 评论 -
1 | 小程序实战之项目介绍与技术选型
项目介绍这个小程序主要是电商类,具体的实现效果是怎样,后期更新。。。技术选型小程序也有很多第三方的框架,如:腾讯wepy 类似vue美团 mpvue 类似vue京东 taro 类似react滴滴 chameleonuni-app 类似vue以上都是大公司做小程序开发使用的框架,那么我们这次小程序使用哪个框架呢?由于,我们刚学完基础,而且,原生的框架还存在快速地迭代中,也就是说原生的版本还不是太稳定,所以,我们先使用原生的框架 MINA,后期再上手第三方框架就更容易了。...原创 2020-08-13 11:25:54 · 441 阅读 · 0 评论