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

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

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

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

新建項目

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

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

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

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

兩個頁面：首頁，個人中心頁

底部tab實現(xiàn)。

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

一，代碼目錄

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

二，展開講解

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

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

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

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

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

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

index.wxml:確定首頁的大體模樣。比如我們建大樓，這里的代碼來確定樓長什么樣，多高，多寬，多少層等。

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

index.js:用來處理我們首頁的一些事件，讓首頁具備某些能力。如我們樓里有游樂場，電影院等。通過js來處理這些事件。

這就是我們首頁的大致。下面帶大家看下簡單代碼

<!--index.wxml-->

<view style="color:blue; ">

 我是傳說中的首頁

</view>

這就是index.wxml,這里我們只是簡單展示一段話。

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

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

// app.json

{

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

 "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": "首頁",

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

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

 },

 {

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

 "text": "我的",

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

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

 }]

 }

}

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

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

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