開發(fā)小程序簡(jiǎn)單流程

小程序開發(fā)我們需要下載相應(yīng)的開發(fā)工具，個(gè)人比較推薦的是微信官方出的開發(fā)工具。畢竟是官方工具。

首先官方開發(fā)工具下載熟悉使用。其實(shí)是ide跟瀏覽器的結(jié)合體。這一點(diǎn)給騰訊點(diǎn)贊。

至于怎么安裝就不用我說(shuō)了。下載下來(lái)后雙擊就可以安裝了。安裝后需要掃碼登錄。掃碼登后的界面如下。

新建項(xiàng)目

項(xiàng)目名字可以隨便填，很多剛?cè)腴T小程序開發(fā)的人會(huì)有疑慮，我沒有注冊(cè)小程序能直接開發(fā)嗎。這里明確的告訴你，沒有注冊(cè)小程序也是可以學(xué)習(xí)開發(fā)小程序的。只需要按照我上圖所示點(diǎn)擊使用測(cè)試號(hào)體驗(yàn)即可。

到這里我們的武器便裝備好了，接下來(lái)開始為武器填充子彈了。

接下來(lái)帶領(lǐng)大家零基礎(chǔ)入門自己的**個(gè)簡(jiǎn)單小程序。

由于是入門所以我們的小程序比較簡(jiǎn)單主要包含以下功能

兩個(gè)頁(yè)面：首頁(yè)，個(gè)人中心頁(yè)

底部tab實(shí)現(xiàn)。

頂部標(biāo)題設(shè)置。

一，代碼目錄

項(xiàng)目目錄，請(qǐng)創(chuàng)建查看。

二，展開講解

images：目錄用來(lái)存放一些我們的圖片資源，如項(xiàng)目里底部tab的圖標(biāo)，就放在這里。

pages： 這里是我們寫小程序的主要代碼目錄，目前我們有兩個(gè)頁(yè)面首頁(yè)和個(gè)人中心頁(yè)。

app.json: 我們小程序的一些全局配置都在這里。如我們底部的兩個(gè)tab就是在這里配置的。

三，小程序開發(fā)三劍客

我們開發(fā)小程序需要?jiǎng)?chuàng)建三個(gè)對(duì)應(yīng)的文件，比如我們創(chuàng)建首頁(yè)index。在index下需要?jiǎng)?chuàng)建如下三個(gè)文件

這三個(gè)文件就是我們開發(fā)小程序必不可少的三劍客。

index.wxml:確定首頁(yè)的大體模樣。比如我們建大樓，這里的代碼來(lái)確定樓長(zhǎng)什么樣，多高，多寬，多少層等。

index.wxss:這里主要做一些樣式的設(shè)置，如我們的樓外觀，需要貼什么樣的瓷磚，刷什么顏色。

index.js:用來(lái)處理我們首頁(yè)的一些事件，讓首頁(yè)具備某些能力。如我們樓里有游樂場(chǎng)，電影院等。通過(guò)js來(lái)處理這些事件。

這就是我們首頁(yè)的大致。下面帶大家看下簡(jiǎn)單代碼

<!--index.wxml-->

<view style="color:blue; ">

 我是傳說(shuō)中的首頁(yè)

</view>

這就是index.wxml,這里我們只是簡(jiǎn)單展示一段話。

index.wxss和index.js用的是默認(rèn)的，沒有什么東西，這里就不貼出來(lái)了，大家想看可以下載源碼看。

四，看下app.json都配置了些什么

// app.json

{

 // 設(shè)置我們小程序的頁(yè)面：首頁(yè)，個(gè)人中心

 "pages": [

 "pages/index/index",

 "pages/me/me"

 ],

 // 設(shè)置標(biāo)題欄字體顏色等信息

 "window": {

 "backgroundTextStyle": "light",

 "navigationBarBackgroundColor": "#fff",

 "navigationBarTitleText": "30天入門小程序01",

 "navigationBarTextStyle": "black"

 },

 // 底部模塊tab

 "tabBar": {

 "list": [{

 "pagePath": "pages/index/index",

 "text": "首頁(yè)",

 "iconPath": "/images/tab1n.png",

 "selectedIconPath": "/images/tab1y.png"

 },

 {

 "pagePath": "pages/me/me",

 "text": "我的",

 "iconPath": "/images/tab2n.png",

 "selectedIconPath": "/images/tab2y.png"

 }]

 }

}

如果有一定的web開發(fā)基礎(chǔ)，不論你是什么程序員。掌握任何一門語(yǔ)言都可以看得懂了。不同的是細(xì)節(jié)，不變的是規(guī)則。只是每個(gè)人熟悉掌握的時(shí)間成本有差異罷了。

今天就到這里，接下來(lái)的課程我會(huì)盡量錄成視頻，感覺文章不太形象。對(duì)于新手來(lái)說(shuō)，視頻學(xué)起來(lái)可能效率更高些。網(wǎng)絡(luò)上有大量的視頻教學(xué)內(nèi)容。這里就不一一列舉了。

您也可以直接找上海詠熠科技來(lái)為您開發(fā)您想要的小程序。本公司本僅僅提供物美價(jià)廉的saas小程序，也提供定制化小程序外包開發(fā)服務(wù)。