首頁 > 軟體

微信小程式全域性檔案的使用詳解

2022-08-02 22:00:17

我們前邊兩篇介紹了賬號的申請、註冊,工具的安裝,雲服務的開通。本篇我們介紹一下基礎語法。介紹的方法呢我們會結合上微搭低程式碼的工具一起做個對比。因為低程式碼工具也產生了非常多的技術概念,但最終在釋出成小程式的時候也是按照微信的規範去生成的,把微信開發者工具學會了也可以更深入的瞭解低程式碼的相關概念。

全域性檔案

小程式中是分為全域性和頁面級兩部分。全域性是在小程式的所有頁面都有效,頁面級是隻在當前頁面中生效。小程式根目錄有三個檔案app.js、app.json、app.wxss這三個就是全域性的。

在低程式碼中我們是在低碼編輯器裡看全域性檔案

我們這裡的lifecycle相當於app.js,style相當於app.wxss,那app.json相當於啥呢?app.json是放的所有可以存取到的頁面,相當於我們低碼中的頁面管理部分

在app.js中我們可以設定全域性生命週期和全域性變數

// app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力');
    } else {
      wx.cloud.init({
        // env 引數說明:
        //   env 引數決定接下來小程式發起的雲開發呼叫(wx.cloud.xxx)會預設請求到哪個雲環境的資源
        //   此處請填入環境 ID, 環境 ID 可開啟雲控制檯檢視
        //   如不填則使用預設環境(第一個建立的環境)
        // env: 'my-env-id',
        env:'env-3gsnzui',
        traceUser: true,
      });
    }
    this.globalData = {};
  }
});

onLanch就是一個全域性的生命週期函數,在小程式一啟動的時候就會載入。那這裡邊一般幹些啥呢?比如你需要載入使用者資訊、角色的,就可以在這個函數裡新增程式碼。

和低碼中不同的是,我們全域性物件在設定屬性的時候是用的this關鍵字,這個關鍵字指向了物件自身,因為我們是在全域性物件裡,所以this指向的是全域性物件。

低碼中的全域性物件是在變數中定義的,我們可以開啟變數看到全域性物件

我們這裡的global相當於小程式中的globalData。我們可以看一下微搭中的生命週期函數

export default {
  onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

上述兩個檔案理解了之後,我們還需要理解一下app.json

{
  "pages": [
    "pages/index/index",
    "pages/getOpenId/index",
    "pages/getMiniProgramCode/index",
    "pages/deployService/index",
    "pages/createCollection/index",
    "pages/uploadFile/index",
    "pages/selectRecord/index",
    "pages/updateRecord/index",
    "pages/updateRecordResult/index",
    "pages/updateRecordSuccess/index",
    "pages/sumRecord/index",
    "pages/sumRecordResult/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "雲開發 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

這裡重點是要知道pages的這個結構,每一個可以存取的頁面都有一個路徑,可以看一下微信開發者工具頁面的結構

微信開發者工具,首頁是放在陣列裡的第一個元素,有的同學會問,為啥會有兩個Index呢?因為第一個index是資料夾,第二個index才指向的是具體的index.wxml這個才是具體的頁面。

低碼中也需要理解這個概念,尤其我們在做分享轉發的時候,你需要填寫分享的路徑,不理解小程式這個概念,有時候你就不知道該寫啥。

最後一個就是全域性樣式,如果公共的樣式可以寫到這個檔案裡,方便後續頁面的參照

/**app.wxss**/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
} 
button {
  background: initial;
}
button:focus{
  outline: 0;
}
button::after{
  border: none;
}
page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

這裡的語法是CSS的語法,因此有必要學習一下CSS。低程式碼中的全域性樣式是在style檔案中編制

// icon
.job-icon{
  display: inline-flex !important;
  align-items: center;
  color: rgba(0, 0, 0, 0.4);
  .weda-image{
    object-fit: cover !important;
    // height: 100% !important;
    width: auto !important;
  }
  &--location{
  }
}
// 搜尋
.job-search {
  margin: 44px 0 22px;
  &__input{
    .weda-ui .weui-cells {
      margin-top: 0;
    }
    .weui-cells{
      &::before,&::after{
        display: none;
      }
    }
    .weui-cell_active:active:after{
      border-radius: 40px;
    }
    .weui-cell__bd{
      border-radius: 40px;
      background-color: #F3F3F3;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 16px 32px 16px 80px;
      &::before{
        content: '';
        width: 36px;
        height: 36px;
        margin-left: 30px;
        position: absolute;
        left: 0;
        background-size: cover;
        background-image: url("https://lowcode-9gu72kpiac8de2d6-1252394733.tcloudbaseapp.com/resources/2022-03/lowcode-182749");
      }
    }
    .weda-ui.weda-input .weui-btn_input-clear{
      padding-right: 0;
    }
    .weui-cell.weui-cell_form{
      padding: 0;
    }
    .weda-ui.weda-input input.weui-input{
      padding: 0;
      font-size: 28px;
      margin: 0;
      box-sizing: border-box;
      text-align: left;
      height: 48px;
      line-height: 48px;
      border-radius: 0px;
    }
  }
}
// 圖文排版
.job-media{
  &__img{
    &-main{
      width: 100px;
      height: 100px;
    }
  }
  &__info{
    margin-left: 20px;
    &-title{
      font-size: 48px;
    }
    &-desc{
      font-size: 28px;
    }
  }
}
// 使用者資訊
.job-user{
  &__media{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &-main{
      flex-grow: 1;
      flex-shrink: 1;
      display: flex;
      align-items: center;
      &__img{
        flex-grow: 0;
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin-right: 20px;
      }
      &__name{
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 28px;
        text-align: left;
        color:rgba(0, 0, 0, 0.6);
      }
    }
  }
}
// 標籤
.job-tag{
  flex-wrap: wrap;
  &__item{
    margin-bottom: 20px;
  }
}
// flex
.job-flex{
  &__value0{
    flex-grow: 0;
    flex-shrink: 0;
    padding-left: 12px;
    color: #2262E6;
  }
}
// 上推
.job-scroll__up{
  .index-top-title{
    display: none;
  }
  .index-scroll-inside{
    overflow: visible !important;
    // 以下的js計算
    padding-top: 250px;
  }
  .job-search{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    margin: 0;
    right: 0;
    background: linear-gradient(rgb(34, 98, 230) 0%, rgb(19, 160, 255) 100%);
    // 以下的js計算
    padding: 28px 200px 28px 24px;
  }
}

可以看到低程式碼中的樣式更復雜,會有巢狀關係,所以寫起來難度會更大一點。如果樣式這塊不是太擅長,建議用視覺化的方式進行設定,也節約了不少的學習成本。

總結

我們本篇介紹了微信小程式裡的全域性檔案,和低程式碼工具做了一個橫向的對比。程式碼的方式通常難度更大,低碼工具其實是將這些概念進行提煉,以視覺化的方式進行設定,大大的降低了開發門檻。感興趣的同學可以安裝一下兩個工具,對比一下各種概念,也可以拓寬知識面。

到此這篇關於微信小程式全域性檔案的使用詳解的文章就介紹到這了,更多相關小程式全域性檔案內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com