【佳學(xué)基因檢測(cè)】一步一步教你如何做一步基因檢測(cè)微信小程序

基因檢測(cè)機(jī)構(gòu)為什么要開發(fā)微信小程序

如果你想從事基因檢測(cè)業(yè)務(wù)，快速地找到客戶，將散在不同人群中有基因檢測(cè)需要的單位和個(gè)人聚集到你的銷售人員和客服人員中，開發(fā)一個(gè)基因檢測(cè)微信小程序就能起很大的作用。據(jù)統(tǒng)計(jì)，佳學(xué)基因合作伙件開始使用微信小程序以后，每月的銷售收入提高了至少20%。加上優(yōu)化微信小程度使用技巧，基因檢測(cè)的業(yè)務(wù)有望不斷穩(wěn)定而且上升。本文是佳學(xué)基因招商合作部為基因檢測(cè)合作伙伴提供的基因檢測(cè)微信小程序入門教程之一，它可以幫您從零基礎(chǔ)，一步一步開發(fā)一個(gè)可以吸引基因檢測(cè)客戶的微信小程度。

基因檢測(cè)微信小程序可觸及的消費(fèi)人群分析

微信是中國(guó)使用量賊大的手機(jī) App 之一，通過社交功能為每一個(gè)個(gè)人所需，并進(jìn)入到工作交流場(chǎng)景。支付功能及場(chǎng)景小程序的推出，使得微信介入到日常生活功能，進(jìn)一步夯實(shí)了微信的使用基礎(chǔ)。截止2021年12月31號(hào)， 根據(jù)統(tǒng)計(jì),2021年微信月活躍用戶數(shù)量已經(jīng)達(dá)到12.682億，小程序的日活躍用戶數(shù)將達(dá)到4.5億，他們使用的Lite-app服務(wù)每天增加約32%；小程序年活躍數(shù)量增長(zhǎng)41%，支付交易小程序數(shù)量去年增長(zhǎng)28%；超過7億人使用了Covid-19服務(wù)，例如檢測(cè)和預(yù)約疫苗；餐飲，旅游和零售等受到Covid沖擊的行業(yè)去年的交易量增長(zhǎng)了一倍；過去兩年，海外商戶推出的小程序數(shù)量增長(zhǎng)了268%。電子商務(wù)交易額飆升897%；微信搜索的月度活躍用戶數(shù)到2021年將躍升至7億，比一年前的5億增長(zhǎng)40%；微信支付團(tuán)隊(duì)的人數(shù)從2016年的400人增加了兩倍，達(dá)到1,200人；現(xiàn)在有超過1,800家銀行和金融機(jī)構(gòu)合作伙伴；2021年實(shí)時(shí)流媒體電商銷售額在2021年增長(zhǎng)了15倍。開發(fā)并布置微信小程序APP可以使佳學(xué)基因檢測(cè)合作伙伴便利的觸達(dá)超過12億人的消費(fèi)市場(chǎng)。

2017年，微信正式推出了小程序，允許外部開發(fā)者在微信內(nèi)部運(yùn)行自己的代碼，開展業(yè)務(wù)。這引發(fā)了熱烈反響，截止2020年6月，小程序數(shù)量已經(jīng)超過了550萬(wàn)個(gè)。

除了進(jìn)行基因檢測(cè)業(yè)務(wù)的開發(fā)以外，小程序已經(jīng)成為國(guó)內(nèi)前端的一個(gè)重要業(yè)務(wù)，跟 Web 和手機(jī) App 有著同等的重要性。小程序開發(fā)者供不應(yīng)求，市場(chǎng)招聘需求極其旺盛，企業(yè)都搶著要。

盡管如此，小程序的教程卻很缺，要么是不夠系統(tǒng)，要么就是跳躍性太大，很多關(guān)鍵的地方寥寥數(shù)語(yǔ)，初學(xué)者摸不著頭腦。很多基因檢測(cè)、電商人群、大學(xué)畢業(yè)生想學(xué)習(xí)微信小程序的開發(fā)，苦于找不到好一點(diǎn)的教程。

本文采用小程序?qū)W習(xí)筆記的方式，將小程序開發(fā)的一步一步整理成教程的形式，希望對(duì)于初學(xué)者有用。需要學(xué)會(huì)的主要知識(shí)點(diǎn)，都會(huì)講到，佳學(xué)基因招商合作部的目標(biāo)是你讀完這個(gè)教程，就能學(xué)會(huì)怎么寫小程序。

考慮到很多同學(xué)并沒有開發(fā)經(jīng)驗(yàn)，小程序是他們接觸的先進(jìn)個(gè)開發(fā)領(lǐng)域。佳學(xué)基因招商合作部會(huì)講得比較細(xì)，希望新人也能沒有困難地閱讀這個(gè)教程。由于內(nèi)容比較多，這個(gè)教程將分成四次連載。

一、小程序是什么？

學(xué)習(xí)小程序之前，先簡(jiǎn)單說一下，它到底是什么。

字面上講，小程序就是微信里面的應(yīng)用程序，外部代碼通過小程序這種形式，在微信這個(gè)手機(jī) App 里面運(yùn)行。開發(fā)基因檢測(cè)微信小程序，就可以讓基因檢測(cè)業(yè)務(wù)通過微信這個(gè)平臺(tái)在所人使用微信業(yè)務(wù)的人群里遍地開花。

但是，更正確的說法是， 小程序可以視為只能用微信打開和瀏覽的網(wǎng)站。 小程序和網(wǎng)頁(yè)的技術(shù)模型是一樣的，用到的 JavaScript 語(yǔ)言和 CSS 樣式也是一樣的，只是網(wǎng)頁(yè)的 HTML 標(biāo)簽被稍微修改成了 WXML 標(biāo)簽。所以，小程序頁(yè)面本質(zhì)上就是網(wǎng)頁(yè)。

小程序的特殊之處在于，雖然是網(wǎng)頁(yè)，但是它不支持瀏覽器，所有瀏覽器的 API 都不能使用，只能用微信提供的 API。這也是為什么小程序只能用微信打開的原因，因?yàn)榈讓尤兞恕?/p>

二、小程序的優(yōu)勢(shì)

小程序賊大的優(yōu)勢(shì)，就是它基于微信。

微信 App 的功能（比如拍照、掃描、支付等等），小程序大部分都能使用。微信提供了各種封裝好的 API，開發(fā)者不用自己實(shí)現(xiàn)，也不用考慮 iOS 和安卓的平臺(tái)差異，只要一行代碼就可以調(diào)用。

而且，開發(fā)者也不用考慮用戶的注冊(cè)和登錄，直接使用微信的注冊(cè)和登錄，微信的用戶自動(dòng)成為你的用戶。

三、知識(shí)準(zhǔn)備

由于小程序基于網(wǎng)頁(yè)技術(shù)，所以學(xué)習(xí)之前，賊好懂一點(diǎn)網(wǎng)頁(yè)開發(fā)。具體來(lái)說，下面兩方面的知識(shí)是必需的。

（1）JavaScript 語(yǔ)言：懂基本語(yǔ)法，會(huì)寫簡(jiǎn)單的 JS 腳本程序。

（2）CSS 樣式：理解如何使用 CSS 控制網(wǎng)頁(yè)元素的外觀。

此外，雖然 HTML 標(biāo)簽和瀏覽器 API 不是必備知識(shí)，但是了解瀏覽器怎么渲染網(wǎng)頁(yè)，對(duì)于理解小程序模型有很大的幫助。

總的來(lái)說，先學(xué)網(wǎng)頁(yè)開發(fā)，再學(xué)小程序，是比較合理的學(xué)習(xí)途徑，而且網(wǎng)頁(yè)開發(fā)的資料比較多，遇到問題容易查到解決方法。但是，網(wǎng)頁(yè)開發(fā)要學(xué)的東西太多，不是短期能掌握的，如果想快速上手，先學(xué)小程序，遇到不懂的地方再去查資料，也未嘗不可。

四、開發(fā)準(zhǔn)備

小程序開發(fā)的先進(jìn)步，是去微信公眾平臺(tái)注冊(cè)，申請(qǐng)一個(gè) AppID，這是免費(fèi)的。

申請(qǐng)完成以后，你會(huì)得到一個(gè) AppID（小程序編號(hào)） 和 AppSecret（小程序密鑰），后面都會(huì)用到。

然后，下載微信提供的小程序開發(fā)工具。這個(gè)工具是必需的，因?yàn)橹挥兴拍苓\(yùn)行和調(diào)試小程序源碼。

開發(fā)者工具支持 Windows 和 MacOS 兩個(gè)平臺(tái)。我裝的是 Windows （64位）的版本，這個(gè)教程的內(nèi)容也是基于該版本的，但是 MacOS 版本的操作應(yīng)該是有效一樣的。

安裝好打開這個(gè)軟件，會(huì)要求你使用微信掃描二維碼登錄。

登錄后，進(jìn)入新建項(xiàng)目的頁(yè)面，可以新建不同的項(xiàng)目，默認(rèn)是新建小程序項(xiàng)目。

點(diǎn)擊右側(cè)的+號(hào)，就跳出了新建小程序的頁(yè)面。

如果直接新建小程序，會(huì)生成一個(gè)完整的項(xiàng)目腳手架。對(duì)于初學(xué)者來(lái)說，這樣反而不利于掌握各個(gè)文件的作用。更好的學(xué)習(xí)方法是，自己從頭手寫每一行代碼，然后切換到"導(dǎo)入項(xiàng)目"的選項(xiàng)，將其導(dǎo)入到開發(fā)者工具。

導(dǎo)入時(shí)，需要給小程序起一個(gè)名字，并且填寫項(xiàng)目代碼所在的目錄，以及前面申請(qǐng)的 AppID。

五、 hello world 示例

下面，就請(qǐng)大家動(dòng)手，跟著寫一個(gè)賊簡(jiǎn)單的小程序，只要五分鐘就能完成。

先進(jìn)步，打開新安裝的微信開發(fā)者工具，小程度新建一個(gè)小程序的項(xiàng)目目錄。名字在這里用基因檢測(cè)的漢語(yǔ)拼音代代表，你可以起你所希望的名字。這里稱為jiyinjiance。如果你在你作為管理員的公眾號(hào)里申請(qǐng)注冊(cè)了小程序，在APPID有一個(gè)向下的小三角，你點(diǎn)擊就可以顯示出來(lái)。勾先賊下面的“我已閱讀并同意《微信云開發(fā)功能服務(wù)條款》

你可以在資源管理器里面，新建目錄。如果熟悉命令行操作，也可以打開 Windows Terminal（沒有的話，需要安裝），在里面執(zhí)行下面的命令，新建并進(jìn)入該目錄。

> mkdir wechat-miniprogram-demo
> cd wechat-miniprogram-demo

第二步，在該目錄里面，新建一個(gè)腳本文件app.js。這個(gè)腳本用于對(duì)整個(gè)小程序進(jìn)行初始化。

app.js內(nèi)容只有一行代碼。

App({});

上面代碼中，App()由小程序原生提供，它是一個(gè)函數(shù)，表示新建一個(gè)小程序?qū)嵗?。它的參?shù)是一個(gè)配置對(duì)象，用于設(shè)置小程序?qū)嵗男袨閷傩?。這個(gè)例子不需要任何配置，所以使用空對(duì)象即可。

第三步，新建一個(gè)配置文件app.json，記錄項(xiàng)目的一些靜態(tài)配置。

app.json采用 JSON 格式。JSON 是基于 JavaScript 語(yǔ)言的一種數(shù)據(jù)交換格式，只有五條語(yǔ)法規(guī)則，非常簡(jiǎn)單，不熟悉 JSON 的同學(xué)可以參考這篇教程。

app.json文件的內(nèi)容，至少必須有一個(gè)pages屬性，指明小程序包含哪些頁(yè)面。

{
  "pages": [
    "pages/home/home"
  ]
}

上面代碼中，pages屬性是一個(gè)數(shù)組，數(shù)組的每一項(xiàng)就是一個(gè)頁(yè)面。這個(gè)示例中，小程序只有一個(gè)頁(yè)面，所以數(shù)組只有一項(xiàng)pages/home/home。

pages/home/home是一個(gè)三層的文件路徑。

1. 所有頁(yè)面都放在pages子目錄里面。
2. 每個(gè)頁(yè)面有一個(gè)自己的目錄，這里是pages下面的home子目錄，表示這個(gè)頁(yè)面叫做home。頁(yè)面的名字可以隨便起，只要對(duì)應(yīng)的目錄確實(shí)存在即可。
3. 小程序會(huì)加載頁(yè)面目錄pages/home里面的home.js文件，.js后綴名可以省略，所以完整的加載路徑為pages/home/home。home.js這個(gè)腳本的文件名也可以隨便起，但是習(xí)慣上跟頁(yè)面目錄同名。

第四步，新建pages/home子目錄。

$ mkdir -p pages/home

然后，在這個(gè)目錄里面新建一個(gè)腳本文件home.js。該文件的內(nèi)容如下。

Page({});

上面代碼中，Page()由小程序原生提供，它是一個(gè)函數(shù)，用于初始化一個(gè)頁(yè)面實(shí)例。它的參數(shù)是一個(gè)配置對(duì)象，用于設(shè)置當(dāng)前頁(yè)面的行為屬性。這里是一個(gè)空對(duì)象，表示不設(shè)置任何屬性。

第五步，在pages/home目錄新建一個(gè)home.wxml文件。WXML 是微信頁(yè)面標(biāo)簽語(yǔ)言，類似于 HTML 語(yǔ)言，用于描述小程序的頁(yè)面。

home.wxml的內(nèi)容很簡(jiǎn)單，就寫一行hello world。

hello world

到這一步，就算基本完成了?，F(xiàn)在，打開小程序開發(fā)工具，導(dǎo)入項(xiàng)目目錄wechat-miniprogram-demo。如果一切正常，就可以在開發(fā)者工具里面，看到運(yùn)行結(jié)果了。

點(diǎn)擊工具欄的"預(yù)覽"或"真機(jī)調(diào)試"按鈕，還可以在你的手機(jī)上面，查看真機(jī)運(yùn)行結(jié)果。

這個(gè)示例的完整代碼，可以到代碼倉(cāng)庫(kù)查看。

六、WXML 標(biāo)簽語(yǔ)言

上一節(jié)的home.wxml文件，只寫了賊簡(jiǎn)單的一行hello world。實(shí)際開發(fā)中，不會(huì)這樣寫，而是要加上各種標(biāo)簽，以便后面添加樣式和效果。

小程序的 WXML 語(yǔ)言提供各種頁(yè)面標(biāo)簽。下面，對(duì)home.wxml改造一下，加上兩個(gè)賊常用的標(biāo)簽。

<view>
  <text>hello world</text>
</view>

上面的代碼用到了兩個(gè)標(biāo)簽：<view>和<text>。

<view>標(biāo)簽表示一個(gè)區(qū)塊，用于跟其他區(qū)塊分隔，類似 HTML 語(yǔ)言的<div>標(biāo)簽。<text>表示一段行內(nèi)文本，類似于 HTML 語(yǔ)言的<span>標(biāo)簽，多個(gè)<text>標(biāo)簽之間不會(huì)產(chǎn)生分行。

注意，每個(gè)標(biāo)簽都是成對(duì)使用，需要有閉合標(biāo)記，即標(biāo)簽名前加斜杠表示閉合，比如<view>的閉合標(biāo)記是</view>。如果缺少閉合標(biāo)記，小程序編譯時(shí)會(huì)報(bào)錯(cuò)。

由于我們還沒有為頁(yè)面添加任何樣式，所以頁(yè)面的渲染效果跟上一節(jié)是一樣的。后面添加樣式時(shí)，大家就可以看到標(biāo)簽的巨大作用。

七、小程序的項(xiàng)目結(jié)構(gòu)

總結(jié)一下，這個(gè)示例一共有4個(gè)文件，項(xiàng)目結(jié)構(gòu)如下。

|- app.json
|- app.js
|- pages
   |- home
      |- home.wxml
      |- home.js

這就是賊簡(jiǎn)單、賊基本的小程序結(jié)構(gòu)。所有的小程序項(xiàng)目都是這個(gè)結(jié)構(gòu)，在上面不斷添加其他內(nèi)容。

這個(gè)結(jié)構(gòu)分成兩層：描述整體程序的頂層 app 腳本，以及描述各個(gè)頁(yè)面的 page 腳本。

八、項(xiàng)目配置文件 app.json

頂層的app.json文件用于整個(gè)項(xiàng)目的配置，對(duì)于所有頁(yè)面都有效。

除了前面提到的必需的pages屬性，app.json文件還有一個(gè)window屬性，用來(lái)設(shè)置小程序的窗口。window屬性的值是一個(gè)對(duì)象，其中有三個(gè)屬性很常用。

• navigationBarBackgroundColor：導(dǎo)航欄的顏色，默認(rèn)為#000000（黑色）。
• navigationBarTextStyle：導(dǎo)航欄的文字顏色，只支持black（黑色）或white（白色），默認(rèn)為white。
• navigationBarTitleText：導(dǎo)航欄的文字，默認(rèn)為空。

下面，改一下前面的app.json，加入window屬性。

{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程序 Demo"     
  }
}

上面代碼中，window屬性設(shè)置導(dǎo)航欄的背景顏色為紅色（#ff0000），文本顏色為白色（white），標(biāo)題文字為"小程序 Demo"。

開發(fā)者工具導(dǎo)入項(xiàng)目代碼，就可以看到導(dǎo)航欄變掉了。

這個(gè)示例的完整代碼，可以到代碼倉(cāng)庫(kù)查看。

除了窗口的樣式，很多小程序的頂部或尾部，還有選項(xiàng)欄，可以切換到不同的選項(xiàng)卡。

這個(gè)選項(xiàng)欄，也是在app.json里面設(shè)置，使用tabBar屬性，這里就不展開了。

如果你看到了結(jié)尾，說明真的對(duì)小程序開發(fā)非常感興趣。今天就講到這里，下一篇教程將講解如何設(shè)置基本的頁(yè)面樣式，做出用戶界面 UI。

（完）