小程序用什么開(kāi)發(fā)？從零開(kāi)始做一個(gè)微信小程序教程

　 域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

小程序用什么開(kāi)發(fā)？A5創(chuàng)業(yè)網(wǎng)小編詳細(xì)分享下從零開(kāi)始做一個(gè)微信小程序的實(shí)戰(zhàn)開(kāi)發(fā)教程，希望對(duì)初期開(kāi)發(fā)者會(huì)有所幫助。

開(kāi)發(fā)前的準(zhǔn)備工作：

首先需要注冊(cè)一個(gè)小程序賬號(hào)，用一個(gè)沒(méi)注冊(cè)過(guò)公眾號(hào)的郵箱注冊(cè)。注冊(cè)過(guò)程中需要很多認(rèn)證，比較繁瑣。如果暫時(shí)只是試水、沒(méi)有發(fā)布的打算，那么只要完成基本信息填寫(xiě)就可以，不需要完成微信認(rèn)證。之后，就可以在公眾平臺(tái)使用注冊(cè)的帳戶進(jìn)行登錄。

在主頁(yè)面左邊列表中點(diǎn)擊設(shè)置，再設(shè)置頁(yè)面中選開(kāi)發(fā)設(shè)置，就可以看到AppID。而AppID 可以用于在開(kāi)發(fā)工具中進(jìn)行登記，使用開(kāi)發(fā)工具的高級(jí)功能。你可以到官網(wǎng)下載開(kāi)發(fā)工具。

開(kāi)始項(xiàng)目：

打開(kāi)開(kāi)發(fā)者工具，選擇小程序選項(xiàng)，然后直接點(diǎn)擊「添加項(xiàng)目」按鈕。我們可以在這個(gè)步驟，填入剛才注冊(cè)的時(shí)候使用的 AppID。

如果項(xiàng)目目錄中的文件是個(gè)空文件夾，會(huì)提示是否創(chuàng)建 quick start 項(xiàng)目。

選擇「是」，開(kāi)發(fā)者工具會(huì)幫助我們?cè)陂_(kāi)發(fā)目錄里生成一個(gè)簡(jiǎn)單的 Demo。

這個(gè) Demo 擁有一個(gè)完整的小程序的大概框架。

1. 框架

我們首先看一下官方提供的 Demo 含有的目錄：

app.js：小程序邏輯、生命周期、全局變量。

app.json：小程序公共設(shè)置、導(dǎo)航欄顏色等，不可以注釋。

app.wxss：小程序公共樣式，類似 CSS 。

小程序頁(yè)面構(gòu)成類似這樣：

每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json

微信小程序中的每一個(gè)頁(yè)面的路徑和頁(yè)面文件名，都需要寫(xiě)在app.json的pages中，且pages數(shù)組中的第一個(gè)頁(yè)面是小程序的首頁(yè)。

這四個(gè)文件按照功能可以分成三個(gè)部分：

配置：json 文件

邏輯層：js 文件

視圖層：wxss.wxml 文件

在 iOS 上，小程序的邏輯代碼運(yùn)行于 JavaScriptCore 中，而在 Android上，這個(gè)任務(wù)則是交給 X5 內(nèi)核來(lái)完成。

在 開(kāi)發(fā)工具上， 小程序的 JavaScript 代碼是運(yùn)行在 NW.js（Chrome 內(nèi)核） 中。這也導(dǎo)致開(kāi)發(fā)工具上的效果跟實(shí)際效果有所出入。

2. 組件

微信提供了許多組件，主要分為八種:

這其中，包含了view、scroll-view、button、form等普通常用的組件，也提供了地圖mapcanvas

組件主要屬于視圖層，通過(guò) WXML 來(lái)進(jìn)行結(jié)構(gòu)布局，類似于 HTML。樣式則通過(guò) WXSS 來(lái)定義和修改，它的語(yǔ)法和使用都近似 CSS。

組件使用語(yǔ)法實(shí)例：

<><>

3. API

網(wǎng)絡(luò)

媒體

數(shù)據(jù)

位置

設(shè)備

界面

開(kāi)發(fā)接口

網(wǎng)絡(luò)請(qǐng)求接口包含了普通的 HTTPS 請(qǐng)求，支持上傳、下載、Socket，基本上滿足了我們開(kāi)發(fā)中所需要的網(wǎng)絡(luò)需求。

這些 API 屬于邏輯層，寫(xiě)在 JS 邏輯文件中。

使用實(shí)例：

wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })

可以到官方文檔 – API 查看其它 API 的使用方法。

編譯運(yùn)行

1. 模擬器調(diào)試

我們可以在微信提供的開(kāi)發(fā)者工具中，使用模擬器查看小程序運(yùn)行的效果。

之前我們提過(guò)，小程序的運(yùn)行底層不同，這也導(dǎo)致在模擬器上的效果，會(huì)與在手機(jī)上運(yùn)行有些差異。

2. 真機(jī)調(diào)試

在左邊的選項(xiàng)欄中，選擇項(xiàng)目，然后點(diǎn)預(yù)覽會(huì)生產(chǎn)一個(gè)二維碼，用管理員微信號(hào)掃一掃，就可以在真機(jī)上看實(shí)際效果。

更多小程序項(xiàng)目招商請(qǐng)?jiān)L問(wèn)：http://www.spokeops.com/xm/list-1.html?xg

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！