現在微信小程序已經推出了，我也來這里嘗一下鮮。

---

小程序簡介

原生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是文本。

添加文本代碼：

<text>你好，世界！</text>

效果：

---

實例二：修改文字顏色

添加class

<text class="my-class>你好，世界！</text>

修改index.wxss

.userinfo {display: flex;flex-direction: column;align-items: center; }.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; }.userinfo-nickname {color: #aaa; }.usermotto {margin-top: 200px; }.my-class{color: red; }

保存，看效果

---

實例三：按鈕事件，并修改文本

添加按鈕組件，并添加事件處理myEventHandle。

打開index.js，添加事件處理函數，并添加data變量。

效果：

---

博客名稱：王樂平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

總結

以上是生活随笔為你收集整理的微信小程序入门一: 简 介、文本、事件、样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。