微信小程序基礎語法

微信小程序：

咱們在手機微信裏使用的小程序就是微信小程序

想要開發微信小程序須要先在微信公衆平臺去註冊帳號而後再下載微信開發工具

下載完成以後咱們選擇新建一個項目，創建完成以後咱們就進入到了開發小程序的界面

微信小程序的開發跟vue很像都是使用數據驅動

咱們選擇將pages下的文件夾下的全部文件刪除這樣我麼就能夠全新的開發咱們的小程序了，咱們點擊右鍵選擇新建目錄而後（這個操做就至關於新建了一個文件夾）而後右鍵點擊你新建的目錄選擇新建page會自動幫咱們匹配出四個文件分別是:

• .js文件

  這個文件裏有不少東西先只說（後續會更新）data,這個裏邊的data就跟vue中的data同樣都是再data裏邊寫數據的。

• .wxml文件

  這個就至關因而用來寫html內容的只不過開發小程序用小程序提供給咱們的標籤標籤大體介紹有如下幾種:

  • view標籤就至關於html中div標籤
  • text標籤就至關於html中span標籤
  • view標籤就至關於html中img標籤
  • navgation標籤就至關於html中a標籤
• .json文件

• 這個是用來寫css樣式的

上邊說太小程序也是數據驅動的因此小程序的插值也是用{{同一文件夾下的js文件中的數據}}表示的

-pages/demo/demo.wxml-->
 view標籤就至關於html中div標籤 -->
  text標籤至關於html中的span標籤 -->
  navigat or至關於html中的a標籤-->
 image標籤至關於html中的img標籤 -->
  progess標籤是進度條標籤寫上一個進度條標籤會出現一個進度條 -->

  1.小程序插值語法：{{js文件中的data裏的數據}}
  在小程序中{{js中的data裏的數據}}就表明動態值

  2.元素顯示隱藏  在vue中使用v-show="data中的數據"
    在小程序中使用標籤的屬性hidden="{{對應js文件中data的數據}}"
    若是hidden的值爲true在將元素隱藏爲false則將元素顯示

  3.條件渲染  vue中是v-if  v-else v-elseif
     在小程序中是 wx:if="{{對應js文件中data的數據}}"
                 wx:else="{{對應js文件中data的數據}}"
                wx:elif="{{對應js文件中data的數據}}"
   
   4.循環  在vue中使用v-for="(數組的每一項,數組中每一項的下標) in data裏的數據"
     在小程序裏使用 wx:for="{{要循環的data中的數據}}" wx:for-item="數組中的每一項" wx:for-index="數組中每一項的下標" 


   5.click事件  在vue中咱們使用@click=」對應js中methods裏的函數「
                在小程序中使用bindtap="js文件裏的函數名"
                這個函數就直接寫在js文件裏
  6.經過函數去改變data中的數據：
  由於小程序是單向數據流因此咱們須要使用特定的方法才能修改他裏的數據
  咱們在函數裏可使用this.data能夠獲取到data裏的數據,在函數裏調用this.setData({})函數能夠修改data裏的數據  例:  this.setData({
  你要修改數據的數據名:值
  }）
  7.事件綁定
     在標籤上寫 bind事件類型="事件函數",這裏的事件類型跟平時使用的事件類型不太一致須要使用移動端的事件類型。事件函數直接寫在該頁面的對應的js文件裏。事件函數只有一個參數就是事件對象 （我習慣這個參數叫作e）
     若是想要觸發事件時傳遞參數就在標籤上寫 data-參數名="{{要傳遞的參數}}" 而後在事件函數裏經過e.target.參數名來獲取參數。
  8.url傳參
  小程序中url傳參只接受query參數，例:url?id=1 咱們想要獲取到id的值就在該頁面對應的js文件裏的onload函數裏的option參數就是咱們所傳遞的的參數
複製代碼

小程序的請求:

使用小程序請求數據有小程序專門提供給咱們的方法,若是咱們想要在哪一個頁面上上使用請求數據來渲染頁面，咱們就在該頁面的同一文件夾下的js文件裏的監聽頁面加載onload函數裏去調用wx.request()函數，咱們只需輸入request按下回車時微信開發者工具會自動給咱們寫出代碼，而後再url裏寫地址。這個小程序的請求基本上就跟jquery的ajax同樣。

注：當咱們去使用微信開發者工具去建立項目開發小程序時跟pages文件夾同級的文件必定不要刪除。

若是需求更多更復雜上面的基礎語法知足不了需求可查看官方文檔

小程序的組件：

在小程序中也是支持組件的咱們須要先建立一個文件夾而後右鍵點擊該文件夾選擇新建component一樣也是會幫咱們創造出四個文件分別是：

• .wxml文件

  在這個文件裏寫組件模板

• .wxss文件

  在這個文件裏寫css樣式

• .js

  在這個文件裏寫組件相關的js操做

• .json文件

  json文件裏有兩個屬性：

  • component

    這個屬性的屬性值爲true則表示這是一個組件

  • usingComponents

    這個屬性的屬性值是一個對象對象裏的咱們能夠在這個組件裏註冊當前組件的子組件

    例：

    "usingComponents":{
     
        "組件名":"組件的路徑" 
     }
    複製代碼

  若是咱們想在某個頁面中顯示某個組件則找到該頁面對應的json文件註冊組件在該json文件裏的對象裏這樣寫：

  "usingComponents":{
   
      "組件名":"組件的路徑" 
   }
  複製代碼

  而後咱們在該頁面中寫上組件標籤便可<組件名>< /組件名>

  小程序的組件通訊：

  要想實現小程序的組件通訊咱們要先搞清組件與組件的關係以及組件與頁面的關係。若是a組件的組件模板內有b組件的組件標籤且a組件的json文件裏也註冊了該組件咱們成a組件是b組件的「父親」。若是某個頁面的json文件裏註冊了某組件且某個頁面上有該組件的組件標籤咱們稱該頁面爲該組件的「父親」。

  父子通訊：

  咱們先在頁面或者組件中找到子組件標籤，而後再子組件標籤上寫自定義屬性屬性值爲要傳遞的數據。

  例: <組件標籤 自定義屬性="{{要傳遞的數據}}">

  而後在子組件的文件夾下找到js文件下的properties對象 在該對象裏寫屬性，屬性名爲剛剛在頁面上的子組件標籤上的自定義屬性，屬性值爲傳遞過來數據的類型而後咱們像使用data中的數據同樣使用便可

  例: "properties":{

  剛在頁面上子組件標籤的自定義屬性名:傳遞過來的數據類型
    }
  複製代碼

  子父通訊：

  先在頁面或者組件中找到子組件標籤而後給子組件標籤綁定自定義事件

  例:

  <組件標籤 bind自定義事件名="事件函數"></組件標籤>
  複製代碼

  而後再該頁面或者組件寫自定義事件（若是是頁面則直接寫在js文件裏，若是是組件則直接寫在js文件裏的methods中）

  例：

  在頁面中:
          事件函數（e）{
              //e.datil就是子組件給咱們傳遞過來的數據
          }
   在頁面中:
          methods:{
              事件函數(e){
                    //e.datil就是子組件給咱們傳遞過來的數據
              }
          }
  複製代碼

  而後再子組件模板中選擇一個標籤綁定原生事件而後在該組件對應的js文件的methods裏寫該原生事件函數在原生事件的事件函數裏調用this.triggerEvent函數:

  例:

  methods:{
        事件函數（）{
            
            this.triggerEvent("剛剛在頁面或者組件的子組件標籤上寫的自定義事件名注意不要帶bind",要傳遞的數據)
        }
    }
  複製代碼

  ---

  頁面以及組件的佈局，rex，上拉加載下拉刷新：

  頁面以及組件的樣式是寫在.wxss文件裏的

  1. 佈局單位rpx：

     咱們在pc端佈局使用px作爲單位，移動端使用rpm作爲單位的，然而咱們使用的bootstarp和element-ui等ui框架都是使用的rpx做爲單位的，咱們進行小程序開發時也是使用rpx做爲單位的。

     什麼是rpx？

     咱們在移動端佈局時是須要先引入相應的js文件而後去使用rem單位進行響應式佈局的做用就是在不一樣尺寸的屏幕上顯示不一樣的尺寸。而rpx是微信推出的一種新單位根據官方定義也是進行響應式佈局的，用法就是咱們在寫小程序的組件或者頁面的樣式時使用rpx單位。

     切記：咱們在使用rpx單位時咱們的設計圖量出來的是多少px就使用多少rpx。若是咱們再寫小程序的組件和頁面的樣式時使用px單位的話若是設計圖量出來的是 n px，那麼我麼就是n/2px。可是咱們使用px時是不會有響應式的。

  2. 上拉加載：

     關於上拉加載不過是想要在當前渲染的頁面中加入新的數據，咱們想頁面哪一個頁面上實現下拉加載更多數據，那麼咱們就在該頁面的js文件中找到 onReachBottom: function() {} 函數這個函數就是用啦監聽用戶的上拉事件而後再這個事件中去進行添加數據。

  3. 下拉刷新：

     咱們要實現下拉刷新，首先要看咱們是要實如今單個頁面中又下拉刷新的事件仍是在每一個頁面中都有下拉刷新事件，若是是每一個頁面則找到app.json寫以下代碼，或者單個頁面的對應的json文件寫以下代碼：

     例:

     "enablePullDownRefresh": true,   //若是是單個頁面則直接寫，若是是每一個頁面則寫在app.json文件的window裏
     複製代碼

     寫上那樣的代碼只不過是頁面有了下拉刷新事件，若是咱們想在某個頁面裏邊去使用下拉刷新那麼就去找到該頁面對應js裏的onPullDownRefresh: function () {} 函數，這個函數是監聽用戶下拉的事件，若是咱們想在用戶下拉刷新時作一些操做那麼則在這個函數裏寫。

  小程序用戶向服務器上傳圖片:

  想要實現向服務器上傳圖片那麼咱們須要選擇一個標籤綁定原生事件，而後經過原生事件去調用wx.chooseImage這個函數，函數裏的success的參數res.tempFilepaths裏就是咱們在本地選擇到的圖片的路徑

  例:

  事件函數（）{
       wx.chooseImage({
           success:(res)=>{
                res.tempFilepaths  //是一個數組它裏邊包含了咱們在本地所選擇到的圖片
           }
       })
   }
  複製代碼

  上述操做完成以後並無真正的上傳至服務器須要寫成下邊的代碼才能真正的進行上傳"

  例:

  事件函數（）{
       wx.chooseImage({
           success:(res)=>{
                res.tempFilepaths  
                //下邊這幾行代碼是上傳文件的代碼
                const 變量名=wx.uploadFile({
                    "url":"服務器的地址"，
                    "filepath":要上傳的文件,
                    "name":"接口文檔支持的參數"
                })  //這一段爲上傳文件的代碼
           }
       })
   }
  複製代碼

  這段代碼只不過是直接選擇到了圖片而後直接上傳了，咱們也能夠把上傳的代碼拿出來綁定在另外一個事件函數裏。若是咱們要監聽上傳的進度則使用

  例 ：

  剛剛上傳文件時的變量名.onProgressUpdate((res)=>{
            res.progress   //上傳進度
            res.totalBytesSent //已經上傳的數據長度
            res.totalBytesExpectedToSend //預期須要上傳的總長度
     })
  複製代碼

  vant:

  在上邊提太小程序也是有組件的vant就是咱們在小程序中使用的組件庫。跟bootstarp以及elemen-ui的基本一致。

  vant在vue中也是可使用，在vue中使用須要先經過cnpm下載使用，使用方法請參考官方文檔

  還有就是咱們能夠把咱們經常使用的vs Code與微信開發工具結合起來使用。編碼時在vscode進行編碼，查看效果和席間目錄以及組件時在微信開發工具中建立。若是要在vscode中進行編碼建議在vscode中下載minapp插件。

  下面咱們寫的是在小程序中使用vant

  咱們在小程序中使用vant一樣須要經過npm去下載不過在微信開發工具中使用npm是這樣使用的：如今微信開發工具中找到左上角的設置->項目設置->將使用npm模塊勾選上->再找到左上角的工具->構建npm。若是顯示沒有沒有找到能夠構建的npm模塊，那麼咱們則再小程序的文件夾的根目錄下打開命令行輸入如下命令：

  例：

  npm i vant-weapp -S --production   //下載vant
   npm init   //輸入後一路回車
   npm i miniprogram-sm-crypto --production
   輸入完這兩行命令後再去微信開發工具裏去構建npm
  複製代碼