柚子快報(bào)激活碼778899分享：手把手教你搭建電商小程序

http://yzkb.51969.com/

零基礎(chǔ)學(xué)做電商小程序，手把手教學(xué)?。▋?nèi)有福利）

準(zhǔn)備工作

工欲善其事 必先利其器

注冊微信公眾平臺，并完成相關(guān)認(rèn)證備案，開通微信支付。安裝微信開發(fā)者工具，并創(chuàng)建項(xiàng)目。開通 云開發(fā)環(huán)境。進(jìn)入云開發(fā)控制臺 > 設(shè)置 > 拓展功能頁面，單擊開通內(nèi)容管理和內(nèi)容安全。

可以參考之前教程中的方法進(jìn)行操作云開發(fā) CloudBase 概述-示例教程-文檔中心-騰訊云

課程概述

從0-1完成一個電商小程序的快速搭建。學(xué)習(xí)云開發(fā)相關(guān)基本知識。了解小程序的開發(fā)。云模版的基本使用。

在學(xué)習(xí)本次課程前建議了解基本html css 的相關(guān)基礎(chǔ)知識。

本次課程為電商小程序的基礎(chǔ)講解，為了更好讓大家理解代碼實(shí)現(xiàn)中僅完成功能的基本搭建，功能的完善會在后續(xù)進(jìn)階課程中展現(xiàn)。

學(xué)習(xí)方法

你可以邊看視頻邊看文檔，結(jié)合自己動手實(shí)際編寫以便更好理解。在學(xué)習(xí)過程中有任何問題，你可以通過百度，在無法解決時通過留言的方式進(jìn)行提問。 當(dāng)然你也可以借助騰訊云云開發(fā) AI 小助手，幫助您解答關(guān)于云開發(fā)的各種問題。 代碼：劉子滔/電商小程序 視頻：【0基礎(chǔ)】小程序云開發(fā)實(shí)戰(zhàn) | 手把手教你搭建電商小程序 一_嗶哩嗶哩_bilibili 文檔:準(zhǔn)備工作步驟1：輪播圖與公告搭建步驟2：用戶模塊搭建步驟3：商品頁面搭建步驟4：商品分享二維碼搭建步驟5：下單以及微信支付搭建步驟6：AI客服的搭建

步驟1：輪播圖與公告搭建

本文主要圍繞主頁的 index 頁面、云開發(fā)內(nèi)容管理?和?云開發(fā)數(shù)據(jù)庫?進(jìn)行講解，更多 index 代碼細(xì)節(jié)可參見?index 頁面

本章節(jié)難度系數(shù) ★★

操作步驟

步驟1：開通內(nèi)容管理

1.首先進(jìn)入云開發(fā)控制臺?>?內(nèi)容管理頁面，單擊開通，并設(shè)置賬號密碼。內(nèi)容管理創(chuàng)建需要一定的時間請安心等待。 ?

2. 在創(chuàng)建成功之后選擇繼續(xù)使用云開發(fā)CMS，單擊打開管理端即可訪問內(nèi)容管理平臺。 ?

3. 輸入登錄賬號和密碼，進(jìn)入內(nèi)容管理（CMS）后臺，單擊創(chuàng)建新項(xiàng)目這里我們起名為電商小程序。

步驟2：搭建輪播圖

數(shù)據(jù)庫創(chuàng)建流程 新建模型 》 設(shè)置字段 》 新增數(shù)據(jù) 》 修改數(shù)據(jù)庫權(quán)限 》 頁面中查詢數(shù)據(jù) 》 展現(xiàn)數(shù)據(jù)

進(jìn)入上述新建的電商后臺管理系統(tǒng)，進(jìn)入內(nèi)容模型頁面，單擊新建模型，這里我們設(shè)置展示名稱為輪播圖，數(shù)據(jù)庫名為?banner。設(shè)置完成后單擊創(chuàng)建。

注意： 更改數(shù)據(jù)庫名會自動重命名原數(shù)據(jù)庫，請謹(jǐn)慎操作。

字段名稱數(shù)據(jù)庫字段名內(nèi)容類型是否必須圖片banner_photo圖片是鏈接banner_link單行字符串否

單擊右側(cè)內(nèi)容類型?>?圖片，進(jìn)入添加圖片字段頁面，設(shè)置展示名稱為輪播圖，數(shù)據(jù)庫字段名為?photo。 單擊添加后完成內(nèi)容模型的創(chuàng)建。 進(jìn)入內(nèi)容集合?>?輪播圖頁面，單擊新建。 拖動圖片并單擊創(chuàng)建后完成輪播圖片的上傳，這樣一個輪播圖的內(nèi)容模型我們就創(chuàng)建完成了。 通過上面操作后，相應(yīng)的會在云開發(fā)控制臺生成?banner?數(shù)據(jù)庫以及上述導(dǎo)入的圖片數(shù)據(jù)。進(jìn)入云開發(fā)控制臺?>?數(shù)據(jù)庫?>?banner?>?數(shù)據(jù)權(quán)限頁面，將數(shù)據(jù)庫數(shù)據(jù)權(quán)限改為所有用戶可讀，僅創(chuàng)建者可讀寫，這樣所有用戶就可以看到數(shù)據(jù)了。 接下來在 pages/index 中開始編寫輪播圖。這里我們可以參見?swiper 文檔，幫助我們綁定數(shù)據(jù)，這樣我們使用 wx:for 進(jìn)行列表綁定。 參數(shù) env 可以在微信開發(fā)者工具?>?云開發(fā)控制臺里獲取。通過以下代碼綁定 banner 數(shù)據(jù)。

db.collection("banner").get({

success: res => {

console.log(res.data)

this.setData({

banner: res.data

})

}

})

說明： 在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。 默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item* 使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名。

保存運(yùn)行編譯之后，可以看到輪播圖。

說明： 如果出現(xiàn)運(yùn)行編譯后無法加載輪播圖，請?jiān)谖⑿砰_發(fā)者工具單擊右上角詳情，進(jìn)入本地設(shè)置頁面，嘗試切換調(diào)試基礎(chǔ)庫為較低版本即可。

步驟3：搭建通知公告

通知公告與輪播圖模型創(chuàng)建以及數(shù)據(jù)讀取操作相似這里不在進(jìn)行詳細(xì)講述。

創(chuàng)建模型并添加數(shù)據(jù)。 | 字段名稱 | 數(shù)據(jù)庫字段名 | 內(nèi)容類型 | 是否必須 | | — | — | — | — | | 標(biāo)題 | notice_title | 單行字符串 | 是 | | 內(nèi)容 | notice_main | 富文本 | 是 |

修改數(shù)據(jù)讀取權(quán)限，所有用戶可讀，僅創(chuàng)建者可讀寫。（后續(xù)步驟中不在體現(xiàn)本步驟）通過以下代碼綁定 notice 數(shù)據(jù)。

db.collection("notice").get({

success: res => {

console.log(res.data)

this.setData({

notice: res.data

})

}

})

【 公告 】

· {{item.notice_title}}

保存運(yùn)行編譯之后，可以看到通知公告。

步驟2：用戶模塊搭建

本文主要圍繞主頁的 user 頁面、云開發(fā)內(nèi)容管理?和?云開發(fā)數(shù)據(jù)庫?進(jìn)行講解，更多 user 代碼細(xì)節(jié)可參見user 頁面

本章節(jié)難度系數(shù) ★★★ 用戶登錄我們借助云函數(shù)快速實(shí)現(xiàn)獲取手機(jī)號碼和openid的方式實(shí)現(xiàn)，總體設(shè)置思路如下圖所示，用戶一次登錄之后借助緩存實(shí)現(xiàn)下一次使用時候無感登錄方法。 ?

云開發(fā)的云函數(shù)的獨(dú)特優(yōu)勢在于與微信登錄鑒權(quán)的無縫整合。當(dāng)小程序端調(diào)用云函數(shù)時，云函數(shù)的傳入?yún)?shù)中會被注入小程序端用戶的 openid，開發(fā)者無需校驗(yàn) openid 的正確性，因?yàn)槲⑿乓呀?jīng)完成了這部分鑒權(quán)，開發(fā)者可以直接使用該 openid。與 openid 一起同時注入云函數(shù)的還有小程序的 appid。

從小程序端調(diào)用云函數(shù)時，開發(fā)者可以在云函數(shù)內(nèi)使用?wx-server-sdk?提供的?getWXContext?方法獲取到每次調(diào)用的上下文（appid、openid 等），無需維護(hù)復(fù)雜的鑒權(quán)機(jī)制，即可獲取天然可信任的用戶登錄態(tài)（openid）。

操作步驟

步驟1：獲取手機(jī)號

需要將?button?組件 open-type 的值設(shè)置為 getPhoneNumber，當(dāng)用戶點(diǎn)擊并同意之后，通過 bindgetphonenumber 事件獲取回調(diào)信息；

創(chuàng)建云函數(shù)getphonenumber ，并在云函數(shù)index.js頁面中填寫以下代碼，完成后點(diǎn)擊上傳并部署：云端安裝依賴。

// 云函數(shù)入口文件

const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用當(dāng)前云環(huán)境

// 云函數(shù)入口函數(shù)

exports.main = async (event, context) => {

const wxContext = cloud.getWXContext()

var moblie = event.weRunData.data.phoneNumber;

return {

event,

openid: wxContext.OPENID,

moblie

}

}

將 bindgetphonenumber 事件回調(diào)中借助云函數(shù)獲取手機(jī)號碼 。

getPhoneNumber(e){

wx.cloud.callFunction({

name: 'getphonenumber',

data: {

weRunData: wx.cloud.CloudID(e.detail.cloudID),

}

}).then(res => {

console.log(res.result.moblie)

}).catch(err => {

console.error(err);

});

},

目前該接口針對非個人開發(fā)者，且完成了認(rèn)證的小程序開放（境外主體開放香港和澳門灰度內(nèi)測，暫不開放其他境外主體。詳見文檔）；

步驟2：創(chuàng)建用戶

創(chuàng)建user模型并添加以下字段。修改數(shù)據(jù)權(quán)限。 | 字段名稱 | 數(shù)據(jù)庫字段名 | 內(nèi)容類型 | 是否必須 | | — | — | — | — | | 用戶統(tǒng)一標(biāo)識 | openid | 單行字符串 | 是 | | 電話 | phone | 單行字符串 | 是 | | 昵稱 | nick_name | 單行字符串 | 是 |

更多 CMS 內(nèi)容管理詳細(xì)操作請參見?搭建輪播圖

在剛才bindgetphonenumber 事件回調(diào)事件中添加創(chuàng)建用戶代碼，并通過緩存把信息存儲到wx.setStorageSync。

getPhoneNumber(e){

wx.cloud.callFunction({

name: 'getphonenumber',

data: {

weRunData: wx.cloud.CloudID(e.detail.cloudID),

}

}).then(res => {

console.log(res)

var user=res.result

db.collection("user").where({openid:res.result.openid}).get().then(res=>{

console.log(res)

if(res.data.length!=0){

wx.setStorageSync('wb_openid', res.data[0])

this.setData({

userinfo: res.data[0],

})

}else{

db.collection("user").add({

data: {

name: user.moblie,

phone: user.moblie,

openid: user.openid,

_createTime: Date.parse(new Date()),

},

success: function (res) {

db.collection("user").where({openid:res.result.openid}).get().then(res=>{

wx.setStorageSync('wb_openid', res.data[0]),

this.setData({

userinfo: res.data[0],

})})

}

})

}

})

}).catch(err => {

console.error(err);

});

之后再onLoad中添加讀取緩存信息代碼

onLoad(options) {

let userinfo = wx.getStorageSync('wb_openid')

}

步驟3：商品頁面搭建

本文主要圍繞主頁的 index頁面、云開發(fā)內(nèi)容管理?和?云開發(fā)數(shù)據(jù)庫?進(jìn)行講解，更多 index 代碼細(xì)節(jié)可參見index 頁面

本章節(jié)難度系數(shù) ★★

操作步驟

步驟1：創(chuàng)建商品模型

創(chuàng)建goods模型并添加以下字段，修改數(shù)據(jù)權(quán)限。 | 字段名稱 | 數(shù)據(jù)庫字段名 | 內(nèi)容類型 | 是否必須 | | — | — | — | — | | 商品名稱 | goods_name | 單行字符串 | 是 | | 商品價(jià)格 | goods_price | 數(shù)字 | 是 | | 封面圖 | goods_pho | 圖片 | 是 | | 商品簡介 | goods_int | 單行字符串 | 是 |

更多 CMS 內(nèi)容管理詳細(xì)操作請參見 搭建輪播圖

添加商品信息。

步驟2：頁面中展現(xiàn)商品

展示商品

頁面的邏輯及前端代碼如下：

{{item.goods_name}}

￥{{item.goods_price}}元已售0件

// pages/index/index.js

const db = wx.cloud.database()

Page({

/**

* 生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad(options) {

db.collection("goods").get({

success: res => {

console.log(res)

this.setData({

goods: res.data

})

}

})

},

通過 bindtap事件 實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)商品詳情頁面。

spxx(e){

console.log(e.currentTarget.id)

wx.navigateTo({

url: '../goodslist/goodslist?scene=' + e.currentTarget.id,

})

},

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。其中可使用?wx.navigateBack?返回到原頁面。小程序中頁面棧最多十層。

在goodslist頁面接收scene值并展現(xiàn)商品詳細(xì)信息。

// pages/goodslist/goodslist.js

const db = wx.cloud.database()

Page({

onLoad(options) {

db.collection("goods").doc(options.scene).get({

success: res => {

console.log(res)

this.setData({

goods: res.data

})

}

})

},

到這里商品頁面就搭建完成。

步驟4：商品分享二維碼搭建

本文主要圍繞商品頁的goods頁面、云開發(fā)內(nèi)容管理?和?管理工具 云模版?進(jìn)行講解，更多 goods 代碼細(xì)節(jié)可參見?goods 頁面

操作步驟

步驟1：開通云模版

打開開發(fā)者工具，在編輯器中 miniprogram 下的任意路徑右鍵菜單下，選擇“使用云模板或 AI 配置頁面”（新版開發(fā)工具）或“配置單頁模板”（舊版開發(fā)工具），即可進(jìn)入云模板功能頁面。

目前僅nightly 最新版可以體驗(yàn)云模版功能，后續(xù)將應(yīng)用至全部工具版本。?目前僅支持企業(yè)主體的小程序開通使用云模版，后續(xù)將會支持個人主體的小程序，敬請期待。

步驟2：使用 微信小程序碼和鏈接 接口

當(dāng)前模板提供了 3 個接口方法：

**wx_qrcode_get_qrcode: **獲取小程序碼，適用于需要的碼數(shù)量較少的業(yè)務(wù)場景。通過該接口生成的小程序碼，永久有效，有數(shù)量限制。wx_qrcode_get_unlimited_qrcode:?獲取小程序碼，適用于需要的碼數(shù)量極多的業(yè)務(wù)場景。通過該接口生成的小程序碼，永久有效，數(shù)量暫無限制。wx_qrcode_generate_short_link:?獲取小程序 Short Link，適用于微信內(nèi)拉起小程序的業(yè)務(wù)場景。目前只開放給電商類目(具體包含以下一級類目：電商平臺、商家自營、跨境電商)。通過該接口，可以選擇生成到期失效和永久有效的小程序短鏈。

更多說明和錯誤碼參考微信小程序小程序碼

點(diǎn)擊進(jìn)入該接口后進(jìn)行安裝，然后點(diǎn)擊接口展示，使用其中的獲取不限制的小程序碼（wx_qrcode_get_unlimited_qrcode）。

相關(guān)提示 該接口用于獲取小程序碼，適用于需要的碼數(shù)量極多的業(yè)務(wù)場景。通過該接口生成的小程序碼，永久有效，數(shù)量暫無限制。 這里只展示如何使用其生成小程序碼的操作，生成小程序Short Link，適用于微信內(nèi)拉起小程序的業(yè)務(wù)場景操作與其相似不在進(jìn)行闡述。

步驟3：生成相應(yīng)商品小程序碼

這里我們通過用戶進(jìn)行點(diǎn)擊操作后，調(diào)用云函數(shù)生成并在展現(xiàn)給用戶的模式進(jìn)行編輯。商品基本信息相關(guān)字段已在上一章節(jié)中進(jìn)行展現(xiàn)故本章不在進(jìn)行相關(guān)的展示。

scene存儲的為商品_id

sdsy() {

var spxx = this.data.goods

var qrcode = 10

wx.cloud.callFunction({

name: 'cloudbase_module',

data: {

name: 'wx_qrcode_get_unlimited_qrcode',

data: {

scene: spxx._id, //最大32個可見字符，只支持?jǐn)?shù)字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符請自行編碼為合法字符（因不支持%，中文無法使用 urlencode 處理，請使用其他編碼方式）

page: 'pages/goodslist/goodslist', //默認(rèn)是主頁，頁面 page，例如 pages/index/index，根路徑前不要填加 /，不能攜帶參數(shù)（參數(shù)請放在scene字段里），如果不填寫這個字段，默認(rèn)跳主頁面。scancode_time為系統(tǒng)保留參數(shù)，不允許配置

check_path: false, //默認(rèn)是true，檢查page 是否存在，為 true 時 page 必須是已經(jīng)發(fā)布的小程序存在的頁面（否則報(bào)錯）；為 false 時允許小程序未發(fā)布或者 page 不存在， 但page 有數(shù)量上限（60000個）請勿濫用。

env_version: 'develop', //要打開的小程序版本。正式版為 "release"，體驗(yàn)版為 "trial"，開發(fā)版為 "develop"。默認(rèn)是正式版。

width: 430, // 默認(rèn)430，二維碼的寬度，單位 px，最小 280px，最大 1280px

auto_color: false, //自動配置線條顏色，如果顏色依然是黑色，則說明不建議配置主色調(diào)，默認(rèn) false

line_color: {

"r": 0,

"g": 0,

"b": 0

}, //默認(rèn)是{"r":0,"g":0,"b":0} 。auto_color 為 false 時生效，使用 rgb 設(shè)置顏色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十進(jìn)制表示

is_hyaline: false, //默認(rèn)是false，是否需要透明底色，為 true 時，生成透明底色的小程序

},

}

}).then(res => {

console.log(res.result.fileID);

wx.previewImage({

current: res.result.fileID, // 當(dāng)前顯示的圖片鏈接

urls: [res.result.fileID] // 需要預(yù)覽的圖片鏈接列表

})

});

},

wx.previewImage?在新頁面中全屏預(yù)覽圖片。預(yù)覽的過程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作。

至此商品分享二維碼搭建完成。

步驟5：下單以及微信支付搭建

本文主要圍繞商品頁的goods，order頁面、云開發(fā)內(nèi)容管理?和?管理工具 云模版?進(jìn)行講解，更多 goods ,order代碼細(xì)節(jié)可參見?goods 頁面?order頁面

本章節(jié)難度系數(shù) ★★★★

操作步驟

步驟1：安裝云模板訂單管理

主要用于訂單的列表查看，可通過分類、關(guān)鍵字查詢來篩選數(shù)據(jù)，并可導(dǎo)出查詢到的訂單。

步驟2：創(chuàng)建數(shù)據(jù)庫cloudbase-sample-orders，并在小程中實(shí)現(xiàn)創(chuàng)建訂單

我們點(diǎn)開頁面設(shè)置查看管理系統(tǒng)相關(guān)參數(shù)。

將相關(guān)參數(shù)添加并創(chuàng)建訂單。

借助wx.chooseAddress快速獲取用戶收回地址，然后創(chuàng)建數(shù)據(jù)。

wx.chooseAddress功能描述 獲取用戶收貨地址。調(diào)起用戶編輯收貨地址原生界面，并在編輯完成后返回用戶選擇的地址。使用方法 自 2022 年 7 月 14 日后發(fā)布的小程序，若使用該接口，需要在 app.json 中進(jìn)行聲明，否則將無法正常使用該接口。申請開通 暫只針對具備與地理位置強(qiáng)相關(guān)的使用場景的小程序開放，在小程序管理后臺，「開發(fā)」-「開發(fā)管理」-「接口設(shè)置」中自助開通該接口權(quán)限。

xd() {

var goods=this.data.goods

wx.chooseAddress({

success: function (res) {

var userinfo=res

db.collection("cloudbase-sample-orders").add({

data: {

receiver:userinfo.userName,

receivePhone: userinfo.telNumber,

goodPic:goods.goods_pho,

afterSales:'',

deliveryInformation:{area:res},

payTime: '',

paymentWay:'',

totalPrice:'',

orderTime:Date.parse(new Date()),

expreePrice: 0,

paymentPrice:0,

orderStatus: 1,

number:1,

unitPrice:goods.goods_price,

name:goods.goods_name,

orderId: Date.parse(new Date()),

_createTime: Date.parse(new Date()),

},

success: function (res) {}

})

},

fail: function(err){

console.log(JSON.stringify(err))

}

})

},

步驟3：開通云模版微信支付

安裝微信支付模版，并開通微信支付。 配置商戶信息

微信支付云模板需要配置商戶信息后才能使用。點(diǎn)擊參數(shù)設(shè)置，打開配置表單，填寫微信支付必須的商戶信息，保存后后模板初始化完成。 如果需要自行處理支付和退款通知，可通過接收支付通知的回調(diào)函數(shù)和接收退款通知的回調(diào)函數(shù)配置項(xiàng)來設(shè)置。

參數(shù)獲取可以借助說明文檔操作騰訊云微搭低代碼 獲取支付商戶號、私鑰、證書序列號和密鑰-操作指南-文檔中心-騰訊云

步驟2：使用云函數(shù)調(diào)用云模板下單接口

模板已內(nèi)置了云函數(shù)代碼，可以直接在微信開發(fā)者工具中下載到本地修改后使用。?也可以手動創(chuàng)建云函數(shù)來完成，點(diǎn)擊在線代碼示例，可以查看云函數(shù)示例代碼。

載模板云函數(shù)代碼到本地

打開微信開發(fā)者工具界面，在cloudfunctions目錄點(diǎn)擊右鍵，選擇同步云函數(shù)列表，同步模板中的云函數(shù)wxpayFunctions到本地；然后在云函數(shù)wxpayFunctions目錄右鍵，選擇下載，即可下載模板內(nèi)置的云函數(shù)代碼到本地。 ?

本模板提供了 5 個接口方法：

wxpay_order: 小程序下單wxpay_query_order_by_transaction_id: 微信支付訂單號查詢訂單wxpay_query_order_by_out_trade_no: 商戶訂單號查詢訂單wxpay_refund: 申請退款wxpay_refund_query: 通過商戶退款單號查詢單筆退款

具體調(diào)用方式可查看對應(yīng)接口詳情。

編輯下單云函數(shù)

修改云函數(shù)wxpayFunctions下的wxpay_order/index.js代碼，參數(shù)更新為業(yè)務(wù)實(shí)際參數(shù)。云函數(shù)編輯后，需要重新部署。

這里我們可以通過小程序傳輸值過來在event中獲取這些參數(shù)數(shù)據(jù)。

步驟3：小程序端獲取預(yù)付單信息并完成支付

在小程序中調(diào)用第 2 步中的云函數(shù)，獲取預(yù)付訂單信息后，調(diào)用wx.requestPayment喚起微信支付組件完成支付。

這里為了方便大家理解，并未通過傳值方法傳入商品價(jià)格，我們可以將商品價(jià)格以及商品信息通過 data 其他業(yè)務(wù)參數(shù)傳入。

zf(e){

wx.cloud.callFunction({

// 云函數(shù)名稱

name: 'wxpayFunctions',

data: {

// 調(diào)用云函數(shù)中的下單方法

type: 'wxpay_order',

// 業(yè)務(wù)其他參數(shù)...

},

success: (res) => {

console.log('下單結(jié)果: ', res);

const paymentData = res.result?.data;

// 喚起微信支付組件，完成支付

wx.requestPayment({

timeStamp: paymentData?.timeStamp,

nonceStr: paymentData?.nonceStr,

package: paymentData?.packageVal,

paySign: paymentData?.paySign,

signType: 'RSA', // 該參數(shù)為固定值

success(res) {

// 支付成功回調(diào)，實(shí)現(xiàn)自定義的業(yè)務(wù)邏輯

console.log('喚起支付組件成功：', res);

},

fail(err) {

// 支付失敗回調(diào)

console.error('喚起支付組件失?。?, err);

},

});

},

});

},

步驟4：支付完成后修改訂單狀態(tài)

這里我們通過在頁面中綁定數(shù)據(jù)_id然后支付完成后調(diào)用db.update完成操作，然后更新訂單狀態(tài)，支付信息等。

zf(e){

var goods=this.data.order[0]

console.log(e.currentTarget.id)

var id=e.currentTarget.id

wx.cloud.callFunction({

// 云函數(shù)名稱

name: 'wxpayFunctions',

data: {

// 調(diào)用云函數(shù)中的下單方法

type: 'wxpay_order',

// 業(yè)務(wù)其他參數(shù)...

},

success: (res) => {

console.log('下單結(jié)果: ', res);

const paymentData = res.result?.data;

// 喚起微信支付組件，完成支付

wx.requestPayment({

timeStamp: paymentData?.timeStamp,

nonceStr: paymentData?.nonceStr,

package: paymentData?.packageVal,

paySign: paymentData?.paySign,

signType: 'RSA', // 該參數(shù)為固定值

success(res) {

// 支付成功回調(diào)，實(shí)現(xiàn)自定義的業(yè)務(wù)邏輯

console.log('喚起支付組件成功：', res);

db.collection("cloudbase-sample-orders").doc(id).update({

data: {

payTime:Date.parse(new Date()),

paymentWay:'',

totalPrice:'',

orderTime:Date.parse(new Date()),

expreePrice: 0,

paymentPrice:0,

orderStatus: 2,

},

success: function (res) {

}

})

},

fail(err) {

// 支付失敗回調(diào)

console.error('喚起支付組件失?。?, err);

},

});

},

});

},

然后我們就可以在訂單管理中查看到相關(guān)訂單的狀態(tài)。

步驟6：AI客服的搭建

本文主要圍繞?管理工具 云模版?進(jìn)行講解

本章節(jié)難度系數(shù) ★

操作步驟

開通云模版，安裝微信AI客服

打開開發(fā)者工具，在編輯器中 miniprogram 下的任意路徑右鍵菜單下，選擇“使用云模板或 AI 配置頁面”（新版開發(fā)工具）或“配置單頁模板”（舊版開發(fā)工具），即可進(jìn)入云模板功能頁面，安裝微信AI客服。

目前僅nightly 最新版可以體驗(yàn)云模版功能，后續(xù)將應(yīng)用至全部工具版本。?目前僅支持企業(yè)主體的小程序開通使用云模版，后續(xù)將會支持個人主體的小程序，敬請期待。

使用管理端配置知識庫、配置人工回復(fù)消息

點(diǎn)擊模板模板詳情頁頂部?打開管理端?按鈕，即可訪問模板內(nèi)置的管理端應(yīng)用。使用上一步中添加的用戶登錄系統(tǒng)，上傳并啟用自己的知識庫、配置人工回復(fù)消息的類型和內(nèi)容。

使用模板

點(diǎn)擊模板模板詳情頁頂部?添加至多平臺?按鈕，可將智能客服分發(fā)至不同的平臺使用，目前支持微信小程序和微信公眾號。 此處以小程序客服為例，配置小程序客服，輸入小程序 AppId，系統(tǒng)會打開授權(quán)頁面，使用微信掃碼完成授權(quán)，小程序客服即由智能客服接管。 ?

?

在小程序客服會話中使用

在小程序頁面 wxml 中使用小程序的 button 組件，設(shè)置其 open-type 屬性值為 contact，即可打開微信小程序客服會話頁面。在客服對話頁面中提問，即可收到智能客服的回答。

聯(lián)系客服

基于大模型和自定義的知識庫實(shí)現(xiàn)的AI智能客服已經(jīng)能正確運(yùn)行。同時，我們可以在模板內(nèi)置的管理端應(yīng)用中查看到客服會話的聊天記錄。

至此，該小程序的全部功能已實(shí)現(xiàn)完成。更多詳情請參見?示例代碼。

本次課程為電商小程序的基礎(chǔ)講解，為了更好讓大家理解代碼實(shí)現(xiàn)中僅完成功能的基本搭建，功能的完善會在后續(xù)進(jìn)階課程中展現(xiàn)。

作者：騰訊云開發(fā)中級布道師 劉子滔

柚子快報(bào)激活碼778899分享：手把手教你搭建電商小程序

http://yzkb.51969.com/

推薦文章