小程序自定義組件，頁面跳轉

目錄

• 自定義組件
• 頁面向組件傳值
• 組件向頁面傳遞事件
• 小程序的頁面跳轉
• 小程序本地數據的存儲
• 小程序如何向 Django 等服務請求接口（wx.request）

自定義組件

如何自定義組件

1. 創建一個文件夾 components ，這個文件夾用來存放所有自定義組件

2. 每個組件都被一個文件夾包裹，模擬這個 pages 的方式來管理自定義組件

3. 在頁面引用自定義組件，必須現在 page.json 中注冊我們自定義組件

   /**
   {
     "usingComponents": {
       "com" : "/componentes/com/com"
     }
   }
   
   **/
   

4. 在 wxml 中就可以直接使用

   <com></com>
   

頁面向組件傳值

1. 組件中的 wxml 文件肯定有一個變量來接收頁面的傳值

   <!-- name值是由頁面決定的 -->
   <view>{{name}} is dsb</view>
   

2. 我們要在組件的 js 文件中給這個 name 變成組件的屬性：

     properties: {
       name:{    //屬性名
         type:String,  //屬性的類型
         value:"egon"  // 屬性的默認值，如果頁面沒有給這個name賦值，就使用這個value的值
       }
     },
   

3. 頁面中直接給這個組件的name屬性賦值就可以了，就相當於傳值

   <com name = "lxx"></com>  //可以是固定值
   <com name = "{{name1}}"></com> //這里的可以是變量
   

組件向頁面傳遞事件

1. 組件要綁定一個事件 寫法如下

   <button bindtap="com_jia" data-num="3">點我加1</button>
   

2. 在組件的 js 中的中：

     /**
      * 組件的方法列表
      */
     methods: {
       com_jia:function(e){
         console.log("con-jia",e)
         // 把事件拋給頁面
         this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) 
           // jia1是組件向頁面拋出的事件類型。所以我們在頁面重要去捕獲這個事件，
           // 如果我們要向頁面拋事件時候，傳參數，例如：{num:e.currentTarget.dataset.num}
       }
     }
   

3. 頁面中如何捕獲組件中傳過來的事件

   <com  bind:jia1 ="jia1"></com>
   

4. 頁面的事件的響應函數

    jia1:function(e){
       console.log(e)//組件傳過來的參數，在e.detail中
       var that = this
       that.setData({
         num : that.data.num + +(e.detail.num)
       })
      
     }
   

小程序的頁面跳轉

小程序的頁面跳轉又兩種，一種是通過標簽，一種是通過 js,我們只講js,因為標簽和js很像

    // 只能跳轉到tabBar頁面，不能跳轉到非tabBar頁面，並且關閉
    //所有非tabBar頁面，url不能攜帶參數
     wx.switchTab({
      url: '/pages/test/test',
     })


  //關閉所有的頁面，打開應用內的某個頁面，他的url可以攜帶參數
  //在跳轉頁面的onload生命周期函數中去接收
     wx.reLaunch({
        url: '/pages/test1/test1?name=123&age=18',
      })


    //關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到
    //tabbar頁面，他的路由也是可以攜帶參數的
    wx.redirectTo({
    	url: '/pages/test1/test1?name='+this.data.name1+'&age=17',
     })

    //保留當前頁面，跳轉到應用內的某個頁面，但是不能跳轉到
    //tabbar,可以使用wx.navigateBack返回到原來的頁面，
    //他的url也可以帶參數，小程序中頁面最多棧10層
    wx.navigateTo({
      url: '/pages/test1/test1?name=333',
    })

  //delat表示回退多少層
  wx.navigateBack({
     delta:1
   })

路由跳轉的標簽形式

 <navigator url="/pages/test/test" open-type="switchTab" >跳轉到新頁面</navigator>
 通過open-type來選擇和上面一樣的跳轉方式

小程序本地數據的存儲

wxml

 <button bindtap="cun">存數據</button>
  <button bindtap="qu">取數據</button>
   <button bindtap="del">刪</button>

js

  cun:function () {
    wx.setStorageSync('name', "jason") //存
    wx.setStorageSync('name1', "sean")
  },
  qu:function () {
    wx.setStorageSync('name', "jason is  sb") //改
   console.log( wx.getStorageSync('name')) //取
  },
  del:function() {
    //wx.clearStorageSync() //清除所有的本地數據
    wx.removeStorageSync('name') //清除指定的本地數據
    
  }

總結：

1. 本地存儲有同步，也有異步，用法一樣，同步與異步的區別，就是我們平時理解的同步與異步
2. 這個本地數據的生命周期，和小程序同步，要清除數據，除非我們用代碼刪除，或者用戶刪除（卸載）小程序，用戶清理微信數據
3. 本地數據單個鍵最多只能存1M內容，所有本地數據不能超過10M

小程序如何向 Django 等服務請求接口（wx.request）

wxml

 <button bindtap="qing">請求</button>

js

qing:function(){
    wx.request({
      url: 'http://127.0.0.1:8000/test/', //路由
      data:{   //數據
        "name":"egon"
      },
      method:"POST",//請求方法
      header:{ //請求頭
        "content-type":"application/json"
      },
      success(e){ //回調
          //e為后台返回的值
        console.log(e.data)
      }
    })

  }

注意

本地請求接口的時候，一定要關閉小程序編輯器中的 詳情 -> 本地設置 -> 不校驗https域名