前端小程序

小程序第一天

小程序相关概念

1.0 小程序相关的问题

• 什么是小程序
  • 跳一跳：小游戏
  • 智能出行：抢火车票
  • 美团
  • 小黄车
  • 运行在微信上的一些应用
• 小程序有什么用
  • 用户：
    • 可以不用下载 APP，通过微信就能使用到 APP 中的服务
    • 方便了用户的使用
  • 商家：
    • 相当于一推广的平台
    • 推广方式：
      • 公众号
        • 小程序
        • 服务号
        • 订阅号
        • 企业微信
• 为什么要学习小程序
  • 设计理念：
    • 即开即用，用完即走
    • 轻量级
  • 业界对它的评价：
    • 流量的统一入口
    • 去 APP 化
  • 用户基数大
    • 突然月活数 10 亿
  • 小程序设计时有限制：
    • 一个应用最多只能有 2 M.

课前准备

2.0 查看文档

• 步骤：
  • 百度关键字 — 微信公众平台
  • 微信公众平台官网
  • 微信小程序
  • https://developers.weixin.qq.com/miniprogram/dev/framework
• 学习步骤：
  • 申请帐号
  • 安装开发工具
  • 书写代码

3.0 注册小程序帐号

• 步骤：
  • 账号信息
    • 一个邮箱只能成为一种类型的公众号
    • 一个邮箱也可能申请一个公众号
  • 邮箱激活
  • 信息登记
    • 类型：
      • 个人
        • 只能选择个人
        • 一个人最多只能申请 5 个公众号
      • 企业
      • 组织
      • …
• 登录帐号
  • 输入帐号和密码
  • 通过微信扫码登录小程序后台管理页面
• 获取 APPID
  • 开发 —> 开发设置
  • APPID: wxdbb056e870f2e4cb

4.0 安装小程序开发工具

• 说明：
  • 小程序有自己的开发工具：
    • 微信开发者工具
  • 自行下载安装
• 下载：
  • https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 安装：
  • window:
    • 双击 —> 下一步 。。。。 安装成功

hello world ---- 小程序

5.0 创建第一个小程序

• 步骤：
  • 打开微信开发者工具
  • 使用微信扫码登录
  • 点击小程序-创建小程序
    • 项目名
    • 项目路径
    • appid
    • 不使用云服务器
    • 语言： javascript

6.0 开发工具的组成

• 菜单栏
• 工具栏
  • 预览
  • 描述二维码
    • 自动预览
  • 切后台
• 模拟器
• 编译器
• 调试器

7.0 项目结构

• 对比：

  • web页面：
    • 技术栈：
      • html
        • 从语义化的角度来描述页面结构
      • css
        • 从审美的角度来美化页面
      • js
        • 从交互的角度来提升用户体验
  • 小程序页面
    • 技术栈：
      • wxml
        • 描述微信页面的结构
      • wxss
        • 描述微信页面的样式
      • js
        • 书写微信的逻辑代码
      • json
        • 配置页面的相关信息

• 组成

  • pages：管理当前小程序中所有的页面

    • index

      • index.wml

      • index.js

        • 注意点：

          • 所有的代码都是写在

            Page({
              
            })
            

      • index.wxss

      • index.json

        • 注意点：
          • 如果没有内容，必须添加一个空对象

  • app.json：注册小程序中的页面

• 小技术

  • 快速创建一个页面
    • 在 app.json 中的 pages 下添加一个路径，直接保存，可以自动生成对应的页面
  • 设置项目的默认首页
    • 在 app.json 中的 pages 将路径移到第一个元素中

开发小程序 — 页面操作

8.0 页面设置

• 创建页面
• 设置为启动项

9.0 页面操作

• 书写 wxml
  • 对比：
    • html:
      • wxml 与 html 一样都是用来决定页面的结构
      • html 中的使用标签来描述页面结构
      • wxml 中不能识别标签，只能识别组件
  • 组件：
    • wxml 中的组件的作用与 html 中标签的作用一样
    • 内容：
      • view
        • 视图容器
      • image
        • 图片
      • …
• 书写 wxss
  • 对比：
    • 与法与 css 基本一致

案例：商品介绍

开发小程序 — 数据操作

10.0 数据绑定

• 步骤：

  • 在 js 文件中的 data 中定义一个数据

    -- main.js
    Page({
    	data: {
    		imgList: ['1', '2']
    	}
    })
    

    ​

  • 在 wxml 通过 {{}} 的方式显示

    -- main.wxml
    <view>
    	<image src="{{imgList[0]}}"></image>
    </view>
    

    ​

11.0 事件绑定

• 步骤：

  • 在 wxml 中通过 bind 关键字绑定事件

    -- main.wxml
    <button bindtap="fn"></button>
    

  • 在 js 中实现这个事件

    -- main.js
    Page({
      data: {},
      fn() {
        console.log('我是fn')
      }
    })
    

    ​

12.0 数据更新

• 在方法中取得 js 中 data 下面的数据

  -- main.js
  Page({
    data: { num: 0 },
    fn() {
  	this.data.num	
    }
  })
  

• 在方法中修改 js 中data下面的数据

  -- main.js
  Page({
  	data: { num: 0 },
  	fn () {
  		this.setData({
  			num: this.data.num + 1
  		})
  	}
  })
  

  ​

案例：图片切换

案例：轮播图实现

• 步骤：
  • 创建一个小程序页面
  • 完成结构与样式
  • 使用 swiper 添加一个轮播图

13.0 列表渲染

• wx:for & wx:key

  • 作用：用来遍历数据源

  • 语法：

    <view wx:for="{{imgList}}" wx:key="{{ index }}">
    	<view> {{item}} {{ index }} </view>
    </view>
    

• block

  • 作用：只在代码书写阶段起作用，代码运行起来以后会被干掉

14.0 模块化

• 目标：
  • 将轮播图中的数据单独提取到一个 js 文件中
• 支持 commonjs 规范
  • 导出： module.exports
  • 导入： require(‘’)

15.0 页面跳转

• 目标：
  • 在一个页面中有一个导航
  • 点击以后会跳转到另一个页面中
• navigator 组件
  • 从一个页面跳转到另一个页面
  • 声明式导航
• 导航
  • 声明式导航
    • 通过标签来进跳转:
  • 编程式导航
    • 通过书写js代码来进行跳转: window.location = “www.baidu.com”

16.0 参数的传递

• 传参：

• 接收参数

  Page({
    onLoad(options){
  	console.log(options.name)
    }
  })
  

案例：克鲁赛德战记数据渲染

• 1.0 项目的创建

• 2.0 创建一个首页

  • 2.1 完成静态页面
    • 结构
    • 样式
  • 2.2 动态渲染数据
  • 2.3 给每个元素添加一个导航，跳转到另一个页面：详情页面

• 3.0 添加详情页面

  • 3.1 完成静态页面

    • 结构
    • 样式

小程序第二天

复习

0.0 昨日内容

• 三个问题：
  • 什么是小程序
    • 微信中的一种应用
  • 小程序有什么作用
    • 用户：
      • 可以让用户不下载app， 从而使用 app 中的服务
    • 商家
      • 推广平台： 公众号
        • 小程序
        • 服务号
        • 订阅号
        • 企业微信
  • 为什么要学习小程序
    • 载体是微信
      • 月活数：10亿
    • 设计理念
      • 即开即用，用完即走
      • 特点：
        • 小：大小限制在 2M
        • 快：性能要求高
        • 功能比较少
    • 业内评价：
      • 流量的统一入口
      • 去 APP 化
• 学习步骤：
  • 查找文档
  • 申请帐号
    • 获取 APPID
  • 安装开发工具
    • 菜单栏
    • 导航栏
    • 模拟器
    • 编辑器
    • 调试器
  • 创建第一个小程序项目
    • 扫码登录
    • 小程序—> 新建小程序
      • 项目名
      • 项目路径（提前创建好一个空的文件夹）
      • APPID
  • 项目结构
    • pages：用来管理当前项目中的所有页面
      • index 页面文件
        • index.js 逻辑代码文件
        • index.json 页面的配置文件
          • 配置页面窗口的表现
        • index.wxml 结构文件
        • index.wxss 样式文件
    • utils：工具包，用来存放一些辅助性的文件
    • app.json：项目的配置文件
      • pages: 数组，用来保存当前项目中的所有页面路径
• 书写代码
  • wxml：
    • 绑定数据
      • 在 js 文件中定义数据
      • 通过插值表达式输出： {{ }}
    • 事件的绑定
      • bind + 事件名
        • bindtap=“fn”
  • wxss:
    • 与 css 的书写方式一样
  • js
    • 定义数据
      • data属性中定义
    • 定义方法：
      • 直接在page方法下面定义
    • 在方法中取得 data 中的数据
      • this.data.xx
    • 在方法中给 data 中的内容赋值
      • this.setData({ xx: xx })
    • 接收参数
      • onLoad(options) { }
• 小技术：
  • 在 app.json 中的 pages 下面添加一个路径，保存，会自动生成一个页面
  • 在 app.json 中的 pages 下将某一路径放到最前面，这一路径就是项目的启动项
  • 可以在模拟器下面查看页面的传参
• 案例：游戏案例

知识点扩展：

1.0 小程序中的编程式导航

• 导航
  • 声明式导航
    • vue：
    • 小程序：
  • 编程式导航
    • vue
      • this.$router.push()
    • 小程序
      • wx.navigatorTo({ url: ‘’ })
• wx
  • 它在小程序中的作用相当于是 js 中的 window 对象

2.0 小程序中事件的传参

• 传参：

  -- main.wxml
  <view bindtap="fn" data-name="xjj"></view>
  

• 接收

  -- main.js
  Page({
  	fn(event) {
  		let name = event.currentTarget.dataset.name;
  	}
  })
  

3.0 编译模式的设置方式

• 工具栏中的普通编译

  • 添加编译模式

    ​

完成 lol 案例

3.0 创建项目结构

• 准备工作
  • 静态页面
  • 页面数据
• 创建项目

4.0 完成英雄页面

• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
  • 将 js 文件中的数据进行渲染
• 完成页面中导航区域的表现
  • 内容
    • 背景颜色
      • navigationBarBackgroundColor
    • 标题
      • navigationBarTitleText
    • 文本颜色
      • navigationBarTextStyle

5.0 完成英雄详情

• 添加一个详情页面
  • 给详情页面设置一个入口
  • 创建一个详情页面
• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
  • 得到所有的详情数据
  • 根据页面上的id从数据中得到具体数据
  • 渲染到页面上
• 修改详情页面的表现
  • 背景颜色
  • 文本
  • 文本颜色
• 动态设置导航标题
  • wx.setNavigationBarTitle()

小程序的发布上线

6.0 发布流程

• 步骤
  • 开发者工具
    • 将小程序的源代码提交到微信的服务器中
      • 上传
        • 按照提示完成代码的设置
  • 小程序后台管理
    • 提交审核
• 前置工作：
  • 完善当前小程序帐号的信息

mpvue

7.0 基本概念

• 三个问题：
  • 是什么
    • 小程序的开发框架
  • 有什么用
    • 用来开发小程序
    • 使用 vue 的语法来开发小程序
  • 怎么用
• 学习资料
  • 官方文档
    • github 中搜索
    • http://mpvue.com/

8.0 使用步骤

• 初始化一个 mpvue 项目

  • 前置工作：

    • 下载 nodejs
    • 检查 npm 版本
    • 修改 taobao 源

  • 生成项目：

    • 方式一：

      • 安装 vue-cli 2.x 的版本

        npm install --global vue-cli@2.9
        

      • 生成项目：

        vue init mpvue/mpvue-quickstart my-project
        

    • 方式二：

      • 安装 vue-cli 3.x 版本

        npm install --global vue-cli
        

      • 安装一个 3.x 到 2.x 的桥接工具

        npm install -g @vue/cli-init
        

      • 生成项目

        vue init mpvue/mpvue-quickstart my-project
        

        ​

• 搭建小程序的开发环境

  • 运行项目：
    • cd my-project
      • 进入项目目录
    • cnpm i
      • 下载第三方包
    • npm run dev
      • 将 vue 项目打包成为小程序项目

• 调试开发 mpvue

9.0 开发模式

• 代码的编辑
  • 运行项目： npm run dev
    • 将 vue 项目打包成为小程序项目
  • 使用 vscode
• 效果的查看
  • 使用微信开发者工具

10.0 了解 mpvue 项目结构

• 入口：
  • main.js —> 加载 app.vue
  • app.vue —> 加载 app.json
  • app.json 管理了所有的页面路径
    • pages/index/main
      • pages —> index —> main.js ----> 加载了 index.vue
    • pages/log/main
• 新建一个自己的页面：
  • 步骤：
    • 找到 app.json
      • pages 中添加路径： pages/demo/main
    • 找到 pages 文件夹
      • 在 pages 中添加文件夹 demo
      • 在 demo 中添加文件
        • main.js
        • index.vue
    • 重启项目（修改 app.json 中内容之后需要重启）：
      • npm run dev

使用 mpvue 开发 lol

11.0 搭建项目结构

• 创建一个项目

12.0 完成英雄列表

• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
• 注意事项：
  • mpvue 中不能使用小程序中的数据操作语法：
    • {{}}
    • wx:for
    • bindtap
    • …
  • 如果需要设置页面的表现
    • 创建一个 json 文件: main.json
    • 在 main.json 中添加配置

13.0 完成英雄详情

• 创建页面
  • 设置一个详情的入口
  • 添加参数
  • 跳转到详情页面
  • 添加一个详情页面
• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
  • 接收数据的 id
  • 导入数据源
  • 从数据源中获取对应的详情数据
• 总结：
  • 1.0 在 template 中
    • 不要使用 小程序的中的数据操作代码
    • 可以使用小程序中的组件

小程序第 3 天

复习&今日内容

1.0 复习

• 小程序的导航方式：

  • 声明式导航
  • 编程式导航
    • wx.navigateTo({url: ‘/pages/index/main’})

• 事件的传参

  • 传参

  • 接收参数

    fn(event) {
    	let query = event.currentTarget.dataSet.xxx
    }
    

• 编译模式的设置

• 使用原生小程序完成 lol 案例

• 使用 mpvue 完成 lol 案例

2.0 今日内容

• rpx:
  • 小程序中 wxss 中提供的一种新的长度单位
• 在小程序中发送异步请求
  • XMLHttpRequest
  • $.ajax
  • axios
  • wx.request()
• 自己封装自己的请求文件
  • 使用 promise 来封装
  • 使用 async 和 await 来调用
• 项目：豆瓣电影

小程序补充

3.0 rpx

• 是什么
  • wxss 中提供的一种新的长度单位
  • px
    • em
    • rem
      • 让同一个页面在不同设备中显示比例保持一致
• 有什么用
  • 让同一个页面在不同设备中显示比例保持一致
• 怎么用
  • 结论：
    • 将来在 750 的设计稿上测量出的长度单位改为 rpx ，就可以自动适配不同的屏幕

4.0 在小程序中发送异步请求

• 对比 web 端的异步请求：

  • web 端

    • XMLHttpRequest
    • $.ajax()
    • axios

  • 小程序

    • wx.request({
      	url: '', // 请求的路径
      	method: "", // 请求的方式
      	data: {}, // 请求的数据
      	header: {}, // 请求头
      	success: (res) => {
            	// res  响应的数据
      	}
      })
      

    • 注意点：

      • 小程序请求豆瓣接口
        • 必须携带 APIKey
        • 必须设置请求头： content-type: json

• 合法域名

  • 概念：
    • 微信限制了小程序向其它服务器发送请求的能力
    • 如果要向其它服务器发送请求必须设置合法域名
  • 步骤
    • 登录小程序后台
    • 开发 —》 开发设置 —》request 合法域名 —》动态添加
  • 注意点：
    • 如果不想设置合法域名
      • 在详情中勾选不校验合法域名，也可以发送请求到其它服务器
        • 1.0 只能在开发工具中起效果
        • 2.0 如果将来上线，小程序依旧无法请求响应的服务器

5.0 使用 promise 封装 wx.request

• 前置 promise

  • 是什么

    • es 中内置的一个对象

  • 有什么用

    • 解决 js 中的回调地狱

  • 怎么用

    • 创建对象

      • var p = new Promise((resolve, reject) => {
          // 逻辑代码
          if () {
            resolve(data)
          } else {
          	reject(err)
          }
        })
        

    • 调用方法

      • p.then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
        

• 开始封装

  • 步骤：
    • 1.0 创建一个单独的 js 文件
    • 2.0 在 js 文件中通过 promise 对象将 wx.request 进行封装
    • 3.0 在代码中引入并且使用

6.0 使用 async & await 来改造 promise

• 概念
  • 是什么
    • ES7 中提出的新的技术
  • 有什么用
    • 将 promise 对象中异步的方法以同步的方式进行书写
• 用法：
  • async：
    • 用来修饰异步代码所在的函数
  • await
    • 用来修改异步代码
  • 结果：
    • 异步代码会返回一个结果：操作完成后的结果
  • 特点：
    • 异步代码虽然是以同步的方式进行书写，但是依旧是异步执行的
    • await 修饰的对象一定要返回一个 promise 对象

项目

7.0 豆瓣电影

7.1 项目准备

• 项目开发流程
  • 销售 —> 客户
    • 客户 —> 下单 ，支付 30% 定金
  • 产品经理 —> 客户
    • 实地考察
    • 需求调研
    • 整理需求文档
  • 项目经理
    • 需求文档
    • 开发文档
      • 原型图
    • 美工
      • 原型图 — 设计项目界面
    • 后端
      • 开发文档 — 开发接口
    • 前端
      • 设计稿 — 完成页面的编写
      • 开发文档 — 完成业务逻辑
    • 测试
      • 有bug ，打回，修改 bug
    • 上线
  • 程序员 —> 客户 ： 系统培训
  • 老板收钱
• 项目准备材料
  • 设计稿
  • 开发文档
    • https://blog.csdn.net/hlx20080808/article/details/83274513
• 创建一个项目
  • 使用 MPVUE 来开发豆瓣

7.2 首页

• 完成静态页面
  • 结构
  • 样式
• 动态渲染数据
  • API：
    • https://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a
  • 方式：
    • GET
  • 参数
    • apikey: 豆瓣电影的标识
    • 请求头：
      • content-type: json
• 动态渲染星星
  • 步骤：
    • 完成星星的静态结构
    • 计算星星的个数
      • 算法：
        • 分数： 0 ~ 2 1 星
        • 分数：2 ~ 4 2 星
        • 分数：4 ~ 6 3 星
        • 分数：6 ~ 8 4 星
        • 分数：> 8 5 星
      • 当得到数据源之后，在数据中添加一个属性，属性对应的是每个影片的星星数据

7.3 更多

• 完成静态页面
  • 设置一个页面的入口并携带了type参数
  • 创建一个静态页面
  • 接收参数 type，并且根据type设置页面的标题
  • 结构
  • 样式
• 动态获取数据
  • 确定到底获取哪个数据
    • 正在热映
      • https://api.douban.com/v2/movie/in_theaters
    • top250
      • https://api.douban.com/v2/movie/top250
    • 根据传递过来的参数设置请求的路径
• 渲染到页面上

扩展知识：

• 小程序中使用 scrollview 的注意点
  • 1.scroll-view 中的需要滑动的元素不可以用 float 浮动；
  • 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；
  • 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；
  • 4.包裹 scroll-view 的大盒子有明确的宽和加上样式–>  overflow:hidden;white-space:nowrap;
  • https://www.cnblogs.com/miu-key/p/7606024.html
• 在 mpvue 中小程序的生命周期与 vue 的生命周期是如何执行的
  • beforeCreate
  • created
    • onLoad
  • beforeMount
  • mounted
  • 。。。。

小程序第四天

复习

1.0 复习

• rpx：
  • 概念
    • 用来让页面适配不同的屏幕
  • 用法
    • 在宽度为 750 的设计稿上进行测量，量出的长度单位改为 rpx 就可以
    • 与 rem 的用法相似，比 rem 更加简单
• 在小程序中发送异步请求
  • wx.request({ url: ‘’, method: ‘’, data: {}, header: {}, success: res=> {} })
• 小程序设置合法域名
  • 让小程序中可以向外部服务器发送请求
• 使用 promise 来封装 wx.request
• 使用 async 和 await 来改造 promise
• 案例：豆瓣电影
  • 首页
    • scroll-view：滚动组件
    • 动态渲染星星
      • 数据源中根据分数计算星星数
      • 再根据星星数据动态渲染星星的图片
  • 更多

2.0 今日内容

• 完成详情页面展开功能
  • 添加详情页面
  • 完成剧情简介区域

前置知识点：

3.0 tabBar

• 概念
  • 移动端页面的导航栏
• 步骤：
  • 1.0 创建四个 tab 页面
  • 2.0 将这四个页面配置为 tab
    • 在 app.json 中的 tabBar 下进行配置
      • color: 文本默认颜色
      • selectedColor: 文本选中颜色
      • backgroundColor: tab 栏的背景色
      • border: 边框
      • postion: tab 所在的位置
      • list： tab 栏的 tab 选项 数组
        • 对象
          • pagePath: tab 选项的路径
          • text: tab 选项中的文本
          • iconPath: 图片的路径
          • selectedIconPath：选中图片的路径
• 特点：
  • 1）只有配置在 tabBar 中的页面才有 tab 栏
  • 2）从 非 tab 页面跳转到 tab 页面
    • 不能使用 navigateTo
    • 应该使用 switchTab

4.0 组件： input

• 特点：
  • 1）默认没有边框
  • 2）如何默认输入框中的内容
    • 添加一个事件： input ==> bindinput
    • 通过事件源参数获取
      • event.detail.value

项目：品优购

5.0 项目准备：

• 项目资料：
  • 设计稿
  • 接口文档
• 创建项目
  • 使用 mpvue 来创建项目
• 对项目结构进行改造
  • 1.0 删除默认的 tabBar
  • 2.0 复制 pages 下的 index, 创建一个自己的 home
  • 3.0 配置自己 home 路径，删除 index & log 的路径
  • 4.0 重启项目： npm run dev
• 完成 tab 栏
  • 1.0 创建四个页面
  • 2.0 通过 tabBar 来配置 tab 页面

6.0 完成首页

• 根据设计稿完成静态页面
  • 设置标题
  • 结构
  • 样式
• 根据接口文档请求数据
  • 封装一个自己的请求文件
  • 获取轮播图的数据
    • 调用方法来获取数据
      • API：https://autumnfish.cn/wx/api/public/v1/home/swiperdata
      • 方式：GET
      • 参数：无
      • 返回数据
        • message
        • meta
  • 获取分类导航的数据
    • 调用方法来获取数据
      • API： https://autumnfish.cn/wx/api/public/v1/home/catitems
      • 方式：GET
      • 参数：无
  • 获取楼层的数据
    • 调用方法来获取数据
      • API：https://autumnfish.cn/wx/api/public/v1/home/floordata
      • 方式：GET
      • 参数：无
• 动态请数据渲染到页面上
  • 将数据保存起来
  • 再动态渲染
• 给请求添加加载动画

7.0 分类

• 完成静态页面
  • 添加页面
  • 结构
    • 将头部搜索区域封装为组件
    • 问题：
      • 希望容器的高度为除掉顶部搜索区域的剩余部分
    • 解决方案：使用定位。
      • 步骤：
        • 设置属性： position: absolute
        • 设置位置：
          • 同时给一个元素设置同一方位的两个值，将来它的宽（高）会是这两个值之间的距离
  • 样式
• 动态获取数据&渲染数据

扩展知识点：

• 在小程序中所有的组件都是块级元素

  • image 行内块级元素
  • text 行内元素

• 常用的第三方工具：

  • cnpm
    • 作用：使用淘宝镜像来下载第三方包
  • nodemon
    • 作用：自己重启项目
  • json-server
    • 作用：
      • 开启一个服务器
      • 提供一套接口：
        • 完成增删改查
      • http://localhost:3000/heros
  • http-server
    • 作用：
      • 开启一个服务器
      • 让一个文件夹中的内容可以通过网络的方式来请求

• 在 mpvue 中使用 less

  • 在 style 标签中添加属性 lang=“less”

  • 安装下载第三方包：

    • npm install -D less-loader less
      

• 添加加载动画

  • 方式一：直接在页面上显示加载动画

    • 开启加载动画

      wx.showLoading({
        title: ''
      })
      

    • 隐藏加载动画

      wx.hideLoading()
      

      ​

  • 方式二：直接在导航栏中显示加载动画

    • 开启动画

      wx.showNavigationBarLoading()
      

    • 隐藏动画

      wx.hideNavigationBarLoading()
      

      复习

1.0 昨日内容

• 豆瓣电影
  • 完成详情页面中的展开&收起功能
• 知识点：
  • tabBar
    • list
  • input
    • 特点：
      • 没有边框
      • 设置事件： bindinput
• 项目：品优购
  • 项目的搭建
  • 完成首页
    • 封装了自己的 myrequest.js 用来发送请求
    • 静态页面
    • 动态数据
  • 分类
    • 完成了一个静态页面
      • 通过定位给元素设置宽高

2.0 今日内容

• 分类页面
• 搜索列表页面
  • 下拉刷新
  • 上拉加载更多
  • 功能的修复和完善

知识点

3.0 下拉刷新

• 步骤：
  • 1.0 给页面添加一个设置：
    • enablePullDownRefresh： true
  • 2.0 在页面上进行下拉
  • 3.0 下拉时会触发事件：
    • onPullDownRefresh
• 属性：
  • backgroundColor：设置背景色
  • backgroundTextStyle：设置 loading 的样式
• 方法：
  • 停止下拉刷新
    • wx.stopPullDownRefresh

4.0 上拉加载更多

• 步骤：
  • 1.0 在页面中添加一个设置
    • onReachBottomDistance: 50
  • 2.0 上拉到底
  • 3.0 上拉到底距离为 50 时，会触发一个事件：
    • onReachBottom

品优购

5.0 分类页面

• 结构样式
  • 完成左侧的内容
    • 完成内容的布局
    • 完成激活的样式
    • 完成点击时改变激活的元素
  • 完成右侧的内容
    • 顶部图片
    • 分类选项
• 动态获取分类数据
  • API：https://autumnfish.cn/wx/api/public/v1/categories
  • 方式：GET
  • 参数：无
• 动态渲染分类数据

6.0 搜索列表页面

• 完成静态页面
  • 设置页面的入口
  • 创建页面
  • 结构&样式
• 动态获取数据
  • 步骤：
    • 1.0 接收上一个页面传递过来搜索关键字
      • 方式一：
        • onLoad(options)
      • 方式二：使用 mpvue 中提供的 API 来获取
        • 在 onload 之后的生命周期中使用 API:
          • this.$root.$mp.query
    • 2.0 根据关键字请求对应的 API 去获取数据
      • API：https://autumnfish.cn/wx/api/public/v1/goods/search?query=小米
      • 方式：GET
      • 参数
        • query: 小米 可选
        • pagesize: 页容量 可选
        • pagenum: 页码 可选
    • 3.0 将数据动态渲染到页面上
• 完成其它功能
  • 上拉加载更多
    • 基本步骤：
      • 1.0 开启上拉事件
      • 2.0 在上拉触底后给当前页 + 1
      • 3.0 重新请求下一页的数据
      • 4.0 将下一页的数据与上一页数据进行连接，再渲染
    • 完善操作：
      • 1.0 当数据已经全部加载完成时，应该不再发送请求
        • 当商品数量等于商品总数时说明加载完成，就不再需要发送请求了
      • 2.0 数据下拉结束后需要添加一个底线
      • 3.0 当上一次请求没有结束，下一次请求不能开始
        • 开关思想
          • 声明一个变量：
            • flage = true 开
            • flage = false 关
        • 声明一个变量，用来标识当前是否有请求正在发送：
          • isSend = true : 有请求正在处理
          • isSend = false : 没有请求在处理
        • 在下次发送请求之前进行判断：
          • 如果 isSend = true， 直接提示上一个请求还未结束 ，不发送请求
          • 如果 isSend = false，直接发送请求，并且将 isSend 设置为 true，当请求完成时再改为 false
  • 下拉刷新
    • 基本步骤：
      • 1.0 开启下拉刷新
      • 2.0 触发下拉刷新事件
        • 2.1 将原有的数据全部清除
        • 2.2 重新请求数据
    • bug：下拉时没有下拉的背景
      • 原因：
        • 下拉的背景其实存在 ，只是被 top 区域的固定定位给挡住了
      • 方案：
        • 当下拉时最好让 top 区域不要是固定定位
        • 当向下滚动时，再让 top 区域重新回到固定定位
      • 步骤：
        • 1.0 当滚动条处理顶部时， top 区域处理静态定位
        • 2.0 当滚动条向下滚动时，top 区域处理固定定位

总结

7.0 小程序的配置文件

• 全局配置 app.json
  • 属性：
    • pages 当前小程序中的页面
    • tabBar 配置小程序中的 tab 栏
    • windows 配置当前小程序中的全局表现
• 页面配置 xx.json
  • 属性：
    • 都是用来配置小程序页面的表现
• 结论：
  • 页面中的 json 文件的设置其实与 app.json 中的 window 下的设置是一样的
  • 页面中的 json 只能在页面中起效果
  • app.json 中的设置可以在整个小程序中起效果

8.0 小程序中显示消息提示框

• wx.showToast()
  • title: 显示的文本
  • icon: 显示的图标
    • success
    • loading
    • none
  • duration: 显示框的持续时间
• Toast： 吐司
  • 提示框

小程序第六天

概览

1.0 昨天内容

• 分类页面：

  • 结构&样式

  • 动态请求&渲染数据

    • 服务器返回的数据：

      [
        { cat_name: '大家电', 
          children: [
            {'cat_name': "电视", children: [
               { cat_name: '曲面电视', cat_icon: '' }
             ]} 
          ] 
        }
      ]
      

• 搜索列表

  • 前置知识：
    • 下拉刷新
    • 上拉加载更多
  • 搜索列表：
    • 结构&样式
    • 动态获取&渲染数据
    • 上拉加载更多
      • 解决了相关的 bug
    • 下拉刷新
      • 解决了相关的 bug

2.0 今日内容

• 补充知识点：
  • 解决小程序中遗留的 bug
  • 关键字 @import
• 商品详情
  • 结构&样式
  • 动态渲染数据
  • 功能：
    • 预览图片
    • 使用 icon 图标
    • 在小程序中完成拨号

补充知识

3.0 解决搜索列表&分类页面切换的 bug

• bug 一：
  • 当分类中没有数据时，显示底线
• bug 二：
  • 表现：
    • 第一次进入搜索列表时，可以正常获取数据
    • 如果点击返回
      • 再次进入搜索列表，会将上一次打开页面中的数据再次加载，不会更新数据
  • 原因：
    • 页面栈： wx.navigateTo()
      • 页面栈最多十层
    • 因为第一次请求页面时，小程序会将页面缓存到页面栈中，将来再次请求这个属性时，不会再加载一次页面，只会从页面栈将页面取出，并且渲染。所以数据不会更新
  • 解决方案：
    • 当离开页面时，将数据全部清空
      • 生命周期：
        • onUnload:
          • 当页面被卸载时执行

4.0 @import

• 作用：可以导入其它样式文件

• 语法：

  @import './index.less';
  

• 总结：

  • wxss 与 css 的区别
    • 1）wxss 中引入的新的单位： rpx
    • 2） app.wxss 是全局样式， page.wxss 是局部样式（在 css 不存在）
    • 3）wxss 只支持部分 css 选择器

5.0 使用字体图标

• 以前使用步骤：
  • 1.0 进入网站： 阿里巴巴图标库
  • 2.0 搜索自己想要的图标，加入购物车
  • 3.0 下载资源（登录）
  • 4.0 使用
• 今日步骤：
  • 1.0 进入网站：iconfont
  • 2.0 搜索自己想要的图片，加入购物车
  • 3.0 添加到项目：
    • 创建一个项目
  • 4.0 生成在线链接
  • 5.0 复制内容到自己的项目中
  • 6.0 导入样式，并且使用

商品详情

6.0 完成详情页面

• 完成静态页面

  • 设置一个页面的入口
  • 创建一个页面
  • 结构
  • 样式

• 完成数据操作

  • 动态获取数据
    • 步骤：
      • 1.0 接收上一个页面传递过来的 id
      • 2.0 根据 id 到服务器中得到商品数据
        • API：https://autumnfish.cn/wx/api/public/v1/goods/detail?goods_id=542
        • 方式：GET
        • 参数：
          • goods_id：商品对应的 id
  • 动态渲染数据

• 补充功能

  • 预览图片

    • 1）给每张图片添加一个点击事件

    • 2）操作数据，生成一个图片的集合，调用一个 API

      wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: [] // 需要预览的图片列表
      })
      

      ​

  • 分享功能

    • 1）添加一个组件 button，
      • 设置属性 open-type: share
    • 2）点击按钮会触发事件：
      • onShareAppMessage
        • 注意点：可以通过当前方法的返回值设置分享页面的结构：
          • title: 标题
          • imageUrl: 图片
          • path: 分享页面的路径
    • 3）将分享按钮隐藏起来

  • 联系客服

    • 1）添加一个组件： button
      • 设置属性： open-type: contact
    • 2）点击按钮，它会打开一个聊天对话框

商品搜索

7.0 完成搜索页面

小程序第七天

复习

1.0 昨日内容

• 知识点：
  • 小程序中：
    • 页面栈：
      • 在小程序中从一个页面跳转到另一个页面时，会将之前的页面保存到页面栈中，页面栈中保存的页面最多10 个
    • 如果页面存储到了页面栈中
      • 将来再将访问时，里面的数据会进行缓存
  • @import
    • 在小程序中允许使用 @import 来导入外部样式
  • wxss 与 css 的区别
    • wxss 支持 rpx
    • 小程序中 app.wxss, page.wxss
    • wxss 中只支持部分 css 选择器
  • 在小程序中使用 iconfont：创建一个项目
• 商品详情：
  • 静态页面
    • 结构
    • 样式
    • iconfont 的使用
  • 动态获取&渲染数据
  • 补充功能：
    • 预览图片
    • 分享页面
    • 联系客服
• 面试题

2.0 今日内容

• 前置知识点：
  • 数据缓存
  • set 去重
• 搜索页面

前置知识

3.0 数据缓存

• 对比

  • 浏览器：
    • localstorage
    • sessionstorage
  • 小程序
    • storage

• 作用：也是用来缓存数据

• 使用：

  • 存储

    • 异步存储

      wx.setStorage({
        key: '',
        data: ''
      })
      

    • 同步存储

      wx.setStorageSync(key, data)
      

  • 取值

    • 异步取值

      wx.getStorage({
        key: '',
        success: res => {
        	console.log(res.data)
        }
      })
      

    • 同步取值

      let res = wx.getStorageSync(key)
      

  • 清除

    • 异步清除

      // 清除的指定 key 中的内容
      wx.removeStorage({
        key: '',
        success: res => {
        	console.log(res.data)
        }
      })
      // 清除全部的 storage
      wx.clearStorage()
      

    • 同步清除

      // 清除的指定 key 中的内容
      wx.removeStorageSync(key)
      // 清除全部的 storage
      wx.clearStorageSync()
      

  • 总结：

    • 小程序中的storage 与 浏览器中的 localstorage 用户比较相似，可以参数着理解
    • 注意：
      • localstorage 中只能存储字符串
      • storage 中可以存储任意类型的数据

4.0 Set 去重

let arr = [1,2,3,4,3,2,1]
let newArr = [...new Set(arr)]; // [1,2,3,4]

搜索

5.0 完成搜索页面

• 完成静态页面

  • 设置页面的入口
  • 创建静态页面
  • 结构
  • 样式

• 实现功能

  • 1）取消按钮的显示和隐藏

    • 步骤：
      • a. 设置一个变量： query，双向绑定给 input
      • b. 再设置一个计算属性：isShow 用来判断 query 是否有内容
        • 如果有，返回 true
        • 如果没有， 返回false
      • c. 使用 v-if 来修改按钮，对应值就是计算属性 isShow
      • d. 点击取消按钮清除搜索框中的内容

  • 2）点击完成按钮搜索数据

    • 步骤：
      • a. 输入内容
      • b. 给完成按钮绑定事件
      • c. 获取输入的内容
      • d. 在事件中跳转到搜索列表页面
        • pages/searchList/main?name=小米

  • 3）保存搜索关键字

    • 步骤：
      • a）当点击完成时，获取搜索的关键字
      • b）创建一个变量 searchList 用来保存搜索的关键字
      • c）将 searchList 保存到 storage 中

  • 4）显示搜索历史

    • 步骤：
      • a）获取搜索历史
      • b）动态渲染到页面上

  • 5）去重

    • 步骤：
      • a）当点击完成按钮时，直接将搜索的关键字放到 searchList 中
      • b） 通过 set 对象进行去重
      • c）将添加的方法从 push 改为 unshift

  • 6）点击搜索历史进入搜索

    • 步骤：
      • a）给搜索历史元素添加点击事件
      • b）点击后跳转到搜索列表页面
      • c）并且传入当前搜索历史的内容
      • d）搜索时设置输入框中的内容
      • e）当点击历史时，当前被点击的元素应该移动到最前面

  • 7）清除搜索历史

    • 步骤：

      • a）给叉叉添加点击事件

      • b）在事件中调用方法： removeStorageSync

      • c）调用方法之前应该进行确定判断

        wx.showModal({
          title: '',
          content: '',
          success: res => {
            res.confirm == true 点击的是确定
            res.confirm == false 点击的是取消
          }
        })
        

  • 8）实现联想

    • 结构&样式

    • 数据渲染

      • 步骤：
        • 1）给输入框添加一个输入事件：只要在输入框中输入内容，就要触发事件
        • 2）在事件中根据输入的关键字发送请求到服务器：
          • 获取与关键字相关的内容
          • API：https://autumnfish.cn/wx/api/public/v1/goods/search?query=小米&pagesize=6&pagenum=1
          • 方式：GET
          • 参数：
            • query: 关键字
            • pagesize: 页容量
            • pagenum：当前页
        • 3）将内容动态渲染到联想框中

    • 子功能：

      • 8.1 当输入框中的内容被清除时，需要将联想框中的内容也清除

        • 步骤：
          • a）当输入完成之后要得到输入的结果进行判断
            • 如果不为空，直接搜索
            • 如果为空，将联想集合进行清空
          • b）在取消按钮中也需要进行判断

      • 8.2 当点击联想列表中的选项时,需要以列表中的名称作为搜索的关键字，进入到搜索列表页面

        • 步骤：
          • a）给联想的选项添加点击事件
          • b）在事件传入当前选项的名称
          • c）跳转到搜索列表中

      • 8.3 进入搜索列表之后退回到搜索页面时，需要将联想内容清除

        • 步骤：
          • a）给页面添加一个事件： onShow
          • b）清除输入框中的内容
          • c）清除联想框中的内容

      • 8.4 点击时加入高亮的效果

        • 步骤：

          • a）添加一个样式：

            bgColor {
              background-color: #aaa;
            }
            

          • b）给每元素添加一个样式: :class=“{bgColor: selectedIndex === index }”

          • c）给每个元素添加一个点击事件: this.selectedIndex = index

      • 8.5 搜索框输入内容的防抖

        • 步骤：
          • 当用户输入内容时，进行防抖

      • 回顾：

        • 生命周期：
          • onLoad()
            • 当小程序被加载时执行
          • onUnload()
            • 当小程序被卸载时执行
          • onShow()
            • 当小程序页面被显示时执行

面试题：js 的防抖和节流

• js 的抖动

  • 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

• 防抖

  • 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
  • 自己的话来总结：
    • 当持续触发事件时，不执行函数，但是当触发停止一段时间后才执行一次。

• 节流

  • 当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴

  • 自己的话来总结：

    • 当持续触发事件时，也必需一段时间之内容再执行一次

    function jieliu(fn, wait) {
    	// 开始时间
    	var startTime = Date.now();
    	return function() {
    		var context = this;
    		var args = arguments;
    		var now = Date.now();
    		if (currentTime - startTime >= wait) {
              fn.apply(context, args)
              startTime = Date.now()
    		}
    	}
    }
    

小程序第八天

复习

1.0 昨日内容

• 小程序前置知识
  • 数据缓存
    • 异步
    • 同步
      • sync
      • 存储
      • 取值
      • 清除
  • set 去重
• 搜索页面：
  • 功能：
    • 联想功能：
      • 性能优化：js 的抖动
        • 防抖：
        • 持续触发，不会执行。停止一段时间之后再执行。
        • 节流
          • 持续触发，在固定的时间段内会执行一次。

2.0 今日内容

• 小程序中的生命周期
• 购物车
  • 逻辑比较复杂的一个页面。

补充知识点

3.0 小程序生命周期

• 对比：

  • vue 的生命周期：
    • 认真看图片：https://cn.vuejs.org/v2/guide/instance.html
  • 小程序中也有生命周期：
    • 分类：
      • 小程序的生命周期
      • 页面的生命周期

• App

  • onLaunch
    • 在小程序第一次被开启时执行
  • onShow
    • 在小程序显示&切前台时执行
  • onHide
    • 在小程序切后台时执行

• Page

  • onLoad *
    • 当页面被加载时执行
  • onReady
    • 当页面初次渲染时执行
  • onShow *
    • 当页面显示&切前台时执行
  • onHide
    • 当页面切后台进执行
  • onUnload *
    • 当页面卸载(关闭)时执行

• 页面跳转的方法：

  • wx.navigateTo
    • 跳转到另一个页面，将当前页面保存到页面栈中，最多保存十份
  • wx.redirectTo
    • 跳转到另一个页面，将当前页面关闭
  • wx.swtichTab
    • 跳转到tab页面，关闭所有的非 tab 页面

4.0 场景值

• 概念：
  • 进入小程序的方式
• 取得场景值
  • 在 app 中的 onLaunch & onShow 中通过 event.scene 来得到
• 应用：
  • 拉新
  • 统计小程序进入的方式
  • …

购物车：

5.0 完成页面

• 完成静态页面
  • 设置页面的入口
  • 创建页面
  • 结构&样式
• 完成功能
  • 1）动态获取购物车中的收获地址
    • 思路：
      • 直接从微信中读取已经设置好的地址
    • 步骤：
      • a. 给请求选择地址添加一个点击事件
      • b. 在事件中选择微信中的收货地址：
        • wx.chooseAddress
      • c. 将选择的地址进行保存
      • d. 将数据渲染到页面上
  • 2）将收获地址缓存到本地
    • 步骤：
      • a. 获取收货地址之后，需要将数据通过 storage 进行保存
      • b. 每次打开页面时需要判断是否有收货地址
  • 3）完成详情页面的加入购物车功能
    • 步骤：
      • a. 在商品详情页面中给加入购物车添加一个事件
      • b. 在事件中得到商品信息
      • c. 将商品信息保存到 storage 中
        • 1.0 创建一个空的数组
        • 2.0 将点击后的商品信息保存到数组中
        • 3.0 将数组缓存到 storage
      • d. 添加成功后，提示加入成功
    • bug:
      • 每次刷新之后打开页面，再加入购物车会将之前的数据进行清除。
      • 原因：
        • 每次刷新之后，数据源重置为空了
        • 再次加入时，会向空的数组中加入内容
        • 再次保存，保存的新的数组
        • 每个刷新后的数据，跟之前的数据不是同一个
      • 解决方案：
        • 当每次打开页面时，重新从 storage 中获取数据
  • 4）优化购物车中的数据结构
    • 步骤：
      • a. 将商品详情中的 goodsList 由数组改为对象
      • b. 在向 goodsList 中添加数据时，判断是否已经有了数据
  • 5）打开购物车时动态获取数据并渲染
    • 步骤：
      • a. 打开页面时，要获取 storage 中的 cart
      • b. 将数据动态渲染到页面上
    • bug:
      • 渲染数据之后，再次向购物车中添加内容，数据不更新
      • 原因：
        • 在 mounted 中请求的 storage 中的数据
        • mounted 在页面开启时执行一次，就不执行了
      • 解决方案：
        • 将请求的 storage 中的数据放到 onShow 中
  • 6）计算商品总价
    • 步骤：
      • a. 在计算属性中添加一个属性： totalPrice
      • b. 通过遍历goodsList 数据源中的数据，得到商品的总价
      • c. 将价格渲染到页面上
  • 7）设置商品状态
    • 步骤：
      • a. 动态向商品的数据源中添加一个状态属性
      • b. 给状态按钮设置点击事件
      • c. 点击完成之后修改商品的状态
      • d. 根据商品的状态来设置商品的总价
  • 8）设置商品数量
    • 步骤：
      • a. 给数量添加两个修改的按钮（+ ，-）
      • b. 分别设置点击事件
        • + ：
        • 让数量 ++
        • 将数据同步到 storage 中
        • -：
          • 让数量 –
          • 将数据同步到 sotrage 中
      • c. 根据商品的数量来计算总价
    • bug：
      • 数量小于0
      • 解决方案：
        • 当数据一旦小于等于0时，我们需要将当前商品数据删除
  • 9）计算商品总数
    • 步骤：
      • a. 添加一个计算属性 totalnum
      • b. totalnum 由选中商品的数量来决定

小程序第九天

复习

1.0 昨日内容

• 知识点：
  • 小程序中的生命周期
    • app
      • onlaunch
      • onshow
      • onhide
    • page
      • onload
      • onshow
      • onready
      • onhide
      • onunload
  • 导航
    • wx.navigateTo
    • wx.redirectTo
    • wx.switchTab
  • 场景值
    • 进入小程序的方式
      • 可以通过 app 的 onlaunch, onshow 来获取
• 项目
  • 购物车
    • 加入购物车
    • 渲染购物车数据
    • 动态设置购物车的相关属性
  • bug:
    • 如果使用的是最新版本的小程序开发工具，可能会造成数据修改后，不能更新的问题。
    • 我们可以通过安装老版本的开发工具

2.0 今日内容

• 继续完成购物车
  • 结算
    • 微信的登录
    • 微信的订单的生成
    • 微信的支付
• 其他页面
  • 我的&订单
    • 使用原生小程序来完成案例

购物车

3.0 完成购物车功能

• 1）完成全选
  • 需求：
    • a. 根据当前goodsList 中的数据源来确定全选的状态
      • 如果所有的商品状态都为选中，全选状态为选中
      • 如果商品中有一个的状态为不选，全选状态为不选
      • 步骤：
        • a1. 添加一个计算属性，用来确定全选的状态
        • a2. 在计算属性中遍历数据源，只要有一个状态不 true,就返回 false
    • b. 点击全选时，需要修改上面所有商品的状态
      • 如果全选状态为 true, 所有商品的状态应该为 true
      • 如果全选状态为 false, 所有商品的状态应该为 false
      • 步骤：
        • b1. 给全选按钮添加点击事件
        • b2. 在事件中得到全选的状态
        • b3. 根据全选的状态设置所有商品的状态
• 2）结算
  • 功能实现：
    • 用户的登录
      • 步骤：
        • 1.0 给结算添加一个点击事件
        • 2.0 在事件中判断用户是否登录
          • 如果登录，直接进入下一个环节
          • 如果没有登录，跳转到登录页面进行登录
        • 3.0 创建一个登录页面
          • 在登录页面中调用登录的 API
            • API：api/public/v1/users/wxlogin
            • 方式：POST
            • 参数：
              • code: 通过 wx.login
              • 其它参数
                • encryptedData
                • iv
                • rawData
                • signature
          • 接口返回的 token
          • 将 token 保存到 storage 中
        • 踩坑之旅：
          • wx.getUserinfo 已经被废弃了，需要使用 button 组件
          • 请求服务器登录接口时，如果处于开发状态，需要将开发者设置当项目的开发者*分配一个 appid
    • 生成订单
      • 在小程序中得到购物车中的商品信息，提交到服务器
      • 服务器会根据商品信息生成一个订单号，发送到小程序中
      • 小程序应该将订单号，保存到小程序中
      • 步骤：
        • 1）判断购物车中是否存在选中的数据
          • 如果有，直接发送请求
          • 如果没有，提示用户
        • 2）判断收货地址中是否有数据
        • 3）得到购物车中的数据，请求服务器的API
          • API：api/public/v1/my/orders/create
          • 方式：POST
          • 参数：
            • 请求头
              • Authorization: token 登录的标识
            • 请求体
              • order_price 订单的价格
              • consignee_addr 订单的地址
              • goods 商品的详情信息
        • 4）返回一个订单编号
        • 5）将订单编号保存到 storage 中
        • 6）跳转到支付页面

支付页面

4.0 完成支付页面

• 创建页面
  • 设置入口
  • 创建页面文件
  • 结构与样式
• 功能：
  • 支付
    • 步骤：
      • 1.0 发送请求到服务器的支付的接口
        • API：https://autumnfish.cn/wx/api/public/v1/my/orders/req_unifiedorder
        • 方式：
          • POST
        • 参数：
          • 请求头：
            • Authorization：token
          • 请求体
            • order_number: ‘’’
      • 2.0 接收响应信息
        • nonceStr
        • package
        • paySign
        • signType
        • timeStemp
        • 以上返回的信息是用来生成微信支付的二维码的数据
      • 3.0 支付结束之后，需要将已经支付过的商品从 storage 中删除

我的页面

5.0 完成我的页面

• 1.0 使用小程序的原生开发框架 MINA 来完成后续功能
  • 步骤：
    • 找到 mpvue 开发的项目目录
    • 找到文件夹 dist/wx
    • 直接将 wx 拷贝出来
    • 修改名称
    • 直接使用微信开发者工具打开
• 2.0 创建页面
  • 设置入口
  • 创建页面文件
  • 样式&样式
• 3.0 动态渲染数据
• 4.0 完成功能
  • 完成登录
    • 目标：
      • 得到用户的头像与用户名
    • 步骤：
      • 使用之前的登录方式来获取用户信息
        • button —> open-type=“getUserInfo” --> bindgetuserinfo3
  • 拨打电话

扩展

6.0 小程序中的登录流程

• 1.0 wx.login 得到 code
• 2.0 wx.request 发送 code 给第三方服务器
• 3.0 接口返回的 token
• 4.0 存储 token 到 storage 中
• 5.0 再次发送请求时，携带 token
• 6.0 接口数据并且渲染

7.0 小程序中获取用户信息

• 之前
  • wx.getUserInfo（过时了，微信已经不支持）
• 现在
  • 1）添加 button 组件，设置属性 open-type=“getUserInfo”
  • 2）绑定事件： bindgetuserinfo

8.0 Object.keys

• 作用：获取对象中所有的属性，以一个数组的形式进行展示

9.0 生成支付的二维码

• 小程序中有一个 API:
  • wx.requestpayment
    • 参数：
      • nonceStr
      • package
      • paySign
      • signType
      • timeStemp
    • 生成一个支付的二维码

10.0 在小程序中拨打电话

• 拨打电话的API：

  • wx.makePhoneCall({
      phoneNumber: '1340000' //仅为示例，并非真实的电话号码
    })
    ``
    
    

小程序第十天

复习

1.0 昨日内容

• 完成购物车功能
  • 全选
  • 结算
    • 实现登录
      • 小程序中的登录流程
    • 提交商品数据到服务器生成一个订单编号
• 支付页面
  • 支付功能的实现
• 完成的我的页面
  • 点击获取用户名和头像
  • 在小程序中拨打电话

2.0 今日内容

• 完成订单页面
  • 小程序中的自定义组件
    • 组件之间的传参
• 案例：
  • 在小程序中使用腾讯地图
  • 颜值测试
• 面试题：
• 复习

完成优购

3.0 完成订单页面

• 步骤：
  • 创建页面
    • 设置入口
    • 创建页面
    • 完成结构&样式
  • 动态渲染数据
    • 请求服务器的 API
      • API: https://autumnfish.cn/wx/api/public/v1/my/orders/all?type=1
      • 方式： GET
      • 参数：
        • 请求头
          • Authorization: token
        • url：
          • type: 1
            • 获取所有的订单数据（其它的参数无法正常返回）
  • 实现其它功能

补充案例

4.0 在小程序中使用腾讯地图

• 基本使用步骤

  • 步骤：

    • 在小程序页面中添加一个组件 map

        map: 地图组件
          longitude： 经度
          latitude：纬度
          scale：地图的缩放
          markers：地图上的标记
          show-location：在地图上显示位置
      

  • 功能：

    • 得到当前定位
      • 步骤：
        • 1.0 当页面打开时，需要调用接口：
          • wx.getLocation
            • 返回数据：
              • 经度
              • 纬度
              • 速度
        • 2.0 将得到的地点进行定位
          • longitude
          • latitude
            • 设置当前地图的中心点

• 使用腾讯地图的 javascript SDK 来扩展 map 的功能

  • javascript SDK：
    • 作用：可以用来给 map 组件扩展相应的功能
    • 步骤：
      • 1.0 申请开发者密钥
      • 2.0 给密钥开通 webserveiceAPI 服务
      • 3.0 下载微信小程序 javascripSDK
      • 4.0 设置安全域名（合法域名）
      • 5.0 书写代码
        • 5.1 引入 SDK 核心文件
        • 5.2 初始化 SDK 对象
          • 传入 key
        • 5.3 调用 SDK 中的 API1

• 案例：搜索周边

  • 需求：
    • 1）在小程序中显示一个地图，在地图之上有一个搜索框
    • 2）获取当前位置
    • 3）在搜索框中输入要搜索的内容之后，点击完成，将所有搜索到的结果在页面上显示
      • 标点:
        • Marks:
          • 数组：
            • 经度
            • 纬度
            • 标点的小图标
    • 4）点击显示的结果显示目标的名称

5.0 颜值测试

小程序扩展知识

6.0 小程序组件

• 对比：

  • vue 组件
    • 作用：封装一个单独的功能模块：
      • 结构
      • 样式
      • js 行为

• 小程序组件

  • 创建组件

    • json

      • "component": true // 告诉小程序，当前页面是一个组件
        

    • wxml

      • 结构

    • wxss

      • 样式

    • js

      Components({
      	data: {}, // 存放数据
      	methods: {
      		// 定义的是组件中的方法
      	}
      })
      

      ​

  • 使用组件

    • 在使用页面的 json 文件中添加属性：

      {
        "usingComponents": {
      	// key: value
          // 组件的名称： 组件的路径
          "component-tag-name": "path/to/the/custom/component"
        }
      }
      

    • 使用：

      <component-tag-name></component-tag-name>
      

• 组件之间的传参数：

  • vue

    • 传参：

      • 父传子

            //  步骤：
            //      父传
            //          父组件中有一个参数，通过自定义属性传递给子组件
            //      子接
            //          通过 props 属性来进行接收
        

        • 补充：

          • 在接收参数时，通过 props 属性，

            • 数组：

              props: ['abc']
              

            • 对象

              props: {
                abc: {
                  type: String, // abc 的类型
                  default: 'aaa', // abc 的默认值
                }
              }
              

      • 子传父

        //  步骤：
        //      子传
        //         子组件通过自定义事件 $emit 将参数交给父组件
        //      父接
        //          在父组件中组实现子组件的自定义事件，并设置对应的函数
        
        

        ​

      • 兄弟组件之间的传参(eventbus)

        1)需要一辆公用的 bus
        	创建一个单独的 js 文件，在文件中导出一个 vue 对象（bus）
        2）son1 将参数交给 bus
        	在 son1 中引用 bus 对象，通过 bus.$emit('fn', value)将参数交给 bus
        3）bus 将参数交给 son2
        	在 son2 中引入 bus 对象，通过 bus.$on('fn', function(value){})  来接收参数
        

• 小程序组件的传参

  • 页面给组件传参

    • 页面传参：通过自定义属性传递

      <mycom abc="{{msg}}"></mycom>
      

    • 组件接收：通过属性 properties

      properties: {
      	abc: {
            type: String, // abc 的类型
            value: '默认值' // abc 的默认值
      	}
      }
      

      ​

  • 组件给页面传参

    • 组件传参：通过自定义事件来传递

      this.triggerEvent('fn', value)
      

    • 页面接收：通过实现这个自定义事件来接收

      // wxml
      <mycom bindfn="getvale"></mycom>
      
      // js
      getVale(value) {
      }
      

currentTarget 与 target 的区别

• currentTarget:
  • 事件绑定的当前组件。
• target
  • 触发事件的源组件
• 总结：
  • 使用时尽量使用 currentTarget
  • 因为 target 有可能不是事件绑定的组件，所以它也没有参数

​