今天教你如何開發(fā)我們的第一個(gè)小程序

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

首先發(fā)布官方開發(fā)工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下載官方開發(fā)工具

至于如何安裝它，我不需要說。下載后，雙擊它以進(jìn)行安裝。您需要在安裝后掃描代碼。掃描代碼后的界面如下。

新項(xiàng)目

項(xiàng)目名稱可以隨便填寫。許多剛剛開始開發(fā)小程序的人會(huì)有疑慮。我沒有注冊(cè)小程序直接開發(fā)。這是一個(gè)明確的出納員，你可以學(xué)習(xí)開發(fā)小程序而無需注冊(cè)小程序。只需單擊上面圖片中顯示的測(cè)試編號(hào)體驗(yàn)。

下面是小程序開發(fā)工具的界面

開發(fā)工具界面

我們的武器準(zhǔn)備就緒，然后我們開始用武器填充子彈。

接下來，讓大家引導(dǎo)他們的第一個(gè)簡(jiǎn)單的小程序從零開始。

由于它是一個(gè)介紹，我們的小程序相對(duì)簡(jiǎn)單，主要包含以下函數(shù)

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

底部標(biāo)簽實(shí)施

最重要的標(biāo)題設(shè)置

項(xiàng)目效果圖

一，代碼目錄

項(xiàng)目目錄

二，展開講解

images：目錄用于存儲(chǔ)我們的一些圖像資源，例如項(xiàng)目底部的圖標(biāo)，放在這里。

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

App.json:我們的一些小程序全局配置在這里。例如，底部的兩個(gè)選項(xiàng)卡在此處配置。

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

我們需要為小程序創(chuàng)建三個(gè)相應(yīng)的文件，例如，我們創(chuàng)建一個(gè)主頁索引。需要在索引

這三個(gè)文件是我們必須開發(fā)的三個(gè)火槍手小程序

Index.wxml:確定主頁的一般外觀。例如，我們構(gòu)建一個(gè)建筑物，這里的代碼用于確定建筑物的外觀，高度，寬度，層數(shù)等等。

Index.wxss:以下是一些樣式設(shè)置，例如我們建筑物的外觀，需要連接的瓷磚類型，要刷的顏色。

Index.js:用于處理我們主頁上的一些事件，為主頁提供了一些功能。例如，我們?cè)诖髽抢镉幸粋€(gè)游樂場(chǎng)，一個(gè)電影院等。這些事件由js處理。

這是我們主頁的大綱。我們來看看下面的簡(jiǎn)單代碼

這是index.wxml，這里我們只顯示一個(gè)段落。

index.wxss和index.js使用默認(rèn)，沒有什么，這里沒有發(fā)布，我們希望看到源代碼可以下載。

四，看下app.json都配置了些什么//?app.json{?//?設(shè)置我們小程序的頁面：首頁，個(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":?"首頁",?"iconPath":?"/images/tab1n.png",?"selectedIconPath":?"/images/tab1y.png"?},?{?"pagePath":?"pages/me/me",?"text":?"我的",?"iconPath":?"/images/tab2n.png",?"selectedIconPath":?"/images/tab2y.png"?}]?}}

個(gè)人中心的代碼將不會(huì)發(fā)布。您可以下載源代碼并查看它。

在第一課開始，你不需要知道太多，根據(jù)源代碼，粗略看一下，了解小程序的代碼是什么樣的。它實(shí)際上很容易。

我今天在這里，我會(huì)嘗試在下一個(gè)課程中錄制視頻，我覺得這篇文章不是很形象。對(duì)于初學(xué)者，視頻可能更有效。