“拱手讓書，智慧相傳。本文將帶大家使用雲開發快速開發完整的校園二手書商城“
導語
很多大學有個普遍現象，畢業或者搬校區的時候，成堆成堆的書都被隨便處理掉，作為過來人，每每想到都十分痛心可惜，而導致這種情況發生的原因，我認為主要還是歸結學校原因，一方面沒有提供靠譜便利的平台，另一方面，宣傳不到位，基於此開發了這款小程序。下面挑了些開發過程中遇到的典型來講解實現過程，感興趣可以一覽......
一：登錄注冊頁
目前小程序有了詳細的登錄規范，參考官方示例，本程序的登錄入口做了以下處理：
- 在需要涉及用戶信息的部分，進行Modal提示進入，比如：游客發布、購買等
- 個人中心，未登錄默認顯示”點擊登錄“按鈕
好了，先來看看登錄頁面效果圖吧：
- 手機號獲取（相關代碼）：
<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字段的沒有了。
二：發布信息頁
- 步驟條實現
發布頁有幾個小地方值得留意：
- 頂部的步驟條，隨操作流程一直在變。
- 步驟改變時，有個橫向切換動畫
- 價格設置，使用了步進器
剛剛上面之所以說這幾個點，因為他們都是同出一源--vant組件
此組件的使用教程可直接看對應官網
https://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)
})
},
- 函數獲取的是頁面在垂直方向已滾動的距離（單位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
})
},
四：詳情頁面
-
小程序布局只要掌握一個flex，基本上就夠了，所以這里不過多闡述樣式問題，到時候如果有疑問可查看完整demo，都有注釋的。
-
因為此小程序的使用對象及功用限制，所以和完整的商城相比少了一個購物車功能，支付購買在商品詳情頁即完成了，這里涉及到兩個點，一是下單購買，二是購買之后的通知問題。
- 小程序內支付提現
不僅僅是支付包括提現，此程序都借助了tenpay這個模塊，詳細介紹：
https://www.npmjs.com/package/tenpay
在小程序中的實例使用，可以參考之前社區之前發布的文章：
當然，之前文章是教大家如何實現支付，關於提現流程也一樣，先去看看tenpay的商戶付款到余額的說明，再看一下此程序的相關代碼，讀一遍准能懂。
- 發送通知
- 此程序通知分為兩類：短信通知、郵件通知
- 使用場景：用戶下單后，對賣家進行短信+郵件通知，下單后訂單狀態改變使用郵件通知。
說一點題外話：小程序有一個自帶的模板通知，在用戶主動觸發后7天內能推送模板信息，之前寫這個程序的時候慎重考慮過，最后還是舍棄了，畢竟七天時間，不是每本書都那么暢銷的。
郵件只需要有一個賬戶即可，短信通知卻是要成本的，當然效果要比郵件好，配置起來的話，難度都一樣，我們就以短信為例：
- 首先去騰訊雲申請短信API:
https://cloud.tencent.com/product/sms
按照提示操作，設置好短信簽名，模板等。
- 配置雲函數
新建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})這里聲明一下環境，否則有小幾率報錯。
五、啟動頁設計
啟動頁也算本程序一個亮點，首次進入就是一張美美的圖給人一種身心愉悅之感，下面我們就詳細說說這個怎么做：
哪些元素？
- 全屏背景圖
- 倒計時跳轉
說這個之前，大家注意一下整個頁面是全屏了的，所以這里我們要配置一下頁面參數：
在此頁面的.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）是一款雲端一體化的產品方案 ，采用 serverless 架構，免環境搭建等運維事務 ，支持一雲多端，助力快速構建小程序、Web應用、移動應用。
技術文檔：https://www.cloudbase.net/
如果你想要了解更多關於雲開發CloudBase相關的技術故事/技術實戰經驗，請掃碼關注【騰訊雲雲開發】公眾號～
