微信原生开发-提示框-缓存-请求-引入vant小程序组件

一切都是基于微信开发者工具

原生轻提示

触摸反馈

//打开提示框
wx.showToast({
title:'我是提示框内容',
icon:'error',//失败的类型
duration:5000//默认毫秒数为1500，类型是数值
})

//关闭提示框
wx.hidenToast({success:(res)=>{}})

提示框

按钮有4个状态
none 不显示 loading 加载 success 成功 error 失败

    wx.showModal({
      title:'错误信息',
      content:'语法错误',
      confirmText:'只能4个',
      cancelText:'不能取消',
      success:(res)=>{
        if(res.confirm){
          console.log(1111);
        }else{
          console.log(2222);
        }
      }
    })

缓存

异步存储

wx.setStorage({
  data: {name:"天亮教育",age:4},
  //需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
  key: 'list',//本地缓存中指定的 key})

同步存储

wx.setStorageSync('list1', {name:"尚云科技",age:5})

读取本地数据

异步操作

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

同步操作

const list = wx.getStorageSync('list')

页面清除缓存

wx.clearStorage()

缓存的限制和隔离
小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过wx.setStorage写入缓存会触发fail回调。
小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，考虑到同一个设备可以登录不同微信用户，宿主环境还对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露。
由于本地缓存是存放在当前设备，用户换设备之后无法从另一个设备读取到当前设备数据，因此用户的关键信息不建议只存在本地缓存，应该把数据放到服务器端进行持久化存储。

请求

url string 是 开发者服务器接口地址
data string/object/ArrayBuffer 否 请求的参数
wx.request

 wx.request({
      url: 'https://showme2.myhope365.com/api/cms/article/open/hot/list?pageNum=1&pageSize=10',
      method: 'POST',
      header: {
        "conten-type": "application/x-www-form-urlencoded"
      },
      success: res => {
        console.log(res);
        if (res.data.code == 0) {
          this.setData({
            list: res.data.rows
          })
        }

      }
    })

解析富文本

nodes array/string [] 否 节点列表/HTML String
view 独占一行
text 行内标签，不解析富文本
rich-text 用于解析富文本

<view wx:for="{{list}}" :key="id">
  <image src="{{item.bannerImgUrl}}">image>
  <rich-text nodes="{{item.content}}"  >rich-text>
view>

下拉刷新

全局页面刷新
1、在app.json的"window"中进行配置
（1）把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark”
（2）添加"enablePullDownRefresh":true，开启下拉刷新。

单个页面下拉刷新
1、在app.json的"window"中进行配置
页面显示高亮
（1）把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark”
2、在页面的.json的"window"中进行配置
页面刷新的按钮
（2）添加"enablePullDownRefresh":true，开启下拉刷新。

事件写在页面的下拉动作这个

页面关闭下拉刷新三点

uni.startPullDownRefresh(OBJECT)	
 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

uni.stopPullDownRefresh()
停止当前页面下拉刷新

页面强制刷新

this.onLoad()
this.onReady() 或者 this.onShow()（亲测有效）

使用方法：在操作函数中调用this.onReady()函数。
使用前提：本页面的数据操作需要在页面的onReady()或onShow()函数中完成。

引入vant小程序组件

看官网

vant微信小程序

重点：
注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

意思是可以省略成 ./

修改头像或上传图片

uploadFile
官方文件

url 是请求地址
name 图片

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url:  headUrl+'/api/system/user/profile/update/avatar/nos', 
          filePath: tempFilePaths[0],
          name: 'avatarfile',
          header:{
            cookie:wx.getStorageSync('cookie')
          },
      success (res){
        const data = res.data
      }
    })
  }
})

页面跳转

函数是跳转

重点是：第一个是有 /

wx.navigateTo 保留当前页面，只能打开非 tabBar 页面。

wx.navigateTo({
  url: '/test?id=1',
})

wx.redirectTo 关闭卸载当前页面，只能打开非 tabBar 页面。

wx.redirectTo({
  url: '/test?id=1'
})

wx.switchTab 关闭所有非tabbar页面， 只能打开 tabBar 页面。

wx.switchTab({
  url: '/index'
})

wx.reLaunch 关闭卸载所有页面，可以打开任意页面。

wx.reLaunch({
  url: '/test?id=1'
})

标签式跳转

<navigator class="itemBox" open-type="navigate"
 url="/pages/details/details?id={{item.articleId}}">
navigator>

#总结
一定要严格要求自己，当你在休息的时候，他们已经享受家的 xing 福了

坚持到点下班，不会拖延一秒——什么需求，走走走，离我远点

总结