一、工欲善其事，必先利其器——搭建開發(fā)環(huán)境

首先，到官方網(wǎng)站上下載一個(gè)開發(fā)工具，根據(jù)自己電腦的操作系統(tǒng)平臺(tái)下載相應(yīng)的版本。安裝完成后運(yùn)行開發(fā)工具，此時(shí)，需要用微信掃描上面的二維碼才能繼續(xù)后面的操作……
開發(fā)工具下載地址

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)與策劃設(shè)計(jì),阿爾山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:阿爾山等地區(qū)。阿爾山做網(wǎng)站價(jià)格咨詢:18982081108

二、創(chuàng)建工程項(xiàng)目——Hello World

具體操作步驟如下圖所示，很簡(jiǎn)單，在此就不在贅述了。

創(chuàng)建項(xiàng)目.png

三、開始寫代碼

1、點(diǎn)擊開發(fā)工具左側(cè)的菜單項(xiàng)“編輯”，我們就可以看到我們剛剛創(chuàng)建的工程目錄結(jié)構(gòu)
2、在"pages"目錄下創(chuàng)建一個(gè)目錄“hello”。然后在“hello”目錄下創(chuàng)建如下幾個(gè)文件：hello.js，hello.json，hello.wxml，hello.wxss。最終效果圖如下：

目錄結(jié)構(gòu).png

3、終于可以寫代碼了
hello.js文件代碼如下（注冊(cè)頁面）：

Page({
    data:{
        hello:"我的第一個(gè)微信小程序……"
    }
})

hello.json文件代碼如下：

{
    "navigationBarTitleText":"首頁"}

hello.wxml文件代碼如下：

<view>
    <view class="hello">`hello`</view></view>

hello.wxss文件代碼如下：

.hello{    color:blue;    font-size:28rpx;    margin-left: 20rpx;    margin-top: 20rpx;
}

4、在app.json文件里“pages”數(shù)組下添加JSON代碼“pages/hello/hello”，也就是我們創(chuàng)建的hello頁面的路徑；并修改“navigationBarBackgroundColor”鍵的值為：“#13b7f6”，“navigationBarTextStyle”的值修改為：“white”。app.json文件里最終代碼如下：

{
  "pages":[    "pages/hello/hello",    "pages/index/index",    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#13b7f6",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white"
  },
  "debug":true}

5、點(diǎn)擊左側(cè)菜單“編譯”即可運(yùn)行我們的程序了，運(yùn)行效果圖如下：

結(jié)果.png

四、總結(jié)：

盡管我們已經(jīng)成功運(yùn)行了我們的“Hello World”程序，但我相信大家還是一頭霧水，比如：我們創(chuàng)建的那幾個(gè)文件和其他文件是什么關(guān)系，為什么要那樣修改代碼……接下來，我們就總結(jié)下吧

1、微信小程序系統(tǒng)分為兩塊：視圖層（View）和邏輯層（App Service）

視圖層描述語言是WXML和WXSS，邏輯層框架語言是基于 JavaScript 的。在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。文件關(guān)系圖如下：

關(guān)系圖.png

2、WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng).js文件里 Page()函數(shù)里 的 data，如下圖：

bind.png

3、app.json是小程序的全局配置文件，在此配置頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。如下圖：

appjson.png

4、當(dāng)創(chuàng)建好工程后我們可以按如下步驟模式 來完成編碼：

（1）在pages目錄下新建頁面目錄，如上面的hello目錄
（2）在新建好的目錄下（如hello目錄）新建.js，.wxml，.wxss，.json四個(gè)文件，如上面的hello.js，hello.wxml，hello.wxss，hello.json
（3）在全局配置文件app.json里添加剛剛新建的頁面路由信息，即在JSON數(shù)組“pages”里添加剛剛新建頁面的路徑，如上面的“pages/hello/hello”。如要添加更多設(shè)置則繼續(xù)添加其他JSON信息，如網(wǎng)絡(luò)請(qǐng)求，tab窗口等，詳細(xì)配置信息指南請(qǐng)自行查看官方文檔
（4）在.wxml文件里面編寫視圖布局代碼，如上面的hello.wxml；在.wxss文件里編寫CSS樣式代碼，這里的樣式代碼將作用于.wxml里面視圖的顯示樣式
（5）用App()函數(shù)注冊(cè)程序，該函數(shù)接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。如開發(fā)工具自動(dòng)生成的app.js文件
（6）用Page()函數(shù)注冊(cè)頁面，該函數(shù)接受一個(gè) object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。也就是在.js文件里編寫代碼，如上面的hello.js
（7）在.json文件里編寫JSON數(shù)據(jù)，如當(dāng)前頁面的標(biāo)題，標(biāo)題欄背景等
其實(shí)，只要理清楚.wxml，.wxss，.js，.json這4個(gè)文件彼此之間的邏輯關(guān)系，及其與app.js，app.json，app.wxss之間的關(guān)系就容易得多了
【歡迎各位大神批評(píng)指正，轉(zhuǎn)載請(qǐng)保留鏈接……謝謝！】

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：微信小程序開發(fā)（一）之HelloWorld!-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://m.2m8n56k.cn/article6/dhpsog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站改版、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)