微信小程序的簡單實現(xiàn)

小程序是最近十分受歡迎的一項創(chuàng)新，因其簡單方便，不需要大內(nèi)存下載。隨進隨用。所以小程序和小游戲的用戶日益劇增。小程序之所以如此受歡迎，是因為它符合現(xiàn)代人的生活，不用巨大的安裝包，不需要占用手機的內(nèi)存，而且不需要很多的流量下載。所以，學會小程序和小游戲是十分有必要的，今天先來實現(xiàn)簡單的界面。

小程序和小游戲是在開發(fā)工具中實現(xiàn)的，就像C語言，c++，Java等的語言一樣，都有自己獨立的編譯軟件。我使用的是 “微信web開發(fā)者工具”。我們從第一步開始，一步一步實現(xiàn)小程序的簡單界面。
先下載微信web開發(fā)者工具，然后安裝。打開之后，注冊登錄。
接下來就是進入界面實現(xiàn)簡單的程序。首先要知道小程序的基本格式，

 <view class="words-view">
        <image class="star" src="../images/star.png"></image>
        <text class="words">萌寵日記:</text>
  </view>

<view></view>為小程序的基本格式，里邊寫的是代碼。
<image></image>是帶入照片的格式，格式和PHP中的一樣，就是在最后地址的時候要寫詳細地址。
<text></text>是文本框。

小程序的步驟，第一步先創(chuàng)建新的代碼格式，點擊項目，新建項目。在選擇APPID的時候，如果沒有就選擇無AppID

寫好了之后，點確定就可以打開一個新的文件寫小程序。
剛開始進去的時候，它有一個模板。寫好了所有小程序可能會遇到的函數(shù)和代碼，我們在剛開始的時候，可以先把這些全部刪除。刪除完了之后，再點擊編譯，它會提示你有錯誤，錯誤是因為js文件中還沒有任何東西，所以我們需要給js中寫入一些頭文件之類的。pages（{}）。pages是小程序不可少的一個東西，在小程序中，每一層都非常明確。當我們剛剛開始學習的時候，可以先不刪除那些自帶的函數(shù)。它不會影響你的代碼與程序執(zhí)行。

這個時候，就開始編寫我們的程序。小程序中有一個普通模板，pages在這個模板中，有一個index()，index中需要三個文件。.js , .wxml , .wxss. 這里邊的后綴就相當于PHP中的HTML，CSS。其實在編寫小程序的時候，就和PHP是差不多的，只不過小程序有很多的文件之類的內(nèi)容，要包含在里邊。
每一個小程序的代碼中，還有一個必須的元素，app.js app.json app.wxss
這三個文件是每一個小程序都必須有的，在json 文件中，是設置小程序初始的界面，

		{
			  "pages":[
			    "pages/index/index"   每一個需要用到的文件，都要在這邊寫入它的頭文件名稱。
			  ],
			  "window":{
			    "backgroundTextStyle":"light",
			    "navigationBarBackgroundColor": "#fff",
			    "navigationBarTitleText": "WeChat",
			    "navigationBarTextStyle":"black"
			  }
		}

.wxml 是寫頁面的程序。寫程序的時候，前后一定要對應。比如后邊必須得跟,后邊必須跟，否則系統(tǒng)就會報錯。為了方便查看和修改代碼，每一個文件中都盡量直接寫獨一無二 的名字，這樣讀者在預覽的時候，看起來也方便。比如我們現(xiàn)在在index.wxml 中寫一段代碼

<view>
   <view class="containet">
      <text class="containet-text">hello</text>
   </view>
</view>

運行結(jié)果為：

這個是基本的文本框。我們還可以加入圖片，圖片可以是本地圖片也可以是網(wǎng)絡圖片?，F(xiàn)在先以本地圖片舉例：在引用圖片的時候，要先創(chuàng)建一個文件images存放圖片。我們創(chuàng)建完了文件之后，需要先在系統(tǒng)文件中找到images所在的位置并存放要使用的文件。注意，它是先存放文件再調(diào)用的。
代碼：

<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,而且寬可以設置為百分比的形式。

   .csdn-text1-1{
	   width:100%;
	   height:500rpx
   }

這樣簡單明了的代碼雖然全部存放在不同的文件中，但是因為其和PHP類似，都是同等類型的語言轉(zhuǎn)換，所以理解之后，就比較好掌握。
這是文本和圖片的簡單操作，我們還可以設置更高一點的規(guī)格，比如可以圖片位置的擺放，排列順序，這里就需要用到布局的一個全新的知識，flex
flex是專門設置框架的 。
它的主要功能在于更好的適應尺寸。
flex的相關知識可以在網(wǎng)上自行查閱。
我們需要記住，所有的代碼都是在<view></view>中寫的。