用雲開發快速製做客戶業務需求收集小程序丨實戰

時間 2019-11-21

原文原文鏈接

1、導語

如何省去企業上門（現場）蒐集客戶需求的環節，節約企業人力和時間成本，將客戶的業務定製需求直接上傳至雲數據庫？雲開發爲咱們提供了這個便利！git

2、需求背景

做爲一名XX公司IT萌萌新，這段時間對小程序開發一直有很是濃厚的興趣，而且感慨於「雲開發·不止於快」的境界。近期工做中，恰好遇見業務部門的一個需求，目的是節約上門跟客戶收集業務定製資料的時間，以往是每變動一次，就須要上門一次，遇見地域較遠的，費時費力，且每每要求幾天內完成上線，時間很是緊迫。所以，結合一直以來對雲開發的各類優點的瞭解，我說服公司領導經過小程序·雲開發來實現。github

下面是其中一項業務定製界面的展現：
（1）業務對業務流程有簡單說明；
（2）相關業務介紹；
（3）不一樣客戶輸入個性化需求；
（4）雲存儲後臺實現需求表單的收集。數據庫

得力於雲開發提供的API和WeUI庫的便利，本項目在我在極短的時間內就實現了比較理想的效果。接下來，我就從本項目入手，講講我是如何依靠小程序·雲開發將想法快速實現的，其實我也是剛入門沒多久，只是想分享一下自身在學習小程序開發項目中的一些知識點和體會，代碼可能略爲粗糙，邏輯也有待優化，歡迎你們在評論區多多交流。小程序

3、開發過程

一、組件

主要使用了官方WeUI擴展能力的一些組件庫來實現主要功能。promise

核心的WeUI庫主要有 Msg、Picker、圖片的Upload等（以快爲目的，節省本身寫CSS樣式的時間，也方便0基礎的同窗上手，這裏又體會到了小程序開發的便捷）。
安全

二、實現代碼

本次雲開發包括雲數據庫、雲存儲兩大功能：服務器

（1）雲數據庫

雲數據庫的主要就是蒐集客戶提交上來的表單信息，包括客戶的聯繫方式和選擇的業務類型等，並存儲在雲數據庫中，方便業務經理蒐集需求。網絡

咱們來看簡單的實現過程：app

首先是表單，用到了 form 表單組件以及它的 bindsubmit 方法，在 wxml 中放置 form 表單：ide

<form bindsubmit="formSubmit">
    <view class="form">
      <view class="section">
        <picker bindchange="bindPickerGsd" mode="selector" value="{{indexGsd}}" range="{{arrayGsd}}">
          <view class="picker">歸屬縣市</view>
          <view class="picker-content" >{{arrayGsd[indexGsd]?arrayGsd[indexGsd]:"(必填項) 請下拉選擇歸屬地"}}</view> 
        </picker>
      </view>    
      <!---中間部分詳見代碼--->
    </view>

    <view class="footer">
      <button class="dz-btn" formType="submit" loading="{{formStatus.submitting}}" disabled="{{formStatus.submitting}}" bindtap="openSuccess">提交</button>
    </view>
  </form>

表單中除了普通的文本輸入，增長有下拉列表的實現（畢竟客戶有時候是比較懶的）。

來看一下具體代碼：

bindPickerGsd: function (e) {    
  console.log('歸屬地已選擇，攜帶值爲', e.detail.value)
  console.log('歸屬地選擇:', this.data.arrayGsd[e.detail.value])    
  this.setData({
     indexGsd: e.detail.value     
   })   
   this.data.formData.home_county = this.data.arrayGsd[e.detail.value]
},

最後表單上傳到雲數據庫：

// 表單提交
  formSubmit: function (e) {
    var minlength = '';
    var maxlength = '';
    console.log("表單內容",e)
    var that = this;
    var formData = e.detail.value;
    var result = this.wxValidate.formCheckAll(formData);
    
    console.log("表單提交formData", formData);
    console.log("表單提交result", result)
    wx.showLoading({
      title: '發佈中...',
    })
    const db = wx.cloud.database()
    db.collection('groupdata').add({
      data: {
        time: getApp().getNowFormatDate(),
        home_county: this.data.formData.home_county,
        group_name: formData.group_name,
        contact_name: formData.contact_name,
        msisdn: formData.msisdn,
        product_name: this.data.formData.product_name,
        word: formData.word,
      },
      success: res => {
        wx.hideLoading()
        console.log('發佈成功', res)

      },
      fail: err => {
        wx.hideLoading()
        wx.showToast({
          icon: 'none',
          title: '網絡不給力....'
        })
        console.error('發佈失敗', err)
      }
    })
  },

（2）雲存儲

由於業務的定製須要填單客戶所在單位的受權證實材料，所以須要提單人（使用人）上傳證實文件，所以增長了使用雲存儲的功能。

核心代碼：

promiseArr.push(new Promise((reslove,reject)=>{
        wx.cloud.uploadFile({
            cloudPath: "groupdata/" + group_name + "/" + app.getNowFormatDate() +suffix,
            filePath:filePath
        }).then(res=>{
            console.log("受權文件上傳成功")          
            })
            reslove()
            }).catch(err=>{
            console.log("受權文件上傳失敗",err)
    })

    由於涉及到不一樣頁面的數據傳遞，即將表單頁面的group_name做爲雲存儲的文件夾用於存儲該客戶在表單中上傳的圖片，所以還須要用到getCurrentPages()來進行頁面間的數據傳遞 

    var pages = getCurrentPages();
    var prePage = pages[pages.length - 2];//pages.length就是該集合長度 -2就是上一個活動的頁面，也便是跳過來的頁面
    var group_name = prePage.data.formData.group_name.value//取上頁data裏的group_name數據用於標識受權文件所存儲文件夾的名稱