小程序介绍，生命周期，封装数据请求，路由跳转传参，点击事件获取参数，本地存储

1.窗口配置

1.配置页面路径

"pages/home/home",
    "pages/goodDetail/goodDetail",
    "pages/classify/classify",
    "pages/shoppingTrolley/shoppingTrolley",
    "pages/mine/mine"

2.window 配置全局默认的窗口

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "天使童装",
    "navigationBarTextStyle": "black"
  },

3.tabar 导航条

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "image/nav/home-off.png",
      "selectedIconPath":"./image/nav/home-on.png"
    }, {
      "pagePath": "pages/classify/classify",
      "text": "分类",
      "iconPath": "image/nav/ic_catefory_normal.png",
      "selectedIconPath":"./image/nav/ic_catefory_pressed.png"
    }, {
      "pagePath": "pages/shoppingTrolley/shoppingTrolley",
      "text": "购物车",
      "iconPath": "image/nav/cart-off.png",
      "selectedIconPath":"./image/nav/cart-on.png"
    }, {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "image/nav/my-off.png",
      "selectedIconPath":"./image/nav/my-on.png"
    }]
  },

2.小程序文件类型 每个页面由 4个文件组成

.wxml布局文件
.wxss样式文件
.js逻辑处理
.json配置文件

3.小程序生命周期 和 小程序页面的生命周期

小程序生命周期：

onLauch:首次打开小程序，全局只触发一次。

onShow:初始化完成后，触发监听小程序显示。

onHide:从前台进入后台触发。

onError:小程序后台运行一定时间，或系统资源占用过高，会被销毁

小程序页面的生命周期：

onLoad：页面加载时触发。一个页面只会调用一次

onShow：页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次；

onReady：首次显示页面，会触发onReady方法，渲染页面和样式，一个页面只会调用一次；
onHide：当小程序后台运行或跳转到其他页面时，触发onHide方法；
onUnload：页面卸载时触发。如redirecTo或navigteBack

4.数据请求和封装

数据请求：

 wx.request({

   url: 'https://api.it120.cc/skx/shop/goods/list',

   header: {

​    "Content-Type": "application/x-www-form-urlencoded"

   },

   data:{

​    x:"",
	 y:""

   },

   success: (res)=> {

​    console.log(res)

   }

  })

封装

首先创建俩个js文件 分别是api.js和http.js
第一步在http.js封装get和post
export function get(url,params){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: 'https://api.it120.cc/skx/'+url,
      data:params,
      header:{
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method:"get",
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject(res)
      }
    })
  })
}
export function post(url,params){
  return new Promise((resolve,reject)=>{
    wx.request({
      url: 'https://api.it120.cc/skx/'+url,
      data:params,
      header:{
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method:"post",
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject(res)
      }
    })
  })
}
然后在api.js中引入get和post的请求方式
 import {get,post}from "./http"
 接着请求接口使用封装好的方法
 export function lieList(url,params){
  return get(url,params)
}

最后在页面中引入要使用的接口
import {lieList } from "../../utils/http/api"

5.路由跳转分类 和 路由跳转传递参数

路由跳转有四种方式，分别是：

1.wx.navigateTo();
2.wx.redirectTo();
3.wx.switchTab();
4.wx.navigateBack();

1. navigateTo是将原来的页面保存在页面栈中，在跳入到下一个页面的时候目标页面也进栈，只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面；

2. redirectTo和switchTab都是先清除栈中原来的页面，然后目标页面进栈，使用这两种跳转方式，都不能通过系统的返回键回到上一个页面，而是直接退出小程序；

3. redirectTo使用的时候一定要配合tabBar或是页面里面可以再次跳转按钮，否则无法回到上一个页面；

4. switchTab跳转的页面必须是tabBar中声明的页面；

5. tabBar中定义的字段不能超过5个页面，小程序的页面栈层次也不能超过5层。

6. navigateBack只能返回到页面栈中的指定页面，一般和navigateTo配合使用。

7. wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

   路由跳转示例代码

1.wx.navigateTo();

 wx.navigateTo({  

   url: 'pages/home/home?id=1'

   })

2.wx.redirectTo()

wx.redirectTo({ 

    url: 'pages/home/home?id=1' 

   })

3.wx.switchTab()

wx.switchTab({

     url: '/index' //tabBar中声明的页面

   })

4.wx.navigateBack()

// 此处是A页面* 

   wx.navigateTo({

     url: 'B?id=1' 

   })

   *// 此处是B页面* 

   wx.navigateTo({

     url: 'C?id=1' 

   })

   *// 在C页面内 navigateBack，将返回A页面* 

   //可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层

   wx.navigateBack({

     delta: 2 

   })

参数传递示例代码

 wx.navigateTo({  

   url: 'pages/home/home?id=1'

   })

   参数与路径之间使用？分隔，参数与参数之用=相连，不同参数用&分隔

   上面代码中id为参数键，1为参数值

   在页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取参数值

6.路由配置

路由配置如下

{
"pages": [
    "pages/index/index",
    "pages/search/search",
    "pages/shopCart/shopCart",
    "pages/mine/mine"
  ]
}

路由跳转如下

wx.navigateTo：打开新页面时调用，

wx.redirectTo：页面重定向调用，

wx.navigateBack页面返回调用或用户按左上角返回按钮，

wx.switchTab：Tab切换时调用或用户切换Tab

7.点击获取参数

wxml:

通过data-来传递

 <view bindtap="getList" data-id="{{item.id}}"></view>

js:

通过e.currentTarget.dataset来接收后面跟的是data-后面的名字

getList(e){
    console.log(e);
    var id=e.currentTarget.dataset['id'];
    }

8.本地存储的几种方式

一、同步

1.wx.setStorageSync()//存储值

1. try {
2.   wx.setStorageSync('key', 'value')
3. } 

2.wx.removeStorageSync()//移除指定的值

try {
  wx.removeStorageSync('key')
} 

3.wx.getStorageSync()//获取值

try {
  var value = wx.getStorageSync('key')
}

4.wx.getStorageInfoSync()//获取当前storage中所有的key

try {
  const res = wx.getStorageInfoSync()
  console.log(res.keys)
  console.log(res.currentSize)//获取的key值
  console.log(res.limitSize)
}

5.wx.clearStorageSync()//清除所有的key

try {
  wx.clearStorageSync()
} 

二、异步

1.wx.setStorage()//存储值

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致，即除非用户主动删除或超过一定时间被自动清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

wx.setStorage({
  key:"key",
  data:"value"
  })

2.wx.removeStorage(); // 移除指定的值

wx.removeStorage({
  key: 'key',
  success (res) {
    console.log(res)
  }})

3.wx.getStorage(); // 获取值

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

4.wx.getStorageInfo(); // 获取当前 storage 中所有的 key

wx.getStorageInfo({
  success (res) {
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
  }})

5.wx.clearStorage(); // 清除所有的key

wx.clearStorage()