整理自慕課網實戰課《微信小程式入門 2020全新版》

下方只是簡單的歸納常用的點，更多知識可以查看小程式開發檔案，

1.JSON物件和JS物件的區別

JSON只是一種資料格式（或者叫資料形式），
我們所說的json物件其實就是嚴格符合json格式的js物件，

<script>
var obj2={};//這只是JS物件
var obj3={width:100,height:200};/*這跟JSON就更不沾邊了,只是JS的 物件 */
var obj4={'width':100,'height':200};/*這跟JSON就更不沾邊了,只是JS的物件 */
var obj5={"width":100,"height":200,"name":"rose"}; /*我們可以把這個稱做：JSON格式的JavaScript物件 */
var str1='{"width":100,"height":200,"name":"rose"}';/*我們可以把這個稱做：JSON格式的字串 */
var a=[
 {"width":100,"height":200,"name":"rose"},
 {"width":100,"height":200,"name":"rose"},
 {"width":100,"height":200,"name":"rose"},
 ];
 /*這個叫JSON格式的陣列，是JSON的稍復雜一點的形式 */
var str2='['+
 '{"width":100,"height":200,"name":"rose"},'+
 '{"width":100,"height":200,"name":"rose"},'+
 '{"width":100,"height":200,"name":"rose"},'+
 ']' ;
 /* 這個叫稍復雜一點的JSON格式的字串 */
</script>

參考文章：JSON與JS物件的區別與對比

2.px和rpx的區別

rpx 是微信小程式解決自適應螢屏尺寸的尺寸單位，微信小程式規定螢屏的寬度為750rpx，
無論是在iPhone6上面還是其他機型上面都是750rpx的螢屏寬度，拿iPhone6來講，螢屏寬度為375px，把它分為750rpx后， 1rpx = 0.5px，

3.flex布局

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”，它的所有子元素自動成為容器成員，稱為Flex專案（flex item），簡稱”專案”，
有主軸和交叉軸，主軸由flex-direction決定，

.tool{
  display: flex;
  flex-direction: column;        //豎直的為主軸
  align-items: center;        //align-items屬性定義專案在交叉軸上如何對齊，
  justify-content: center;    //justify-content屬性定義了專案在主軸上的對齊方式，
}

4.屬性中字串和JS運算式的區別

<checkbox checked="{{false}}"> </checkbox>

特別注意：不要直接寫 checked=“false”，其計算結果是一個字串，轉成 boolean 型別后代表真值，

{{ }}中只能寫js運算式，不能寫函式等，

5.資料系結Paga.data和SetData函式

Page({
    data: {
    a:"zhu"
  },

  /**
   * 生命周期函式--監聽頁面加載
   */
  onLoad: function (options) {
    this.setData({
        a:"cheng",
        b:"song"
        })
    console.log(this.data)
  },
})

data中一般寫初始化資料（先顯示定義），setData一般對資料進行創建+更新，

wxml界面：

<view> {{a}} </view>

6.DOM優先和資料優先

<script>
var a = "Hello World!";
document.getElementById("demo").innerHTML = a;
</script>

上方是傳統的DOM優先，需要獲取DOM結點，

現在小程式框架可能會用到DOM，一般開發就用資料優先的思想，小程式的資料優先的思想是用資料系結來實作的，
在wxml的DOM節點中直接用運算式{{a}}，更加的方便，

7.生命周期函式和特殊回呼函式

初次打開一個頁面執行順序：

• onLoad（監聽頁面加載）
• onShow（監聽頁面顯示）
• onReady（監聽頁面初次渲染完成）

切到后臺

• onHide（監聽頁面隱藏）

再切到前臺

• onShow（不會再執行onLoad和onReady）

特殊回呼函式：

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

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

},

8.條件渲染和串列渲染

條件渲染:

<view wx:if="{{condition}}"> 123 </view>
<view wx:else> 456 </view>

Page({
  data: {
    condition: true
  }
})

串列渲染:

var postList = [{...},{...},{...},]       //js物件陣列

//一次回圈獲得的物件名為item，類似于（for item in postList）
<block wx:for="{{postList}}" wx:key="index"  wx:for-item="item" wx:for-index="idx">
	<post bind:posttap = "onGoToDetail" res="{{item}}"/>
</block>

for-index就是每項的索引，從0開始，
for-item是每一項的參考，
wx:key="index"能加快性能，index欄位是表中的唯一鍵，

9.路由函式NavigateTo和RedirectTo的區別

wx.navigateTo({
  url:'/pages/post-detail/post-detail?pid=' + pid
})

navigateTo會保存當前頁面，會形成頁面堆疊，現在頁面堆疊最大為10，螢屏左上角會有回傳鍵，

wx.redirectTo({
  url:'/pages/post-detail/post-detail?pid=' + pid
})

redirectTo會銷毀當前頁面，螢屏左上角會有主頁鍵，

10.Catch與Bind事件的區別

<view bind:tap="onViewTap" class="journey-container">
  <text catch:tap="onTextTap" class="journey">開啟小程式之旅</text>
</view>

點擊“開啟小程式之旅”這個文本，只會觸發onTextTap事件，

catch會阻止事件繼續冒泡，

<view catch:tap="onViewTap" class="journey-container">
  <text bind:tap="onTextTap" class="journey">開啟小程式之旅</text>
</view>

點擊“開啟小程式之旅”這個文本，會觸發onTextTap事件和onViewTap事件，

11.自定義屬性命名規則

自定義屬性以“data-”開頭，點擊獲取的event事件中，自定義屬性會在dataset中，并去掉“data-”，

關于大小寫：自定義屬性data-post-id 會變成 postId，自定義屬性data-postId會變成 postid，想要有駝峰，需要以“-”分割，

12.app.js的意義和作用

app.js作為專案的入口檔案，用于創建應用程式物件，
啟動小程式，會執行onLaunch()，
app.js還可以保存全域變數，

App(
  {
    onLaunch(){
      console.log("小程式啟動")
    },
    gIsPlayingMusic:false,
    gIsPlayingPostId:-1,
    gBaseUrl:"http://t.talelin.com/v2/movie/"
  }
)

13.快取與異步

onLoad: function(){
  wx.setStorageSync('flag', 1)
  const flag = wx.getStorage({
    key: 'flag'
  })
  console.log(flag)   //輸出Promise
}

采用回呼的方式：

onLoad: function(){
  wx.setStorageSync('flag', 1)
  const flag = wx.getStorage({
    key: 'flag'
    success(value){
      console.log(value.data)        //輸出1
    }
  })
  console.log(flag)   //輸出undefined，回呼的話，不會回傳flag，
}

采用Promise方式：

onLoad: function(){
  wx.setStorageSync('flag', 1)
  const flag3 = wx.getStorage({
    key: 'flag'
  })
  flag3.then(value => console.log(value.data))    //輸出1
  console.log(flag3)   //輸出Promise
}

采用async/await方式：

onLoad: async function (options){
 wx.setStorageSync('flag', 1)
 const flag4 = await wx.getStorage({
   key: 'flag'
 })
 console.log(flag4)   //輸出{errMsg: "getStorage:ok", data: 1}
}

14.Page中的this和that

Page({
	getWeRunData: function() {
	  var that = this
	  wx.getWeRunData({
	    success(weRunEncryptedData) {
	      console.log(weRunEncryptedData)
	      that.getStepInfoList(weRunEncryptedData)
	    }
	  })
	},
})

Page(…）中傳入的是一個js物件1，相當于一個匿名物件1，this就是指的這個，
但是wx.getWeRunData(…)中也要傳一個js物件2，他的this指向這個匿名物件2，為了讓wx.getWeRunData(…)中呼叫Page(…）的其他屬性，必須把Page(…）的this賦值給that，

15.小程式的函式定義

Page({
   onLoad: function (){
    this.dd(),
    this.dd2(),
    this.dd3()
  },

  dd: function (){    //最常見的寫法，相當于一個匿名函式，dd只是它的key，
    console.log(2)
  },

  dd2: () => {
  console.log(3)
  },
  
  dd3(){				//簡化寫法
    console.log(4)
  },

  dd4: function aa(){    //給函式個名字也行，不過沒啥用，
    console.log(5)
  },
  
	//function aa() {    //直接寫function是錯的，
	  //return 2
	//},
})