微信小程序全局文件的使用詳解
我們前邊兩篇介紹了賬號(hào)的申請(qǐng)、注冊(cè),工具的安裝,云服務(wù)的開通。本篇我們介紹一下基礎(chǔ)語法。介紹的方法呢我們會(huì)結(jié)合上微搭低代碼的工具一起做個(gè)對(duì)比。因?yàn)榈痛a工具也產(chǎn)生了非常多的技術(shù)概念,但最終在發(fā)布成小程序的時(shí)候也是按照微信的規(guī)范去生成的,把微信開發(fā)者工具學(xué)會(huì)了也可以更深入的了解低代碼的相關(guān)概念。
全局文件
小程序中是分為全局和頁(yè)面級(jí)兩部分。全局是在小程序的所有頁(yè)面都有效,頁(yè)面級(jí)是只在當(dāng)前頁(yè)面中生效。小程序根目錄有三個(gè)文件app.js、app.json、app.wxss這三個(gè)就是全局的。
在低代碼中我們是在低碼編輯器里看全局文件
我們這里的lifecycle相當(dāng)于app.js,style相當(dāng)于app.wxss,那app.json相當(dāng)于啥呢?app.json是放的所有可以訪問到的頁(yè)面,相當(dāng)于我們低碼中的頁(yè)面管理部分
在app.js中我們可以設(shè)置全局生命周期和全局變量
// app.js App({ onLaunch: function () { if (!wx.cloud) { console.error('請(qǐng)使用 2.2.3 或以上的基礎(chǔ)庫(kù)以使用云能力'); } else { wx.cloud.init({ // env 參數(shù)說明: // env 參數(shù)決定接下來小程序發(fā)起的云開發(fā)調(diào)用(wx.cloud.xxx)會(huì)默認(rèn)請(qǐng)求到哪個(gè)云環(huán)境的資源 // 此處請(qǐng)?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開云控制臺(tái)查看 // 如不填則使用默認(rèn)環(huán)境(第一個(gè)創(chuàng)建的環(huán)境) // env: 'my-env-id', env:'env-3gsnzui', traceUser: true, }); } this.globalData = {}; } });
onLanch就是一個(gè)全局的生命周期函數(shù),在小程序一啟動(dòng)的時(shí)候就會(huì)加載。那這里邊一般干些啥呢?比如你需要加載用戶信息、角色的,就可以在這個(gè)函數(shù)里添加代碼。
和低碼中不同的是,我們?nèi)謱?duì)象在設(shè)置屬性的時(shí)候是用的this關(guān)鍵字,這個(gè)關(guān)鍵字指向了對(duì)象自身,因?yàn)槲覀兪窃谌謱?duì)象里,所以this指向的是全局對(duì)象。
低碼中的全局對(duì)象是在變量中定義的,我們可以打開變量看到全局對(duì)象
我們這里的global相當(dāng)于小程序中的globalData。我們可以看一下微搭中的生命周期函數(shù)
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) } }
上述兩個(gè)文件理解了之后,我們還需要理解一下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": "云開發(fā) QuickStart", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json", "style": "v2" }
這里重點(diǎn)是要知道pages的這個(gè)結(jié)構(gòu),每一個(gè)可以訪問的頁(yè)面都有一個(gè)路徑,可以看一下微信開發(fā)者工具頁(yè)面的結(jié)構(gòu)
微信開發(fā)者工具,首頁(yè)是放在數(shù)組里的第一個(gè)元素,有的同學(xué)會(huì)問,為啥會(huì)有兩個(gè)Index呢?因?yàn)榈谝粋€(gè)index是文件夾,第二個(gè)index才指向的是具體的index.wxml這個(gè)才是具體的頁(yè)面。
低碼中也需要理解這個(gè)概念,尤其我們?cè)谧龇窒磙D(zhuǎn)發(fā)的時(shí)候,你需要填寫分享的路徑,不理解小程序這個(gè)概念,有時(shí)候你就不知道該寫啥。
最后一個(gè)就是全局樣式,如果公共的樣式可以寫到這個(gè)文件里,方便后續(xù)頁(yè)面的引用
/**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的語法,因此有必要學(xué)習(xí)一下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); } } } } // 標(biāo)簽 .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計(jì)算 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計(jì)算 padding: 28px 200px 28px 24px; } }
可以看到低代碼中的樣式更復(fù)雜,會(huì)有嵌套關(guān)系,所以寫起來難度會(huì)更大一點(diǎn)。如果樣式這塊不是太擅長(zhǎng),建議用可視化的方式進(jìn)行設(shè)置,也節(jié)約了不少的學(xué)習(xí)成本。
總結(jié)
我們本篇介紹了微信小程序里的全局文件,和低代碼工具做了一個(gè)橫向的對(duì)比。代碼的方式通常難度更大,低碼工具其實(shí)是將這些概念進(jìn)行提煉,以可視化的方式進(jìn)行設(shè)置,大大的降低了開發(fā)門檻。感興趣的同學(xué)可以安裝一下兩個(gè)工具,對(duì)比一下各種概念,也可以拓寬知識(shí)面。
到此這篇關(guān)于微信小程序全局文件的使用詳解的文章就介紹到這了,更多相關(guān)小程序全局文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
10個(gè)JavaScript面試??嫉那岸耸謱戭}總結(jié)
這篇文章主要為大家詳細(xì)介紹了10個(gè)JavaScript面試常考的前端手寫題,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2024-02-02原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)tab選項(xiàng)卡,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08JS定時(shí)檢測(cè)任務(wù)任務(wù)完成后執(zhí)行下一步的解決辦法
這篇文章主要介紹了JS定時(shí)檢測(cè)任務(wù)任務(wù)完成后執(zhí)行下一步的解決辦法,需要的朋友可以參考下2016-12-12javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單
這篇文章主要介紹了javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02JavaScript兩種計(jì)時(shí)器的實(shí)例講解
今天小編就為大家分享一篇關(guān)于JavaScript兩種計(jì)時(shí)器的實(shí)例講解,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01JavaScript 短路運(yùn)算的實(shí)現(xiàn)
本文主要介紹了JavaScript 短路運(yùn)算的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06javascript中&&運(yùn)算符與||運(yùn)算符的使用方法實(shí)例
&&和||總是傻傻分不清,在這里詳細(xì)記錄一下吧,也給你們分享一下,所以這篇文章主要給大家介紹了關(guān)于javascript中&&運(yùn)算符與||運(yùn)算符的使用方法,需要的朋友可以參考下2021-11-11