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

• 一牡彻、靜態(tài)頁面
• 二、生命周期
• 三出爹、獲取數(shù)據(jù)
• 四庄吼、渲染頁面
• 五、綁定事件
• 六严就、路由
• 七总寻、頁面?zhèn)鲄?/li>
• 八、存儲(本地存儲)
• 九梢为、自定義組件

一渐行、小程序靜態(tài)頁面

• （1）使用小程序組件,view相當(dāng)于div（塊級元素）技矮，text相當(dāng)與span（行內(nèi)元素）

• （2）使用rpx作為小程序單位，可以根據(jù)屏幕寬度進行自適應(yīng)殊轴。

  • 1px = 2rpx
  • 開發(fā)微信小程序時設(shè)計師可以用 iPhone6 （width= 750rpx）作為視覺稿的標(biāo)準(zhǔn)。

• （3） page{} 該頁面的最外層的容器標(biāo)簽袒炉，常用于給該頁面設(shè)置背景顏色

• （4）開放數(shù)據(jù)open-data

  • 用于展示微信開放的數(shù)據(jù)旁理。
  • 如用戶名，性別

  <open-data type="userAvatarUrl"></open-data>
  <open-data type="userGender" lang="zh_CN"></open-data>
  

• （5）導(dǎo)入有贊小程序ui庫到項目中（有贊的自定義組件）

  • 使用文檔地址：https://youzan.github.io/vant-weapp/#/intro
  • 下載有贊小程序ui庫我磁，將其中的dist文件導(dǎo)入到我們的項目的根目錄

        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"
        }

二、小程序生命周期

三夺艰、獲取數(shù)據(jù)

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

四芋哭、渲染頁面

• （1）在模板上直接獲取data中的數(shù)據(jù)

      <view> {{ message }} </view>

• （2）在js中通過this.data.xxx獲取data中的數(shù)據(jù)，通過this.setData()修改data中的數(shù)據(jù)

• （3）條件渲染wx:if="{{}}"

      <view wx:if="{{show}}"> True </view>

• （4）列表渲染wx:for="{{}}"郁副，在組件上使用 wx:for 控制屬性綁定一個數(shù)組减牺，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。默認數(shù)組的當(dāng)前項的下標(biāo)變量名默認為 index存谎，數(shù)組當(dāng)前項的變量名默認為item

      <view wx:for="{{array}}">
        {{index}}: {{item.message}}
      </view>

五拔疚、事件綁定

• （1）在組件中綁定一個事件處理函數(shù)。：bind:事件名
  • 如bindtap既荚，當(dāng)用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)稚失。

    <viewbindtap="tapName"> Click me! </view>

• （2）小程序綁定的函數(shù)無法傳參，需要data-xxx自定義屬性恰聘，通過event.currentTarget.dataset.xxx

• （3）小程序使用bind綁定事件會有事件冒泡句各，使用catch來綁定事件可阻止事件冒泡

六、路由

1晴叨、頁面路由配置

• 在app.json文件的"pages"中配置

  "pages": [
      "pages/index/index",
      "pages/logs/logs",
  ]

2凿宾、導(dǎo)航

• （1）普通頁面跳轉(zhuǎn)：<navigator></navigator>

   <navigator url="/pages/index/index">跳轉(zhuǎn)到新頁面</navigator>

• （2）tabBar頁面跳轉(zhuǎn)：添加屬性open-type="switchTab"

   <navigator  open-type="switchTab" url="/pages/index/index">跳轉(zhuǎn)到新頁面</navigator>

• （3）JS：普通頁面跳轉(zhuǎn)

      wx.navigateTo({
        url: '/pages/index/index'
      })

• （4）JS：tabBar頁面跳轉(zhuǎn)

      wx.navigateTo({
        url: '/pages/index/index'
      })

七、頁面?zhèn)鲄?/h3>

• （1）傳參方式：通過url進行傳參兼蕊，使用菌湃？問號攜帶參數(shù)
  • 標(biāo)簽方式

     <navigator url="/pages/index/index?id=123">跳轉(zhuǎn)到新頁面  </navigator>
  

  • JS方式

      wx.navigateTo({
        url: '/pages/index/index?id=123'
      })
  

• （2）接收參數(shù)：在目標(biāo)頁面的onLoad生命周期中接收傳過來的參數(shù)

        onLoad: function (options) {
              console.log(options.id)  // id=123
        }

• （3）頁面?zhèn)鲄鲗ο螅盒〕绦虿恢С种苯觽鬟f對象，需要將對象先轉(zhuǎn)換成JSON數(shù)據(jù)遍略，然后再在接收頁面轉(zhuǎn)換成原來的數(shù)據(jù)類型
  • 傳送方

      let dataStr = JSON.stringify(data);
        wx.navigateTo({
        url: `/pages/index/index?dataStr=${data}`
      })
  

  • 接收方

         onLoad: function (options) {
             let data = JSON.parse(options.dataStr)
         }
  

八惧所、數(shù)據(jù)緩存

• （1）存

    try {
        wx.setStorageSync('key', 'value')
    } catch (e) { }

• （2）取

    try {
        var value = wx.getStorageSync('key')
    } catch (e) { }

• （3）清除

    try {
        wx.removeStorageSync('key')
    } catch (e) { }

九、自定義組件