微信小程序的本地存储、页面跳转、以及请求封装

一、常见的交互反馈设计

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

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

3.wx.showModal模态对话框

wx.showModal({

      title: '标题',

      content: '告知当前状态，信息和解决方法',

      confirmText: '主操作',

      cancelText: '次要操作',

      success: function(res) {

        if (res.confirm) {

          console.log('用户点击主操作')

        } else if (res.cancel) {

          console.log('用户点击次要操作')

        }

      }

    })

二、本地存储

（一）同步

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，那么被关闭的页面将返回不去

wx.navigateBack({
  delta: 2  //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})

6.navigator标签

四、小程序页面间的传参

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 接口调用结束的回调函数（调用成功、失败都会执行）

wx.request({

      url: 'https://showme.myhope365.com/api/cms/article/open/list',

      method: "POST",

      data: {

        pageNum: 1,

        pageSize: 10

      },

      header: {

        "content-type": "application/x-www-form-urlencoded"

      },

      success: res => {

        console.log(res.data.rows)

      }

})

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

  })

}

六、使用第三方组件

1.npm init  初始化npm

2.npm i @vant/weapp -S --production

3.将 app.json 中的 "style": "v2" 去除，小程序的强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

4.需要手动在 project.config.json 内添加如下配置

"packNpmManually": true,

    "packNpmRelationList": [

      {

        "packageJsonPath": "./package.json",

        "miniprogramNpmDistDir": "./"

      }

    ],

5.构建 npm 包