微信小程序開發入門（一）

任亞飛

微信小程序，簡稱小程序，英文名MiniProgram，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。在開發難度上，中學以上的同學們學習應該是沒有太大問題的。

一、了解小程序

1.微信小程序的優勢

微信有海量用戶，黏性高，在微信里開發產品更容易觸達用戶。比推廣App的成本低。開發適配成本低。容易小規模試錯，然后快速迭代。跨平臺。對比小程序和App的使用步驟，可以看出小程序省去了應用市場搜索、下載安裝、注冊、后期卸載等步驟。充分體現了張小龍所說的“隨用隨走”。

2.小程序發展前景

據騰訊2022年第三季度財報，小程序日活躍用戶數突破6億，同比增長超30%，其日均使用次數實現更快增長，同比增長超50%。微信平臺加深了小程序在食品飲料、服裝、商場百貨等主要行業的應用，這些行業的線下商戶與品牌方正愈來愈多地將其會員和積分系統與小程序結合，并通過小程序建立多渠道零售體系。用戶借助健康碼小程序進行健康與行程驗證，2022年累計訪問量超過3200億次。

所以我們不管是學習小程序開發，還是學習小程序運營，都有很廣的就業前景。

3.小程序發展歷史

2016年1月11日，微信之父張小龍時隔多年公開亮相，解讀了微信的四大價值觀。張小龍指出，越來越多產品通過公眾號來做，因為這里開發、獲取用戶和傳播成本更低。拆分出來的服務號并沒有提供更好的服務，所以微信內部正在研究新的形態，叫“微信小程序”。

2016年9月21日，微信小程序正式開啟內測。在微信生態下，觸手可及、用完即走的微信小程序引起廣泛關注。騰訊云正式上線微信小程序解決方案，提供微信小程序在云端服務器的技術方案。

2017年1月9日0點，萬眾矚目的第一批微信小程序低調上線，用戶可以體驗到各種各樣微信小程序提供的服務。

2017年12月28日，微信更新的6.6.1版本開放了小游戲，微信啟動頁面還重點推薦了小游戲“跳一跳”，你可以通過“微信小程序”找到已經玩過的小游戲。

2018年1月18日，微信提供了電子化的侵權投訴渠道，用戶或者企業可以在微信公眾平臺以及微信客戶端入口進行投訴。

2018年1月25日，微信團隊在“微信公眾平臺”發布公告稱，從移動應用分享至微信的小程序頁面，用戶訪問時支持打開來源應用。同時，為提升用戶使用體驗，開發者可以設置小程序菜單的顏色風格，并根據業務需求，對小程序菜單外的標題欄區域進行自定義。

2018年3月，微信正式宣布微信小程序廣告組件啟動內測，內容還包括第三方可以快速創建并認證小程序、新增小程序插件管理接口和更新基礎能力，開發者可以通過微信小程序來賺取廣告收入。除了公眾號文中、朋友圈廣告以及公眾號底部的廣告位都支持微信小程序落地頁投放廣告，微信小程序廣告位也可以直達小程序。

2018年7月13日，微信小程序任務欄功能升級，新增“我的微信小程序”板塊；而微信小程序原有的“星標”功能升級，可以將喜歡的小程序直接添加到“我的微信小程序”。

2018年8月10日，微信宣布，微信小程序后臺數據分析及插件功能升級，開發者可查看已添加“我的微信小程序”的用戶數。此外，2018年8月1日至12月31日期間，微信小程序（含小游戲）流量主的廣告收入分成比例優化上調，單日廣告流水10萬～100萬區間的部分，開發者可獲得的分成由原來流水的30%上調到50%，優質微信小程序流量主可獲得更高收益。

2018年9月28日，微信“功能直達”正式開放，商家與用戶的距離可以更“近”一步：用戶微信搜一搜功能詞，搜索頁面將呈現相關服務的微信小程序，點擊搜索結果，可直達微信小程序相關服務頁面。

2019年8月9日，微信向開發者發布新能力公測與更新公告，微信PC版新版本中，支持打開聊天中分享的微信小程序。安裝最新PC端測試版微信后，點擊聊天中的微信小程序，便會彈出微信小程序浮窗。而在微信小程序右上角的操作選項中，可以進行“最小化”操作，讓微信小程序像其他PC軟件一樣最小化，排列于Windows系統的任務欄中。

4.為什么學習小程序

我們了解完小程序的優勢和歷史以后，就知道我們為什么要學習小程序了，依賴微信生態。就業面廣，上手快。學習完微信小程序以后，再去學習百度小程序、抖音小程序、支付寶小程序就很方便了。因為這些小程序API都很相似。相對于Java、PHP、Python而言，小程序更適合作為編程的入門語言。相對于傳統前端開發，我們在學習小程序的同時就可以學習CSS、JavaScript的知識。

5.微信小程序對創業者的優勢

當前移動互聯網格局已定，用戶需求被各路巨頭把持，App開發的推廣成本過高，我們要想在移動互聯網有一番作為，微信是不可避免的靠山，小程序能以最小的成本、最快的速度驗證你的商業模式。

二、開發者工具

工欲善其事必先利其器，我們在開發小程序之前必須準備好一款適合自己的開發者工具，這里我給大家推薦官方開發者工具。原因有以下幾點：

官方的所有更新，都會第一時間在官方開發者工具同步。

有任何問題，可以直接反饋給官方。

官方開發者工具更新迭代最及時。

用官方開發者工具，使用一些官方功能最穩定。

1.下載和安裝

官方開發者工具下載地址：

https：//developers.weixin.qq.com/miniprogram/dev/devtools/download.html

建議大家下載最新的穩定版本。

然后點擊自己電腦對應系統的版本下載即可。至于安裝很方便，只需要雙擊安裝包，不停地點“下一步”即可，安裝完成以后的官方開發者工具長這樣。

2.創建屬于自己的小程序

我們安裝好開發者工具以后，只需要雙擊打開即可。我們第一次打開，會出現二維碼，需要用微信掃碼登錄開發者工具。安裝好開發者工具后，接下來就來教大家如何創建一個最簡單的小程序。

在桌面上創建一個空白文件，名字可以隨便取，比如“微信程序”。

在開發工具中選擇小程序，再點擊+號，創建小程序。

小程序項目配置

目錄欄紅色框為選中創建的文件夾，AppID欄選擇測試號。配置好以后，點“新建”，即可創建屬于自己的第一個小程序，然后創建會有一個過程，耐心等待即可。

熟悉開發者工具

紅色框1為工具欄，紅色框2為模擬器，紅色框3為代碼目錄，紅色框4為代碼編輯區，紅色框5為調試器，用作調試使用，幫助開發使用。

開發者工具欄個性化的配置

為了表現得像一個老鳥，我們要對界面做一些個性化的配置。點擊菜單欄的“設置”。可以配置主題顏色，模擬器位置，這些完全可以根據個人喜好進行設置。

圖中是程序目錄，每一個我都給大家標注出來了，大家前期不用死記硬背，后面開發學習過程中，用得多了，自然就記住目錄下每個文件的作用了。

首先包含pages的大紅色框里面有index和logs兩個頁面，每一個頁面都有4個相同的功能。小紅色框里面展開了index首頁里面的4個功能，每個目錄的功能是：json為邏輯編寫，ts為頁面信息配置編寫，wxm為頁面布局編寫，wxss為頁面樣式編寫。utils為工具類，具體應用方法我們后面再介紹。

簡單操作

在app.json中可以看到有兩個頁面，index和logs頁面。首頁就是我們index頁面。如讓logs頁面做首頁我們可以把logs頁面放在index頁面的位置，注意要英文的引號和逗號。

在index中的index.ts（也可以改成自己喜歡的名字）寫下了“HelloWorld”。在模擬器中已經可以看到效果了。注意，改完一定要編譯。養成良好的習慣，寫完一次代碼編譯一次。模擬器效果正確之后，點擊工具欄的“預覽”用微信掃一掃二維碼就可以在手機上預覽。

對頁面進行美化，紅色框1為頂部標題欄背景顏色，試試#fff是什么顏色，這里不能直接輸入顏色英文。紅色框2為標題名字，標題名字“Weixin”。紅色框3為背景顏色，字體顏色。可以是black或white。

注意：pages是配置頁面的，window是配置全局頁面的。

由于篇幅有限，本文到這里差不多結束了，對微信小程序感興趣的同學請繼續關注《電腦報》。