API incorporada del subprograma WeChat

1. API integradas de uso común

1. descargar fotos
2. cargar imagen
3. Compartir con el círculo de amigos
4. Obtener información del usuario
5. caja modal
6. monitor de desplazamiento
7. Obtener información del dispositivo
8. enrutamiento
9. operación del nodo dom

(1) Descargar imágenes

<view>
  <button type="primary"  bindtap="downImg" >下载图片</button>
  <image src="{
    
    {pic}}" module="aspectFill" bindtap="downImg"/>
</view>

  downImg() {
    
    
    wx.downloadFile({
    
    
      url: this.data.pic,
      success(res) {
    
    
        console.log(res);
        //把临时文件保存到相册（需要用户授权）
        wx.saveImageToPhotosAlbum({
    
    
          filePath: res.tempFilePath,
          success() {
    
    
            //提示保存成功
            wx.showToast({
    
    
              title: '下载图片成功',
              icon: 'none'
            })
          }
        })
      }
    })
  },

Mostrar resultados:

(2) Subir fotos

<view>
  <button type="warn" bindtap="upImg">上传图片</button>
</view>

  upImg(){
    
    
    var that =this;
    wx.chooseMedia({
    
    
      count:1,
      success(res){
    
    
        console.log(res)
           //获取 选择 的第 0 个图片临时地址
        var tempFile=res.tempFiles[0].tempFilePath;
          //执行上传操作
        wx.uploadFile({
    
    
          filePath: tempFile,
          name: 'file',
          url: 'http://dida100.com/ajax/file.php',
          success:res=>{
    
    
            console.log("@@@",res);
            console.log("为转换前",res.data)
              //转化为js对象
            var data=JSON.parse(res.data)
            console.log("转换后",data)
              //更新图片信息
            that.setData({
    
    pic:"http://dida100.com"+data.pic})
          }
        })
      }
    })
  },

Mostrar resultados:

(3) Compartir con el círculo de amigos

1. Declarar en el método onShareAppMessage()

  onShareAppMessage() {
    
    
    //默认当前页面的截图
    //在实际中，可以网络请求一个数组，从随机回去一组参数
    return{
    
    
      title:'送红包了',
      path:'/pages/index/index',
      imageUrl:'https://img.tukuppt.com/png_preview/00/09/44/RNu32K5RpD.jpg!/fw/780'
    }
  },

2. Haga clic en el botón para compartir

<button type="warn" open-type="share">分享给朋友领红包</button>

  onShareTimeline(){
    
    
    return{
    
    
      title:'送朋友',
      // path:'/pages/index/index',
      path:'?age=18&name=mumu',
      imageUrl:'https://img.tukuppt.com/png_preview/00/09/44/RNu32K5RpD.jpg!/fw/780'
    }
  },

(4) Supervisión de desplazamiento

<view class="showTop" bindtap="goTop" wx:if="{
    
    {showTop}}">
  回到顶部
</view>

  //页面滚动
  onPageScroll(e){
    
    
    console.log(e);  //打印出scrollTop
    if(e.scrollTop>100){
    
    
      //当页面的滚动距离大于100 时候 显示回到顶部
        this.setData({
    
    showTop:true})
    }else{
    
    
      //否则就回到页面
      this.setData({
    
    showTop:false})
    }
  },

Al principio, oculte primero el botón Volver arriba y deje que el botón se muestre cuando la distancia de desplazamiento del mouse sea superior a 100

  //回到顶部
  goTop(){
    
    
    wx.pageScrollTo({
    
    
      //页面滚动到0 的位置，事件为600毫秒
      duration:600,
      scrollTop:0
    })

  },

Cuando vuelves a hacer clic en la parte superior, la rueda de desplazamiento gira lentamente hacia la parte superior.

(5) Indicador de cuadro modal

<button type="primary" bindtap="showTip">提示</button>

  showTip() {
    
    
    wx.setNavigationBarColor({
    
    
      frontColor: '#ffffff',
      backgroundColor: '#ff6600',
      animation: {
    
    
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
    wx.setNavigationBarTitle({
    
    
      title: '微信api',
    })
    wx.showLoading({
    
    
      title: '我不会停的',
    })
    setTimeout(() => {
    
    
      wx.hideLoading()
    }, 3000)
  },

(6) Obtener información del dispositivo

wx.getSysteminfosync

1. Altura de la barra de estado (statusBarHeight)
2. El ancho de la ventana disponible (windowWidth)
3. La altura de la ventana disponible (windowHeight)
4. Zona segura (safeArea)
5. Modelo de teléfono móvil (sistema)
6. Potencia (nivel de batería)

(7) Enrutamiento

7. wx.navigateTo({}) - saltar
8. wx.redirect - Redirigir
9. wx.switchTab() - alterna la barra inferior
10. wx.navigateBack() - devuelve

(8) Solicitud de red

wx.solicitud()

1. url: la dirección de la solicitud
2. datos datos (publicación)
3. tiempo de espera: evento de tiempo de espera
4. método:方式post|get|put|delete
5. éxito: la función de devolución de llamada que se ejecutará en caso de éxito
6. Función de devolución de llamada ejecutada cuando falla falla
7. complete: Ejecute tanto el éxito como el fracaso, finalice la solicitud de carga

(9) operación del nodo dom

  onReady() {
    
    
    console.log("页面生命周期,onReady第一次渲染完成 ")
    //1.操作节点（没有window，document.getxxx,document.getElement）
    //创建一个选中器
    const query = wx.createSelectorQuery()
    //选中h1节点，获取他的边界
    query.select('.h1').boundingClientRect()
    //获取窗口的位置信息
    query.selectViewport().scrollOffset()
    //执行命令返回结果
    query.exec(function (res) {
    
    
      // 获取元素的边界信息
      /* left: 0  right: 320   top: 0  width: 320 */
      console.log(res[0])
      //窗口信息scrollHeight: 504  scrollLeft: 0  scrollTop: 0  scrollWidth: 320
      console.log(res[1])
    })
  },

2. El ciclo de vida de los miniprogramas de WeChat

(1) El ciclo de vida del applet

1. La página onLaunch comienza a ejecutarse
2. Ejecutar cuando está activado Ocultar interruptor de fondo
3. Ejecutado cuando se muestra la página onShow
4. onError se ejecuta cuando ocurre un error

(2) El ciclo de vida de la página

1. Ejecutar cuando se carga la página onLoad
   1. Iniciar una solicitud de red
   2. Obtener los parámetros pasados ​​por la página
   3. Almacenar la página localmente
   4. Inicializar

2. La representación inicial de la página onReady se completa
3. OnShow se ejecuta cuando se muestra la página en primer plano
4. OnHide se ejecuta cuando se ejecuta el fondo
5. UnonLoad se escribe en onLoad