實戰(zhàn)：云開發(fā)·實現在線充值小程序

2020-5-3

文章編號：007/100

以前很少寫文章。從今天開始我要挑戰(zhàn)一下自己疼邀，連續(xù)輸出100篇技術類文章喂江。這100篇文章我盡量以實戰(zhàn)案例為主。

如果你覺得本文還不錯旁振，記得關注或者給個 star获询，你們的贊和star是我編寫更多更精彩文章的動力！
GitHub 地址

serverless 在小程序上體現的淋漓盡致规求，開發(fā)體驗太爽了筐付。我發(fā)現用云開發(fā)實現微信支付更為簡單卵惦！

如果你也想學習小程序支付阻肿，但是有沒有商戶號。我的商戶號可以借你用用沮尿，反正里面也沒錢丛塌。我 wx: guzhan321 備注小程序

本文重點內容

小程序布局
云函數實現統一下單接口
功能測試

成品演示

demo_007_1.gif

關鍵技術點

小程序調用統一下單接口

內容大綱

創(chuàng)建小程序
頁面布局
實現云函數接口
頁面聯調

開始擼代碼

創(chuàng)建小程序

使用最新版的微信開發(fā)者工具较解，創(chuàng)建小程序時默認會使用云開發(fā)模板。

demo_007_2.png

剛創(chuàng)建好的云開發(fā)模板就是這樣的赴邻，默認的模板已經實現了一些功能印衔。所以有些是要刪除的

demo_07_3.png

頁面布局

打開 index 頁面，實現基本的頁面布局姥敛，需要將原來的代碼刪掉奸焙。

目錄：/miniprogram/pages/index/index.wxml
<!--index.wxml-->
<view class="container">

<input class="phone" value="{{phone}}" placeholder="請輸入手機號" />

<view class="money" >
  <view><button bindtap="pay" type="primary" data-money="0.01" >0.01</button></view>
  <view><button bindtap="pay" type="primary" data-money="0.02" >0.02</button></view>
  <view><button bindtap="pay" type="primary" data-money="0.03" >0.03</button></view>
</view>
<view class="money" >
  <view><button bindtap="pay" type="primary" data-money="0.04" >0.04</button></view>
  <view><button bindtap="pay" type="primary" data-money="0.05" >0.05</button></view>
  <view><button bindtap="pay" type="primary" data-money="0.06" >0.06</button></view>
</view>
  <view>
    這是一個測試版，并沒有實際功能
  </view>
</view>

修改樣式
目錄：/miniprogram/pages/index/index.wxml

/**index.wxss**/
page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.phone{
  width: 95vw;
  height: 100rpx;
  font-size: 70rpx;
  border-bottom: 1px solid green;
  margin-bottom: 15rpx;
  margin-top: 100rpx;
}
.money{
  width: 95vw;
  display: flex;
  flex-direction: row;
}
.money view{
  flex: 1;
  display: flex;
  flex-direction: row;
  padding: 5rpx;
}
.money view button{
  flex: 1;
  width: auto;
}

這個時候彤敛，頁面已經渲染出來了

實現云函數接口

創(chuàng)建云函數

  右鍵點擊 cloudfunctions 文件夾与帆，選擇新建 Node.js 云函數，輸入 pay 然后按下回車鍵

安裝依賴

  在 pay/package.json 文件中的 dependencies 字段下新增一行 "tenpay": "^2.1.18"

  右鍵點擊 pay 文件夾墨榄，選擇在終端打開玄糟。然后在終端輸入 npm i

開始編寫接口

  打開 pay/index.js 開始編寫 支付接口

// 云函數入口文件
const cloud = require('wx-server-sdk')
const tenpay = require('tenpay')

const config = {
  appid: 'wxf25e232c63a1111a', // 小程序 appid
  mchid: '1515679431',  // 商戶號
  partnerKey: '3a816922aba3ee43a8920024b9444996',  // api 秘鑰
  notify_url: 'https://www.qq.com/',  
  spbill_create_ip: '127.0.0.1'
}

const wxApi = new tenpay(config)

cloud.init()

// 云函數入口函數
exports.main = async (event, context) => {
  const { money } = event
  const wxContext = cloud.getWXContext()
  let out_trade_no = Date.now() + '_' + parseInt(Math.random() * 1e5)
  let result = await wxApi.getPayParams({
    out_trade_no: out_trade_no,
    body: '模擬充值',
    total_fee: money,
    openid: wxContext.OPENID
  });
  
  return {
    payParams: result
  }
}

提交云函數

  右鍵點擊 pay 文件夾，選擇 上傳并部署：所有文件

頁面聯調

新增 js 事件

//pages/index/index.js
const app = getApp()

Page({
  data: {
    phone: '15021134415',
  },
  pay: async (e) => {
    try {
      const { money } = e.currentTarget.dataset
      console.log('調用支付', money)
      wx.cloud.callFunction({
        name: 'pay',
        data: {
          money: parseFloat(money) * 100 + ''
        },
        success: (data) => {
          const { payParams } = data.result
          wx.requestPayment({
            nonceStr: payParams.nonceStr,
            package: payParams.package,
            paySign: payParams.paySign,
            timeStamp : payParams.timeStamp,
            signType : 'MD5',
            success: () => {
              wx.showToast({
                title: '支付成功'
              })
              wx.showShareMenu({
                withShareTicket: true,
                complete: (res) => {},
              })
            },
            fail: (err) => {
              wx.showToast({
                title: '支付失敗',
                icon: 'none'
              })
              console.log(err)
            }
          })
        }
      })
    } catch (error) {
    }
  }
})

調試：點擊預覽袄秩，微信掃描二維碼即可在手機上調試

總結

云開發(fā) serverless 模式一定會在不久的將來大行其道阵翎，因為開發(fā)周期和開發(fā)成本都會降低很多。并且前端開發(fā)人員很容易就能上手為全站工程師之剧。

下一篇文章：taro + 云開發(fā) 實現奶茶店小程序

如果你也想學習小程序支付郭卫，但是有沒有商戶號。我的商戶號可以借你用用背稼，反正里面也沒錢箱沦。我 wx: guzhan321 備注小程序

demo_07_3.png