微信小程序開發學習筆記（一）——概要、安裝開發環境與第一個小程序

一、概要

小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

微信小程序是騰訊於2017年1月9日推出的一種不需要下載安裝即可在微信平臺上使用的應用，主要提供給企業、政府、媒體、其他組織或個人的開發者在微信平臺上提供服務。

截止2019年初，微信小程序用戶規模突破6億，小遊戲類微信小程序佔比達28%。

幫助文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/   這裏有最全的學習資料

1.1、小程序簡介

提起⼩程序，⼤家⾸先想到的就是騰訊的微信⼩程序，其實，⼩程序不⽌這⼀家，只是騰訊的微信⼩程序推出的較早。⽬前，⼩程序羣雄逐⿅，BAT【指百度公司（Baidu）、阿⾥巴巴集團（Alibaba）、騰訊公司（Tencent）】BAT都已完成了⼩程序的佈局。騰訊的微信⼩程序 2017年1⽉9⽇正式上線，阿⾥巴巴的⽀付寶⼩程序 2017年9⽉20⽇正式上線，百度智能⼩程序 2018年7⽉4⽇正式 上線。字節跳動旗下的今⽇頭條⼩程序2018年11⽉17⽇正式上線，隨後推出抖⾳⼩程序。他們都推出了⾃⼰的開發⼯具。

微信小程序是一種不用下載就能使用的應用，也是一項創新，經過將近兩年的發展，已經構造了新的微信小程序開發環境和開發者生態。微信小程序也是這麼多年來中國IT行業裏一個真正能夠影響到普通程序員的創新成果，已經有超過150萬的開發者加入到了微信小程序的開發，與我們一起共同發力推動微信小程序的發展，微信小程序應用數量超過了一百萬，覆蓋200多個細分的行業，日活用戶達到兩個億，微信小程序還在許多城市實現了支持地鐵、公交服務。微信小程序發展帶來更多的就業機會，2017年小程序帶動就業104萬人，社會效應不斷提升

 

 

1.2、發展歷史

隨着網絡的不斷髮展和更多高性價比智能手機的普及，以及人們對工作、生活、娛樂等多方面的需求日益增長，各種移動應用程序App（英文全稱爲 Application）應運而生。當太多App佔滿用戶的手機屏幕和內存時，手機就容易出現內存容量緊張和運行速度變慢的情況。同時，App的升級和下載本身也在消耗手機帶寬和系統資源，致使App的日益豐富與手機運行速度之間的矛盾日漸加重。 針對此矛盾，各大移動應用廠商提出了各自的解決方案。2013年8月22日，百度正式在百度世界大會上首先提出“輕應用”（Lght App）的概念。百度將輕應用定義爲一種無須下載、即搜即用的全功能App，既有媲美本地原生App（Native App）的用戶體驗，又具備Web App可被檢索與智能分發的特性。後續UC開放平臺、支付寶公衆平臺等類似輕應用平臺相繼發聲。這些平臺都是基於HTML5（超文本標記語言的第五次重大修改，簡稱H5）推出的Web App，但是由於未形成賬號體系、不符合用戶習慣等，用戶使用率較低，活躍度較低，這些平臺並沒有發展起來。 

1.3、小程序的誕生

2016年，微信之父張小龍意識到微信解決以上問題有重大的潛在商業價值，可以圍繞龐大的微信用戶入口，構建一個應用生態閉環。2016年1月11日，張小龍透露將在訂閱號和服務號外新設微信“應用號”。經過一年多的開發，2017年1月9日，張小龍在2017年微信公開課Pro上宣佈的小程序正式上線。 自2016年9月22日開始內測到2018年年初，在一年多的時間裏，小程序的功能經過快速的優化迭代，培養了大量用戶。根據2018年1月15日微信公開課數據，目前小程序日活躍用戶數已達1.7億戶、已上線小程序58萬個，覆蓋100萬開發者、2300個第三方平臺。上線不足一個月的小遊戲“跳一跳”累計用戶達3.1億戶，躍居小程序使用榜首，用戶次日留存（次日仍然登錄使用）率達到65%。

1.4、爲什麼需要小程序開發

假定要做一個美團的：美團優選應用，有下面的選擇：

1、原生app（Native App）

缺點：

開發成本高，android，ios,web,pc

開發週期長

需要下載安裝，推廣麻煩

更新麻煩，版本1，版本2，版本3，用戶都需要下載後再安裝

優點：

靈活、用戶體驗好

可能調用底層服務

適合大公司，大企業，大投資

2、混合式APP（Hybird app）

優點：可以實現一次開發，在多個平臺上運行如android,ios等,開發週期相對原生app要短一些

缺點：原生app中存在的缺點基本都有，除了第一項

3、Web app

優點：開發速度快，成本低，跨平臺，無需安裝，好推廣

缺點：體驗較差，不便於調用底層服務

4、小程序

開發小程序的原因有很多，主要包括以下幾點：

便捷性：小程序可以直接在即時通訊軟件、社交平臺或者瀏覽器中運行，用戶無需下載安裝即可

使用，減少了安裝和卸載的時間，提高了用戶體驗。

節省空間：與傳統的APP相比，小程序佔用的存儲空間較小，減輕了用戶手機存儲負擔。

快速傳播：用戶可以通過分享、掃碼等方式快速傳播小程序，提高了推廣效果和覆蓋面。

開發成本低：相較於傳統APP，小程序的開發成本較低，同時跨平臺特性使得開發者無需針對不同操作系統進行多次開發。

系統集成：許多平臺（如微信、支付寶等）提供了豐富的API接口，使得小程序可以方便地與平臺的其他功能進行集成，爲用戶提供更多便利。

適應性強：小程序可以適應各種行業和場景，滿足個性化和多樣化的需求。

小程序有很多類型，以下是一些常見的小程序：

電商購物類：如拼多多、京東購物等，用戶可以在小程序中完成購物、支付、物流查詢等功能。

生活服務類：如美團外賣、滴滴打車等，用戶可以通過小程序預訂餐飲、叫車等服務。

娛樂休閒類：如抖音短視頻、網易雲音樂等，用戶可以在小程序中觀看視頻、收聽音樂等。

教育培訓類：如新東方在線、作業幫等，提供在線課程、輔導等教育資源。

金融理財類：如螞蟻財富、招商銀行等，用戶可以在小程序中進行投資理財、查詢賬戶等操作。

工具類：如搜狗輸入法、滴答清單等，提供各種實用工具功能。

這些僅僅是小程序的一部分類型，實際上小程序已經滲透到各個行業和領域，爲用戶提供了便捷的線上服務

　　很多人做微信公衆號，而非App，因爲App推廣成本太高。這導致公衆號現在更像是媒體化的平臺。微信的本意是要提供服務，所以推出了服務號，但是服務號也沒達到預期。微信小程序的優勢：

　　一是微信有海量用戶，而且粘性很高，在微信裏開發產品更容易觸達用戶；

　　二是推廣app 或公衆號的成本太高。

　　三是開發適配成本低。

　　四是容易小規模試錯，然後快速迭代。

　　五是跨平臺。

　　事實上，應用號並非微信首創，之前百度推出過應用號，搜狐推出過快站，但騰訊將這件事情做成功的概率卻是最大

1.5、示例

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

1.運行環境不同：網頁運行在瀏覽器中，小程序運行在微信環境中；

2.API不同：由於運行環境不同，小程序無法調用DOM和BOM的API

3.開發模式不同：網頁開發：瀏覽器+代碼編輯器，小程序：申請小程序開發賬號+安裝小程序開發者工具+創建和配置小程序項目

二、環境配置

2.1、註冊小程序帳號

首先我們要去註冊微信小程序帳號

官網：https://mp.weixin.qq.com

第一步：點擊立即註冊

　　　　選擇微信小程序

第二步：依次填寫個人信息

第三步：信息登記中，主體類型選擇個人，然後在依次填寫主體信息登記

至此，我們的微信小程序測試號就註冊完成了！ 

2.2、獲取微信小程序的AppID

登錄我們剛剛註冊的測試號，選擇開發管理，點擊開發設置即可看到自己的AppID

2.3、下載安裝微信開發者工具

推薦下載和安裝最新的穩定版Stable Build的微信開發者工具

鏈接：微信開發者工具下載地址與更新日誌 | 微信開放文檔 (qq.com)

 安裝小程序就建議一直next

 

如果出現如下報錯，就按照提示添加環境變量即可

 修改環境變量

三、第一個小程序

3.1、創建第一個小程序項目 

第一步：點擊加號後，輸入我們的項目名稱，文件目錄，輸入我們的AppID後，選擇不使用雲開發，然後點擊確定

 

至此，我們的第一個微信小程序就創建成功！

然後呢，我們可以點擊預覽,通過我們當前賬號的微信掃一掃，在手機上查看我們剛剛創建的小程序

 

 擴展：修改主體顏色，點擊小齒輪，選擇外觀，即可修改

3.2、小程序項目的基本組成結構

我們可以點擊左上角的三個選項來控制當前我們需要展示那些頁面

項目目錄結構：

pages：用來存放所有小程序的頁面

utils：用來存放工具性質的模塊（例如:格式化時間的自定義模塊)

app.js：小程序項目的入口文件

app.json：是當前小程序的全局配置，包括了小程序的所有頁面路徑、窗口外觀、界面表現、底部 tab等

app.wxss：小程序項目的全局樣式文件

project.config.json：項目的配置文件

sitemap.json：用來配置小程序及其頁面是否允許被微信索引

頁面目錄結構：

.js文件(頁面的腳本文件，存放頁面的數據、事件處理函數等）

.json文件（當前頁面的配置文件，配置窗口的外觀、表現等)

.wxml文件（頁面的模板結構文件)

.wxss文件（當前頁面的樣式表文件)

3.3、小程序配置的使用

一：app.json

1、pages:用來記錄當前小程序的所有頁面的路徑

2、window:全局定義小程序所有頁面的背景色、文字顏色等

3、style:全局定義小程序組件所使用的樣式版本，v2代表使用全新的樣式

4、sitemapLocation:用來指明sitemap.json的位置

二：project.config.json

1、setting:中保存了編譯相關的配置

2、projectname:中保存的是項目名稱

3、appid:中保存的是小程序的賬號ID

三：sitemap.json

微信現已開放小程序內搜索，效果類似於PC網頁的SEO。sitemap.json文件用來配置小程序頁面是否允許微信索引。
當開發者允許微信索引時，微信會通過爬蟲的形式，爲小程序的頁面內容建立索引。當用戶的搜索關鍵字和頁面的索引匹配成功的時候，小程序的頁面將可能展示在搜索結果中。

默認是允許被索引的，page:*表示所有的頁面

如果我們想不被微信索引到的話，我們跨域在action中加上dis

如圖所示：

 

3.4、小程序代碼的構成

• 項目的組成結構
  
  pages: 用來存放所有小程序的頁面
  utils: 用來存放工具性質的模塊
  app.js:小程序項目的吐口文件
  app.json:小程序項目的全局配置文件
  app.wxss: 全局樣式文件
  project.config.json 項目的配置文件
  sitemap.json 用來配置小程序及其頁面是否允許被微信搜索

• 小程序頁面(pages)的組成部分
  
  在pages 文件夾下，一個文件存放一個頁面。每個頁面由四個基本文件組成
  .js 文件： 頁面的腳本文件，存放頁面的數據，處理函數等
  .json文件：當前頁面的配置文件，配置窗口的外觀，表現
  .wxml文件: 頁面的模板結構文件
  .wxss文件： 頁面的樣式表文件

• app.json
  app.json 是小程序的全局配置。包括了小程序的所有頁面路徑，窗口外觀，界面表現，底部tab等
  
  pages: 用來記錄當前小程序的所有頁面的路徑
  windows: 全局定義小程序所有頁面的背景色，文字顏色等
  style: 全局定義小程序組件所使用的樣式版本
  sitemapLocation: 用來指明sitemap.json 的位置