HM品优购小程序开发(一)

一、引导

这个视频真良心，up主将的是真不错，感兴趣的小伙伴，可以去学习一下，个人建议，可以先去学习一下vue,然后再来学习这个视频，就会有种似曾相识，又有一种豁然开朗的感觉。酸爽哦。

小程序学习教程地址

二、项目搭建

1、新建小程序项目

安装微信开发者工具后，创建项目，填写项目名，和AppID.

2、搭建目录结构

3、搭建项目的页面

4、引入字体图标

阿里巴巴字体图片库

1. 打开阿里巴巴字体图标网站
2. 选择图标，进入购物车查看
3. 将图标添加至项目
4. 选中font class ,然后点击查看在线链接。
5. 就可以获取css样式了，然后粘贴进小程序的全局wxcss中，引用jiuOK了。

5、搭建tabbar结构

在全局的app.json中搭建tabbar结构

三、项目页面实现（一）

小程序全局配置(app.json)

全局配置

单页面配置(Page)

page

1、首页效果图

1、自定义组件

使用场景，多个页面都需要使用重复内容时，就可以用自定义组件，

新建components目录，在目录中新建子组件文件夹，然后新建组件，父组件引用子组件。

2、轮播图，swiper、swiper-item组件

swiper中使用swiper-item组件来构建轮播图。

3、数据获取wx.request，wx.showLoading显示加载中

这里需要通过发送一步请求获取数据。获取数据需要在响应的页面导入

import {request} from "../../request/index.js"

注意：这里的异步请求可能会嵌套异步请求，会容易死循环，所以这里利用ES6中的promise来进行优化，防止出现回调地狱的问题

有关回调地狱的问题

promise的具体介绍和使用

优化后的代码

1. pormise详解

2、优化获取数据，将基本路径提取出来。

// 定义变量，标记同时发送异步的次数
let ajaxTimes=0;
export const request=(params)=>{
    ajaxTimes++;
    // 显示加载中
    wx.showLoading({
        title: '加载中',
        mask: true
    })
    // 定义公共的url
    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);
            },
            complete:()=>{
                ajaxTimes--;
                if(ajaxTimes==0){
                    // 关闭等待的图标   
                    wx.hideLoading();
                }
            }
        });    
    })
}

同时获取数据使用es7的async语法，这里使用async语法，记得在小程序开发工具中的详情中的本地设置勾选增强编译。不然就需要使用别的方法。

4、使用本地存储wx.setStorageSync

数据缓存

使用本地存储，和web类似，但是需要注意使用格式。本地存储有过期事件

如果你第一次获取数据，存入到本地，可以不用发送请求获取数据。优化应用。

/**
     * 0 web 中的本地存储 和 小程序的本地存储不一样
     *  1 写代码的方式不一样了
     *   web：localStorage.setItem("key","value")  localStorage.getItem("key")
     *   小程序中：wx.setStorageSync("key","value"); wx.getStorageSync("key");
     *  2： 存的时候 ，有没有做类型转换
     *    web:不管存入的是什么类型的数据，最终都会先调用一下toString(),把数据变成了字符串，在存入
     *    小程序：不存在，类型转换的的操作， 存什么类型的数据进去，获取的时候就是什么类型
     * 1、先判断本地存储中有没有数据
     */
    wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});

2、tabbar商品分类效果图

1、scroll-view组件

1、scroll-veiw使用说明

2、navigator超链接组件

1、navigator组件使用说明

3、商品列表

1、结构介绍

1、搜索栏是使用之前的自定义组件

2、下面的页面内容，包括标题，商品列表使用的也是一个自定义组件

2、Tabs自定义组件、slot插槽

标题栏还是用原来的方法，父子组件之间的数值传递，事件触发。

不同的是商品类别的内容。在子组件中使用了插槽，这样就可以在父组件中编写商品列表了。

 <view class="tabs_content">
        <slot></slot>
    </view>

在父组件中的子组件编写内容。

4、上拉触底、下拉刷新功能

这两个函数页面中的时间处理函数，其中wx.showToast，显示触底提示。

wx.hideLoading();关闭下拉加载提示。

框架接口页面（Page）

5、商品详情

这里主要就是两个点

1、点击轮播图图片大图预览。

2.图文详情显示的问题，因为没有固定的格式。

1、wx.previewImage点击轮播图图片大图预览

这里用到了wx.previewImage函数，去实现图片大图阅览。

2、rich-text 富文本组件

富文本组件，可以将html代码完全解析出来。

<rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text>

注意：苹果手机解析不了这种格式的html中的图片格式，需要与后台练习，或者做一下替换成.jpg。

四、页面实现（二）

1、加入购物车功能

其中wx.showToast()是弹出提示

duration:延迟操作

mask: 是否显示透明蒙层，防止触摸穿透

2、购物车

1、效果图

2、功能实现

以下九个功能实现中有一些要记住的：

wx.getSetting()：用户请求过的权限信息

wx.chooseAddress()：获取地址

获取地址在使用前，需要授权：res1.authSetting[“scope.address”]：权限状态是否开启

**openSetting()：**开启诱导，让用户重新去授权。

**showToast()：**弹框提示，没什么好说的

**wx.navigateTo（）：**路由跳转

**cart.splice(index,1)：**数组删除

**async：**用到最多的就是es7的promis 形式，这里应该是异步请求。重点

**传参：**页面一般用data-X 来传递参数，数据会存的数据源中。例如：e.currentTarget.dataset中。

1. 获取用户的收货地址
2. 页面加载时，获取数据显示
3. onShow，页面加载，给商品添加num、checked属性。
4. 复选框全选的判断
5. 计算 总价格 和 总数量
6. 商品选中功能切换
7. 全选和反选
8. 商品数量的+、- 编辑
9. 结算跳转

1、获取用户的收货地址
 *    1、绑定点击事件
 *    2、调用小程序内置 api 获取用户的收货地址 wx.chooseAddress
 * 
 *    2、 获取 用户  对小程序  所授予 获取地址 权限 状态 scope
 *      1、 假设用户 点击获取收货地址的提示框 确定 authSetting scope.address
 *        scope 值 true  直接调用 收货地址
 *      2、 假设 用户 点击获取收货地址的提示框 取消
 *        scope  falsev
 *      3、 假设 用户 从来没有调用过 收货地址api
 *        scope  undefined  直接调用 收货地址 
 *        1、诱导用户 自己 打开 授权设置界面 当用户重新给与 获取地址的权限的时候
 *        2、获取收货地址
 *      4、 把获取到的地址，存入本地缓存中
 *  2、页面加载时
 *    1、获取缓存中存储的地址
 *    2、将数据存入data中
 *    3、在页面显示  
 *  3、 onShow
 *    0、回到商品详情页面，第一次添加商品的时候，手动添加了属性
 *        1、 num = 1;
 *        2、 checked = true;
 *    1、 获取缓存中的购物车数据，
 *    2、 将数据填充到data中
 *  4、全选数据
 *     1、在onShow页面加载时，判断所有商品是否选择，如果选择，就把全选勾上
 *     2、在data中定义allChecked变量
 * 5、总价格 和总数量
 *    1、都需要商品被选中，我们才计算
 *    2、获取购物车数组
 *    3、遍历
 *    4、判断checked
 *    5、总价格 += 商品的单价* 数量
 *    6、总数量 += 商品的数量
 *    7、把数据设置会data中。
 * 6、商品选中功能切换
 *   1、绑定change事件
 *   2、获取被修改的商品对象
 *   3、商品对象的checked取反
 *   4、重新填充回data、缓存中
 *   5、重新结算全选、总价格、总数量。。
 * 7、全选和反选
 *    // 1、获取data中全选，cart的值
 *    // 2、改变allchecked 的状态
 *    // 3、改变cart中的checked状态
 *    // 4、把数据放回去
 * 8、商品数量的编辑
 *    1、“+”，“-” 绑定同一事件、区分的关键、自定义属性
 *      1、“+”  “+1”
 *      2、”-“  ”-1“
 *   1、先获取商品id、和操作符
 *   2、获取购物车数组
 *   3、根据商品id,拿到商品索引
 *   4、修改商品的num，当num=1,用户点击 “-”
 *      1、弹窗提示，是否要删除。  wx.showModal弹窗
 *        确定删除、取消不操作。
 *   5、把数据返回去
 * 9、结算跳转
 *    1、判断是否有收获地址
 *    2、判断购物车是否为空
 *    3、跳转到支付页面