用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

沙尔克04对汉诺威96:用小程序·云開發輕松構建二手書商城小程序

汉诺威96升级 www.wikuss.com.cn Rolan 2019-9-30 00:09

“拱手讓書,智慧相傳。本文將帶大家使用云開發快速開發完整的校園二手書商城“導語很多大學有個普遍現象,畢業或者搬校區的時候,成堆成堆的書都被隨便處理掉,作為過來人,每每想到都十分痛心可惜,而導致這種情況 ...

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

導語

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

一:登錄注冊頁

目前小程序有了詳細的登錄規范,參考官方示例,本程序的登錄入口做了以下處理:

  1. 在需要涉及用戶信息的部分,進行Modal提示進入,比如:游客發布、購買等
  2. 個人中心,未登錄默認顯示”點擊登錄“按鈕

好了,先來看看登錄頁面效果圖吧:

  • 手機號獲?。ㄏ喙卮耄?/li>
<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組件

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

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

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

  • 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這個???,詳細介紹:

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

在小程序中的實例使用,可以參考之前社區之前發布的文章:

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

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

  • 發送通知

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

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

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

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

https://cloud.tencent.com/pro...

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

  1. 配置云函數

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

五、啟動頁設計

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

哪些元素?

  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相關內容,到時候再回過頭來看你會發現“原來如此”。

源碼地址

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

分享至 : QQ空間
收藏
原作者: CloudBase 來自: segmentfault