微信小程序開發小總結


小程序開發文檔使用說明

小程序的文檔分為 簡易教程、框架、組件、API 、工具
 
簡易教程---介紹小程序開發的一些基本情況 開發方式,項目目錄等等,看完這些,基本能了解怎么跑起來項目,在哪塊寫代碼,各個文件的作用。
框架--- 這部分是小程序開發的核心,小程序采用視圖和邏輯層代碼相分離的結構,如果你用過vue angular react 這部分也不難理解,但是也有一些區別。
組件---小程序的每個標簽相當於一個組件,官方已經預定義了一些常用的標簽組件,能夠滿足日常基本功能的使用,這部分分時小程序開發高效的一個原因,基礎的組件都定義好,需要用就行。這部分的文檔,只要過一下,大概有那些組件,用的時候再仔細閱讀文檔。
  開發中常常使用的組件
  •   視圖容器    view       scroll-view  swiper
  • 基礎內容  text
  • 媒體    image  video audio
  • 表單   button input checkbox  label picker 
  • 畫布  canvas 
  • 地圖  map
 
API---主要,可以的調起微信提供的能力,如果你在前端開發中沒有遇到過的功能,都能在這里查到,比如小程序的頭部,頁面的刷新,本地存儲,獲取用戶信息,支付功能等。
工具--- 這部分沒有什么好說的,微信開發開始還是用微信自己的開發工具比較方便。
 

開發中常見問題

1.整個小程序的配置

小程序的全局配置在 app.json 中,小程序每添加一個頁面,都要在全局中注冊,文檔:
 

2 列表渲染

    小程序的列表渲染和其他的前端模板語言相似,但可以用wx:for-item="itemname" 來指定每次循環對象的名字,可以用wx:for-index="indexname" 來指定 循環序列的鍵值,這個功能就是指定循環數組時的鍵和值的別名。
    列表中的wx:key 是一個比較令人迷惑的地方 ,不寫會報錯,但是隨便給一個字符也不合理,最好是循環中的一個標記唯一性的鍵值,比如id
 

3 事件綁定

  小程序的事件綁定,寫法上有些區別,主要2種 bind:youevent="eventhandle"  catch:youevent="eventhandle" catch 能阻止事件冒泡
 

4.模塊開發

小程序可以使用common.js 的模塊開發方式。moudle.exports /exports 導出模塊, require (‘file.js’) 的方式引入模塊

5.頁面的生命周期

onLoad 生命周期函數--監聽頁面加載(可以在這里異步的請求數據,初始化頁面)
onReady 生命周期函數--監聽頁面初次渲染完成(在這里,可以獲取頁面視圖的布局數據)
onShow 生命周期函數--監聽頁面顯示
onHide 生命周期函數--監聽頁面隱藏
onUnload 生命周期函數--監聽頁面卸載

6.頁面視圖中元素的位置和大小

   在小程序開發過程中肯定會遇到要獲取頁面中元素的位置和元素的寬高。這部分在 文檔=》api=》界面
wxml節點信息 中找相應的api
 
getRect: function(){
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id // 節點的ID
      rect.dataset // 節點的dataset
      rect.left // 節點的左邊界坐標
      rect.right // 節點的右邊界坐標
      rect.top // 節點的上邊界坐標
      rect.bottom // 節點的下邊界坐標
      rect.width // 節點的寬度
      rect.height // 節點的高度
    }).exec()
  },
 

7.交互反饋

交互反饋詳情在 文檔=》api=》界面=》交互反饋
一個成功的反饋
 
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})
 
 

8.跨頁面更新數據

小程序整個應用是用App()構造方法組成,頁面是用Page() 構造方法注冊。小程序只有組件才有自定義事件,在Page() 無法使用自定義事件通過觸發事件在頁面間傳遞數據不可行,微信提供 獲取整個應用實例的getApp() 方法,這樣可以獲取app 的實例,通過 pages = getCurrentPages(); 獲取 打開頁面的 列表 ,通過 pages來調用各頁面的方法和更新數據
 
var pages = getCurrentPages();//獲取頁面棧
var currPage = pages[pages.length - 1]; //當前頁面
var prevPage = pages[pages.length - 2]; //上一個頁面
//直接調用上一個頁面的setData()方法,把數據存到上一個頁面中去
prevPage.setData({
  mdata:1 
});
//調用上一個頁面的方法來更新數據
prePage.updatefunc(altdata)
 
 
 
 
 
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM