亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

初嘗微信小程序2-基本框架

weij / 2463人閱讀

摘要：有的文件不是必須的，可以參考微信小程序官方文檔。應(yīng)用程序和頁面之間的關(guān)系微信小程序允許縱向級(jí)數(shù)最高五級(jí)，后面會(huì)介紹導(dǎo)航組件，設(shè)置幾級(jí)頁面以及之間的跳轉(zhuǎn)。

基本框架：

.wxml ：頁面骨架

.wxss ：頁面樣式

.js ：頁面邏輯? ? 描述一些行為

.json ：頁面配置

創(chuàng)建一個(gè)小程序之后，app.js,app.json,app.wxss是必須的，而且名字也不能隨意更改，這些是作用于APP全局的，而用戶創(chuàng)建的一些目錄，這些可以看做一個(gè)個(gè)頁面，這些目錄下面也包含上面所說的.wxml文件，.wxss文件，.js文件，.json文件。這些文件和目錄的名字是可以隨意取的。有的文件不是必須的，可以參考微信小程序官方文檔。如下：

就近關(guān)系：對(duì)于一個(gè)樣式來說，如果既在全局里配置了，也在某個(gè)頁面配置了，那么以離頁面最近的樣式為準(zhǔn)。比如在全局樣式表里配置文本顏色是紅色，在某個(gè)頁面的樣式表配置了文本顏色是黑色。那么當(dāng)打開這個(gè)頁面的時(shí)候，文本顏色是黑色，而不是紅色。這對(duì)于.json文件也是一樣。

應(yīng)用程序和頁面之間的關(guān)系：

微信小程序允許縱向級(jí)數(shù)最高五級(jí)，后面會(huì)介紹導(dǎo)航組件，設(shè)置幾級(jí)頁面以及之間的跳轉(zhuǎn)。

?

代碼實(shí)例：

程序目錄為：

?

app.json：

 1 /*app.json是全局配置文件，在這里不能隨意添加注釋*/
 2 {
 3   "pages": [                                     
 4     "pages/welcome/welcome"   /*設(shè)置頁面路徑，一定要按照先后順序來寫，不然會(huì)報(bào)錯(cuò)。*/
 5 　　　　　　　　　　　　　　　　　　/*會(huì)自動(dòng)關(guān)聯(lián)以welcome開頭的所有類型文件*/
 6 
 7   ],
 8 
 9   "window":{
10     "navigationBarBackgroundColor":"#b3d4db"   /*設(shè)置導(dǎo)航欄顏色*/
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要有一個(gè)整體布局的思想，把頁面看做一個(gè)整體，然后對(duì)它進(jìn)行樣式的配置。而不是把一個(gè)頁面中，每個(gè)部分獨(dú)立分開排布。*/
 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è)計(jì)，單位是rpx可以自適應(yīng)各種移動(dò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{               /*小程序自動(dòng)在頁面的最外層加了一層標(biāo)簽，我們的所有組件的標(biāo)簽都是寫在
                       這里面的。所以，如果我們要對(duì)整個(gè)頁面進(jìn)行操作，需要修改page的樣式。*/
　　
38   height: 100%;　　　/*整個(gè)頁面的高度*/
39   background-color: #b3d4db;  /*設(shè)置整個(gè)頁面的顏色，這樣就算把頁面向下滑動(dòng)，
　　　　　　　　　　　　　　　　　　　　整個(gè)頁面的背景也是這個(gè)顏色的。*/
40 
41 }

?

整個(gè)頁面顯示如圖：

?7.7修改：

?

如果出現(xiàn)此報(bào)錯(cuò)，說明在此目錄下.js文件中沒有對(duì)頁面進(jìn)行任何配置，在老版本的開發(fā)工具中不會(huì)報(bào)錯(cuò)，而現(xiàn)在會(huì)報(bào)錯(cuò)，必須在.js里進(jìn)行頁面的配置，哪怕是空配置也可以。解決如下：

輸入Page出現(xiàn)提示之后，按回車自動(dòng)會(huì)跳出配置模板，不進(jìn)行任何修改也行。

保存編譯之后報(bào)錯(cuò)消失。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/2035.html

相關(guān)文章

  • Antmove 緣起 - 好用的小程序多端解決方案

    摘要：目前支持哪些平臺(tái)的搬家目前對(duì)外開放版本釋放了微信小程序轉(zhuǎn)支付寶小程序的功能，這也是我們?cè)谡{(diào)研中發(fā)現(xiàn)需求最多的。從筆者的了解來看，微信小程序框架原理更接近于，而支付寶小程序更接近于。 原文地址： https://ant-move.github.io/we... 螞蟻搬家工具（Antmove）是一個(gè)小程序開發(fā)輔助工具，致力于解決小程序跨平臺(tái)開發(fā)的難題，借助于 Antmove，你只需要編寫...

    crelaber 評(píng)論0 收藏0

  • 微信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開源項(xiàng)目庫集合。我們會(huì)定期同步上的項(xiàng)目到這里，也歡迎各位 UI組件開發(fā)框架實(shí)用庫開發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫wx-charts ★449 - 微信小程...

    Olivia 評(píng)論0 收藏0

  • 小程序跨平臺(tái)開發(fā)解決方案探索

    摘要：繼微信正式推出微信小程序后，各個(gè)大廠陸續(xù)發(fā)布了各自的小程序平臺(tái)支付寶小程序百度小程序頭條小程序，跨小程序平臺(tái)開發(fā)也成為了眾多小程序開發(fā)者要面臨的問題。 繼微信正式推出微信小程序后，各個(gè)大廠陸續(xù)發(fā)布了各自的小程序平臺(tái) —— 支付寶小程序、百度小程序、頭條小程序，跨小程序平臺(tái)開發(fā)也成為了眾多小程序開發(fā)者要面臨的問題。 Antmove - 小程序跨平臺(tái)解決方案 小程序開發(fā)血淚史 小程序發(fā)展初...

    xiangzhihong 評(píng)論0 收藏0

  • 從0到1：微信小程序自選股項(xiàng)目回憶錄

    摘要：小程序自選股項(xiàng)目團(tuán)隊(duì)在長達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事，不知通宵了多少個(gè)夜晚，只為等待小龍宣布號(hào)小程序正式發(fā)布的到來。第一次被微信開放平臺(tái)開發(fā)二組團(tuán)隊(duì)小程序項(xiàng)目團(tuán)隊(duì)當(dāng)小白鼠各種實(shí)驗(yàn)新特性。。 導(dǎo)語：我很喜歡小龍的一句話，微信因你而變。是的，把事情做到極致的時(shí)候，這個(gè)世界就會(huì)因你而變。 小程序自選股項(xiàng)目團(tuán)隊(duì)在長達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事， 不知通宵了多少個(gè)夜晚，只...

    feng409 評(píng)論0 收藏0

  • 「前端開發(fā)者」如何把握住「微信小程序」這波紅利？

    摘要：我將上述內(nèi)容進(jìn)行簡單的整理，來回答標(biāo)題的提問前端開發(fā)者如何把握住微信小程序這波紅利迅速掌握微信小程序相關(guān)技術(shù)。 由于前兩周一直在老家處理重要事情，雖然朋友圈被「微信小程序」刷爆了，但并沒有時(shí)間深入了解。 昨天回廣州之后，第一件事情就是把「微信小程序」相關(guān)的文章、開發(fā)文檔、設(shè)計(jì)規(guī)范全部看了一遍，基本上明白了「微信小程序」是怎么回事，我關(guān)注的公眾號(hào)都很看好「微信小程序」的前景。 作為一個(gè)「...

    wendux 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

weij

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<