微信小程序開(kāi)發(fā)入門(mén)（一）

任亞飛

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

一、了解小程序

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、開(kāi)發(fā)者工具

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

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

有任何問(wèn)題，可以直接反饋給官方。

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

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

1.下載和安裝

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

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

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

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

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

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

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

在開(kāi)發(fā)工具中選擇小程序，再點(diǎn)擊+號(hào)，創(chuàng)建小程序。

小程序項(xiàng)目配置

目錄欄紅色框?yàn)檫x中創(chuàng)建的文件夾，AppID欄選擇測(cè)試號(hào)。配置好以后，點(diǎn)“新建”，即可創(chuàng)建屬于自己的第一個(gè)小程序，然后創(chuàng)建會(huì)有一個(gè)過(guò)程，耐心等待即可。

熟悉開(kāi)發(fā)者工具

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

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

為了表現(xiàn)得像一個(gè)老鳥(niǎo)，我們要對(duì)界面做一些個(gè)性化的配置。點(diǎn)擊菜單欄的“設(shè)置”?？梢耘渲弥黝}顏色，模擬器位置，這些完全可以根據(jù)個(gè)人喜好進(jìn)行設(shè)置。

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

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

簡(jiǎn)單操作

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

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

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

注意：pages是配置頁(yè)面的，window是配置全局頁(yè)面的。

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