<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
我們前邊兩篇介紹了賬號的申請、註冊,工具的安裝,雲服務的開通。本篇我們介紹一下基礎語法。介紹的方法呢我們會結合上微搭低程式碼的工具一起做個對比。因為低程式碼工具也產生了非常多的技術概念,但最終在釋出成小程式的時候也是按照微信的規範去生成的,把微信開發者工具學會了也可以更深入的瞭解低程式碼的相關概念。
小程式中是分為全域性和頁面級兩部分。全域性是在小程式的所有頁面都有效,頁面級是隻在當前頁面中生效。小程式根目錄有三個檔案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!
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45