微信小程序全局文件的使用詳解
我們前邊兩篇介紹了賬號(hào)的申請(qǐng)、注冊(cè)，工具的安裝，云服務(wù)的開(kāi)通。本篇我們介紹一下基礎(chǔ)語(yǔ)法。介紹的方法呢我們會(huì)結(jié)合上微搭低代碼的工具一起做個(gè)對(duì)比。因?yàn)榈痛a工具也產(chǎn)生了非常多的技術(shù)概念，但最終在發(fā)布成小程序的時(shí)候也是按照微信的規(guī)范去生成的，把微信開(kāi)發(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是放的所有可以訪問(wèn)到的頁(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ù)說(shuō)明：
// env 參數(shù)決定接下來(lái)小程序發(fā)起的云開(kāi)發(fā)調(diào)用（wx.cloud.xxx）會(huì)默認(rèn)請(qǐng)求到哪個(gè)云環(huán)境的資源
// 此處請(qǐng)?zhí)钊氕h(huán)境 ID, 環(huán)境 ID 可打開(kāi)云控制臺(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ì)加載。那這里邊一般干些啥呢？比如你需要加載用戶(hù)信息、角色的，就可以在這個(gè)函數(shù)里添加代碼。
和低碼中不同的是，我們?nèi)謱?duì)象在設(shè)置屬性的時(shí)候是用的this關(guān)鍵字，這個(gè)關(guān)鍵字指向了對(duì)象自身，因?yàn)槲覀兪窃谌謱?duì)象里，所以this指向的是全局對(duì)象。
低碼中的全局對(duì)象是在變量中定義的，我們可以打開(kāi)變量看到全局對(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": "云開(kāi)發(fā) QuickStart",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
這里重點(diǎn)是要知道pages的這個(gè)結(jié)構(gòu)，每一個(gè)可以訪問(wèn)的頁(yè)面都有一個(gè)路徑，可以看一下微信開(kāi)發(fā)者工具頁(yè)面的結(jié)構(gòu)
微信開(kāi)發(fā)者工具，首頁(yè)是放在數(shù)組里的第一個(gè)元素，有的同學(xué)會(huì)問(wèn)，為啥會(huì)有兩個(gè)Index呢？因?yàn)榈谝粋€(gè)index是文件夾，第二個(gè)index才指向的是具體的index.wxml這個(gè)才是具體的頁(yè)面。
低碼中也需要理解這個(gè)概念，尤其我們?cè)谧龇窒磙D(zhuǎn)發(fā)的時(shí)候，你需要填寫(xiě)分享的路徑，不理解小程序這個(gè)概念，有時(shí)候你就不知道該寫(xiě)啥。
最后一個(gè)就是全局樣式，如果公共的樣式可以寫(xiě)到這個(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;
}這里的語(yǔ)法是CSS的語(yǔ)法，因此有必要學(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;
}
}
}
// 用戶(hù)信息
.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)系，所以寫(xiě)起來(lái)難度會(huì)更大一點(diǎn)。如果樣式這塊不是太擅長(zhǎng)，建議用可視化的方式進(jìn)行設(shè)置，也節(jié)約了不少的學(xué)習(xí)成本。
總結(jié)
我們本篇介紹了微信小程序里的全局文件，和低代碼工具做了一個(gè)橫向的對(duì)比。代碼的方式通常難度更大，低碼工具其實(shí)是將這些概念進(jìn)行提煉，以可視化的方式進(jìn)行設(shè)置，大大的降低了開(kāi)發(fā)門(mén)檻。感興趣的同學(xué)可以安裝一下兩個(gè)工具，對(duì)比一下各種概念，也可以拓寬知識(shí)面。
到此這篇關(guān)于微信小程序全局文件的使用詳解的文章就介紹到這了,更多相關(guān)小程序全局文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 微信小程序?qū)崿F(xiàn)文章關(guān)注功能詳細(xì)流程
- 微信小程序詳解如何實(shí)現(xiàn)付款功能
- 微信小程序登錄與注冊(cè)功能的實(shí)現(xiàn)詳解
- 微信小程序訪問(wèn)mysql數(shù)據(jù)庫(kù)流程詳解
- 微信小程序多表聯(lián)合查詢(xún)的實(shí)現(xiàn)詳解
- 微信小程序?qū)崿F(xiàn)分頁(yè)查詢(xún)?cè)斀?/a>
- 微信小程序?qū)崿F(xiàn)頁(yè)面導(dǎo)航與傳參功能詳解
- 微信小程序中的生命周期與生命周期函數(shù)淺析介紹
- 微信小程序數(shù)據(jù)請(qǐng)求的方式和注意事項(xiàng)詳解
相關(guān)文章
本文主要介紹了JavaScript可選鏈的實(shí)現(xiàn)示例,它通過(guò)使用問(wèn)號(hào)（?）來(lái)判斷屬性或函數(shù)是否存在,避免了因?yàn)閷傩曰蚝瘮?shù)不存在而導(dǎo)致的錯(cuò)誤,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
layui 關(guān)閉open彈出框 刷新table表格頁(yè)面的方法
今天小編就為大家分享一篇layui 關(guān)閉open彈出框 刷新table表格頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了JS添加或刪除HTML dom元素的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)HTML DOM元素節(jié)點(diǎn)的創(chuàng)建、追加、刪除等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-03-03
這篇文章主要介紹了微信小程序—仿淘寶熱搜詞在搜索框中輪播功能的相關(guān)資料,需要的朋友可以參考下2020-01-01
本文主要介紹了Webpack中的文件指紋的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
JavaScript中“+=”的應(yīng)用...2007-02-02
JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
js中動(dòng)態(tài)創(chuàng)建json,動(dòng)態(tài)為json添加屬性、屬性值的實(shí)例
下面小編就為大家?guī)?lái)一篇js中動(dòng)態(tài)創(chuàng)建json,動(dòng)態(tài)為json添加屬性、屬性值的實(shí)例。小編覺(jué)的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
這篇文章主要介紹了ES6概念 Symbol.keyFor()方法 ,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滾動(dòng)消息通知，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02