小程序項目總結

目錄（各種框架通用套路）

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

一、小程序靜態頁面

  • （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) { }

九、自定義組件

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

推薦閱讀更多精彩內容