微信小程序初识

微信小程序初识

1.常见的交互反馈设计

	消息提示框  wx.showToast({title:"",icon:""})
	模态对话框 wx.showModal({title:''",content:"",sunccess:()=>{}})

2.本地存储

（1.）同步 存 wx.setStorageSync("key","value")  取wx.getStorageSync('key');
（2.）异步 存  wx.setStorage({key:"",data:{}}),取  wx.getStorage({key:"".success:(res)=>{}})

3.小程序界面跳转传参

（1.）wx.navigateTo({url:""}),使用app.json里的路径前边要加/,跳转非tabBar页面，保留跳转前页面，可以传参。
（2.）wx.switchTab({url:""}),跳转到tabbar页面，但是不能传参。
（3.）wx.redirectTo({url:""}),跳转非tabbar页面，但会关闭或者卸载跳转前页面，可以传参。
（4.）wx.reLaunch({url:""}),跳转到任意界面，但是没有返回按钮，会卸载所有页面，可以传参。
（5.）在标签内书写<navigator url="" open-type=""></navigator>
（6.）wx.navigateBack({delta:1})返回

4.请求
小程序请求的封装

function request(options) {
  // 请求拦截器
  //  ...
  // 1. 加一些统一的参数，或者配置
  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
    options.url = "https://showme2.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
  })
}