【小程序】知識點

 

總結回顧：
1、如何建立組件  ？
2、組件與頁面之間的通訊{
　　0.1、組件給頁面傳值 ---
　　0.2、頁面給組件傳值
}
3、slot介紹，多個slot如何解決？
四、

 

 

一、小程序中如何建立組件

 

 

0.一、剛開始建立文件的時候，utils  裏面的app.json 會有一個路徑，須要把路徑去除掉

 

 

 0.二、首先須要在 json 文件中進行自定義組件聲明（將 component 字段設爲 true 可將這一組文件設爲自定義組件）：

{
  "component": true
}

　　

 

 0.三、經過Component 來註冊組件

 

 0.四、組件的編輯

 

 

0.五、組件的使用，在須要使用的頁面當中設置json  文件，還有在wxml中使用

 

---

 

 

二、組件與頁面之間的通訊{說白了就是傳值}

 

 

 

 

 

 0.1、頁面給組件傳值的實現？--------頁面給組件傳遞信息

傳遞：在頁面中經過給組件自定義屬性，後面值須要傳遞的值

接收：在組件內部的js文件中的properties來接受  例如：Component({ properties:{ 自定義屬性{type:String }}})

 

 

例如：實現的流程

　　這個是在頁面如何給組件傳遞值的過程

 

 

 這個是組件內部接收的過程

 

 

 

 

Component({
  //接收頁面傳遞的數據
    properties:{

　　ymcz:{

  　　　　type:String,

  　　　　value: 'default value'

　　　　　},

      title:{
        type:String
      }
    },
    //當前組件所須要的一些狀態
    data:{
      message:"組件信息"
    },
    attached(){
       this.triggerEvent("handle",this.data.message) 
    },
    //定義當前組件所須要的一些方法
    methods:{
      handlealert(){
        wx.showToast({
          title:"123"
        })
      }
    }
})

　　

實現的效果了

 

 

 

 

給當前組件綁定事件？小程序的提示

 

 

組件內事件的綁定以及事件對象

 

 

 

 

0二、組件與頁面的傳值？---------組件給頁面傳遞信息,經過 this.triggerEvent("handlfangfa","經過事件傳遞的值")

接收，在頁面中該組件 綁定事件，函數就能夠接受了

步驟：組件給頁面傳值，是經過事件，

00一、當前頁的的組件綁定一個方法/函數  （組件向頁面傳遞值的過程）

 

三、組件標籤內嵌套的內容如何顯示，經過在組件內部<slot/> 標籤接受

 

 

 

 

 

 

沒有就沒法接收了

 

 

 

 

 設置多個slot，而且給每一個定義不一樣的名稱，根據名稱設置顯示，這裏須要注意，必須在定義組件的時候，設置   

options: {
multipleSlots: true // 在組件定義時的選項中啓用多slot支持
},

　　

 

 

 

Component({  //經過Component  來註冊組件

  options: {
    multipleSlots: true // 在組件定義時的選項中啓用多slot支持
  },


  properties: {
    // 這裏定義了innerText屬性，屬性值能夠在組件使用時指定
    ymcz:{
      type:String,
      value: 'default value'
    },
    innerText: {
      type: String,
      value: 'default value',
    }
  
  },

//組件的聲明週期

  created(){
   
    console.log(9995)
  },
  attached(){
    console.log("組件被用了");
    this.triggerEvent("handlfangfa","經過事件傳遞的值")
  },
  ready(){
    console.log(66666)
  },


  moved(){
    console.log(67)
  },






  data: {
    // 這裏是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這裏是一個自定義方法
    customMethod: function () { },

    handlealert:function(e){
      console.log(e);
      wx.showToast({  //提示信息的做用
        title: "你點擊我了"
      })
    }
  }
})

　　

 

 

 

 

 

 四、navigator 實現調轉頁面  ，小程序的路由跳轉

4.一、坑，使用  navigator你到有  tabBar  的頁面沒法調轉 。沒有tabBar的能夠實現調轉  (默認沒法調整到tabBar頁面的)
這個等價於{routerlink,navlink}

<navigator url="/pages/mine/mine">調轉到"個人"頁面，tabTar</navigator>

<navigator url="/pages/mine/mine" open-type="switchTab">調轉到"個人"頁面，tabTar</navigator>    //須要這樣設置纔可調整到tabBar的頁面

　　

 

 

 

 

navigate    對應 wx.navigateTo 或 wx.navigateToMiniProgram 的功能    
redirect    對應 wx.redirectTo 的功能    
switchTab    對應 wx.switchTab 的功能    
reLaunch    對應 wx.reLaunch 的功能    1.1.0
navigateBack    對應 wx.navigateBack 的功能

API 跳轉的方式

 wx.navigateTo

 wx.redirectTo

wx.switchTab

 wx.reLaunch 

 wx.navigateBack

 

 

4.一、坑，使用  navigator你到有  tabBar  的頁面沒法調轉 。沒有tabBar的能夠實現調轉  

 

 

4.2、navigator 實現調轉及傳值（頁面調轉和傳值）

 0.一、設置須要調轉的路徑和傳遞的值，？後面的，寫法就是url傳值寫法（傳遞多個值和一個值的設置方法）  //  <navigator url="/pages/xiangqingye/xqy?name=我來了&age=50">調轉頁面</navigator> 

 0.二、調轉到的頁面接收，.js文件裏面的

onLoad: function (options) {

console.log(options)  //接收

},

  

 

 

五、wx.setNavigationBarTitle(Object object)   設置當前小程序導航欄的狀態

動態設置當前頁面的標題

前提是須要把   "navigationStyle": "custom"   去掉，不然沒法實現動態設置。   

經過，navigator  調轉頁面傳遞過來的值，去修改   wx.setNavigationBarTitle

 去掉

 

 

 

 

 

 

 

 問題2，回調顯示成功，可是沒有顯示出來？什麼緣由？

wx.setNavigationBarTitle，success

 

 

 

 

 六、wx.showNavigationBarLoading  （在當前頁面顯示導航條加載動畫）

wx.hideNavigationBarLoading （在當前頁面隱藏導航條加載動畫）

 

 

 

 

onLoad: function (options) {
    console.log(options);
    let titlename = options.name;
    wx.showNavigationBarLoading()  //一開始先顯示loading
    wx.setNavigationBarTitle({  //同時也加載設置導航
      title: titlename,
      success(tes) {
        console.log(tes, 2)
        wx.hideNavigationBarLoading()  //當加載成功以後，就隱藏loading
      },
      fail(dewa) {
        console.log(dewa, 3)
      },
      complete(sdww) {
        console.log(sdww, 55)
      }
    })

    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ff0000',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },

 

 七、swiper輪播圖的實現 

 

 weml文件

<view>
  <text>
  你們好，我是輪播圖頁面
  </text>
</view>

<swiper 
indicator-dots
indicator-color
indicator-active-color=red
autoplay=true
circular=true
vertical=true
easing-function=easeInCubic
>
  <block wx:for="{{banimg}}" wx:key="*this">
          <swiper-item>
         <image src=" {{item}} "></image>
          </swiper-item>
 </block>
</swiper>

 

.js文件

// pages/swiper/swiper.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
banimg:[
"https://static.maizuo.com/v5/upload/500b2ab1a47f73d0a54d1a39ce518a6d.jpg?x-oss-process=image/quality,Q_70",
"https://static.maizuo.com/v5/upload/a2a67dd1b49ca35b355530e4d3a721dd.jpg?x-oss-process=image/quality,Q_70",
"https://static.maizuo.com/v5/upload/f2f1d6ed8d740aad120d28178a5296c1.jpg?x-oss-process=image/quality,Q_70"

]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    let natitle = options.name;

    wx.showToast({
      title: "到輪播頁面"
    })
    console.log(options);
    let titlename = options.name;
    wx.showNavigationBarLoading()
    wx.setNavigationBarTitle({
      title: natitle,
      success(tes) {
        wx.hideNavigationBarLoading()
      }
    })
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#ff0000',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

 

 

 八、