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

2019 年 10 月 8 日
筆記

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

導語

很多大學有個普遍現象，畢業或者搬校區的時候，成堆成堆的書都被隨便處理掉，作為過來人，每每想到都十分痛心可惜，而導致這種情況發生的原因，我認為主要還是歸結學校原因，一方面沒有提供靠譜便利的平台，另一方面，宣傳不到位，基於此開發了這款小程式。下面挑了些開發過程中遇到的典型來講解實現過程，感興趣可以一覽……

一：登錄註冊頁

目前小程式有了詳細的登錄規範，參考官方示例，本程式的登錄入口做了以下處理：

在需要涉及用戶資訊的部分，進行Modal提示進入，比如：遊客發布、購買等
個人中心，未登錄默認顯示」點擊登錄「按鈕

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

undefined

手機號獲取（相關程式碼）：

<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                                      })                                },                          })                    },              })        },

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

常用聯繫方式的校檢：

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欄位的沒有了。

二：發布資訊頁

undefined

步驟條實現

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

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

剛剛上面之所以說這幾個點，因為他們都是同出一源–vant組件

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

https://youzan.github.io/vant-weapp/

使用組件開發效率會高很多，避免重複工作，同時可以參考部分組件的寫法，還是有很多值得學習的地方的。

textarea小注意

步驟二中備註資訊那裡使用了層級最高的原生組件textarea，這裡有個特別使用注意項：如果下面tabbar是自己寫的而非使用的自帶原生的tabbar，會出現穿透現象，如下圖示例：

undefined

我常用的解決辦法，通過動態改變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              })        },

三：首頁

undefined

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

監控螢幕滾動實現動態響應

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

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

這裡我們需要使用頁面的一個事件處理函數：onPageScroll

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

函數獲取的是頁面在垂直方向已滾動的距離（單位px），但我們頁面布局使用了rpx計算，所以後面我們乘以設備像素比獲取對應的rpx值
在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              })        },

四：詳情頁面

undefined

小程式布局只要掌握一個flex，基本上就夠了，所以這裡不過多闡述樣式問題，到時候如果有疑問可查看完整demo，都有注釋的。
因為此小程式的使用對象及功用限制，所以和完整的商城相比少了一個購物車功能，支付購買在商品詳情頁即完成了，這裡涉及到兩個點，一是下單購買，二是購買之後的通知問題。

小程式內支付提現

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

https://www.npmjs.com/package/tenpay

在小程式中的實例使用，可以參考之前社區之前發布的文章：

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

當然，之前文章是教大家如何實現支付，關於提現流程也一樣，先去看看tenpay的商戶付款到餘額的說明，再看一下此程式的相關程式碼，讀一遍准能懂。

發送通知

此程式通知分為兩類：簡訊通知、郵件通知
使用場景：用戶下單後，對賣家進行簡訊+郵件通知，下單後訂單狀態改變使用郵件通知。

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

郵件只需要有一個賬戶即可，簡訊通知卻是要成本的，當然效果要比郵件好，配置起來的話，難度都一樣，我們就以簡訊為例：

首先去騰訊雲申請簡訊API:

https://cloud.tencent.com/product/sms

undefined

按照提示操作，設置好簡訊簽名，模板等。

配置雲函數

新建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})這裡聲明一下環境，否則有小几率報錯。

五、啟動頁設計

undefined

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

哪些元素？

全螢幕背景圖
倒計時跳轉

說這個之前，大家注意一下整個頁面是全螢幕了的，所以這裡我們要配置一下頁面參數：

在此頁面的.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);        },

背景圖

實現有兩種辦法，第一是本地路徑，第二是引用遠程地址（可通過介面動態改變）
第一種好處是直接使用本地圖片，載入速度快，第二種可以隨時更換啟動圖，兩種辦法都試過了，最終我建議還是採用第一種辦法，使用本地圖片，如果使用遠程地址，首次進入會出現短時間白屏，體驗不好，當然，你也可以想辦法把圖片壓縮再壓縮，那就不存在載入慢了，但解析度又成了個問題，所以具體如何使用，還是根據產品需求。

總結

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

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