微信小程序全局文件的使用詳解
我們前邊兩篇介紹瞭賬號的申請、註冊，工具的安裝，雲服務的開通。本篇我們介紹一下基礎語法。介紹的方法呢我們會結合上微搭低代碼的工具一起做個對比。因為低代碼工具也產生瞭非常多的技術概念，但最終在發佈成小程序的時候也是按照微信的規范去生成的，把微信開發者工具學會瞭也可以更深入的瞭解低代碼的相關概念。
全局文件
小程序中是分為全局和頁面級兩部分。全局是在小程序的所有頁面都有效，頁面級是隻在當前頁面中生效。小程序根目錄有三個文件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;
}
}
可以看到低代碼中的樣式更復雜，會有嵌套關系，所以寫起來難度會更大一點。如果樣式這塊不是太擅長，建議用可視化的方式進行設置，也節約瞭不少的學習成本。
總結
我們本篇介紹瞭微信小程序裡的全局文件，和低代碼工具做瞭一個橫向的對比。代碼的方式通常難度更大，低碼工具其實是將這些概念進行提煉，以可視化的方式進行設置，大大的降低瞭開發門檻。感興趣的同學可以安裝一下兩個工具，對比一下各種概念，也可以拓寬知識面。
到此這篇關於微信小程序全局文件的使用詳解的文章就介紹到這瞭,更多相關小程序全局文件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！