資訊專欄INFORMATION COLUMN
摘要：有的文件不是必須的，可以參考微信小程序官方文檔。應(yīng)用程序和頁面之間的關(guān)系微信小程序允許縱向級數(shù)最高五級，后面會介紹導航組件，設(shè)置幾級頁面以及之間的跳轉(zhuǎn)。
基本框架：
.wxml ：頁面骨架
.wxss ：頁面樣式
.js ：頁面邏輯? ? 描述一些行為
.json ：頁面配置
創(chuàng)建一個小程序之后，app.js,app.json,app.wxss是必須的，而且名字也不能隨意更改，這些是作用于APP全局的，而用戶創(chuàng)建的一些目錄，這些可以看做一個個頁面，這些目錄下面也包含上面所說的.wxml文件，.wxss文件，.js文件，.json文件。這些文件和目錄的名字是可以隨意取的。有的文件不是必須的，可以參考微信小程序官方文檔。如下：
就近關(guān)系：對于一個樣式來說，如果既在全局里配置了，也在某個頁面配置了，那么以離頁面最近的樣式為準。比如在全局樣式表里配置文本顏色是紅色，在某個頁面的樣式表配置了文本顏色是黑色。那么當打開這個頁面的時候，文本顏色是黑色，而不是紅色。這對于.json文件也是一樣。
應(yīng)用程序和頁面之間的關(guān)系：
微信小程序允許縱向級數(shù)最高五級，后面會介紹導航組件，設(shè)置幾級頁面以及之間的跳轉(zhuǎn)。
?
代碼實例：
程序目錄為：
?
app.json：
1 /*app.json是全局配置文件，在這里不能隨意添加注釋*/ 2 { 3 "pages": [ 4 "pages/welcome/welcome" /*設(shè)置頁面路徑，一定要按照先后順序來寫，不然會報錯。*/ 5 /*會自動關(guān)聯(lián)以welcome開頭的所有類型文件*/ 6 7 ], 8 9 "window":{ 10 "navigationBarBackgroundColor":"#b3d4db" /*設(shè)置導航欄顏色*/ 11 } }
?
?app.wxss：
1 text{ 2 font-family: MicroSoft Yahei; /*配置全局文本字體，通用的配置放在這里*/ 3 4 }
?
welcome.wxml：
1 2 <view class="container"> 3 <image class="userinfo-avatar" 4 src="/images/頭像.jpeg">image> <text class="user-name"><text style="color:red">hellotext>,morningtext> 5 6 7 8 <view class="moto-container"> <text class="moto">開啟小程序之旅text> view> view>
?
?welcome.wxss：
1 /*CSS要有一個整體布局的思想，把頁面看做一個整體，然后對它進行樣式的配置。而不是把一個頁面中，每個部分獨立分開排布。*/ 2 .container{ 3 display: flex; /*將容器變成彈性模型*/ 4 flex-direction: column; /*列方向排列*/ 5 align-items: center; /*居中*/ 6 } 7 8 .userinfo-avatar { 9 width: 200rpx; /*開發(fā)建議以iphone6，750rpx：1334rpx為例設(shè)計，單位是rpx可以自適應(yīng)各種移動端分辨率。*/ 10 height: 200rpx; /*設(shè)置寬，高。*/ 11 margin-top: 160rpx;/*設(shè)置距離頂部的距離*/ 12 } 13 14 .user-name{ 15 margin-top: 100rpx; 16 font-size: 32rpx; /*字體大小*/ 17 font-weight: bold; /*字體加粗*/ 18 19 } 20 21 .moto-container{ 22 margin-top: 200rpx; 23 border: 1px solid #405f80; /*外邊矩形*/ 24 width: 200rpx; 25 height: 80rpx; 26 border-radius: 5px; /*圓角矩形*/ 27 text-align: center; /*水平居中*/ 28 } 29 30 .moto{ 31 font-size: 22rpx; 32 font-weight: bold; 33 line-height: 80rpx; /*垂直居中，讓文字高度等于容器高度*/ 34 color: #405f80; 35 } 36 37 page{ /*小程序自動在頁面的最外層加了一層標簽，我們的所有組件的標簽都是寫在 這里面的。所以，如果我們要對整個頁面進行操作，需要修改page的樣式。*/ 38 height: 100%; /*整個頁面的高度*/ 39 background-color: #b3d4db; /*設(shè)置整個頁面的顏色，這樣就算把頁面向下滑動，
整個頁面的背景也是這個顏色的。*/ 40 41 }
?
整個頁面顯示如圖：
?7.7修改：
?
如果出現(xiàn)此報錯，說明在此目錄下.js文件中沒有對頁面進行任何配置，在老版本的開發(fā)工具中不會報錯，而現(xiàn)在會報錯，必須在.js里進行頁面的配置，哪怕是空配置也可以。解決如下：
輸入Page出現(xiàn)提示之后，按回車自動會跳出配置模板，不進行任何修改也行。
保存編譯之后報錯消失。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2035.html
摘要：目前支持哪些平臺的搬家目前對外開放版本釋放了微信小程序轉(zhuǎn)支付寶小程序的功能，這也是我們在調(diào)研中發(fā)現(xiàn)需求最多的。從筆者的了解來看，微信小程序框架原理更接近于，而支付寶小程序更接近于。 原文地址： https://ant-move.github.io/we... 螞蟻搬家工具（Antmove）是一個小程序開發(fā)輔助工具，致力于解決小程序跨平臺開發(fā)的難題，借助于 Antmove，你只需要編寫...
摘要：繼微信正式推出微信小程序后，各個大廠陸續(xù)發(fā)布了各自的小程序平臺支付寶小程序百度小程序頭條小程序，跨小程序平臺開發(fā)也成為了眾多小程序開發(fā)者要面臨的問題。 繼微信正式推出微信小程序后，各個大廠陸續(xù)發(fā)布了各自的小程序平臺 —— 支付寶小程序、百度小程序、頭條小程序，跨小程序平臺開發(fā)也成為了眾多小程序開發(fā)者要面臨的問題。 Antmove - 小程序跨平臺解決方案 小程序開發(fā)血淚史 小程序發(fā)展初...
摘要：小程序自選股項目團隊在長達五個月的時間里經(jīng)歷了太多不為人知的故事，不知通宵了多少個夜晚，只為等待小龍宣布號小程序正式發(fā)布的到來。第一次被微信開放平臺開發(fā)二組團隊小程序項目團隊當小白鼠各種實驗新特性。。 導語：我很喜歡小龍的一句話，微信因你而變。是的，把事情做到極致的時候，這個世界就會因你而變。 小程序自選股項目團隊在長達五個月的時間里經(jīng)歷了太多不為人知的故事， 不知通宵了多少個夜晚，只...
摘要：我將上述內(nèi)容進行簡單的整理，來回答標題的提問前端開發(fā)者如何把握住微信小程序這波紅利迅速掌握微信小程序相關(guān)技術(shù)。 由于前兩周一直在老家處理重要事情，雖然朋友圈被「微信小程序」刷爆了，但并沒有時間深入了解。 昨天回廣州之后，第一件事情就是把「微信小程序」相關(guān)的文章、開發(fā)文檔、設(shè)計規(guī)范全部看了一遍，基本上明白了「微信小程序」是怎么回事，我關(guān)注的公眾號都很看好「微信小程序」的前景。 作為一個「...
閱讀 3214·2021-11-25 09:43
閱讀 3217·2021-11-23 09:51
閱讀 3529·2019-08-30 13:08
閱讀 1582·2019-08-29 12:48
閱讀 3605·2019-08-29 12:26
閱讀 410·2019-08-28 18:16
閱讀 2575·2019-08-26 13:45
閱讀 2441·2019-08-26 12:15
