實戰：雲開發·實如今線充值小程序（一）

時間 2020-05-07

標籤實戰開發如今充值程序简体版

原文原文鏈接

2020-5-3

文章編號：007/100javascript

之前不多寫文章。從今天開始我要挑戰一下本身，連續輸出100篇技術類文章。這100篇文章我儘可能以實戰案例爲主。css

若是你以爲本文還不錯，記得關注或者給個 star，大家的贊和star是我編寫更多更精彩文章的動力！
GitHub 地址html

serverless 在小程序上體現的淋漓盡致，開發體驗太爽了。我發現用雲開發實現微信支付更爲簡單！前端

若是你也想學習小程序支付，可是有沒有商戶號。個人商戶號能夠借你用用，反正裏面也沒錢。我 wx: guzhan321 備註小程序java

本文重點內容

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

成品演示

關鍵技術點

小程序調用統一下單接口

內容大綱

建立小程序
頁面佈局
實現雲函數接口
頁面聯調

開始擼代碼

建立小程序

使用最新版的微信開發者工具，建立小程序時默認會使用雲開發模板。git

剛建立好的雲開發模板就是這樣的，默認的模板已經實現了一些功能。因此有些是要刪除的github

頁面佈局

打開 index 頁面，實現基本的頁面佈局，須要將原來的代碼刪掉。web

目錄：/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.wxmlnpm

/**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;
}

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

實現雲函數接口

建立雲函數
右鍵點擊 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) {
    }
  }
})