小程序雲開發：菜鳥也能全棧作產品

我想獨立實現一個全棧產品爲何這麼難

平常生活中，咱們會使用不少軟件產品。在使用這些產品的時候，咱們看得見的東西稱爲「前端界面」如一個輸入框、一個按鈕，點擊按鈕以後發生的一切看不見的東西稱爲「後端服務」。與之對應的創造者分別稱爲「前端程序員」、「後端程序員」，然而，一個完整產品的開發不只僅是隻有前端和後端，還有設計師，架構師，運維等。有沒有可能這些全部的事情都一我的幹呢？有可能，事實上現在就有不少的「全棧工程師」，他們身兼數職，是多面手。能獨立完成一個產品的方方面面。這種人當然十分了得，他們一般具備多年的經驗，涉獵普遍，是老手，也是高手，當有一個產品想法的時候，他們能夠用本身的全面專業技能，盡情的發揮去實現本身的想法。因此，從某種意義上講「全棧也是一種自由」，你能夠自由的實現你的想法，這簡直太美妙了！

然而，不少時候當咱們有一個產品想法的時候，咱們每每發現，前端寫完了，後端怎麼搞？數據庫怎麼搞？域名怎麼搞？域名還要備案？應用部署怎麼搞？個人買什麼樣的服務器啊？靜態資源 CDN 怎麼搞？文件上傳服務器怎麼搞？萬一訪問用戶多了能撐住嗎？等等……問題不少，致使你的一個個想法，都只是在腦海中曇花一現，歷來都沒法將她們實現，或者說你激情飽滿的實現了其中本身最擅長的一部分，當碰到其餘難題的時候就止步了。因而仰天長嘯：我就想獨立作一個完整的產品爲何這麼難？年輕人，這一切都不怪你……

破局：小程序雲開發

爲何使用小程序雲開發來破局？

爲啥是用「小程序雲開發」來破局？首先，咱們的目的是全棧實現一個產品。全棧能夠有多種技術方案，你可用任何你能會的技能來達到全棧的目的。你能夠開發安卓，IOS，或者 PC 站，然而小程序是最實際的！爲啥？手機上能作的事情爲啥要用 PC 版？OK,既然手機版比較好，那能不能再簡單一點？能，就是小程序，不須要開發IOS，安卓兩個版本。能夠快速產出，快速試錯。

其次，前面說到了，全棧實現一個產品並不容易，對不少人來講甚至是巨難！選擇了小程序已是比較划算的方案。而再集成雲開發，全棧立馬就有了。這就是爲何選擇「小程序雲開發」來破局。

小程序雲開發是什麼?

小程序雲開發是什麼？官方文檔是這麼說的：開發者可使用雲開發開發微信小程序、小遊戲，無需搭建服務器，便可使用雲端能力。雲開發爲開發者提供完整的原生雲端支持和微信服務支持，弱化後端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，便可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互兼容，並不互斥。

看完上面的描述，也許你仍然沒法很是清楚的知道什麼是「小程序雲開發」，不要緊，你只須要注意加粗的部分，大概知道它「無需搭建服務器」，從傳統觀念將，這個彷佛「毀三觀」咋可能沒服務器啊？是的，能夠沒有傳統意義上的服務器，這種模式是 serveless 的。

那麼，小程序雲開發提供了哪些東西來破局呢？且看下面的表格：

能 力	做 用	說 明
雲函數	無需自建服務器	在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
數據庫	無需自建數據庫	一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
存儲	無需自建存儲和 CDN	在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理
雲調用	原生微信服務集成	基於雲函數免鑑權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力

上面的表格中提到了「雲開發」中的一些能力：「雲函數」，「數據庫」，「存儲」，「雲調用」，咱們能夠將這些詞帶入你曾經開發過的應用，看看它們分別表明了哪些部分。對於程序員來講，若是有疑問的話，沒有什麼是一個 helloword 解決不了的。

實戰：獨立開發一個簡易的零售小程序

哆嗦再多，不如實戰。下面咱們就來使用小程序雲開發實現一個簡單的零售小程序。

項目構思

既然是一個零售小程序，那麼咱們能夠思考一下零售小程序的大體業務流程，以及粗略的梳理一下，其功能點。現根據本身的想法，大體畫一下草圖，若是沒有靈感能夠參考一下別的 APP 是如何設計的。

我根據本身的想法設計以後是這樣的：

功能模塊：首頁，商品列表頁，購物車，確認訂單，我的中心，我的訂單，管你模塊（商品添加，分類添加）其中商品須要上傳圖片。

梳理完功能以後，咱們對於要實現的東西已經有個初步的概念了。接下來，咱們須要大概畫一下頁面設計、及功能流轉。初次設計可能沒有太多經驗，不要緊，開始作就好了，作着作着就會想法愈來愈多，而後優化的愈來愈好。。我也是通過了多番修改調整，最終找到了一些思路。個人（拙劣）設計以下，圖片若是看不清楚可複製圖片連接在新窗口打開查看：

說明，以上圖片是根據成品（我真的開發了一個雲小程序並上線使用了）截圖的，而實際我再設計的時候也是通過幾番修改才最終定成這樣。

同時，補充說明一下，這裏前端頁面使用的是 vant-weapp控件，很是好用。推薦！若是你和我同樣是一個純後端程序員，建議使用 vant-weapp 來做爲 ui，很是方便。不然本身寫頁面樣式的話可能就作不出來了。全棧不是那麼好乾的啊。選擇本身能駕馭的，能實現最終功能，就是一個合格的全棧。

建立小程序雲開發項目

咱們先下載微信小程序開發工具，下載地址在這裏,安裝好了以後，新建項目，界面以下，APPID 須要你本身去註冊一個。而後注意，選擇「小程序雲開發」，以下圖所示：

建立好了以後，項目目錄以下,先看 1 標註的地方：

若是你曾經有太小程序的開發經驗，那麼miniprogram文件夾下面的結構你確定熟悉了，miniprogram下面的子目錄分別是小程序對應的組件、圖片、頁面、樣式以及app.js,app.json,sitemap.json,其中components下面的vant-weapp就是上面提到的 ui 組件。

最後一個比較重要的文件夾就是cloudfunctions，這個目錄是用來存放「雲函數的」，雲函數就是咱們的後端。每個雲函數提供一個服務。一個個的雲函數組成了咱們總體的後端服務。雲函數能夠看作是 FaaS（function as a service）。途中，2 標記的位置的「雲開發」按鈕，咱們點進去，就能夠看到「雲開發的控制檯」，以下圖所示：

若是上圖看不清楚，能夠複製連接到新的瀏覽器窗口查看，如圖，小程序雲開發默認的免費套餐有必定的額度可供使用。首頁即是使用統計。而後咱們能看到，有「數據庫」，「存儲」，「雲函數」。

這裏的「數據庫」其實就是相似於一個 MongoDB，你能夠點進去建立一個個的 collection（即：關係型數據庫中的table）;這裏的「存儲」其實就是「文件夾」，咱們能夠經過微信提供的 api把圖片上傳到「存儲」中；這裏的「雲函數」就是咱們須要實現的後端業務邏輯，他就是一個個的函數（函數由咱們本身寫好後上傳）。通常開發過程當中咱們在開發者工具中的cloudfunctions目錄下建立雲函數（比方說是:user-add）開發完成以後在雲函數目錄點擊右鍵——上傳便可。而後就能夠在小程序的代碼中調用這個user-add雲函數。

雲開發之——3 分鐘實現文件上傳

注意：在開始雲開發以前，咱們如今 小程序代碼的 app.js 中加入wx.cloud.init,以下：

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({
        // env 參數說明：
        //   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪一個雲環境的資源
        //   此處請填入環境 ID, 環境 ID 可打開雲控制檯查看
        //   如不填則使用默認環境（第一個建立的環境）
        env: 'your-env-id',
        traceUser: true,
      })
    }
    this.globalData = {}
  }
})

上面的圖中，咱們已經看到了「商品添加」頁面的效果，它須要咱們輸入商品名稱、價格、並上傳圖片，而後保存。傳統架構中，上傳圖片須要前端頁面擺一個控件，而後後端提供一個 api用來接收前端傳來的文件，一般來講這個後端 api 接收到圖片以後，會將圖片文件保存到本身的文件服務器或者是阿里雲存儲、或者是七牛雲存儲之類的。而後返回給你一個文件連接地址。很是麻煩，然而，小程序雲開發上傳文件超級簡單，上代碼：

頁面代碼：
<van-notice-bar
  scrollable="false"
  text="發佈商品"
/>
  <van-field
    value="{{ productName }}"
    required
    clearable
    label="商品名稱"
    placeholder="請輸入商品名稱"
    bind:change="inputName"
  />
    <van-field
    value="{{ productPrice }}"
    required
    clearable
    label="價格"
    icon="question-o"
     bind:click-icon="onClickPhoneIcon"
    placeholder="請輸入價格"
    error-message="{{phoneerr}}"
    border="{{ false }}"
    bind:change="inputPrice"
  />

<van-action-sheet
  required
  show="{{ showSelect }}"
  actions="{{ actions }}"
  close-on-click-overlay="true"
  bind:close="toggleSelect"
  bind:select="onSelect" cancel-text="取消"
/>
  <van-field
    value="{{ productCategory }}"
    center
    readonly
    label="商品分類"
    border="{{ false }}"
    use-button-slot
  >
    <van-button slot="button" size="small" plain type="primary"  
     bind:click="toggleSelect">選擇分類</van-button>
  </van-field>
  
  <van-button class="rightside" type="default" bind:click="uploadImage" >上傳商品圖片</van-button>
  <view class="imagePreview">
    <image src="{{productImg}}" />
  </view>
 <van-submit-bar
  price="{{ totalShow }}"
  button-text="提交"
  bind:submit="onSubmit"
  tip="{{ false }}"
 >
 </van-submit-bar> 
<van-toast id="van-toast" />
<van-dialog id="van-dialog" />

這裏有個控件，綁定了uploadImage方法，其代碼爲：

uploadImage:function(){
    let that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        wx.showLoading({
          title: '上傳中...',
        })
        const tempFilePath = res.tempFilePaths[0]
        const name = Math.random() * 1000000;
        const cloudPath = name + tempFilePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath:cloudPath,//雲存儲圖片名字
          filePath: tempFilePath,//臨時路徑
          success: res => {
            let fileID = res.fileID;
            that.setData({
              productImg: res.fileID,
            });
            wx.showToast({
              title: '圖片上傳成功',
            })
          },
          fail: e =>{
            wx.showToast({
              title: '上傳失敗',
            })
          },
          complete:()=>{
            wx.hideLoading();
          }
        });
      }
    })
  }

這裏，wx.chooseImage用於調起手機選擇圖片（相冊/相機拍照），而後wx.cloud.uploadFile用於上傳圖片到上面說到的雲開發能力之一的「存儲」中。上傳圖片成功以後返回一個文件 ID，相似：

cloud://release-0kj63.7265-release-0kj63-1300431985/100477.13363146288.jpg

這個連接能夠直接在小程序頁面展現：

<image src="cloud://release-0kj63.7265-release-0kj63-1300431985/100477.13363146288.jpg  " />

也能夠經過微信 api，裝換成 http 形式的圖片連接。

雲開發之——操做數據庫，1 分鐘寫完保存商品到數據庫的代碼

上面咱們實現了商品圖片上傳，可是，商品圖片並無保存到數據庫。正常錄入商品的時候，咱們會填好商品名稱，價格等，而後上傳圖片，最終點擊「保存」按鈕，將商品保存到數據庫。傳統模式下，前端仍然是須要調用一個後端接口，經過 post 提交數據，最終由後端服務（好比 java 服務）將數據保存到數據庫。小程序雲開發使得操做數據庫十分簡單，首先咱們在雲開發控制檯建立「商品表」，即一個 collection,取名爲：products。而後咱們就能夠保存數據到數據庫了，代碼以下：

onSubmit:function(){
    // 校驗代碼，略
    let product = {};
    product.imgId = this.data.productImg;
    product.name= this.data.productName;
    product.categoryId = this.data.productCategoryId;
    product.price = this.data.productPrice;
    // 其餘賦值，略
    const db = wx.cloud.database();
    db.collection('products').add({
     data: product,
     success(res) {
       wx.showToast({
         title: '保存成功',
       })
     }
   });
  }

以上就實現了數據入庫，就這點代碼，超簡單，1 分鐘寫完，誠不欺我。其中這裏的products就是咱們的「商品表」，以前說過，相似 MongoDB 數據庫，這裏操做的是db.collection，這和 MongoDB 的語法差很少。

雲開發之——使用雲函數完成後端業務邏輯，訂單建立

小程序雲開發提供了幾大能力：「數據庫」，「存儲」，「雲函數」，前兩項咱們已經有所體會了。下面咱們能建立一個雲函數來實現訂單建立。這裏說明，雲函數其實就是 一段JavaScript 代碼，上傳至雲服務器以後，最終也是運行在 nodejs 環境的，只是這一切，咱們不須要關心。咱們只須要關心咱們這個雲函數提供的功能是什麼就能夠了。

建立雲函數很簡單，直接在開發工具中右鍵「新建Node.js 雲函數」。而後以建立訂單爲例，假設咱們建立一個雲函數名爲c-order-add,建立好了以後，目錄是這樣：

雲函數的主要代碼在 index.js 中，其完整代碼是這樣：

// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: 'release-xxx'// your-env-id
})
const db = cloud.database()

// 雲函數入口函數
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  console.log("雲函數 c-order-add : ")  
  // 這裏是一些邏輯處理...
  
  return await db.collection('uorder').add({
    data: {
      openid: event.userInfo.openId,
      address: event.address,
      userName: event.userName,
      phone: event.phone,
      shoppingInfo: event.shoppingInfo,
      totlePrice: event.totlePrice,
      shoppingStr: event.shoppingStr,
      remark:event.remark,
      createTime: now,
      // ...
    }
  });
}

這個雲函數寫好以後，須要上傳到服務器，直接在雲函數目錄點擊右鍵，而後點擊「上傳並部署」便可，這就至關於部署好了後端服務。前端小程序頁面調用的寫法是這樣的：

let orderData={};
orderData.userName = this.data.userName;
orderData.phone = this.data.phone;
orderData.address = this.data.address;
// ....
wx.cloud.callFunction({
      // 雲函數名稱
      name: 'c-order-add',
      // 傳給雲函數的參數
      data: orderData,
      complete: res => {
        Dialog.alert({
          title: '提交成功',
          message: '您的訂單成功，即將配送，請保持手機通暢。'
        }).then(() => {
          // ....
          wx.redirectTo({
            url: '../uorder/uorder'
          });
        });
      }
})

這裏，向程序前端，經過wx.cloud.callFunction完成了對雲函數的調用，也能夠理解爲對後端服務的調用。至此咱們咱們介紹完了，小程序雲開發的功能。雖然，我只貼出了少許的代碼，即保存商品，和提交訂單。因爲時間和篇幅有限，我不可能把整個完整的程序代碼貼出來。可是你能夠參照這個用法示例，將剩下的業務邏輯補充完整，最終完成「項目構思」一節中展現的成品截圖效果。

小程序審覈的一點經驗

我開發的小程序審覈在提交審覈的時候遭遇了兩次退回，第一次是由於：「小程序具有電商性質，我的小程序號不支持」。因此，我只好申請了一個企業小程序號，使用的是超市的營業執照。服務類目的選擇也被打回了一次，最後選擇了食品還提交了食品經營許可證。第二次打回是由於：「用戶體驗問題」。其實就是「受權索取」的問題，微信不讓打開首頁就「要求受權」，同時不能強制用戶接受受權，得提供拒絕受權也能使用部分功能。

上面兩條解決以後，更新新了好幾版，都沒有出現過被拒的狀況。而且，有次我是夜晚 10 左右提價的審覈，結果10 點多就提示審覈經過，當時沒看具體時間，就是接盆水泡了個腳的時間審覈經過了。因此，我推斷小程序審覈初次審覈會比較嚴，以後若是改動不大應該直接機審就過了。

總結及對比

這裏咱們能夠對小程序雲開發和傳統模式作一個對比：

對比條目	傳統模式	雲開發
是否須要後端服務	須要 （如一個java應用部署在 Tomcat 中）	不須要 只須要「雲函數」
是否須要域名	須要 （還得在微信後臺的把域名加入安全域名）	不須要
是否須要購買服務器	須要 （你得部署後端 Java 應用，還得安裝數據庫）	不須要 開通雲開發以後免費套餐夠用 不夠的話購買套餐按調用量計費
是否須要懂運維	須要 （你得會折騰服務器，數據庫之類的 還得配置好相關的用戶，端口，啓動服務）	不須要
圖片上傳及 CDN	麻煩	簡單
獲取微信 openID	麻煩	超級簡單，雲函數中直接獲取
···

就對比這麼多吧，總之，我很是喜歡小程序雲開發，小程序真的可讓你輕鬆幹全棧。或者我們別動不動就提「全棧」，姑且說，小程序雲開發可讓你更簡單、更快速、更便宜的實現你的產品落地。我本身開發的雲小程序上線以後，使用了一兩個月，沒出現任何問題。我也不用操心服務器什麼的。因此，我已經給身邊不少人安利了小程序雲開發了。這裏我就不貼出個人小程序碼了，由於已經正式給我同窗的超市使用了，因此不方便讓別人去產生測試數據。若是你感興趣想看的話，能夠聯繫我。