免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
微信小程序最基本代碼入門

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

小程序是最近十分受歡迎的一項(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


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

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

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

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

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

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


這個是基本的文本框。我們還可以加入圖片,圖片可以是本地圖片也可以是網(wǎng)絡(luò)圖片?,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,而且寬可以設(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>中寫的。

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
微信小程序
微信的小程序怎么制作?
微信小程序|自定義折疊面板
微信小程序的左右布局
微信小程序開發(fā)簡單教程
微信小程序的線程架構(gòu)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服