小程式循序漸進: 簡 介、文本、事件、樣式

小程式簡介

原生APP和Web APP誰是未來的主流這個命題爭了很多年，而原生APP最大的優勢也就是對於系統控制項介面和框架的呼叫能力比Web APP不知道高到哪裡去。雖然京東同時提供了手機APP和手機H5形式的頁面供用戶瀏覽和下單，但是同時用過二者的都能體會到，H5頁面在流暢度上還是差一些。 
　　在此之前，許多創業者以公眾號選單列內嵌H5的形式，完成了基礎功能的微信化植入，但通常都是比較簡單的頁面，操作體驗比較一般。
　　這次微信推出的小程序，最大的亮點在​​於微信提供了豐富的框架組件和API接口供開發者調用，具體包含：界面、視圖、內容、按鈕、導航、多媒體、位置、數據、網絡、重力感應等。在這些元件和介面的幫助下，建立在微信上的小程式在運作能力和流暢度上面便可以保持和原生APP一樣的體驗。
小程式註冊

小程式、訂閱號碼、服務號碼、企業號現在是平行的體系，所以需要使用的話，需要重新註冊。
關於如何註冊，看看官方文件說明，這裡就不累贅了：
微信小程式存取指南
開發工具

這裡從官方下載：
微信小程式開發工具下載地址
好了，開發工具下載完成，安裝之後就可以直接開使實例了。
開發工具簡介

1.掃碼登陸（這裡需要先註冊微信小程式）

2.本機小程式專案

3.新增項目，這裡直接點「無APPID」即可

4.好了，可以開始編碼了
專案目錄結構

這個目錄是剛剛勾選quick start專案自動產生的。

pages資料夾－放的是所有的頁面檔案。

utils資料夾－放的是一些js工具集。

app.js－啟動入口檔。

app.wxss－全域樣式表檔。

app.json－全域設定檔。

.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件類似.css，.wxml結構文件類似.html
看一下app.json

可以看到pages專案配資的是頁面路徑，以及入口。預設第一個路徑做為入口。
pages/index/index，這個專案省略了.wxml後綴。
每一個頁面就會產生一個目錄，每個目錄預設都四個檔案。
實例

實例一：輸出文字

開啟index.wxml

#view就相當於html中的div。

image是圖片。

text是文字。

新增文字程式碼：

效果：

實例二：修改文字顏色

新增class

#

# 更多小程式循序漸進: 簡介、文字、事件、樣式相關文章請關注PHP中文網！