必背-13.小程式

• 小程式官網：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

全域配置

• 全域配置在根目錄下的app.json檔案
  • pages:創建檔案和檔案夾的
  • window:全域的默認視窗表現
  • tobBar:創建小程式的上邊欄或下邊欄

標簽

• <view>:-><div>
• <text>:-><span>
• <block>:-><templete>:不會被渲染到視圖上
• <swiper>&<swiper-item>：輪播圖
• <button>:按鈕
• <navigator url="">:頁面跳轉
• <scroll-view>:可滾動視圖

基礎語法

• 與vue的用法相似，只是data不是函式，是物件
• 系結事件用bindxxx,bindtap是系結點擊事件
• for回圈用wx:for="{{5}}"
• 不管是標簽內還是標簽外，用值一般都是小胡子語法{{}}
• 小程式中的大小位置單位可以用rpx或px,表示自適應像素
  • rpx:在不同的機型會表示不同大小的px,會根據設備像素比變化
    • iphone6->1rpx=0.5px

跳轉頁面

跳轉頁面存在兩種方式：標簽跳轉問號傳參和方法跳轉

• 標簽跳轉：相當于vue中的<router-link :to="">標簽跳轉

  • <navgiater url:"index?name='lili' open-type='xxx'"></navgiater>:xxx可以是以下幾項

    • navgiate【導航】:保留歷史頁面，url不能是tabBar占用的路徑
    • redirect【重定向】:關閉當前頁面，url不能是tabBar占用的路徑
    • switchTab【選擇切換】:跳轉到tabBar頁面，關閉其他所有非tabBar頁面
    • reLaunch【重新啟動】:關閉所有頁面，打開到應用內某個頁面

  • 問號傳參：通過在標簽中的url路徑后面加問號傳遞引數，上面例子中的引數就是name='lili'

    • 接收引數：在index.js頁面中呼叫onLoad(options){options},其中的options就是接收的引數

• 方法跳轉：使用方法呼叫wx實體的wx.navigateTo()等方法實作跳轉

  • 呼叫：wx.navigateTo()/wx.redirectTo()/wx.switchTab()/reLaunch()函式實作路由

  wx.navgateTo({
      url:"../pages/index?name='lili'"
  })
  

組件使用步驟

• 第一步：創建components組件，在里面創建組件檔案夾

  • 

• 第二步：在想用組件的.json檔案中配置組件

  • 

• 第三步：呼叫組件

  • 

組件傳參

父傳子

• 父傳子:
  • 第一步：父組件給子組件設定屬性
    • 
  • 第二步：子組件在js檔案中，用properties屬性接收：
    • 
  • 第三步：組件中就能直接呼叫父組件傳過來的引數，不能修改
    • 

子傳父

• 第一步：父組件給子組件系結一個自定義函式,并在父組件的js檔案中撰寫handle函式

  • 
  • 

• 第二步：在子組件中呼叫this.triggerEvent("fn",{a:10,b:20});

  • 執行事件池中的fn事件
  • {a:10,b:20}:這是傳給父組件的引數，多個資料需要用物件傳
  • 

• 第三步：子組件就能夠在方法中獲取到傳過來的引數

  • 

生命周期

小程式的生命周期分為了應用生命周期和頁面生命周期

生命周期的函式寫在app.js檔案中

• 應用生命周期：5個
  • onLaunch:初始化小程式時觸發，全域只觸發一次
  • onShow:小程式初始化完成，或者用戶從后臺切換到前臺顯示時觸發【頁面再次顯示時，對應的資料或效果會重繪】
  • onHide:用戶將小程式從前臺切換到后臺隱藏時觸發【頁面隱藏時，會清除定時器】
  • onError(err):小程式發生腳本錯誤,或者api呼叫失敗時，會觸發onError并帶上錯誤資訊
  • onPageNotFound:應用第一次啟動的時候，如果找不到第一個入口頁面觸發
• 頁面生命周期: 6個
  • onInit:百度小程式獨有，在onLaunch與onLoad之間的生命周期，目的是將資料請求放在這里以優化性能
  • onLoad:監聽頁面加載，可以在onLoad的引數中獲取打開當前頁面路徑中的引數，(實作組件或頁面傳參)
  • onShow:監聽頁面顯示，加載完成之后、后臺切換到前臺，或者(頁面被隱藏)重新進入頁面時觸發
  • onReady:頁面首次渲染完成時觸發(只有觸發onload才會觸發這個)
  • onHide:監聽頁面隱藏，頁面從前臺切換到后臺，或使用navgiate進入其他頁面時觸發
  • onUnload:監聽頁面卸載，頁面卸載時觸發

監聽事件

8個

• onPullDownRefresh():監聽用戶下拉動作
• onReachBottom():頁面上拉觸底事件的處理函式
• onShareAppMessage():用戶點擊右上角轉發
• onShareTimeLine():用戶點擊右上角轉發到朋友圈
• onAddToFavorites():用戶點擊右上角收藏
• onPageScroll():頁面滾動觸發事件的處理函式
• onResize():頁面尺寸改變時觸發，如螢屏旋轉
• onTabItemTap():當前是tab頁時，點擊tab時觸發

常用API

• setData():this.setData({num:50}):設定data中的num資料值

• getApp():getApp().globalData.host:在小程式中的任何一個檔案都可以執行getApp,獲取全域變數

• 匯入/匯出：wx中的規范使用的是CommonJS規范

  • 匯入:let {data}=require('../../utils/util')
  • 匯出:module.exports={data}

• 請求：通過在JS檔案中用wx.request({})

  • 

  • 可以對request基于進行二次封裝：

    • 

• showToast():彈出資訊框，可以自己設定彈框的型別

  • 
    • duratinon：彈框存在時間，

• showLoading():showToast只能手動設定存在時間，而showLoading能夠等待資料請求成功后通過hideLoading方法讓其消失

資料快取API

• wx.setStorageSync('key','value'):設定快取中指定的key,并同步
• wx.removeStorageSync('key'):洗掉快取中指定的key，并同步
• let value=wx.getStorageSync("key"):獲取快取中指定的key,同步
• const res=wx.getStorageInfoSync():獲取快取中所有的key，同步
• wx.clearStorageSync():清除本地快取
• 小程式中的資料快取是單獨開辟出的一塊空間存盤資料，跟瀏覽器中的資料快取不是一回事
• 帶Sync的是同步，不帶的是異步
• set設定資料快取，get是獲取，getStorageInfo是獲取全部key，remove洗掉某一個，clear是洗掉全部

上傳圖片或視頻

• 圖片：呼叫wx.chooseImage(Object object)可以上傳圖片到快取區

  • count:個數

  • sizeType:存放型別，(orginal[原檔案])，(compresses[壓縮檔案])

  • sourceType:上傳型別,（album[相冊]），(camera[照相機])

  • wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res)=> {
        // tempFilePath可以作為img標簽的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths
      }
    })
    

  • success后必須跟的是箭頭函式，否則里面的this找不到wx

獲取元素

uni-App小程式

• uni-App混合式框架：是一個使用Vue.js開發所有前端應用的框架，

uni-APP怎么用vant

https://youzan.github.io/vant-weapp/#/quickstart

• 第一步：下載vant的組件包，解壓后將它內部的dist檔案夾放到uni-app專案中

  • 

• 第二步:在APP.vue的style中匯入vant組件的樣式

  • @import "/wxcomponents/vant/dist/common/index.wxss";
  • 

• 第三步:在page.json中的page的頁面中的style中匯入，那個頁面用什么，就匯入什么

  • 

• 第四步：在指定的頁面使用vant檔案中的對應組件即可

  •