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

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

小程序和小游戲是在開發(fā)工具中實(shí)現(xiàn)的，就像C語言，c++，Java等的語言一樣，都有自己獨(dú)立的編譯軟件。我使用的是 “微信web開發(fā)者工具”。我們從第一步開始，一步一步實(shí)現(xiàn)小程序的簡單界面。
先下載微信web開發(fā)者工具，然后安裝。打開之后，注冊(cè)登錄。
接下來就是進(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中的一樣，就是在最后地址的時(shí)候要寫詳細(xì)地址。
<text></text>是文本框。

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

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

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

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

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

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

運(yùn)行結(jié)果為：

這個(gè)是基本的文本框。我們還可以加入圖片，圖片可以是本地圖片也可以是網(wǎng)絡(luò)圖片?，F(xiàn)在先以本地圖片舉例：在引用圖片的時(shí)候，要先創(chuàng)建一個(gè)文件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,而且寬可以設(shè)置為百分比的形式。

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

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