任亞飛

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

一、了解小程序

1.微信小程序的優(yōu)勢

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

2.小程序發(fā)展前景

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

所以我們不管是學(xué)習(xí)小程序開發(fā)，還是學(xué)習(xí)小程序運營，都有很廣的就業(yè)前景。

3.小程序發(fā)展歷史

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

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

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

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

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

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

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

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

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

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

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

4.為什么學(xué)習(xí)小程序

我們了解完小程序的優(yōu)勢和歷史以后，就知道我們?yōu)槭裁匆獙W(xué)習(xí)小程序了，依賴微信生態(tài)。就業(yè)面廣，上手快。學(xué)習(xí)完微信小程序以后，再去學(xué)習(xí)百度小程序、抖音小程序、支付寶小程序就很方便了。因為這些小程序API都很相似。相對于Java、PHP、Python而言，小程序更適合作為編程的入門語言。相對于傳統(tǒng)前端開發(fā)，我們在學(xué)習(xí)小程序的同時就可以學(xué)習(xí)CSS、JavaScript的知識。

5.微信小程序?qū)?chuàng)業(yè)者的優(yōu)勢

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

二、開發(fā)者工具

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

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

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

官方開發(fā)者工具更新迭代最及時。

用官方開發(fā)者工具，使用一些官方功能最穩(wěn)定。

1.下載和安裝

官方開發(fā)者工具下載地址：

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

建議大家下載最新的穩(wěn)定版本。

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

2.創(chuàng)建屬于自己的小程序

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

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

在開發(fā)工具中選擇小程序，再點擊+號，創(chuàng)建小程序。

小程序項目配置

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

熟悉開發(fā)者工具

紅色框1為工具欄，紅色框2為模擬器，紅色框3為代碼目錄，紅色框4為代碼編輯區(qū)，紅色框5為調(diào)試器，用作調(diào)試使用，幫助開發(fā)使用。

開發(fā)者工具欄個性化的配置

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

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

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

簡單操作

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

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

對頁面進行美化，紅色框1為頂部標(biāo)題欄背景顏色，試試#fff是什么顏色，這里不能直接輸入顏色英文。紅色框2為標(biāo)題名字，標(biāo)題名字“Weixin”。紅色框3為背景顏色，字體顏色?？梢允莃lack或white。

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

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