用小程序·雲開發輕鬆構建二手書商城小程序丨實戰

「拱手讓書，智慧相傳。本文將帶你們使用雲開發快速開發完整的校園二手書商城「

導語

不少大學有個廣泛現象，畢業或者搬校區的時候，成堆成堆的書都被隨便處理掉，做爲過來人，往往想到都十分痛心惋惜，而致使這種狀況發生的緣由，我認爲主要仍是歸結學校緣由，一方面沒有提供靠譜便利的平臺，另外一方面，宣傳不到位，基於此開發了這款小程序。下面挑了些開發過程當中遇到的典型來說解實現過程，感興趣能夠一覽......

一：登陸註冊頁

目前小程序有了詳細的登陸規範，參考官方示例，本程序的登陸入口作了如下處理：

1. 在須要涉及用戶信息的部分，進行Modal提示進入，好比：遊客發佈、購買等
2. 我的中心，未登陸默認顯示」點擊登陸「按鈕

好了，先來看看登陸頁面效果圖吧：

• 手機號獲取（相關代碼）：

<button class="phone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
                  <block wx:if="{{phone==''}}"> 請點擊獲取您的手機號</block>
                  <block wx:if="{{phone!==''}}"> {{phone}}</block>
                  <image wx:if="{{phone==''}}" class="right" src="/images/right.png" />
</button>
複製代碼

//獲取用戶手機號
      getPhoneNumber: function(e) {
            let that = this;
            //判斷用戶是否受權確認
            if (!e.detail.errMsg || e.detail.errMsg != "getPhoneNumber:ok") {
                  wx.showToast({
                        title: '獲取手機號失敗',
                        icon: 'none'
                  })
                  return;
            }
            wx.showLoading({
                  title: '獲取手機號中...',
            })
            wx.login({
                  success(re) {
                        wx.cloud.callFunction({
                              name: 'regist', // 對應雲函數名
                              data: {
                                    $url: "phone", //雲函數路由參數
                                    encryptedData: e.detail.encryptedData,
                                    iv: e.detail.iv,
                                    code: re.code
                              },
                              success: res => {
                                    wx.hideLoading();
                                    //獲取成功，設置手機號碼
                                    that.setData({
                                          phone: res.result.data.phoneNumber
                                    })
                              },
                        })
                  },
            })
      },
複製代碼

1. 此處僅展現前端部分核心代碼，手機號獲取涉及到解密過程，須要配合雲函數實現，具體的請參考完整demo註冊頁代碼
2. 目前該接口針對非我的開發者，且完成了認證的小程序開放（不包含海外主體）。

• 經常使用聯繫方式的校檢：

if (!(/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email))) {
                  wx.showToast({
                        title: '請輸入經常使用郵箱',
                        icon: 'none'
                  });
                  return false;
            }
複製代碼

同理相關正則：

//手機號
/^[1][3,4,5,6,7,8,9][0-9]{9}$/
//QQ號
/^\s*[.0-9]{5,11}\s*$/
//微信號
/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/
複製代碼

目前經常使用手機號，彷佛就差10和12字段的沒有了。

二：發佈信息頁

• 步驟條實現

發佈頁有幾個小地方值得留意：

1. 頂部的步驟條，隨操做流程一直在變。
2. 步驟改變時，有個橫向切換動畫
3. 價格設置，使用了步進器

剛剛上面之因此說這幾個點，由於他們都是同出一源--vant組件

此組件的使用教程可直接看對應官網

youzan.github.io/vant-weapp/

使用組件開發效率會高不少，避免重複工做，同時能夠參考部分組件的寫法，仍是有不少值得學習的地方的。

• textarea小注意

步驟二中備註信息那裏使用了層級最高的原生組件textarea，這裏有個特別使用注意項：若是下面tabbar是本身寫的而非使用的自帶原生的tabbar，會出現穿透現象，以下圖示例：

我經常使用的解決辦法，經過動態改變textarea的聚焦情況，當點擊該區域時，設置聚焦顯示真實textarea，當失焦以後，展現爲view層，代碼以下：

<view class="beibox">
      <view wx:if="{{!focus}}" bindtap="focus" >{{beizhu?beizhu:'請輸入信息'}}</view>
      <textarea wx:if="{{focus}}" focus="{{focus}}" bindblur="loose" bindinput="beiInput" value="{{beizhu}}"></textarea>
</view>
複製代碼

data: {
            beizhu:'',
            focus: false //默認不聚焦
      }
    //點擊聚焦顯示textarea隱藏view
      focus() {
            let that = this;
            that.setData({
                  focus: true
            })
      },
      //失焦隱藏textarea顯示view
      loose() {
            let that = this;
            that.setData({
                  focus: false
            })
      },

複製代碼

三：首頁

上面左圖是首頁的進入後的初始樣式，右圖是下滑以後的動態頁面，關於頁面的樣式佈局方面，使用flex能夠輕鬆搞定，咱們重點說下面這點：

• 監控屏幕滾動實現動態響應

在上圖第二張示例圖中，隨着頁面下滑，頂部分類欄也隨之置頂，下方也出現了一個返回頂部按鈕，實現原理：

監控屏幕下滑高度，當大於咱們設定的某個值時，元素進行渲染

這裏咱們須要使用頁面的一個事件處理函數：onPageScroll

//監測屏幕滾動
      onPageScroll: function(e) {
            this.setData({
                  scrollTop: (e.scrollTop) * （wx.getSystemInfoSync().pixelRatio)
            })
      },
複製代碼

1. 函數獲取的是頁面在垂直方向已滾動的距離（單位px），但咱們頁面佈局使用了rpx計算，因此後面咱們乘以設備像素比獲取對應的rpx值
2. 在view視圖層中經過wx:if或者hidden進行控制顯隱，區別在於：wx:if每次隱藏都是銷燬了，而hidden只是不呈現，但依舊渲染到頁面，具體的使用效果，可查看視圖調試處的效果。

下面給個完整的返回頂部示例

<view class="totop" bindtap="gotop" hidden="{{ scrollTop<500 }}">
       <image lazy-load src="/images/top.png" />
</view>
複製代碼

data: {
            scrollTop: 0 //初始滾動高度爲0
      },
        //監測屏幕滾動
      onPageScroll: function(e) {
          this.setData({
              scrollTop: parseInt((e.scrollTop) * wx.getSystemInfoSync().pixelRatio)
          })
      },
      //返回頂部
      gotop() {
            wx.pageScrollTo({
                  scrollTop: 0
            })
      },
複製代碼

四：詳情頁面

1. 小程序佈局只要掌握一個flex，基本上就夠了，因此這裏不過多闡述樣式問題，到時候若是有疑問可查看完整demo，都有註釋的。

2. 由於此小程序的使用對象及功用限制，因此和完整的商城相比少了一個購物車功能，支付購買在商品詳情頁即完成了，這裏涉及到兩個點，一是下單購買，二是購買以後的通知問題。

• 小程序內支付提現

不只僅是支付包括提現，此程序都藉助了tenpay這個模塊，詳細介紹：

www.npmjs.com/package/ten…

在小程序中的實例使用，能夠參考以前社區以前發佈的文章：

10行代碼實現小程序支付功能！丨實戰

固然，以前文章是教你們如何實現支付，關於提現流程也同樣，先去看看tenpay的商戶付款到餘額的說明，再看一下此程序的相關代碼，讀一遍準能懂。

• 發送通知

1. 此程序通知分爲兩類：短信通知、郵件通知
2. 使用場景：用戶下單後，對賣家進行短信+郵件通知，下單後訂單狀態改變使用郵件通知。

說一點題外話：小程序有一個自帶的模板通知，在用戶主動觸發後7天內能推送模板信息，以前寫這個程序的時候慎重考慮過，最後仍是捨棄了，畢竟七天時間，不是每本書都那麼暢銷的。

郵件只須要有一個帳戶便可，短信通知倒是要成本的，固然效果要比郵件好，配置起來的話，難度都同樣，咱們就以短信爲例：

1. 首先去騰訊雲申請短信API:

cloud.tencent.com/product/sms

按照提示操做，設置好短信簽名，模板等。

2. 配置雲函數

新建sms雲函數，代碼以下：

const cloud = require('wx-server-sdk')
    const QcloudSms = require("qcloudsms_js")
    const envid = 'zf-shcud'; //雲開發環境id
    const appid = 140000001 // 替換成您申請的雲短信 AppID 以及 AppKey
    const appkey = "abcdefghijkl123445"
    const templateId = 1234 // 替換成您所申請模板 ID
    const smsSign = "騰訊雲" // 替換成您所申請的簽名
    cloud.init({
      env: envid,
    })
    // 雲函數入口函數
    exports.main = async (event, context) => new Promise((resolve, reject) => {    
      /*單發短信示例爲完整示例，更多功能請直接替換如下代碼*/
      var qcloudsms = QcloudSms(appid, appkey);
      var ssender = qcloudsms.SmsSingleSender();
      var params = ["測試內容"];
      // 獲取發送短信的手機號碼
      var mobile = event.mobile
      // 獲取手機號國家/地區碼
      var nationcode = event.nationcode
      ssender.sendWithParam(nationcode, mobile, templateId, params, smsSign, "", "", (err, res, resData) => {
          /*設置請求回調處理, 這裏只是演示，您須要自定義相應處理邏輯*/
          if (err) {
            console.log("err: ", err);
            reject({ err })
          } else {
            resolve({ res: res.req, resData })
          }
        }
      );
    })
複製代碼

提一個小點：在有多個雲環境時候，若是涉及到查詢雲數據庫等和雲環境有直接干係的操做時候，最好在cloud.init({env: envid})這裏聲明一下環境，不然有小概率報錯。

5、啓動頁設計

啓動頁也算本程序一個亮點，首次進入就是一張美美的圖給人一種身心愉悅之感，下面咱們就詳細說說這個怎麼作：

哪些元素？

1. 全屏背景圖
2. 倒計時跳轉

說這個以前，你們注意一下整個頁面是全屏了的，因此這裏咱們要配置一下頁面參數：

在此頁面的.json中這麼配置：

{
  "navigationStyle":"custom"
}
複製代碼

這就成功全屏了，接着咱們來編寫頁面樣式：

<view class="contain">
     <view class="go">
             <button bindtap="go">跳過{{count}}s</button> 
     </view>
     <image class="bg" src="{{bgurl}}"></image>
</view>
複製代碼

.contain {
      width: 100%;
      height: 100%;
      position: relative;
}
.bg {
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      width: 100%;
      height: 100%;
      z-index: -1;
}
.go {
      position: absolute;
      right: 30rpx;
      top: 150rpx;  
      z-index: 9;
}
.go button {
      font-size: 28rpx;
      letter-spacing: 4rpx;
      border-radius: 30rpx;
      color: #000;
      background: rgba(255, 255, 255, 0.781);
       display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 160rpx;
      height: 60rpx;
}

複製代碼

樣式快速搞定，再來講說js部分。

• 倒計時功能：

countDown: function() {
            let that = this;
            let total = 3;//倒計時總數3秒
            this.interval = setInterval(function() {
                  total > 0 && (total--, that.setData({
                        count: total
                  })), 0 === total && (that.setData({
                        count: total
                  }), wx.switchTab({
                        url: "/pages/index/index"
                  }), clearInterval(that.interval));
            }, 1e3);
      },
複製代碼

• 背景圖

1. 實現有兩種辦法，第一是本地路徑，第二是引用遠程地址（可經過接口動態改變）

2. 第一種好處是直接使用本地圖片，加載速度快，第二種能夠隨時更換啓動圖，兩種辦法都試過了，最終我建議仍是採用第一種辦法，使用本地圖片，若是使用遠程地址，首次進入會出現短期白屏，體驗很差，固然，你也能夠想辦法把圖片壓縮再壓縮，那就不存在加載慢了，但分辨率又成了個問題，因此具體如何使用，仍是根據產品需求。

總結

紙上得來終覺淺，絕知此事要躬行，以上總結的是開發此程序中我認爲遇到的典型問題，實踐過程當中確定會有更多有意思的問題的出現，「面向百度」編程是一個方面，但我更建議「面向官方文檔」，不少問題其實官方文檔中都有很詳細的說明和代碼示例，若是閱讀文檔頗感費力，我建議你該靜下心來，先熟悉下html,css,javascript相關內容，到時候再回過頭來看你會發現「原來如此」。

---

若是你想要了解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊云云開發】公衆號～