小程序是最近十分受歡迎的一項(xiàng)創(chuàng)新,因其簡單方便,不需要大內(nèi)存下載。隨進(jìn)隨用。所以小程序和小游戲的用戶日益劇增。小程序之所以如此受歡迎,是因?yàn)樗犀F(xiàn)代人的生活,不用巨大的安裝包,不需要占用手機(jī)的內(nèi)存,而且不需要很多的流量下載。所以,學(xué)會小程序和小游戲是十分有必要的,今天先來實(shí)現(xiàn)簡單的界面。
小程序和小游戲是在開發(fā)工具中實(shí)現(xiàn)的,就像C語言,c++,Java等的語言一樣,都有自己獨(dú)立的編譯軟件。我使用的是 “微信web開發(fā)者工具”。我們從第一步開始,一步一步實(shí)現(xiàn)小程序的簡單界面。
先下載微信web開發(fā)者工具,然后安裝。打開之后,注冊登錄。
接下來就是進(jìn)入界面實(shí)現(xiàn)簡單的程序。首先要知道小程序的基本格式,
<view class="words-view"> <image class="star" src="../images/star.png"></image> <text class="words">萌寵日記:</text> </view>
<view></view>
為小程序的基本格式,里邊寫的是代碼。<image></image>
是帶入照片的格式,格式和PHP中的一樣,就是在最后地址的時候要寫詳細(xì)地址。<text></text>
是文本框。
小程序的步驟,第一步先創(chuàng)建新的代碼格式,點(diǎn)擊項(xiàng)目,新建項(xiàng)目。在選擇APPID的時候,如果沒有就選擇無AppID
{ "pages":[ "pages/index/index" 每一個需要用到的文件,都要在這邊寫入它的頭文件名稱。 ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
.wxml 是寫頁面的程序。寫程序的時候,前后一定要對應(yīng)。比如后邊必須得跟,
<view> <view class="containet"> <text class="containet-text">hello</text> </view></view>
運(yùn)行結(jié)果為:
<view> <view class="containet"> <image class="csdn-text1-1" src="../images/csdn-text1-1.jpg"></image> <text class="containet-text">hello</text> </view> </view>
wxss 中的代碼是 同PHP 中CSS一樣的功能,都是用來控制圖片的規(guī)格的。而區(qū)別是wxss的語句稍微有些不一樣。在wxss中,度數(shù)的單位是rpx,而且寬可以設(shè)置為百分比的形式。
.csdn-text1-1{ width:100%; height:500rpx }
這樣簡單明了的代碼雖然全部存放在不同的文件中,但是因?yàn)槠浜蚉HP類似,都是同等類型的語言轉(zhuǎn)換,所以理解之后,就比較好掌握。
這是文本和圖片的簡單操作,我們還可以設(shè)置更高一點(diǎn)的規(guī)格,比如可以圖片位置的擺放,排列順序,這里就需要用到布局的一個全新的知識,flex
flex是專門設(shè)置框架的 。
它的主要功能在于更好的適應(yīng)尺寸。
flex的相關(guān)知識可以在網(wǎng)上自行查閱。
我們需要記住,所有的代碼都是在<view></view>
中寫的。