小程式筆記上

記錄要點與差別(主要是減少踩坑)

小程式不是運行在瀏覽器中，所以沒有DOM和BOM
小程式的額外成員
- app方法用于定義應用實體物件
- Page方法用于定義頁面物件
- getApp方法用于定義全域應用程式物件
- getCurrentPages方法用來獲取當前頁面的呼叫堆疊
- wx 物件用來提供核心api
小程式的js是支持common.js規范的(跟node.js使用時一致)

  只支持這種匯出方式
  moudle.export = {
      say : say
  }

資料系結與vue類似(依然使用小胡子語法(mustache)展示)
當語法決議誤解了true/false可以使用小胡子來解決
基本的回圈 wx:for
- 資料源必須是一個陣列
  - 給遍歷物件定義名稱 wx:for-item
  - 給遍歷索引定義名稱 wx:for-index
事件處理(事件處理函式不需要放在method里面)
- 事件句柄的名稱不一致 eg:bindtap(類似onclick)
事件冒泡與web事件冒泡一致
事件傳參

  <button bindtap="bindtap1(123)"></button>
  <!-- 此時bindtap1(123)是作為一個函式名，而不能將引數123傳遞給bindtap1，-->

正確的傳參方式（使用dataset）

  bindtap1 : function(e){
    //dataset是元素包含 data- 開頭的物件（h5的方法）
    console.log(e.target.dataset)
  }
  //這里不能使用this來獲取當前點擊物件，此時this指向的是頁面物件

小程式是單向資料流(與vue等框架不一樣,vue有監視資料變化并通知頁面發生變化，而小程式沒有)

   //直接賦值沒有通知頁面做出變化
   //應使用this.setData通知頁面發生變化
  Page({
    data:{
      msg :'hhh'
    },
    bindtap1 : function(e){
      this.setData({
        msg ： e.target.value
  })
    }
  })

頁面條件渲染
- 可以使用block作為控制屬性的載體，在頁面渲染中沒有意義
```
  <block wx:if="{{show}}"/>
```
- hidden屬性（真則隱藏，標簽不會作業，而wx:if隱藏時，標簽不作業）
WXSS與CSS的差異
- 新增尺寸單位：rpx,規定螢屏為750rpx,來實作自適應不同手機螢屏(eg:1rpx=0.5px iphone6)
- PC端1px對應一個物理像素，而移動端可能對應多個物理像素
- 選擇器只支持基礎的選擇器，不支持CSS3里面的高級選擇器
- hover在小程式指的是按下，移動端沒有懸浮的概念

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/102392.html

標籤：JavaScript

上一篇：JavaScript 保留兩位小數

下一篇：小程式筆記下