参考源码：https://pan.baidu.com/s/17y6r44hrocXVjnPBVgJd5g
提取码：fk83
接口档案：https://www.showdoc.cc/128719739414963?page_id=2612486239891213

一、首页

关键点

1、⼩程序内置 request API
2、es6的 promise
3、⼩程序 swiper 组件及常用属性(autoplay、indicator-dots、circular)
4、⾃定义组件——搜索框

1、在首页 index.js 中引入子组件 SearchInput
"usingComponents": {"SearchInput": "../../components/SearchInput/SearchInput"
},2、⾃定义组件——搜索框
<view class="search_input"><navigator url="/pages/search/index" open-type="navigate"> 搜索 </navigator>
</view> 3、在index.js中使用API轮播图接口
① 第一种
onLoad:function(){wx.request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',success: (result) => {// console.log(result)this.setData({swiperList: result.data.message})}})
}② 第二种
在request/index.js下使用 es6的 promise 进行封装export const request=(params)=>{const baseUrl="https://api-hmugo-web.itheima.net/api/public/v1";return new Promise ((resolve,reject)=>{wx.request({...params,url:baseUrl+params.url,success:(result)=>{resolve(result);},fail:(err)=>{reject(err);} });})}
在index.js中引入，使用getSwiperList()来直接在onLoad:function()中调用
import { request } from "../../request/index.js";
// 获取轮播图数据
getSwiperList(){request({url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'}).then((result) => {// 轮播图接口问题解决办法result.data.message.forEach((v, i) => {result.data.message[i].navigator_url = v.navigator_url.replace('main', 'index');});this.setData({swiperList: result.data.message})}).then()......
}

效果图

二、分类页面

关键点

scroll–view 组件
es7的 async 和 await

1、认识*this
<!-- *this 代表在 for 循环中的item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字 --><!-- class="menu_item {{index===currentIndex?'active':''}}" 这是给点击的标题默认高亮 -->
<viewclass="menu_item {{index===currentIndex?'active':''}}"wx:for="{{leftMenuList}}"wx:key="*this"bindtap="handleItemTap"data-index="{{index}}"
> {{item}}</view>

2、缓存问题的解决办法

web中的本地存储和小程序中的本地存储的区别：

1、代码不一样
web: localStorage.setItem(“key”,“value”); localStorage.getItem(“key”)
小程序中: wx.setStorageSync(“key”, “value”); wx.getStorageSync(“key”);

2、类型转换
web: 不管存入的是什么类型数据，最终都会先调用 toString()，把数据变成了字符串再存
小程序: 不存在类型转换的这个操作，存什么类似的数据进去，获取的时候就是什么类型

  onLoad: function (options) {//获取本地存储中的数据const Cates = wx.getStorageSync("cates");// 1、先判断一下本地存储中有没有旧的数据if (!Cates) {// 不存在  发送请求获取数据this.getCates();} // 2、有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可 定义过期时间else {        if (Date.now() - Cates.time > 1000 * 10) {// 有旧数据 但是过期了 直接发送新请求 重新发送请求this.getCates();} else {// 有数据 没有过期 可以使用旧的数据this.Cates = Cates.data;let leftMenuList = this.Cates.map(v => v.cat_name);let rightContent = this.Cates[0].children;this.setData({leftMenuList,rightContent})}}},

3、es7的 async 和 await

先在category/index.js 引入 import regeneratorRuntime from '../../lib/runtime/runtime'使用es7的 async async getCates() {// request({//         url: "https://api-hmugo-web.itheima.net/api/public/v1/categories"//     })//     .then(res => {//         this.Cates = res.data.message;//     // 把接口的数据存入到本地存储中//     wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });// 构造左侧的大菜单数据//         let leftMenuList = this.Cates.map(v => v.cat_name);// 构造右侧的商品数据//         let rightContent = this.Cates[0].children;//         this.setData({//             leftMenuList,//             rightContent//         })//     })//使用es7的async await来发送请求const res = await request({url: "/categroies"});this.Cates = res.data.message;// 把接口的数据存入到本地存储中wx.setStorageSync("cates", {time: Date.now(),data: this.Cates});// 构造左侧的大菜单数据let leftMenuList = this.Cates.map(v => v.cat_name);// 构造右侧的商品数据let rightContent = this.Cates[0].children;this.setData({leftMenuList,rightContent})},

效果图

三、商品列表页面

关键点

1、上拉和下拉效果
2、tab⾃定义组件

1、子父组件传值：
自定义组件tabs要点
在子组件里面，先进行事件绑定
bindtap="handleItemTap"
data-index="{{index}}"基本结构以及传参设置好后，在Tabs.js中写入
properties: {tabs:{type:Array,value:[]}},
// 点击事件
handleItemTap(e){// 1 获取点击的索引const {index}=e.currentTarget.dataset;// 2 触发 父组件中的事件 自定义this.triggerEvent("tabsItemChange",{index});
}父组件
<!-- 在index.wxml中，自定义事件的监听 -->
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleItemChange"></Tabs>标题点击事件 从子组件传值过来的handleItemChange(e) {// 1、获取被点击事件的标题索引const {index} = e.detail;//2、修改源数组let {tabs} = this.data;tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);//3、赋值到data中this.setData({tabs})}

2、上拉 和 下拉 效果onReachBottom(){//  1 判断还有没有下一页数据if(this.QueryParams.pagenum>=this.totalPages){// 没有下一页数据wx.showToast({ title: '没有下一页数据' });         }else{// 还有下一页数据this.QueryParams.pagenum++;this.getGoodsList();}},// 下拉刷新事件 onPullDownRefresh(){// 1 重置数组this.setData({goodsList:[]})// 2 重置页码this.QueryParams.pagenum=1;// 3 发送请求this.getGoodsList();}

效果图

四、商品详情页面

关键点

1、本地存储实现
2、富⽂本标签的使用
3、⼩程序预览图⽚接⼝ previewImage

1、为了方便展示图文，使用富⽂本标签来进行图文渲染
<!-- {{goodsObj.goods_introduce}} -->
<rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text>2、⼩程序 预览图⽚接⼝————previewImage
在 wxml 的 swiper-item 标签中
bindtap="handlePreviewImage"
data-url="{{item.pics_mid}}"在对应文件的index.js中
// 点击轮播图 放大预览handlePreviewImage(e) {// 1 先构造要预览的图片数组 const urls = this.GoodsInfo.pics.map(v => v.pics_mid);// 2 接收传递过来的图片urlconst current = e.currentTarget.dataset.url;wx.previewImage({current, //解构赋值，原型current:currenturls //解构赋值，原型urls:urls });   }

3、购物车——本地存储实现// 点击 加入购物车handleCartAdd() {// 1 获取缓存中的购物车 数组let cart = wx.getStorageSync("cart") || [];//第一次可能没有缓存数据，则设置cart为空// 2 判断 商品对象是否存在于购物车数组中let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);if (index === -1) {//3  不存在 第一次添加this.GoodsInfo.num = 1;this.GoodsInfo.checked = true;cart.push(this.GoodsInfo);} else {// 4 已经存在购物车数据 执行 num++cart[index].num++;}// 5 把购物车重新添加回缓存中wx.setStorageSync("cart", cart);// 6 弹窗提示wx.showToast({title: '加入成功',icon: 'success',// true 防止用户 手抖 疯狂点击按钮 mask: true});},

效果图

补充：⼩程序中⽀持es7的async语法

es7的 async 据说是解决回调的最终⽅案

在⼩程序的开发⼯具中，勾选 es6转es5语法

下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js

在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去

在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）

import regeneratorRuntime from '../../lib/runtime/runtime'

启动第一个微信小程序（二）

启动第一个微信小程序（一）相关推荐

《移动软件开发》实验1：第一个微信小程序实验报告
2022年夏季<移动软件开发>实验报告本实验报告所参考实验文档为:Docs (feishu.cn) 如想获得详细的制作过程,请点击上面链接.该博客仅为个人使用实验报告姓名和学号? / ...
微信小程序开发笔记（二）第一个微信小程序
参考教材:<微信小程序开发入门与实践> 雷磊前置知识:JavaScript,CSS 新建项目安装好微信开发者工具后,我们就可以开始新建我们第一个微信小程序了. 选择新建项目,填入一个项 ...
《移动软件开发》实验一：第一个微信小程序
2022年夏季<移动软件开发>实验一:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法:2.学习不使用模板手动创建小程序的方法. 二.实验步骤 1.自动生成小程序 ...
如何部署我们的第一个微信小程序EGO商城
一.部署步骤二.工具准备 1.自主将百度网盘链接软件安装下载并且安装相关软件链接:https://pan.baidu.com/s/1o7Rwp0IqCO2QIxRm5WSIdw?pwd=1024 ...
微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...
新手尝试编写微信小程序（1）——我的第一个微信小程序
微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多个平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿 ...
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...

启动第一个微信小程序（一）