微信小程序--day02

一、 常见的交互反馈设计

1.使用button组件的loading属性，在按钮的文字前边出现一个Loading

2.wx.showToast显示提示（一般搭配wx.hideToast使用）

3.wx.showModal模态对话框

二、本地存储

（一）同步

1.存储：wx.setStorageSync('list', {age:5})

2.获取：wx.getStorageSync('list')

  //本地同步缓存
  syncSet(){
    console.log('这是同步缓存');
    wx.setStorageSync('sync', {content:'这是同步缓存'})
  },
  //本地同步获取
  syncGet(){
    console.log(wx.getStorageSync('sync'));
  },

（二）异步

1.存储：wx.setStorage（{ }）

2.获取：wx.getStorage（{ }）

//本地异步存储
  asyncSet(){
    wx.setStorage({
      key:'async',
      data:'这是异步存储的数据',
      success(){
        console.log('异步存储');
      }
    })
  },
  //本地异步获取
  asyncGet(){
   wx.getStorage({
      key:'async',
      success(res){
        console.log(res);
      }
    })
  },

三、小程序界面间的跳转

1.wx.navigateTo

保留当前页面，只能打开非 tabBar 页面，返回时返回该页面

2.wx.redirectTo

关闭卸载当前页面，只能打开非 tabBar 页面

3.wx.switchTab

关闭所有非tabbar页面， 只能打开 tabBar 页面

4.wx.reLaunch

关闭卸载所有页面，可以打开任意页面

5.wx.navigateBack

返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去

6.navigator标签

navigator标签中加的url地址可以跳转到非tabBar页面
若要跳转到tabBar页面可以增加一个open-type='switchTab'则可以跳转到tabBar页面，实质相当于wx.switchTab函数

四、小程序页面间的传参

1.路由跳转传参

路由跳转传参可以通过？的方式拼接参数。

wx.switchTab({
      url: '../todolist/todolist?id=789',
   })
//或者navigator标签
<navigator url="../detail/detail?id=666">带参数去detail</navigator>  

跳转到指定界面之后，可以在该页面的onLoad方法中的options参数（本身是个对象）拿到路由跳转的参数。 

  onLoad(options) {
    console.log(options);
  },

2.若要传递标签中的数据参数，可以自定义属性，在对应事件中通过e来获取该参数，再拼接到事件跳转的路径中 

 //wxml中
 <button bindtap="navigateTo" data-num="10">wx.navigateTo</button>
//js中
navigateTo(e){
    console.log(e.target.dataset.num);
    wx.navigateTo({
      url: '/pages/detail/detail?id=999&num='+e.target.dataset.num,
    })
  },

 

五、http的使用 （wx.request）

url 开发者服务器接口地址。注意这里需要配置域名（注意项目配置、域名信息需要更改，去网页小程序开发者管理，修改，多个之间通过封号（;）分割）

data   请求的参数

header 设置请求的 header，header 中不能设置 Referer，默认header['content-type'] = 'application/json'

method（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

dataType json 回包的内容格式，如果设为json，会尝试对返回的数据做一次 JSON解析

success 收到开发者服务成功返回的回调函数。

fail 接口调用失败的回调函数

complete 接口调用结束的回调函数（调用成功、失败都会执行）

http请求的封装

作用：

• 添加统一的请求配置
• 可以添加请求拦截器和响应拦截器，在请求和响应之前加一些通用的处理。

 

function request(options) {
  // 请求拦截器
  //  ...
  // 1. 加一些统一的参数，或者配置
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme.myhope365.com" + options.url
  }
// 默认的请求头
  let header = {
    "content-type": "application/x-www-form-urlencoded",
  };
  if (options.header) {
    header = {
      ...header,
      ...options.header
    }
  }
  return new Promise((reslove, reject) => {
    // 调用接口
    wx.request({
      // 默认的配置
      // 加载传入的配置
      ...options,
      header,
      success(res) {
       // 响应拦截器，所有接口获取数据之前，都会先执行这里
        //  1. 统一的错误处理
        if (res.statusCode != 200) {
          wx.showToast({
            title: '服务器异常，请联系管理员',
          })
        }
        reslove(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}
export function get(url, options = {}) {
  return request({
    url,
    ...options
  })
}
export function post(url, data, options = {}) {
  return request({
    url,
    data,
    method: "POST",
    ...options
  })
}