小程序項目總結

目錄(各種框架通用套路)

  • 一、靜態頁面
  • 二、生命周期
  • 三、獲取數據
  • 四、渲染頁面
  • 五、綁定事件
  • 六、路由
  • 七、頁面傳參
  • 八、存儲(本地存儲)
  • 九、自定義組件

一、小程序靜態頁面

  • (1)使用小程序組件,view相當于div(塊級元素),text相當與span(行內元素)

  • (2)使用rpx作為小程序單位,可以根據屏幕寬度進行自適應。

    • 1px = 2rpx
    • 開發微信小程序時設計師可以用 iPhone6 (width= 750rpx)作為視覺稿的標準。
  • (3) page{} 該頁面的最外層的容器標簽,常用于給該頁面設置背景顏色

  • (4)開放數據open-data

    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userGender" lang="zh_CN"></open-data>
    
  • (5)導入有贊小程序ui庫到項目中(有贊的自定義組件)

        npm i vant-weapp -S --production
  • 配置app.json文件中,在"usingComponents"中將dist中所有的組件引入
        "usingComponents": {
            "van-action-sheet": "./dist/action-sheet/index",
            "van-area": "./dist/area/index",
            "van-badge": "./dist/badge/index",
            "van-badge-group": "./dist/badge-group/index",
            "van-button": "./dist/button/index",
            "van-card": "./dist/card/index",
            "van-cell": "./dist/cell/index",
            "van-cell-group": "./dist/cell-group/index",
            "van-checkbox": "./dist/checkbox/index",
            "van-checkbox-group": "./dist/checkbox-group/index",
            "van-col": "./dist/col/index",
            "van-dialog": "./dist/dialog/index",
            "van-field": "./dist/field/index",
            "van-goods-action": "./dist/goods-action/index",
            "van-goods-action-icon": "./dist/goods-action-icon/index",
            "van-goods-action-button": "./dist/goods-action-button/index",
            "van-icon": "./dist/icon/index",
            "van-loading": "./dist/loading/index",
            "van-nav-bar": "./dist/nav-bar/index",
            "van-notice-bar": "./dist/notice-bar/index",
            "van-notify": "./dist/notify/index",
            "van-panel": "./dist/panel/index",
            "van-popup": "./dist/popup/index",
            "van-progress": "./dist/progress/index",
            "van-radio": "./dist/radio/index",
            "van-radio-group": "./dist/radio-group/index",
            "van-row": "./dist/row/index",
            "van-search": "./dist/search/index",
            "van-slider": "./dist/slider/index",
            "van-stepper": "./dist/stepper/index",
            "van-steps": "./dist/steps/index",
            "van-submit-bar": "./dist/submit-bar/index",
            "van-swipe-cell": "./dist/swipe-cell/index",
            "van-switch": "./dist/switch/index",
            "van-switch-cell": "./dist/switch-cell/index",
            "van-tab": "./dist/tab/index",
            "van-tabs": "./dist/tabs/index",
            "van-tabbar": "./dist/tabbar/index",
            "van-tabbar-item": "./dist/tabbar-item/index",
            "van-tag": "./dist/tag/index",
            "van-toast": "./dist/toast/index",
            "van-transition": "./dist/transition/index",
            "van-tree-select": "./dist/tree-select/index",
            "van-datetime-picker": "./dist/datetime-picker/index",
            "van-rate": "./dist/rate/index",
            "van-collapse": "./dist/collapse/index",
            "van-collapse-item": "./dist/collapse-item/index",
            "van-picker": "./dist/picker/index"
        }

二、小程序生命周期

三、獲取數據

  • (1) 小程序只支持https
  • (2)需要配置域名白名單
  • (3)開發階段可以取消域名校驗 開發者工具右上角點擊詳情 ==> 不校驗合法域名

四、渲染頁面

  • (1)在模板上直接獲取data中的數據
      <view> {{ message }} </view>
  • (2)在js中通過this.data.xxx獲取data中的數據,通過this.setData()修改data中的數據

  • (3)條件渲染wx:if="{{}}"

      <view wx:if="{{show}}"> True </view>
  • (4)列表渲染wx:for="{{}}",在組件上使用 wx:for 控制屬性綁定一個數組,即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為 index,數組當前項的變量名默認為item
      <view wx:for="{{array}}">
        {{index}}: {{item.message}}
      </view>

五、事件綁定

  • (1)在組件中綁定一個事件處理函數。:bind:事件名
    • bindtap,當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
    <viewbindtap="tapName"> Click me! </view>
  • (2)小程序綁定的函數無法傳參,需要data-xxx自定義屬性,通過event.currentTarget.dataset.xxx

  • (3)小程序使用bind綁定事件會有事件冒泡,使用catch來綁定事件可阻止事件冒泡

六、路由

1、頁面路由配置

  • 在app.json文件的"pages"中配置
  "pages": [
      "pages/index/index",
      "pages/logs/logs",
  ]

2、導航

  • (1)普通頁面跳轉:<navigator></navigator>
   <navigator url="/pages/index/index">跳轉到新頁面</navigator>
  • (2)tabBar頁面跳轉:添加屬性open-type="switchTab"
   <navigator  open-type="switchTab" url="/pages/index/index">跳轉到新頁面</navigator>
  • (3)JS:普通頁面跳轉
      wx.navigateTo({
        url: '/pages/index/index'
      })
  • (4)JS:tabBar頁面跳轉
      wx.navigateTo({
        url: '/pages/index/index'
      })

七、頁面傳參

  • (1)傳參方式:通過url進行傳參,使用?問號攜帶參數
    • 標簽方式
       <navigator url="/pages/index/index?id=123">跳轉到新頁面  </navigator>
    
    • JS方式
        wx.navigateTo({
          url: '/pages/index/index?id=123'
        })
    
  • (2)接收參數:在目標頁面的onLoad生命周期中接收傳過來的參數
        onLoad: function (options) {
              console.log(options.id)  // id=123
        }
  • (3)頁面傳參傳對象:小程序不支持直接傳遞對象,需要將對象先轉換成JSON數據,然后再在接收頁面轉換成原來的數據類型
    • 傳送方
        let dataStr = JSON.stringify(data);
          wx.navigateTo({
          url: `/pages/index/index?dataStr=${data}`
        })
    
    • 接收方
           onLoad: function (options) {
               let data = JSON.parse(options.dataStr)
           }
    

八、數據緩存

  • (1)存
    try {
        wx.setStorageSync('key', 'value')
    } catch (e) { }
  • (2)取
    try {
        var value = wx.getStorageSync('key')
    } catch (e) { }
  • (3)清除
    try {
        wx.removeStorageSync('key')
    } catch (e) { }

九、自定義組件

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容