微信小程序（前端）实训Ⅱ

1. 小程序的路由

1. 前提操作：

   1. 创建3个页面a、b、c，创建方法，在app.json文件中的pages项最后新增3项pages/a/a, pages/b/b, pages/c/c

   2. 配置tab页面: 在app.json中添加tabBar内容

   {
     "pages": [
       // 内容省略
     ],
     "tabBar": {
       "list": [
         {
           "pagePath": "pages/index/index",
           "text": "首页"
         },
         {
           "pagePath": "pages/logs/logs",
           "text": "日志"
         }
       ]
     }
   }

2. 小程序的首页的约定规则

   1. 只要写在app.json配置文件的pages项中的第一个，它就是首页
   2. 如果配置了tabBar, tabBar的list项中的第一项的pagePath必须pages配置项的第一个(即tabBar.list[0]的pagePath必须是首页)

3. 前进

   1. 声明式：
      1. 前进到普通页面：<navigator url="页面地址，页面地址在app.json的pages项中声明，注意这里添加/前缀表示从根目录开始" />
      2. 前进到tab页面：<navigator open-type="switchTab" url="页面地址，页面地址在app.json的pages项中声明，注意这里添加/前缀表示从根目录开始" />
   2. 编程式
      1. 前进到普通页面： wx.navigateTo({url: ‘页面地址’})
      2. 前进到tab页面: wx.switchTab({url: ‘页面地址’})

4. 后退：

   1. 声明式: <navigator open-type="navigateBack" delta="1">返回</navigator>，delta属性表示返回多少层，不写这个属性或者属性值为1表示返回上一层。如果返回的层级超过了当前的页面数字，那就返回到当前页面栈的第1个页面
   2. 编程式: wx.navigateBack({delta: 1})

5. 重定向

   1. 声明式 <navigator url="页面路径" open-type="redirect">重定向到xx页面</navigator>
   2. 编程式 wx.redirectTo({url: ‘页面路径’})

6. 重启小程序

   1. 声明式 <navigator open-type="reLaunch" url="页面路径">重启小程序并打开目标页面</navigator>
   2. 编程式 wx.reLaunch({url: ‘页面路径’})

2. 小程序的页面分类和特征

1. tab页面: 凡是在app.json文件的tabBar配置项中声明的页面都是tab页面
2. 普通页面：不是tab页面的页面
3. tab页面不会被销毁，tab页面不会执行onUnload钩子函数
4. 普通页面的销毁（执行onUnload钩子函数）有两种情况
   1. 从当前普通页面返回上一层页面或者上n层页面，当前普通页面就会执行销毁，如果是返回返回多层，那么返回到的页面（页面a）后面的页面（b和c）都会销毁
   2. 从当前普通跳转到tab页面，此时页面栈中所有的普通页面都会被销毁，页面栈只剩下当前新的tab页
5. tab页面是独立的入口页面，是作为当前页面栈的第一个，所以在tab页面没有返回

3. 异步请求

// 这是示意 介绍属性使用
wx.request({
  url: '接口地址',
  method: "接口方法 get post put delete",
  header: {
    "Content-Type": "设置请求参数的数据格式 application/json"
  },
  data: "发送的数据",
  success: () => {},
  fail: () => {},
  complete: function() {}
})

// 以下是代码中的例子 index.js
Page({
  onLoad() {
    this._request()
  },
  _request() {
      wx.request({
          url: 'https://uinav.com/api/public/v1/home/swiperdata',
          success: res => {
              console.log('success: ', res.data)
              this.setData({
                  imgList: res.data.message
              })
          },
          fail: err => {
              console.log('error: ', err)
          },
          complete: function() {
              console.log('complete: ')
          }
      })
  },
})

// index.wxml
<view wx:if="{{imgList}}">
    <image src="{{imgList[0].image_src}}"></image>
</view>
<view wx:else>
    <text>imgList还没有数据</text>
</view>

4. 小程序的模板语法

1. 条件判断输出
2. 循环输出

5. 一些背景知识

1. js中对象使用{a: 'b', c: 1}来定义，其中是键值对，键值对之间用英文逗号分割

2. js中变量定义规则：使用字符、下划线_、数字组成且首字母不能是数字

3. json文件语法

   1. json文件内容是空的话，保留一个{}

   2. json中的项，最后一项的结尾不要加,

   3. json中每一个key键名必须用双引号

   4. json中键值如果是字符串的话也必须双引号