微信小程序介紹：

小程序簡介：

小程序是一種連接用戶與服務的方式，它能在微信內被便捷地獲取和傳播，具有出色的使用體驗。

不需要下載安裝，用戶通過搜一搜或掃一掃就可以打開使用，使用完后退出即可。

小程序是基于微信的開發平臺，屬于微信內部。

發展史：

微信中的 WebView 逐漸成為移動 Web 的一個入口時，微信就有相關的 JS API 出現了，也就是說，微信小程序開發中會用到javascript。

2015年初，微信發布了一整套網頁開發工具包，稱之為 JS-SDK，開放了拍攝、錄音、語音識別、二維碼、地圖、支付、分享、卡券等幾十個API，供web開發者開發使用，但是它也有很多不足，例如白屏等問題，為解決這類問題，于是誕生了小程序。

小程序的優點：

1.快速的加載

2.更強大的能力

3.原生的體驗

4.易用且安全的微信數據開放

5.高效和簡單的開發

小程序與普通網頁開發的區別：

小程序的主要開發語言是 JavaScript ，小程序的開發同普通網頁開發有很大的相似性。對于前端開發者而言，從網頁開發遷移到小程序的開發成本并不高，但是二者還是有區別的，其主要區別如下：

1.網頁開發中渲染線程和腳本線程是互斥的，這使得長時間的腳本運行可能會導致頁面失去響應；而在小程序中，二者是分開的，分別運行在不同的線程中，不會失去響應。2.網頁開發中可以使用各種瀏覽器暴露DOM并對其進行操作；而在小程序中，邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，并沒有瀏覽器對象，因此小程序中沒有DOM和BOM的操作。3.JSCore 的環境同 NodeJS 環境也不相同，所以一些 NPM 的包在小程序中也是無法運行的。4.網頁開發需要面臨各種各樣的瀏覽器環境；而小程序只需面臨兩大系統：iOS和Android，及輔助開發者工具。5.網頁開發中只需要使用到瀏覽器，并搭配一些輔助工具或者編輯器即可；小程序的開發則有所不同，需要經過申請小程序帳號、安裝小程序開發者工具、配置項目等才可以。

申請賬號：

想要開發一款小程序，首先需要申請一個小程序賬號，通過這個賬號就可以管理自己的小程序；其步驟如下：

1.打開官網：https://mp.weixin.qq.com/進入微信公眾平臺，點立即注冊，選擇小程序2.在小程序注冊頁面根據指引填寫相關資料并注冊。3.到注冊郵箱查閱郵件，點擊郵件中的鏈接地址進行信息登記并繼續后確認4.重新進入網址：https://mp.weixin.qq.com掃碼登錄進入小程序頁面，開發---開發管理---開發設置，獲取AppID(小程序ID，相當于一個身份證，后面會用到，這里需要知道自己的AppID即可)

安裝開發工具：

微信小程序有自己的開發工具（當然你可以使用自己的編輯器編寫代碼），獲取完AppID后，在當前頁面進行下載開發者工具，具體步驟如下：

1.單擊開發----開發工具---開發者工具---下載---選擇對應自己電腦系統版本下載應用2.將下載好的應用雙擊，接受用戶協議，安裝目錄可自愿修改，之后進行安裝。3.通過以上兩步就已經安裝完微信開發工具了，想要了解更多微信工具的使用，可閱讀官方文檔：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

第一個微信小程序：

安裝完開發工具后，可以使用它開發一個小demo先簡單測試一下,其步驟如下：

1.在桌面找到新安裝的微信開發者工具并雙擊。2.使用微信掃描彈出的二維碼進入開發者工具界面（首次打開需要掃碼登陸）。3.在小程序項目---小程序中點擊加號（+）填寫項目配置，AppID可使用自己注冊小程序時的AppID（也可選擇測試號）4.選擇著默認模板，其他配置默認即可，最后勾選用戶協議點擊新建。5.此時在開發工具模擬器中會看到自己微信的頭像和hello world,此時表明第一個微信小程序已經創建成功。

小程序代碼構成：

上面生成的demo項目文件目錄機構如下：

一個基礎的小程序由四種文件構成，分別是：

1.json 后綴的 JSON 配置文件

2.wxml 后綴的 WXML 模板文件

3.wxss 后綴的 WXSS 樣式文件

4.js后綴的 JS 腳本邏輯文件

下面是對上面文件的詳細介紹：

.json文件：

此文件用于靜態配置，項目根目錄下app.json文件是當前小程序的全局配置，包括小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等，app.json基礎配置如下（json文件中不能添加注釋，這里為了方便說明以//開始的表示注釋，使用此配置信息時，將注釋刪除即可）：

{"pages":[//1.pages：用于配置所有頁面路徑，默認會進入第一個路徑指定的頁面。"pages/index/index",//當在這里配置完新頁面保存后，pages下會自動生成對應的頁面文件，只需修改自動生成的文件即可。"pages/logs/logs"],"entryPagePath": "pages/logs/logs",//2.entryPagePath：配置小程序默認啟動首頁，不配置此項默認會選擇pages配置中的第一項。"window":{//3.window:配置小程序所有頁面的頂部背景顏色，文字顏色等。"navigationBarBackgroundColor": "#ff0",//3-1設置頂部導航背景顏色，支持十六進制顏色值。"navigationBarTitleText": "微信小程序測試",//3-2設置頂部導航標題文本。"navigationBarTextStyle":"black",//3-3設置頂部導航標題字體顏色，其值只能是black和white默認值。"navigationStyle":"default",//3-4配置導航欄樣式，默認值defalult,還有一值：custom導航欄標題及背景都會消失，僅右上角膠囊按鈕存在。"backgroundColor":"#ffffff",//3-5配置窗口的背景色，默認值：#ffffff，支持十六進制顏色值。"backgroundTextStyle":"dark",//3-6配置下拉loading的樣式，僅支持 dark默認值和light。"backgroundColorTop":"#666",//3-7設置頂部窗口的背景色，僅iOS支持，默認值：#ffffff。"backgroundColorBottom":"#555",//3-8設置底部窗口的背景色，僅iOS支持，默認值：#ffffff。"enablePullDownRefresh":true,//3-9設置是否開啟全局下拉刷新，默認值為false。"onReachBottomDistance":50,//3-10設置當頁面上拉距底部某個距離后觸發事件，單位為px,默認值50，例如下拉加載更多數據。"pageOrientation":"auto"//3-11設置屏幕旋轉時小程序是否跟隨設備旋轉（橫豎屏顯示），其值：portrait默認值，設備旋轉時，小程序不旋轉、landscape設備旋轉小程序旋轉保持與視線不變、auto自動。},"tabBar":{//4.tabBar:配置tab欄切換按鈕。"color":"#fff",//4-1設置tab按鈕字體顏色，其值為十六進制顏色值，且為必須項。"selectedColor":"#000",//4-2設置tab按鈕被選中時字體顏色，其值為十六進制顏色值，且為必須項。"backgroundColor":"#999",//4-3設置tab欄背景顏色，其值為十六進制顏色值，且為必須項。"borderStyle":"black",//4-4設置tab欄邊框顏色，其值為black默認和white。"list":[//4-5設置tab按鈕選項，其值為一個每項都是對象的數組，且為必須項，數組元素的個數必須是[2,5]個，不在范圍內不顯示。{"pagePath":"pages/logs/logs",//4-5-1設置當前要跳轉的頁面路徑。"text":"登錄",//4-5-2設置當前按鈕文本。"iconPath":"images/tabs/home.png",//4-5-3設置當前按鈕點擊前icon圖標，大小限制為40kb，建議尺寸81px*81px，不支持網絡圖片。"selectedIconPath":"images/tabs/home-active.png"//4-5-4設置當前按鈕點擊后icon圖標，大小限制為40kb，建議尺寸81px*81px，不支持網絡圖片。},{"pagePath":"pages/index/index","text":"登錄","iconPath":"images/tabs/home.png","selectedIconPath":"images/tabs/home-active.png"}],"position":"top",//4-6設置tab欄的位置，其值：bottom底部，默認、top頂部。"custom":false//4-7自定義設置tabBar，一般忽略此項配置，其默認值為false,當值為true時，需要自定義設計tabBar，否則tabBar將失效，其設計可閱讀：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html。},"networkTimeout":{//5.networkTimeout:設置請求超時時間。"request":60000,//5-1設置wx.request的超時時間，默認值為60000，單位值毫秒。"connectSocke":60000,//5-2設置wx.connectSocket的超時時間，默認值為60000，單位值毫秒。"uploadFile":60000,//5-3設置wx.uploadFile的超時時間，默認值為60000，單位值毫秒。"downloadFile":60000//5-4設置wx.downloadFile的超時時間，默認值為60000，單位值毫秒。},//"debug":true,//6.debug:是否開啟在開發工具控制臺面板顯示調試信息（Page 的注冊，頁面路由，數據更新，事件觸發等），便于開發者快速定位問題所在，調試完建議關閉，其默認值為false。//"functionalPages":true,//7.functionalPages是否啟用插件功能，默認false，如要啟用可閱讀：https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages.html。//"subpackages":{},//8.subpackages:分包結構配置，用于構建時打包成不同的分包，按需加載，如需配置請閱讀：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html。//"workers":'string',//9.workers:設置處理多線程任務時，worker代碼放置目錄，如需配置請閱讀：https://developers.weixin.qq.com/miniprogram/dev/framework/workers.html。//"requiredBackgroundModes":string,//10.requiredBackgroundModes設置需要在后臺使用的能力，如需配置請閱讀：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#requiredBackgroundModes//"plugins":Object,//11.plugins:設置使用到的插件，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html。 //"preloadRule":Object,//12.preloadRule:設置分包預下載規則，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/preload.html。"resizable":true,//13.resizable:設置是否允許在PC上對窗口進行縮放及iPad是否支持屏幕旋轉，默認值為false。//"usingComponents":Object,//14.usingComponents:配置自定義組件。//"permission":Object,//15.permission:配置小程序接口權限相關設置，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission。//"sitemapLocation":String,//16.sitemapLocation:配置sitemap.json文件路徑，默認在app.json同級目錄下。"style":"v2",//17.style:當值為v2時表示啟用新版的組件樣式。//"useExtendedLib":Object,//18.useExtendedLib:配置引用的擴展庫，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib。//"entranceDeclare":Object,//19.entranceDeclare:配置微信消息用小程序打開，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/location-message.html。//"darkmode":String,//20.darkmode:配置小程序支持 DarkMode，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#darkmode。//"themeLocation":String,//21.themeLocation:配置theme.json 的路徑，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#themeLocation。//"lazyCodeLoading":String,//22.lazyCodeLoading:配置自定義組件代碼按需注入，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#lazyCodeLoading。//"singlePage":Object,//23.singlePage:配置單頁模式相關配置，如需配置可閱讀：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#singlePage。}

app.json文件更詳細配置文檔推薦：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

project.config.json： 對開發工具的配置，使用這個配置后，即使在更換電腦重新安裝工具后，將此項目在工具中打開，依舊是自己熟悉的工具配置項。

pages文件夾中json文件： pages文件夾中每個頁面下的json文件是對當前頁面的配置，當前頁面使用此json文件配置頁面后，當前頁面可以忽略app.json文件的配置。

.wxml文件：

此文件用于小程序骨架，類似網頁中的html文件，此文件存在pages文件夾下的頁面文件夾中；也是由標簽、屬性等構成，但是這里的標簽和html中的標簽有很大的不同，如：

<view class="container"><text>hello</text></view>

wxml文件和html文件不同之處：

1.標簽名有所不同：具體可閱讀組件相關文檔：https://developers.weixin.qq.com/miniprogram/dev/component/

2.小程序中可以實現：數據綁定、列表渲染、條件渲染、模板等，具體文檔推薦：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

wxss樣式：

wxss支持css大部分特性，其文件為后綴.wxss的文件，其不同之處：

1.新增rpx尺寸單位，一個響應式的尺寸單位，把所有設備屏幕尺寸都劃分為750rpx,使用rpx可以適配不同屏幕尺寸。

2.僅支持css基礎選擇器。

js邏輯：

微信小程序中js邏輯代碼和網頁中js代碼基本相似，后面會詳細介紹。

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的微信小程序简介、发展史、小程序的优点、申请账号、开发工具、初识wxml文件和wxss文件的全部內容，希望文章能夠幫你解決所遇到的問題。

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