从前慢-微信小程序

微信小程序

1 微信小程序介绍

微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不
需要下载安装即可使⽤的应⽤，它实现
了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1.1.1 为什么是微信小程序

1 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容
易触达⽤⼾；
2  推⼴app 或公众号的成本太⾼。
3 开发适配成本低。
4 容易⼩规模试错，然后快速迭代。
5 跨平台。

1.1.2 微信⼩程序历史

2016年1⽉11⽇，微信之⽗张⼩⻰时隔多年的公开亮相，解读
了微信的四⼤价值观。张⼩⻰指出，越来越多产品通过公众
号来做，因为这⾥开发、获取⽤⼾和传播成本更低。拆分出
来的服务号并没有提供更好的服务，所以微信内部正在研究新
的形态，叫「微信⼩程序」 需要注意的是，之前是叫做 应⽤号
2016年9⽉21⽇，微信⼩程序正式开启内测。在微信⽣态下，
触⼿可及、⽤完即⾛的微信⼩程序引起⼴泛关注。腾讯云正式
上线微信⼩程序解决⽅案，提供⼩程序在云端服务器的技术⽅案。
2017年1⽉9⽇，微信推出的“⼩程序”正式上线。“⼩程序”是
⼀种⽆需安装，即可使⽤的⼿机“应⽤”。不需要像往常⼀样
下载App，⽤户在微信中“⽤完即⾛”。

1.1.3 疯狂的微信小程序

1 微信⽉活已经达到10.82亿。其中55岁以上的⽤⼾
也达到6300万
2 信息传达数达到450亿，较去年增⻓18%;视频通话4
.1亿次,增⻓100%
3 ⼩程序覆盖超过200+⾏业，交易额增⻓超过6倍，服
务1000亿+⼈次,创造出了5000亿+的商业价值

1.1.4 还有其他的小程序不容忽视

1 ⽀付宝⼩程序
2 百度⼩程序
3 QQ⼩程序
4 今⽇头条 + 抖⾳⼩程序

2 环境准备

注册账号
建议使用全新的邮箱，没有注册过其他小程序或者公
众号的。
访问注册⻚⾯(https://mp.weixin.qq.com/wxopen/waregister?action=step1)，
耐⼼完成注册即可。


获取APPID
由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发
者的⼩程序中的 APPID ，所以在注册成功后，可登录，
然后获取APPID。

登录(https://mp.weixin.qq.com/)，成功后可看到如下界⾯
然后复制你的APPID,悄悄的保存起来，不要给别⼈看到。

2.1 开发⼯具

下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀
⾝的 完整环境。
但是由于编码的体验不算好，因此 建议使⽤ vs code + 微
信小程序编辑工具 来实现编码
vs code 负责敲代码， 微信编辑工具 负责预览

3 第⼀个微信⼩程序

注意 第⼀次登录的时候 需要扫码登录

新建⼩程序项⽬

填写项⽬信息

成功

4 微信开发者工具介绍

详细的使⽤，可以查看官⽹
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

5 小程序结构目录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可
以在微信中开发具有原⽣APP体验的服务。
⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，
以及 JavaScript ，并在视图层与逻
辑层间提供了数据传输和事件系统，让开发者能够专注于
数据与逻辑。

5.1 小程序⽂件结构和传统web对比

结构	传统web	微信⼩程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	⽆	JSON

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

5.2. 基本的项目目录

6 小程序配置文件

个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局
的 app.json 和 ⻚⾯⾃⼰的page.json
注意：配置文件中不能出现注释

6.1 全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有
⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快
速启动项⽬⾥边的 app.json 配置

字段的含义
1 pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为
了让微信客⼾端知道当前你的⼩程序
⻚⾯定义在哪个⽬录。
2 window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂
字颜⾊定义等。
3 完整的配置信息请参考 app.json配置(https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)

6.1.1 tabbar

6.1.2 页面配置page.json

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和
⼩程序⻚⾯相关的配置。
开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允
许下拉刷新等等。
⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚
⾯中配置项会覆盖 app.json
的 window 中相同的配置项

6.1.3 sitemap 配置-了解即可

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序
及其⻚⾯是否允许被微信索引。

7 模板语法

WXML（WeiXin Markup Language）是框架设计的
⼀套标签语⾔，结合基础组件、事件系统，可以构
建出⻚⾯的结构。

7.1 模板语法

7.1.1 普通写法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
 }
})

7.1.2 组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
 }
})

7.1.3 bool类型

不要直接写 checked=false，其计算结果是⼀个字符串
<checkbox checked="{{false}}"> </checkbox>

7.2 运算

7.2.1 三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

7.2.2 算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
 }
})

7.2.3 逻辑判断

<view wx:if="{{length > 5}}"> </view>

7.2.4 字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
 }
})

7.2.5 注意

花括号和引号之间如果有空格，将最终被解析成为字符串

7.3 列表渲染

7.3.1 wx:for

项的变量名默认为 item wx:for--item 可以指定数
组当前元素的变量名
下标变量名默认为 index wx:for--index 可以指定数
组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key 绑定的值 有如下选择
1 string 类型，表⽰ 循环项中的唯⼀属性 如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"

2 保留字 *this ，它的意思是 item 本⾝ ，*this 代表的必须是
 唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"

代码：
<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'
   }]
 }
})

7.3.2 block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

7.4 条件渲染

7.4.1 wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要
渲染该代码块：

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

7.4.2 hidden

<view hidden="{{condition}}"> True </view>

类似 wx:if
频繁切换 ⽤ hidden
不常使⽤ ⽤ wx:if

7.4.3 代码演示

//Page Object
Page({
  data: {
    msg: "hello mina",
    num: 10000,
    isGirl: false,
    person: {
      age: 74,
      height: 145,
      weight: 200,
      name: "富婆"
    },
    isChecked:false,
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      }
    ]
  }
});

<!-- 
  1 text 相当于以前web中的 span标签 行内元素  不会换行
  2 view 相当于以前web中的 div标签 块级元素  会换行
  3 checkbox 以前的复选框标签 
 -->
<!-- <text>1</text>
<text>2</text>
<view>1</view>
<view>2</view> -->

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view> 是否是伪娘: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>

<!-- 
  6 使用bool类型充当属性 checked  
    1 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 
      以下写法就是错误的示范
         <checkbox checked="       {{isChecked}}"> </checkbox>

 -->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>


<!-- 
  7 运算 => 表达式
    1 可以在花括号中 加入 表达式 --  “语句”
    2 表达式
      指的是一些简单 运算 数字运算 字符串 拼接  逻辑运算。。
      1 数字的加减。。
      2 字符串拼接
      3 三元表达式 
    3 语句
      1 复杂的代码段
        1 if else
        2 switch
        3 do while 。。。。
        4 for 。。。
 -->
<view>{{1+1}}</view>

<view>{{'1'+'1'}}</view>

<view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>


<!-- 
  8 列表循环
    1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
    2 wx:key="唯一的值" 用来提高列表渲染的性能
      1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
      2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 
        [1,2,3,44,5]
        ["1","222","adfdf"]
    3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名
        wx:for-item="item" wx:for-index="index"
    4 默认情况下 我们 不写
       wx:for-item="item" wx:for-index="index"
       小程序也会把 循环项的名称 和 索引的名称 item 和 index 
       只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略

  9 对象循环
    1 wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"
    2 循环对象的时候 最好把 item和index的名称都修改一下
      wx:for-item="value"  wx:for-index="key"

 -->
 <view>
   <view 
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id"
   >
     索引：{{index}}
     --
     值:{{item.name}}
   </view>
 </view>

 <view>
   <view>对象循环</view>
   <view 
  wx:for="{{person}}"
  wx:for-item="value"  
  wx:for-index="key"
  wx:key="age"
  >
     属性:{{key}}
     --
     值:{{value}}
   </view>
 </view>

 <!-- 
   10 block
    1 占位符的标签 
    2 写代码的时候 可以看到这标签存在
    3 页面渲染 小程序会把它移除掉
  -->

  <view>
    <block 
   wx:for="{{list}}"
   wx:for-item="item"
   wx:for-index="index"
   wx:key="id"
   class="my_list"
    >
      索引：{{index}}
      --
      值:{{item.name}}
    </block>
  </view>



  <!-- 
    11 条件渲染
      1 wx:if="{{true/false}}"
        1 if , else , if else
        wx:if
        wx:elif
        wx:else 
      2 hidden 
        1 在标签上直接加入属性 hidden 
        2 hidden="{{true}}"

      3 什么场景下用哪个
        1 当标签不是频繁的切换显示 优先使用 wx:if
          直接把标签从 页面结构给移除掉 
        2 当标签频繁的切换显示的时候 优先使用 hidden
          通过添加样式的方式来切换显示 
          hidden 属性 不要和 样式 display一起使用
   -->

   <view>
     <view>条件渲染</view>
     <view wx:if="{{true}}">显示</view>
     <view wx:if="{{false}}">隐藏</view>

     <view wx:if="{{flase}}">1</view>
     <view wx:elif="{{flase}}">2 </view>
     <view wx:else> 3 </view>

     <view>---------------</view>
     <view hidden >hidden1</view>
     <view hidden="{{false}}" >hidden2</view>

     <view>-----000-------</view>
     <view wx:if="{{false}}">wx:if</view>
     <view hidden  style="display: flex;" >hidden</view>
   </view>

8 小程序事件的绑定

⼩程序中绑定事件，通过bind关键字来实现。
如 bindtap bindinput bindchange 等
不同的组件⽀持不同的事件，具体看组件的说明即可。

8.1 wxml

<input bindinput="handleInput" />

8.2 page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})

8.3 特别注意

1 绑定事件时不能带参数 不能带括号 以下为错误写法
<input bindinput="handleInput(100)" />

2 事件传值 通过标签⾃定义属性的⽅式 和 value
<input bindinput="handleInput" data-item="100" />

3 事件触发时获取数据
 handleInput: function(e) {
   // {item:100}
  console.log(e.currentTarget.dataset)
     
   // 输入框的值
  console.log(e.detail.value);
}

8.4 代码演示

// pages/demo04/demo04.js
Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    // console.log(e.detail.value );
    this.setData({
      num: e.detail.value
    })
  },
  // 加 减 按钮的事件
  handletap(e) {
    // console.log(e);
    // 1 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  }
})

<!-- 
  1 需要给input标签绑定 input事件 
    绑定关键字 bindinput
  2 如何获取 输入框的值 
    通过事件源对象来获取  
    e.detail.value 
  3 把输入框的值 赋值到 data当中
    不能直接 
      1 this.data.num=e.detail.value 
      2 this.num=e.detail.value 
    正确的写法
      this.setData({
        num:e.detail.value 
      })
  4 需要加入一个点击事件 
      1 bindtap
      2 无法在小程序当中的 事件中 直接传参 
      3 通过自定义属性的方式来传递参数
      4 事件源中获取 自定义属性
 -->
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>  
  {{num}}
</view>

9 样式WXSS

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于
描述 WXML 的组件样式。
与 CSS 相⽐，WXSS 扩展的特性有：
响应式⻓度单位 rpx
样式导⼊

9.1 尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进⾏⾃适应。规定屏
幕宽为 750rpx 。如在iPhone6 上,屏幕宽度为 375px ,共有
750个物理像素，则 750rpx = 375px = 750物理像素 ,
1rpx = 0.5px = 1物理像素 。

建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视
觉稿的标准。
使⽤步骤：
1 确定设计稿宽度 pageWidth
2 计算⽐例 750rpx = pageWidth px ,
因此 1px=750rpx/pageWidth 。
3 在less⽂件中，只要把设计稿
中的 px => 750/pageWidth rpx 即可。

/* 
1 小程序中 不需要主动来引入样式文件 
2 需要把页面中某些元素的单位 由 px 改成 rpx
  1 设计稿 750x
    750 px = 750 rpx 
    1 px = 1 rpx
  2 把屏幕宽度 改成 375px
    375 px = 750 rpx
    1 px = 2rpx
    1rpx = 0.5px
3 存在一个设计稿 宽度 414 或者 未知 page 
  1 设计稿 page 存在一个元素 宽度 100px
  2 拿以上的需求 去实现 不同宽度的页面适配 

  page px = 750 rpx
  1 px = 750 rpx / page
  100 px = 750 rpx * 100 / page 
  假设  page =  375px
4 利用 一个属性 calc属性  css 和 wxss 都支持 一个属性
  1 750 和 rpx 中间不要留空格
  2 运算符的两边也不要留空格
 */

 view{
   /* width: 200rpx; */
   height: 200rpx;
   font-size: 40rpx;
   background-color: aqua;
  /* 以下代码写法是错误  */
  /*  width:750 rpx * 100 / 375 ;  */
  width:calc(750rpx * 100 / 375);
 }

9.2 样式导⼊

wxss中直接就⽀持，样式导⼊功能。
也可以和 less中的导⼊混⽤。
使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。

⽰例代码：
/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

9.3 选择器

特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效！
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

⽬前⽀持的选择器有：

9.4 小程序中使用less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都
⽀持，如 wepy ， mpvue ， taro 等。
但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定
是不可取的。因此可以⽤以下⽅式来实现
1 编辑器是 vscode
2 安装插件 easy less

3 在vs code的设置中加⼊如下，配置
"less.compile": {
     "outExt":       ".wxss"
}

4 在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后
正常编辑即可。

/* 1 定义less变量 */
@color:yellow;
text{
  /* 2 使用变量 */
  color:@color;
}

view{
  .vie1{
    text{
      color: red;
    }
  }
}

/* 导入 */
@import "../../styles/reset.less";
view{
  color: @themeColor;
}
.main{
  /* 
  1 less中 支持 两种注释  多行  单行
  2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
   */
  /* font-size: 200px; */
  // font-size: 400px;
}


编译后生成以下内容
/* 1 定义less变量 */
text {
  /* 2 使用变量 */
  color: yellow;
}
view .vie1 text {
  color: red;
}
/* 导入 */
view {
  color: green;
}
.main {
  /* 
  1 less中 支持 两种注释  多行  单行
  2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
   */
  /* font-size: 200px; */
}

10 常见组件

重点讲解⼩程序中常⽤的布局组件
view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox。等

10.1 view

代替 原来的 div 标签
<view hover-class="h-class">
点击我试试
</view>

10.2 text

1 ⽂本标签
2 只能嵌套text
3 ⻓按⽂字可以复制（只有该标签有这个功能）
4 可以对空格 回⻋ 进⾏编码

<text selectable="{{false}}" decode="{{false}}">
	普&nbsp;通
</text>

10.3 image

1 图⽚标签，image组件默认宽度320px、⾼度240px
2 ⽀持懒加载

mode 有效值：
mode 有13种模式，其中4种是缩放模式，9种是裁剪模式。

image{
  box-sizing: border-box;
  border: 1px solid red;

  width: 300px;
  height: 200px;
}

<!-- 
  image 图片标签
  1 src 指定要加载的图片的路径
    图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 100
  2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配
    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 
    2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用
    3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用
    4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  
    5 bottom。。 类似以前的backgroud-position 
  3 小程序当中的图片 直接就支持 懒加载  lazy-load
    1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 
 -->
 <image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />
   

10.4 swiper

微信内置轮播图组件

默认宽度 100% ⾼度 150px

10.4.1 swiper

滑块视图容器。

10.4.2 swiper-item

滑块
默认宽度和⾼度都是100%

/* pages/demo10/demo10.wxss */
swiper {
  width: 100%;
  /* height: calc(100vw * 352 /  1125); */
  height: 31.28vw;
}
image {
  width: 100%;
}

<!-- 
  1 轮播图外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper标签 存在默认样式
    1 width 100%
    2 height 150px    image 存在默认宽度和高度 320 * 240 
    3 swiper 高度 无法实现由内容撑开 
  4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
    原图的宽度和高度  1125 * 352 px
    swiper 宽度 / swiper  高度 =  原图的宽度  /  原图的高度
    swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度
    height: 100vw * 352 /  1125
  5 autoplay 自动轮播
  6 interval 修改轮播时间
  7 circular 衔接轮播
  8 indicator-dots 显示 指示器 分页器 索引器 
  9 indicator-color 指示器的未选择的颜色 
  10 indicator-active-color 选中的时候的指示器的颜色 
 -->
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

10.5 navigator

导航组件 类似超链接标签

open-type 有效值：

<!-- 
  导航组件 navigator
  0 块级元素 默认会换行  可以直接加宽度和高度 
  1 url 要跳转的页面路径  绝对路径 相对路径
  2 target 要跳转到当前的小程序 还是其他的小程序的页面
    self 默认值 自己 小程序的页面 
    miniProgram 其他的小程序的页面
  3 open-type 跳转的方式
    1 navigate 默认值 	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
    2 redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
    3 switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    4 reLaunch	关闭所有页面，打开到应用内的某个页面
 -->

 <navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator>
 <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator>
 <navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator>
 <navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator> 

10.6 rich-text

富文本标签
可以将字符串解析成 对应标签，类似 vue中 v--html 功能

// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

10.6.1 nodes属性

nodes 属性⽀持 字符串 和 标签节点数组

⽂本节点：type = text

nodes 不推荐使⽤ String 类型，性能会有所下降。
rich--text 组件内屏蔽所有节点的事件。
attrs 属性不⽀持 id ，⽀持 class 。
name 属性⼤⼩写不敏感。
如果使⽤了不受信任的 HTML 节点，该节点及其所有
⼦节点将会被移除。
img 标签仅⽀持⽹络图⽚。

// pages/demo12/demo12.js
Page({
  data: {
    // 1 标签字符串 最常用的
    // html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB11rTqtj7nBKNjSZLeXXbxCFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1o0FLtyMnBKNjSZFoXXbOSFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB15nKhtpkoBKNjSZFEXXbrEVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1CMf4tlnTBKNjSZPfXXbf1XXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB18P98tyQnBKNjSZFmXXcApVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>'
    // 2 对象数组
    html:[
      {
        // 1 div标签 name属性来指定
        name:"div",
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class  style
          class:"my_div",
          style:"color:red;"
        },
        // 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 
        children:[
          {
            name:"p",
            attrs:{},
            // 放文本
            children:[
              {
                type:"text",
                text:"hello"
              }
            ]
          }
        ]
      }
    ]
  }
})

<!-- 
  rich-text 富文本标签
  1 nodes属性来实现
    1 接收标签字符串 
    2 接收对象数组 
 -->
 <rich-text nodes="{{html}}"></rich-text>

10.7 button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}">
 default
</button>

size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

// pages/demo13/demo13.js
Page({
  // 获取用户的手机号码信息
  getPhoneNumber(e){
    console.log(e);
  },
  // 获取用户个人信息
  getUserInfo(e){
    console.log(e);
  }
})

<!-- 
  button 标签
  1 外观的属性
    1 size 控制按钮的大小
      1 default 默认大小
      2 mini 小尺寸
    2 type 用来控制按钮的颜色
      1 default 灰色
      2 primary 绿色
      3 warn 红色
    3 plain  按钮是否镂空，背景色透明
    4 loading 文字前显示正在等待图标
 -->
 <button>默认按钮</button>
 <button size="mini">  mini 默认按钮</button>
 <button type="primary"> primary 按钮</button> 
 <button type="warn"> warn 按钮</button> 
 <button type="warn" plain> plain 按钮</button> 
 <button type="primary" loading> loading 按钮</button> 

 <!-- 

  button 开发能力
  open-type：
  1 contact 直接打开  客服对话功能  需要在微信小程序的后台配置   只能够通过真机调试来打开 
  2 share 转发当前的小程序 到微信朋友中   不能把小程序 分享到 朋友圈 
  3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用  不是企业的小程序账号 没有权限来获取用户的手机号码 
    1 绑定一个事件 bindgetphonenumber 
    2 在事件的回调函数中  通过参数来获取信息 
    3 获取到的信息  已经加密过了 
      需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了
  4 getUserInfo 获取当前用户的个人信息
    1 使用方法 类似 获取用户的手机号码
    2 可以直接获取 不存在加密的字段 
  5 launchApp 在小程序当中 直接打开 app
    1 需要现在 app中 通过app的某个链接 打开 小程序
    2 在小程序 中 再通过 这个功能 重新打开 app
    3 找到 京东的app 和 京东的小程序  
  6 openSetting 打开小程序内置的 授权页面
    1 授权页面中 只会出现 用户曾经点击过的 权限 
  7 feedback 打开 小程序内置的 意见反馈页面 
    1 只能够通过真机调试来打开 

  -->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

10.8 icon

代码:
Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }
})

wxml
<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

10.9 radio

可以通过 color属性来修改颜色
需要搭配 radio-group ⼀起使⽤

// pages/demo15/demo15.js
Page({
  data: {
    gender: ""
  },
  handleChange(e){
    // 1 获取单选框中的值
    let gender=e.detail.value;
    // 2 把值 赋值给 data中的数据
    this.setData({
      // gender:gender
      gender
    })
  }
})

<!-- 
  radio 单选框
  1 radio标签 必须要和 父元素 radio-group来使用
  2 value 选中的单选框的值 
  3 需要给 radio-group 绑定 change事件 
  4 需要在页面中显示 选中的值
 -->
 <radio-group bindchange="handleChange">
   <radio color="red" value="male">男</radio>
   <radio color="red" value="female" >女</radio>
 </radio-group>

 <view>您选中的是:{{gender}}</view>
   

10.10 checkbox

可以通过 color属性来修改颜色
需要搭配 checkbox-group ⼀起使⽤

// pages/demo16/demo16.js
Page({
  data: {
    list:[
      {
        id:0,
        name:"🍎",
        value:"apple"
      },
      {
        id:1,
        name:"🍇",
        value:"grape"
      },
      {
        id:2,
        name:"🍌",
        value:"bananer"
      }
    ],
    checkedList:[]
  },
  // 复选框的选中事件
  handleItemChange(e){
    // 1 获取被选中的复选框的值
    const checkedList=e.detail.value;
    // 2 进行赋值
    this.setData({
      checkedList
    })
  }
})

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>

  </checkbox-group>
  <view>
    选中的水果:{{checkedList}}
  </view>
</view>

11 自定义组件

类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

11.1 创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个
文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构

在⽂件夹内 components/myHeader ，创建组件 名为
 myHeader

11.2 声明组件

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
myHeader.json
{
  "component": true
}

11.3 编辑组件

同时，还要在组件的wxml⽂件中编写组件模板，在 wxss ⽂件
中加⼊组件样式
slot 表⽰插槽，类似vue中的slot
myHeader.wxml
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
 {{innerText}}
    <slot></slot>
</view>

在组件的 wxss ⽂件中编写样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标
签名选择器。
myHeader.wxss
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

11.4 注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并
提供组件的属性定义、内部数据和
⾃定义⽅法
myHeader.js
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string类型
      type: String,
      value: 'default value',
   }
 },
  data: {
    // 这里是一些组件内部数据
    someData: {}
 },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
 }
})

11.5 声明引入自定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组
件名和组件路径
index.wxml
{
 // 引用声明
  "usingComponents": {
 // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
 }

11.6 页面中使用自定义组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

11.7 定义段与示例方法

Component 构造器可⽤于定义组件，调⽤ Component 构
造器时可以指定组件的属性、数据、⽅法等。

11.8 组件-自定义组件传参

1 ⽗组件通过属性的⽅式给⼦组件传递参数
2 ⼦组件通过事件的⽅式向⽗组件传递参数

11.8.1 过程

1 ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中
2 ⽗组件 监听 onMyTab 事件
3 ⼦组件 触发 bindmytap 中的 mytap 事件
⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事
件名 、 detail 对象

4 ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs");
⽗组件代码
// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
 内容-这里可以放插槽
</tabs>
// page.js
  data: {
    tabs:[
     {name:"体验问题"},
     {name:"商品、商家投诉"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },


⼦组件代码
// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>
// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /**
   * 组件的初始数据
   */
  data: {
 },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
   }
 }
})

12 小程序生命周期

分为应⽤⽣命周期和⻚⾯⽣命周期

12.1 应用生命周期

12.2 页面生命周期

// pages/demo18/demo18.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad");
    // onLoad发送异步请求来初始化页面数据 
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow");
  },
  /**
    * 生命周期函数--监听页面初次渲染完成
    */
  onReady: function () {
    console.log("onReady");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide");
  },

  /**
   * 生命周期函数--监听页面卸载 也是可以通过点击超链接来演示 
   * 
   */
  onUnload: function () {
    console.log("onUnload");
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh");
    // 页面的数据 或者效果 重新 刷新
  },

  /**
   * 页面上拉触底事件的处理函数
   * 需要让页面 出现上下滚动才行 
   */
  onReachBottom: function () {
    console.log("onReachBottom");
    // 上拉加载下一页数据 
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("onShareAppMessage");
  },
  /**
   * 页面滚动 就可以触发 
   */
  onPageScroll(){
    console.log("onPageScroll");
  },
  /**
   * 页面的尺寸发生改变的时候 触发
   * 小程序 发生了 横屏竖屏 切换的时候触发 
   */
  onResize(){
    console.log("onResize");
  },
  /**
   * 1 必须要求当前页面 也是tabbar页面
   * 2 点击的自己的tab item的时候才触发
   */
  onTabItemTap(){
    console.log("onTabItemTap");
  }
})

{
    "pageOrientation": "auto"
}

<!--pages/demo18/demo18.wxml-->
<text>pages/demo18/demo18.wxml</text>

<navigator url="/pages/demo17/demo17" open-type="navigate">
  demo17
</navigator>
  
<navigator url="/pages/demo17/demo17" open-type="redirect">
  demo17 redirect
</navigator>
<view>1</view>
<view>2</view>
<view>3</view>
<view>4</view>
<view>5</view>
<view>6</view>
<view>7</view>
<view>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
<view>13</view>
<view>14</view>
<view>15</view>
<view>16</view>
<view>17</view>
<view>18</view>
<view>19</view>
<view>20</view>
<view>21</view>
<view>22</view>
<view>23</view>
<view>24</view>
<view>25</view>
<view>26</view>
<view>27</view>
<view>28</view>
<view>29</view>
<view>30</view>
<view>31</view>
<view>32</view>
<view>33</view>
<view>34</view>
<view>35</view>
<view>36</view>
<view>37</view>
<view>38</view>
<view>39</view>
<view>40</view>
<view>41</view>
<view>42</view>
<view>43</view>
<view>44</view>
<view>45</view>
<view>46</view>
<view>47</view>
<view>48</view>
<view>49</view>
<view>50</view>
<view>51</view>
<view>52</view>
<view>53</view>
<view>54</view>
<view>55</view>
<view>56</view>
<view>57</view>
<view>58</view>
<view>59</view>
<view>60</view>
<view>61</view>
<view>62</view>
<view>63</view>
<view>64</view>
<view>65</view>
<view>66</view>
<view>67</view>
<view>68</view>
<view>69</view>
<view>70</view>
<view>71</view>
<view>72</view>
<view>73</view>
<view>74</view>
<view>75</view>
<view>76</view>
<view>77</view>
<view>78</view>
<view>79</view>
<view>80</view>
<view>81</view>
<view>82</view>
<view>83</view>
<view>84</view>
<view>85</view>
<view>86</view>
<view>87</view>
<view>88</view>
<view>89</view>
<view>90</view>
<view>91</view>
<view>92</view>
<view>93</view>
<view>94</view>
<view>95</view>
<view>96</view>
<view>97</view>
<view>98</view>
<view>99</view>
<view>100</view>
  

13 项目开发

 接⼝⽂档
 https://www.showdoc.cc/128719739414963

帮助⽂档
1 小程序开发⽂档
https://developers.weixin.qq.com/miniprogram/dev/framework/
2 mdn
https://developer.mozilla.org/zh-CN/
3 阿⾥巴巴字体 iconfont
https://www.iconfont.cn/

13.1 项目搭建

13.1.1 新建小程序项目

填入自己的appid

13.1.2 搭建目录结构

13.1.3 搭建项目的页面

13.1.4 引⼊字体图标

1 打开阿⾥巴巴字体图标 ⽹站
2 选择的图标
3 添加⾄项⽬
4 下载到本地
5 将样式⽂件 由 css 修改为 wxss
6 ⼩程序中引⼊

13.1.5 搭建项目tabbar结构

参照之前讲解的⼩程序基础中的tabbar知识点

13.2 首页

13.2.1 效果

13.2.2 业务逻辑

1 使⽤tabbar 实现底部导航功能
2 使⽤⾃定义组件的⽅式 实现 头部搜索框
3 加载 轮播图 数据
4  加载 导航 数据
5 加载 楼层 数据

13.2.3 接口

1 获取⾸⻚轮播图数据
https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
2 获取⾸⻚分类菜单数据
https://api-hmugo-web.itheima.net/api/public/v1/home/catitems
3 获取⾸⻚ 楼层数据
https://api-hmugo-web.itheima.net/api/public/v1/home/floordata

13.2.4 接口

1 获取⾸⻚轮播图数据
https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
2 获取⾸⻚分类菜单数据
https://api-hmugo-web.itheima.net/api/public/v1/home/catitems
3 获取首页楼层数据
https://api-hmugo-web.itheima.net/api/public/v1/home/floordata

13.2.5 关键技术

小程序内置 request API
es6的 promise
小程序 swiper 组件
⾃定义组件 实现 搜索框

13.3 分类页面

13.3.1 效果

13.3.2 业务逻辑

1 加载分类⻚⾯数据
2 点击左侧菜单，右侧数据动态渲染

13.3.3 接口

1 分类⻚⾯数据
https://api-hmugo-web.itheima.net/api/public/v1/categories

13.3.4 关键技术

scroll--view 组件
es7的 async 和 await

13.3.5 小程序中⽀持es7的async语法

es7的 async 号称是解决回调的最终⽅案
1 在⼩程序的开发⼯具中，勾选 es6转es5语法
2 下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js
3 在⼩程序⽬录下新建⽂件夹 lib/runtime/runtime.js ，将代码拷⻉进去
4 在每⼀个需要使⽤async语法的⻚⾯js⽂件中，都引⼊（不能全局引⼊）
import regeneratorRuntime from '../../lib/runtime/runtime';

13.4 商品列表页面

13.4.1 效果

13.4.2 业务逻辑

1 加载商品列表数据
2 启⽤下拉⻚⾯功能
1 ⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true

2 ⻚⾯的js中，绑定事件 onPullDownRefresh
3 启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件
4 加载下⼀⻚功能

13.4.3 接口

1 商品列表搜索
https://api-hmugo-web.itheima.net/api/public/v1/goods/search

13.4.4 关键技术

⼩程序配置⽂件中 启⽤上拉 和下拉功能
搜索框和tab栏是⼩程序的⾃定义组件(有组件事件和参数交互)

13.5 商品详情页面

13.5.1 效果

13.5.2 业务逻辑

1 渲染商品详情数据
2 点击图⽚，调出图⽚画廊，进⾏预览
3 点击收藏
4 联系客服
5 分享功能
6 加⼊购物⻋

13.5.3 接口

1 获取详情数据接口
https://api-hmugo-web.itheima.net/api/public/v1/goods/detail
2 加⼊购物⻋接⼝ 使⽤本地存储来维护购物⻋数据
3 ⽴即购买接⼝ (相当于是 创建订单接⼝)
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create

13.5.4 关键技术

swiper组件
本地存储实现 收藏功能
联系客服 ⼩程序管理后台中 直接添加即可
富⽂本标签 渲染 富⽂本
⼩程序 预览图⽚接⼝

13.6 收藏页

13.6.1 效果

13.6.2 业务逻辑

1 获取本地存储中的数据进⾏渲染
2 点击商品可以跳转到商品详情⻚⾯

13.6.3 关键技术

⼩程序 ⾃定义组件
本地存储 加载收藏数据

13.7 购物车页面

13.7.1 效果

13.7.2 业务逻辑

1 渲染购物⻋数据
2 添加收货地址
3 修改商品数量
4 单选和全选功能

13.7.3 接口

1 获取购物⻋数据 本地存储实现
2 调⽤微信的收货地址

13.7.4 关键技术

小程序 选择收货地址 api
小程序 复选框 组件

13.8 支付页面

13.8.1 效果

13.8.2 业务逻辑

1 获取微信收货地址
2 渲染购物⻋中要结算的商品
3 实现⽀付
1 获取微信的登录信息
2 获取⾃⼰后台返回的⽀付相关参数
3 调⽤微信接⼝实现 ⽀付
4 ⽀付成功创建订单
5 跳转到订单⻚⾯

13.8.3 支付流程

13.8.4 接口

1 获取预⽀付参数
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/req_unifiedorder
2 创建订单
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/create
3 更新订单状态
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/chkOrder

13.8.5 关键技术

⼩程序 ⽀付 api

13.9 授权页面

13.9.1 效果

13.9.2 业务逻辑

1 获取⽤⼾信息
返回 encryptedData,rawData,iv,signature
2 小程序登录
返回 code
3 提交数据到⾃⼰ 的后台 执⾏post请求 提交数据
encryptedData,rawData,iv,signature code
4 将 token 和⽤⼾数据 rawData 存⼊本地存储

13.9.3 接口

1 提交数据到后台 返回token
https://api-hmugo-web.itheima.net/api/public/v1/users/wxlogin

13.10 订单列表页面

13.10.1 效果

13.10.2 业务逻辑

1 根据不同的的状态去加载不同的订单数据
2 点击标题紧挨着对应数据

13.10.3 接口

1 查询订单数据
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all

13.10.4 关键技术

⼩程序 ⾃定义组件的 传参 ⽗向⼦动态传参 this.selectComponent("#tabs");
时间戳 格式化处理

13.11 搜索页面

13.11.1 效果

13.11.2 接口

1 搜索建议查询
https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch

13.11.3 业务逻辑

1 获取输⼊框的值进⾏搜索和渲染
2 点击 取消 按钮时 清除输⼊状态，修改⻚⾯模样

13.11.4 关键技术

1 小程序 输⼊框组件
2 输⼊值改变时，为了提⾼性能，使⽤ 防抖 技术

13.12 个人中心页面

13.12.1 效果

13.12.2 业务逻辑

1 获取登录信息
2 加载收藏信息
3 查询订单状态

13.12.3 接口

1 获取⽤⼾信息
2  获取收藏数据 从本地存储中获取
3 获取订单数据
https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all

13.12.4 关键技术

1 css属性filter的使⽤

13.13 意见反馈页面

13.13.1 效果

13.13.2 业务逻辑

1 点击 + 可以选择本地图⽚，并且显⽰到⻚⾯上
2 点击 提交 可以上传图⽚到 接⼝ 地址 新浪图床 上
https://images.ac.cn/Home/Index/UploadAction/
3 点击图⽚，会移除⾃⼰
4 点击 tab栏的标题，可以切换选中效果

13.13.3 关键技术

1 ⾃定义组件 tab
2 ⾃定义组件 图⽚删除组件
3 小程序 上传⽂件 api

想要获取该该课程markdown笔记（脑图+笔记）。可以扫描以下
微信公众号二维码。或者搜索微信公众号-Java大世界。回复
微信小程序即可获取笔记获取方式。