摘要：寫在前面自從微信小程序功能發(fā)布后，我就一直關(guān)注著小程序的動向，然而限于學(xué)業(yè)繁忙，總是沒有太多的時間去學(xué)習(xí)。準(zhǔn)備工作注冊微信小程序賬號點擊傳送門立馬注冊微信小程序賬號。微信官方一般會在日之內(nèi)完成審核，我新注冊的小程序?qū)徍擞昧藘商鞎r間。

自從微信小程序功能發(fā)布后，我就一直關(guān)注著小程序的動向，然而限于學(xué)業(yè)繁忙，總是沒有太多的時間去學(xué)習(xí)。大二逐漸學(xué)習(xí)了Vuejs，被其簡潔的設(shè)計所吸引，后來看了看小程序的開發(fā)文檔，發(fā)現(xiàn)這么的相似？可能前端的發(fā)展趨勢就是這樣的吧，各個框架都趨向于相似的優(yōu)秀的設(shè)計。

大三逐漸學(xué)習(xí)了Go語言，為了練習(xí)Go語言，同時也將自己幾年來積累的東西聚合在一起，于是開發(fā)了微信小程序：We中南（可以去微信搜索，雖然現(xiàn)在畢業(yè)已經(jīng)不打算維護了），其聚合了中南大學(xué)校內(nèi)常見的信息查詢功能，如：成績課表查詢、校車校歷查詢等項目已經(jīng)在我的Github開源：前端、后端。

今年暑假的某天突然心血來潮，看了下We中南的數(shù)據(jù)統(tǒng)計，發(fā)現(xiàn)還是有人用的，在沒有推廣的情況下居然增加了好幾百的訪問量（突然的感動），同時發(fā)現(xiàn)小程序支持云函數(shù)開發(fā)了，也就是說對于小型的小程序不必使用后端服務(wù)器，直接使用其提供的nodejs環(huán)境進行開發(fā)。

經(jīng)過這些天的摸索，我想把自己從小程序注冊到上架的全過程分享出來，供準(zhǔn)備學(xué)習(xí)小程序的同學(xué)參考。

點擊傳送門立馬注冊微信小程序賬號。點進去后會看到如下界面，選擇注冊類型時要選擇微信小程序。

接著填寫相關(guān)的信息即可完成注冊。

在完成注冊后，切換到開發(fā)->開發(fā)設(shè)置,可以查看開發(fā)者ID。

進入傳送門，下載安裝最新版的開發(fā)者工具。使用開發(fā)者工具，開發(fā)者可以完成小程序的 API 和頁面的開發(fā)調(diào)試、代碼查看和編輯、小程序預(yù)覽和發(fā)布等功能。

關(guān)于IDE使用方法的界面，可以詳細參考官方文檔

接著打開開發(fā)者工具，修改項目名稱，填入上面說的AppID，后端服務(wù)選擇小程序云開發(fā)。

新建項目后我們可以看到，IDE已經(jīng)幫我們新建了一個包含云函數(shù)開發(fā)的小程序模板，還提供了一些功能測試界面。
此時我們并沒有開通云開發(fā)，需要點擊IDE左上角的“云開發(fā)”，然后選擇開通云服務(wù)。

項目分為兩個子文件夾，一個為cloudfunctions，里面包含小程序的云函數(shù)，一個子文件夾包含一個云函數(shù)；另一個為miniprogram，是小程序的前端文件夾，沒有固定的文件夾格式，完全可以通過對app.json進行修改定制自己的文件夾。具體文件的介紹可以參考官方文檔

打開miniprogram文件夾下的app.json,其定義了小程序的基本信息。
下面是我的小程序的app.json，我將示例里無關(guān)的頁面都刪除了，添加了index主界面和detail詳情頁。

關(guān)于示例項目的修改：可以直接將pages目錄下除index外的頁面都刪除，將style、images文件夾下的文件都刪除。

{
  "pages": [
    "pages/index/index",
    "pages/detail/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "SCI IF期刊影響因子查詢2019",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

云函數(shù)最大的優(yōu)勢便是無需購買服務(wù)器，無需注冊域名，并無需配置SSL證書，真正達到了開箱即用。
在cloudfunctions目錄上又見新建nodejs云函數(shù)，即可創(chuàng)建一個新的云函數(shù)，其包含了兩個文件：package.json、index.js

package.json為一個標(biāo)準(zhǔn)的npm包，index.js為云函數(shù)的主文件。下面是新建云函數(shù)的初始內(nèi)容，可以看到其首先引入了wx-server-sdk，它為小程序提供了操作云數(shù)據(jù)庫的能力，接著初始化云函數(shù)，export云函數(shù)內(nèi)容。

// 云函數(shù)入口文件
const cloud = require("wx-server-sdk")

cloud.init()

// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

需要說明的是：云函數(shù)包含幾乎完整的nodejs環(huán)境，因此一些常見的nodejs庫如：requests、chreeio等都可以通過package.json添加，使用。

本文的小程序為SCI期刊影響因子查詢的小程序，邏輯較為簡單，后端僅需要提供一個期刊查詢接口，為前端提供相應(yīng)期刊的影響因子即可。

新建云函數(shù)http_get

引入相關(guān)類庫。在終端中打開云函數(shù)http_get的目錄，接著安裝依賴庫。由于此函數(shù)利用了第三方的查詢接口，因此需要使用http請求庫got和http解析庫cheerio。具體操作如下

cd /path/to/your/cloudfunctions
npm install //安裝wx-cloud-server
npm install got --save
npm install cheerio --save

為函數(shù)添加功能。此處主要是加載相關(guān)類庫，解析html，然后將結(jié)果編碼為json返回客戶端。

// 加載相關(guān)類庫
const cloud = require("wx-server-sdk")
const got = require("got")
const querystring = require("querystring")
const cheerio = require("cheerio")
cloud.init()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  //sci影響因子查詢接口
  const sci_url = "some url"
  //獲取期刊名稱
  let sciname = event.sciname
  let querys = querystring.stringify({ q: sciname, sci: 1 });
  //請求數(shù)據(jù)
  let resp = await got(sci_url + String(querys))
  //解析html
  const $ = cheerio.load(resp.body)
  const lists = $(".tb1 tr")
  //判斷是否存在查詢期刊
  if (lists.children().length == 0) {
    return -1
  }else{
    let jounalLists = lists.map((i, item) => {
      return {
        //期刊編號
        no: $(item).children().eq(0).text(),
        //省略部分內(nèi)容，解析html參數(shù)
        //影響因子解析
        if: $(item).children().eq(7).text(),
      }
    }).get()
    return jounalLists //返回解析結(jié)果
  }
}

調(diào)試云函數(shù)。云函數(shù)的調(diào)試可以通過云端調(diào)試：IDE界面->云開發(fā)->云函數(shù)，選擇相應(yīng)的云函數(shù)即可進行調(diào)試。點擊調(diào)試后即可返回調(diào)試結(jié)果，可以根據(jù)結(jié)果對函數(shù)進行修改。

同時也可以通過本地環(huán)境調(diào)試云函數(shù)：在cloudfunctions下相應(yīng)函數(shù)文件夾點擊“本地調(diào)試”即可進行調(diào)試，相比于云端調(diào)試，本地調(diào)試更加便捷，也無需每次調(diào)試前上傳云函數(shù)到服務(wù)器。但需要注意的是：請在云函數(shù)目錄下執(zhí)行npm install完成相關(guān)類庫安裝，然后才能進行調(diào)試。

小程序的每個頁面都包含四個文件：.js、.json、.wxml、wxss。js負責(zé)程序邏輯、json配置頁面參數(shù)、wxml定義頁面結(jié)構(gòu)、wxss定義頁面樣式。這就相當(dāng)于將HTML頁面拆分為.html、.css、.js。
由于小程序是運行在微信內(nèi)的webview環(huán)境，因此其語法與html有所不同，可以參考官方文檔：傳送門
，為了方便頁面構(gòu)建，本文引入了一個第三方類庫：Vant，其提供了精美的界面元素，開箱即用，詳細使用方法可以參見vant官方文檔。
最終小程序主界面如下所示：

其對應(yīng)的代碼如下：

頁面結(jié)構(gòu)

  
    
    
  
  

  
  查詢
  
  
    
      
          
      
    
  

頁面邏輯：

//index.js
const app = getApp()
Page({
  data: {
    isQuery:false,
    sciname:"",
    sci:[],
  },
  onValueChange:function(value){
    this.setData({
      sciname:value.detail
    })
  },
  onClickQuery:function(){
    var _this = this
    this.setData({
      isQuery:true
    })
    console.log("begin"+_this.data.sciname)
    wx.cloud.callFunction({
      name: "http_get",
      data: {
        sciname:_this.data.sciname
      },
      success:res=>{
        //未查到
        if(res.result==-1){
           wx.showModal({
             title: "提示",
             content: "未查詢到相關(guān)信息，換個關(guān)鍵詞試試？",
           }) 
        }else{
          wx.setStorageSync("scis", res.result)
          _this.setData({
            sci:res.result
          })
        }
        _this.setData({
          isQuery: false
        })
      },
      fail:err=>{
        _this.setData({
          isQuery: false
        })
        console.log(err)
      },
    })
  },
  onLoad: function() {
  },
//省略部分代碼
})

按照同樣的方式，我又添加了詳情頁，對于每一本期刊的詳細信息進行展示。

首先對于每個云函數(shù)，都要右鍵，點擊“上傳并部署：云端安裝依賴”（當(dāng)然上傳并部署所有文件也可以）。接著點擊IDE右上角的上傳，填寫版本信息，即可完成上傳。

登錄到微信公眾平臺的管理界面，切換到版本管理，我們便可以看到已經(jīng)提交的版本。

在管理界面首頁寫著小程序發(fā)布流程，我們需要先補充小程序的基本信息，如名稱、圖標(biāo)、描述等，當(dāng)小程序信息。微信官方一般會在7日之內(nèi)完成審核，我新注冊的小程序?qū)徍擞昧藘商鞎r間。

審核完成之后，即可提交審核。切換到版本管理界面，對剛剛上傳的版本提交審核，注明版本信息即可。審核也需要幾天的時間。

由于已經(jīng)有過一次開發(fā)經(jīng)驗，本次的注冊和編碼工作只用了一個下午，但程序?qū)徍舜_實十分的耗時，需要耐心的等待。

本程序也發(fā)布在github上了：傳送門