第一節(jié)～企業(yè)微信小程序的注冊圖文詳解

石頭哥的公司終于注冊下來了，所以接下來，石頭哥也可以愉快的注冊一個企業(yè)微信小程序了，主要是想實現(xiàn)微信支付功能，獲取用戶手機號功能，這些都需要企業(yè)小程序。所以今天就來注冊一把企業(yè)小程序。順便把這個過程通過這篇文章記錄下來，后面注冊微信支付商戶號，還有實現(xiàn)小程序支付功能的時候，都會寫對應(yīng)的文章出來。

注冊企業(yè)小程序必備

• 1，一個全新的郵箱，沒有注冊過小程序，沒有注冊過公眾號的郵箱
• 2，企業(yè)或者個體工商戶的營業(yè)執(zhí)照

1,郵箱注冊界面

首先，在注冊界面選擇小程序

如果你的郵箱被占用過，那么就會出現(xiàn)下面的錯誤

如果郵箱沒用過，就會進入下面頁面，這個頁面用來驗證郵箱

2，企業(yè)注冊界面

上面的郵箱驗證成功以后，我們這里就要選企業(yè)了，當(dāng)然如果你是個體工商戶，你也可以選擇個體工商戶。

這里的信息如實填寫即可

信息填寫完畢，提交時會有如下一個確認框

這樣我們企業(yè)小程序就注冊好了，可以看到企業(yè)小程序后臺有微信支付選項的，個人小程序是沒有這一選項的。

3,登錄小程序后臺，做微信支付關(guān)聯(lián)

我們這個時候如果想直接做微信支付商戶號關(guān)聯(lián)，會提示如下錯誤。

也就是說我們必須先經(jīng)過微信認證后，才可以關(guān)聯(lián)微信支付。所謂的微信認證，也就是每年給微信交300元認證費。

4，微信認證

點擊這里的認證

仔細一看，微信認證要填的信息還是比較多的

填寫發(fā)票信息，也就是你花300元給微信，微信給你開個發(fā)票。

然后就是付300元給微信了。

支付完就等著微信審核吧，只有認證審核后，才可以做別的操作

耐心等待吧，認證完，我就可以關(guān)聯(lián)微信支付商戶號了，就可以愉快的做支付功能了。我們下一節(jié)見。

我是晚上提交的認證，第二天也就是周三工作日的上午，認證機構(gòu)給我打電話了，是個小姐姐，聲音很好聽，確認些信息，再問我下對公賬號收到了一筆2分錢內(nèi)的數(shù)字，做下驗證，就審核通過了。

第二節(jié)~注冊微信支付商戶號

我們上一節(jié)已經(jīng)注冊了企業(yè)小程序，這一節(jié)我們就來注冊微信支付商戶號，這種實現(xiàn)微信支付的必須一步，因為沒有微信支付商戶號，就好比你沒有銀行卡一樣，怎么收錢呢。

寫在前面

微信商戶號申請還是比較麻煩的，不僅要填寫很多信息，還有最麻煩的一步就是經(jīng)營場所的實景圖驗證，這一步很麻煩，我也是修改了好多次，才通過驗證的。

一，注冊微信支付商戶號

• 1，接入微信支付
  其實微信官方有對應(yīng)的注冊文檔。https://kf.qq.com/product/wechatpaymentmerchant.html#hid=2449
  
  申請地址：https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal
  這個地址可能會變動，如果變動的話，大家就去上面的這個官方文檔里跟著一步步來。
  
  然后跟著步驟一步步的如實填寫即可。
  
  然后就是填寫信息頁
  

二，注冊時的注意事項

下面我會把注冊過程中的一些注意事項給大家說下。我這里用的是微信支付服務(wù)商關(guān)聯(lián)注冊（至于為什么這么做，這里不便透漏，只給大家說下，用服務(wù)商注冊可以降低微信支付的手續(xù)費），大家注冊微信商戶時，可以找石頭哥，石頭哥現(xiàn)在也會微信支付的服務(wù)商啦。。。

接下來就要漫長的資料填寫過程了。

這一點是最麻煩的，所以會重點講下。
如果你有線下實體店，需要把下面要求的照片拍下，然后上傳

如果你有認證過的微信服務(wù)號

如果你有已經(jīng)上線的小程序或者有自己的小程序設(shè)計圖，可以用下面的這個，不過小程序申請微信支付通常比較麻煩些，最簡單的是線下門店和公眾號。

用app來申請，需要下面這些。

有網(wǎng)站的話，可以用下面這些。

企業(yè)微信也可以注冊微信支付。

結(jié)算規(guī)則這里盡量選擇費率低的，符合自己業(yè)務(wù)場景的。

資料提交也是比較慢的，耐心等待就行。

然后還需要一步驗證。

驗證完成以后，就等待審核就可以了。

提交完成以后，耐心等待審核就行。如果有審核不通過的情況，根據(jù)實際情況修改就行。這里審核通過以后，我們才可以進行接下來小程序綁定支微信支付的操作，如果多次提交審核不通過，可以找石頭哥來幫忙。

下圖是我第二天審核通過以后的截圖

審核通過以后，還需要進行協(xié)議簽署


協(xié)議簽署完以后，我們的微信支付商戶號就正式申請下來了。

第三節(jié)~借助云開發(fā)10行代碼實現(xiàn)小程序支付功能

接上篇，上一篇我們已經(jīng)注冊完企業(yè)小程序，并成功的完成了微信認證。這一節(jié)我們就來開始正式的關(guān)聯(lián)微信支付了，給我們的小程序接入支付功能。
傳送門：《企業(yè)微信小程序的注冊圖文詳解》

必備條件

• 1，必須注冊微信支付的商戶號
• 2，企業(yè)小程序必須通過認證
• 3，小程序關(guān)聯(lián)微信支付商戶號

一，小程序關(guān)聯(lián)微信商戶

1，登錄小程序后臺，點擊關(guān)聯(lián)更多商戶號

2，關(guān)聯(lián)商戶號需要用到appid,點擊如下所示的關(guān)聯(lián)更多AppID

把我們小程序的appid復(fù)制下

然后去授權(quán)關(guān)聯(lián)我們的微信支付商戶號

微信商戶號申請下來以后，就可以直接微信掃碼登錄了，然后就可以在商戶號里關(guān)聯(lián)小程序了。

商戶號里關(guān)聯(lián)好，我們需要去小程序里確認下授權(quán)。

授權(quán)完成以后，我們的小程序端會出現(xiàn)下面這樣的，點擊下確認即可。

點擊下上圖的確認，然后再點擊下圖所示的授權(quán)。

可以看到我們的小程序和微信商戶號成功的關(guān)聯(lián)起來了

到這里我們小程序和商戶號的關(guān)聯(lián)操作就完成了。

二，開通云開發(fā)并綁定微信商戶號

1，然后新建小程序，開始代碼部分。
這里的appid一定要是你關(guān)聯(lián)過微信支付商戶的，并且還得是企業(yè)小程序。這里創(chuàng)建項目時記得選擇不使用云服務(wù)，因為使用默認云開發(fā)的話，會創(chuàng)建一大堆無用的文件。

2，開通云開發(fā)功能

會彈出協(xié)議，直接點確定就可以了

3，給你的云開發(fā)環(huán)境起個名，英文或者拼音

現(xiàn)在云開發(fā)只可以免費試用一個月，學(xué)習(xí)的話，一個月夠了，所以這里支付方式，隨便選一個就行了。下一步的選擇配額，也隨便選一個就行了，然后提交。

等待創(chuàng)建云開發(fā)，創(chuàng)建好以后如下。

4，然后點擊設(shè)置，全局配置，可以看到有個微信支付配置

有的同學(xué)這里看不到微信支付配置，是因為你的小程序開發(fā)工具版本過低。最好下載最新版本的開發(fā)者工具。
5，云開發(fā)配置微信商戶號。

添加完以后還需要手機上進行授權(quán)確認

6，手機微信上進行確認


可以看到這里已經(jīng)授權(quán)綁定了

退款的我們后面會再講。
這個時候我們準(zhǔn)備工作就全部做好了，接下來就要愉快的寫代碼。

三，云開發(fā)支付代碼的編寫

1，看官方文檔，其實說的很詳細了，接下來我?guī)Т蠹疫^一遍。

這里也把官方鏈接貼出來給大家。
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/pay/CloudPay.unifiedOrder.html
其實官方有給我們完整的示例。

我們只需要把這段代碼復(fù)制到我們自己的云函數(shù)里就行了。

2，創(chuàng)建云開發(fā)統(tǒng)一支付的云函數(shù)

我們首先要創(chuàng)建云函數(shù)的根目錄

然后新建云函數(shù)pay0610

然后把官方示例直接復(fù)制到我們自己的云函數(shù)里

3，把云函數(shù)里的信息替換成我們自己的

上面標(biāo)注重要的是一定要替換成自己的。然后保存修改，部署云函數(shù)

4，編寫頁面

在index.wxml里寫一個按鈕，點擊的時候調(diào)起我們的支付云函數(shù)

然后在index.js里編寫點擊事件

我們這個時候直接點擊支付，看看會不會調(diào)起支付

這個時候一大堆爆紅，仔細看下，可以看出我們云開發(fā)環(huán)境id沒有初始化。

5，app.js里配置云開發(fā)環(huán)境id

這里取到環(huán)境id

然后在app.js里配置

然后我們再點擊下支付，可以看到我們成功的調(diào)起了支付

6,然后我用手機微信支付下試試

支付成功后，我們的控制臺也會有相應(yīng)的日志打印。

到這里我們就可以成功的在小程序里使用微信支付了，后面無非把價格和商品名字做活，做成動態(tài)傳入的。
后面我也會把源碼放到網(wǎng)盤里，有需要的同學(xué)，去我公號里回復(fù)‘云開發(fā)支付’就可以獲取了。

第四節(jié)，商品訂單支付案例講解

上面我們學(xué)會了支付功能，那么我們接下來就用一個簡單的案例來教大家試下一個簡單的商城小程序，包含以下功能

• 1，商品列表
• 2，訂單列表（分已支付和待支付）
• 3，支付功能
• 4，解決一些支付中常見的問題

老規(guī)矩，先看下效果圖

頁面比較簡陋，因為我這里主要教大家如何實現(xiàn)支付功能的，所以頁面美化的問題，大家課下有時間時，自己做下美化就行了。

一，在app.json里配置tabbar多頁面

由于我們這里用到了兩個頁面，還是在我們前面章節(jié)的基礎(chǔ)上，直接改造頁面。我們配置多頁面就要用到tabbar了。所以我們先創(chuàng)建一個order頁面，頁面如何創(chuàng)建，我這里就不再累述了。小程序基礎(chǔ)的課里講了很多遍。
然后在app.json里配置如下

由于這里的配置不是本節(jié)的學(xué)習(xí)重點，這里把代碼給到大家，大家直接粘貼到自己項目里就可以的。

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [{
        "selectedIconPath": "image/home_yes.png",
        "iconPath": "image/home_no.png",
        "pagePath": "pages/good/good",
        "text": "商品首頁"
      },
      {
        "selectedIconPath": "image/order_yes.png",
        "iconPath": "image/order_no.png",
        "pagePath": "pages/order/order",
        "text": "我的訂單"
      }
    ]
  },

這里用到的圖片資源，我給大家放到了課程配套資源里，如下

大家課下找石頭哥索要就行了（限購課用戶奧），把資源下載下來以后，新建一個image文件夾，然后把資源放到image文件下就可以了。

到這里tabbar配置好了，我們接下來就要開始代碼部分了。

二，把商品做活，放到數(shù)據(jù)庫里

我們前面學(xué)習(xí)的時候，用的是本地數(shù)據(jù)，接下來我就來給大家演示下，如何把商品數(shù)據(jù)放到數(shù)據(jù)庫，方便后期動態(tài)修改。

1，在云開發(fā)數(shù)據(jù)庫里新建goods集合（表）

創(chuàng)建好以后，記得把權(quán)限改為所有人可讀寫

創(chuàng)建好goods集合以后，就要往里面添加數(shù)據(jù)了，把我們之前本地寫死的數(shù)據(jù)，就可以做成活的了。

添加好的數(shù)據(jù)如下

2，改造商品列表代碼

我們之前的商品數(shù)據(jù)是寫死在本地的，這次我們就可以請求云開發(fā)數(shù)據(jù)庫里的數(shù)據(jù)了，后期可以動態(tài)增刪，修改。

通過上圖我們可以看出，已經(jīng)成功的請求到了數(shù)據(jù)庫里的商品數(shù)據(jù)，接下來把數(shù)據(jù)動態(tài)的綁定到小程序頁面上就可以了。

可以看到，我們的數(shù)據(jù)已經(jīng)成功的顯示出來了。
到這里我們的商品列表頁改造就算完成了。

三，創(chuàng)建訂單

我們之前學(xué)習(xí)是點擊購買就直接支付了，沒有一個訂單來動態(tài)的記錄。所以我們這一節(jié)，先來教大家如何新建訂單。

1，新建order表

我們要在云開發(fā)數(shù)據(jù)庫里生成訂單，其實就是往訂單表里增加數(shù)據(jù)。所以還是要先新建order集合（表）

這里要注意下，我們的訂單表的權(quán)限設(shè)置為“僅創(chuàng)建者可讀寫”，為什么呢？
因為我們每個人的訂單肯定不想讓別人看到吧。所以我們設(shè)置完僅創(chuàng)建者可讀寫，那么這個訂單就只有我們自己可以看。上面的goods表只所以設(shè)置為所有人可讀，是因為我們的商品數(shù)據(jù)是要每個客戶都能看到的。

2，創(chuàng)建訂單代碼編寫

我們上面order表創(chuàng)建好以后，我們用戶再點購買的時候，就不能直接去支付了，應(yīng)該先創(chuàng)建一個訂單，然后再去支付。下面我們就分解開。教大家實現(xiàn)訂單的創(chuàng)建。

上面代碼注釋很清楚了，我們創(chuàng)建訂單時需要往訂單里保存商品名，金額，下單時間，訂單狀態(tài)。然后看下order表里的訂單數(shù)據(jù)如下

這樣我們新的訂單就創(chuàng)建成功了。
創(chuàng)建訂單時，我們有用到一個獲取當(dāng)前時間的方法，這個方法是我們自定義的，由于不是本節(jié)學(xué)習(xí)重點，我就把這個方法的代碼貼出來給大家，大家后面直接把代碼放到自己項目里用就行了。

  // 獲取當(dāng)前時間的工具方法
  _getCurrentTime() {
    var d = new Date();
    var month = d.getMonth() + 1;
    var date = d.getDate();
    var day = d.getDay();
    var hours = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    var ms = d.getMilliseconds();

    var curDateTime = d.getFullYear() + '年';
    if (month > 9)
      curDateTime += month + '月';
    else
      curDateTime += month + '月';

    if (date > 9)
      curDateTime = curDateTime + date + "日";
    else
      curDateTime = curDateTime + date + "日";
    if (hours > 9)
      curDateTime = curDateTime + hours + "時";
    else
      curDateTime = curDateTime + hours + "時";
    if (minutes > 9)
      curDateTime = curDateTime + minutes + "分";
    else
      curDateTime = curDateTime + minutes + "分";
    return curDateTime;
  },

四，訂單支付

我們上面創(chuàng)建好訂單以后，應(yīng)該在訂單創(chuàng)建成功的回調(diào)里調(diào)起支付。其實支付的代碼和我們前面學(xué)習(xí)基本都一樣，唯一變化的就是要把我們新建的訂單id傳給支付云函數(shù)，把訂單id作為支付時的單號。

上圖是我們創(chuàng)建訂單時，返回的信息，可以看到返回信息里有一個_id字段,這個字段在我們order表里也有。

其實我們支付的時候單號要保證唯一性，其實這個_id是微信官方自動為我們創(chuàng)建的，是唯一的，所以可以直接拿來用的，那么我們把之前的goPay支付方法稍微改造下。把這個_id作為訂單號傳給支付云函數(shù)。

可以看出我們在創(chuàng)建訂單成功的回調(diào)里去調(diào)起支付，依然可以支付成功。
我們的pay0611云函數(shù)唯一的變化就是把訂單號做成了活的。

重點注意: 我們的云函數(shù)只要有任何改動，都要記得重新部署云函數(shù)。

到這里我們的支付和訂單部分就改造完成了，接下來就要去實現(xiàn)訂單的未支付和已支付列表了。

五，訂單頁面的展示(分已支付和未支付)

這一節(jié)知識點比較多，也比較復(fù)雜，我先把代碼貼給大家，會在視頻里仔細給大家一步步講解。

• order.wxml
  
  這里切換未支付和已支付的分類欄代碼如下：

<!--導(dǎo)航條-->
<view class="navbar">
  <lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique"
    bindtap="navbarTap">
    <text>{{item}}</text>
  </lable>
</view>
<!-- 列表區(qū)域 -->
<view wx:if="{{list.length>0}}">
  <!-- 外層 -->
  <view wx:for="{{list}}" wx:key="key">
    <!-- 編號 -->
    <view class='itemRoot'>
      <text class='seriac_name'>商品:{{item.goodName}}</text>
      <text class='seriac_name'>金額:{{item.totalFee}}元</text>
      <text class='seriac_name'>下單時間:{{item.time}}</text>
      <text wx:if="{{item.status==0}}" class='coent_log_base' data-item='{{item}}' bindtap='payOrder'>去支付</text>
    </view>
  </view>
</view>
<!-- 否則 -->
<view wx:else class='cont_count'>
  <label class='none_tab'>數(shù)據(jù)為空哦~~</label>
</view>

對應(yīng)的樣式order.wxss如下

/* 頂部菜單切換 */

.navbar {
  display: flex;
  background: #fff;
}

.none_tab {
  position: relative;
  top: 20rpx;
  color: #999;
  font-size: 32rpx;
}

.navbar .item {
  position: relative;
  flex: auto;
  font-size: 27rpx;
  width: 100rpx;
  text-align: center;
  line-height: 80rpx;
  color: #333;
  border-bottom: 6rpx solid #ddd;
}

.navbar .item.active {
  color: #333;
  border-bottom: 6rpx solid #46b5fc;
}

.navbar .item.active:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
}

/*列表為空 */

.cont_count {
  padding-top: 6rpx;
  position: relative;
  width: 100%;
  text-align: center;
  /* height: 620rpx; */
  /* border-bottom: 6rpx solid #ddd; */
  margin-bottom: 6rpx;
  background-color: #fff;
}

/* 列表*/

.itemRoot {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90%;
  padding: 20rpx;
  border-bottom: 1rpx solid #d4d4d4;
}

.seriac_name {
  font-size: 28rpx;
  color: #333;
  left: 0rpx;
  margin-left: 15rpx;
}

.coent_log_base {
  position: absolute;
  top: 55%;
  color: #46b5fc;
  right: 0rpx;
  display: inline-block;
  width: 180rpx;
  height: 56rpx;
  text-align: center;
  border: 1rpx solid #46b5fc;
  font-size: 30rpx;
  line-height: 56rpx;
}

• roder.js
  這里是重點代碼，直接把完整的代碼貼給大家。

var app = getApp()
let DB = wx.cloud.database();
let orderStatus = 0; //0新下單未支付，1支付成功
Page({
  data: {
    // 頂部菜單切換
    navbar: ["未支付", "已支付"],
    // 默認選中菜單
    currentTab: 0,
    list: []
  },
  //頂部tab切換
  navbarTap: function (e) {
    let index = e.currentTarget.dataset.idx;
    this.setData({
      currentTab: index
    })
    console.log("index", index)
    //0新下單未支付，1支付成功
    if (index == 1) {
      orderStatus = 1;
    } else {
      orderStatus = 0;
    }
    this.getMyOrderList();
  },
  rel="stylesheet">
                
        
    
    
        
            
                
                    編程小石頭
                
            
            
                Python
                PHP
                MySQL
        
        
            碼農(nóng)一枚，非著名全棧開發(fā)人員。分享自己的一些經(jīng)驗，學(xué)習(xí)心得，希望后來人少走彎路，少填坑。編程小石頭和你一起快樂的學(xué)編程，石頭哥vx 2501902696。