【微信小程序】微信小程序

準備工作
在微信公衆平臺註冊小程序賬號
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

獲取appID
在這裏插入圖片描述
3.下載小程序開發工具
開發工具下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
4.創建微信小程序
生成示例目錄如下:
在這裏插入圖片描述
簡單語法
數據綁定
語法: {{}} 數據綁定使用 Mustache 語法(雙大括號)將變量包起來
例:關鍵字
true:boolean 類型的 true,代表真值。
false: boolean 類型的 false,代表假值。

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

注意:不要直接寫 checked=“false”,其計算結果是一個字符串,轉成 boolean 類型後代表真值

列表渲染
語法:wx:for
在組件上使用 wx:for 控制屬性綁定一個數組,即可使用數組中各項的數據重複渲染該組件。

默認數組的當前項的下標變量名默認爲 index,數組當前項的變量名默認爲 item

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:key
如果列表中項目的位置會動態改變或者有新的項目添加到列表中,並且希望列表中的項目保持自己的特徵和狀態,需要使用 wx:key 來指定列表中項目的唯一的標識符。
如不提供 wx:key,會報一個 warning, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。
條件渲染
使用 wx:if="" 來判斷是否需要渲染代碼塊,也可以用 wx:elif 和 wx:else 來添加一個 else 塊

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

小程序中發送HTTP請求
GET請求:

  wx.request({
      url: 'http://127.0.0.1:3000/cgi/likecomment/removelike',
      method:"POST",
      data:{postId: data._id },
      success:(res)=>{
        // this.setData({circleList: res.data.data})
        console.log(res)
      }
    })

小程序中沒有跨域問題

頁面的生命週期,暫時不用太懂

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章