网站推广.NET

网站推广.NET

不可思议:实践丨如何全面学习小程序

来源:互联网

最近微信商店开了。在微信完全开放之前,我将开放小程序的源代码供所有人使用〜

小程序效果

如何将云开发集成到项目中

最初,该项目不是基于云开发而开发的。当前,正在考虑云开发。因此,有必要在项目中启用与云开发相关的选项。

首先,在小程序文件夹中创建一个云文件夹,在软件包文件中对其进行配置,为用户登录创建一个云功能,然后将其上传到微信小程序云。相关操作可以参考正式文件。

我在项目目录中添加了两个目录,即cloud和miniprogram,并在project.config.json文件夹中对其进行了配置

{ "miniprogramRoot": "./miniprogram" "cloudfunctionRoot": "./cloud/"}

开放云开发

配置完成后,您可以在控制台中单击“云开发”以启用云​​开发。

在云开发界面中配置并启用云开发。

打开数据库集合

云开发不会自动创建数据库集合,因此您需要手动创建集合。分别创建商店表卖方,类别表,产品表食品,订单表Order,地址表和用户表_User。

数据操作

一旦有了数据库表,就可以操纵代码中的数据。

下面是我的目录操作代码。

const db = wx.cloud.database()const { showModal } = require('../../utils/utils')Page({ onLoad: function(options) { // 管理员认证 getApp().auth() if (options.objectId) { // 缓存数据 this.setData({ isEdit: true, objectId: options.objectId }) // 请求待编辑的分类对象 db.collection('Category') .doc(options.objectId) .get() .then(res => { // 获取分类信息 this.setData({ category: res.data }) }) } }, add: function(e) { var form = e.detail.value if (form.title == '') { wx.showModal({ title: '请填写分类名称', showCancel: false }) return } form.priority = Number.parseInt(form.priority) // 添加或者修改分类 // 修改模式 if (this.data.isEdit) { const category = this.data.category db.collection('Category') .doc(category._id) .update({ data: form }) .then(res => { console.log(res) showModal() }) } else { db.collection('Category') .add({ data: form }) .then(res => { console.log(res) showModal() }) } }, showModal() { // 操作成功提示并返回上一页 wx.showModal({ title: this.data.isEdit ? '修改成功' : '添加成功', showCancel: false, success: () => { wx.navigateBack() } }) }, delete: function() { // 确认删除对话框 wx.showModal({ title: '确认删除', success: res => { if (res.confirm) { const category = this.data.category db.collection('Category') .doc(category._id) .remove() .then(res => { console.log(res) wx.showToast({ title: '删除成功' }) wx.navigateBack() }) } } }) }})

联接表查询

使用数据库时,不可避免地需要查询表。云开发支持在云功能端进行表查询。您可以参考我的代码来实现表查询的功能。

const cloud = require('wx-server-sdk')cloud.init()const db = cloud.database()// 云函数入口函数exports.main = async (event, context) => { const result = await db.collection('Food') .aggregate() .lookup({ from: 'Category', localField: 'category', foreignField: '_id', as: 'categories' }) .end() // .orderBy('priority', 'asc') // .get() console.log(result) return result.list}

文件上传

在小程序的操作中,不可避免地会遇到需要上传图像的场景。上传图片时,云开发为我们查询数据提供了便利的云存储。

获取文件的本地路径后,调用wx.cloud.uploadFile上传文件。

chooseImage() { wx.chooseImage({ count: 1, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: res => { const tempFilePaths = res.tempFilePaths const file = tempFilePaths[0] const name = utils.random_filename(file) //上传的图片的别名,建议可以用日期命名 console.log(name) wx.cloud.uploadFile({ cloudPath: name, filePath: file, // 文件路径 }).then(res => { console.log(res) const fileId = res.fileID // 将文件id保存到数据库表中 db.collection('Seller').doc(this.data.seller._id) .update({ data: { logo_url: fileId } }).then(() => { wx.showToast({ title: '上传成功' }) // 渲染本地头像 this.setData({ new_logo: fileId }) }, err => { console.log(err) wx.showToast({ title: '上传失败' }) }) }) } }) }

微信支付逻辑的实现

作为商城,不可避免地会有微信付款相关逻辑的实现。在这种情况下,云开发提供的微信支付云调用功能可用于实现快速的API调用和接口实现。

绑定商家

使用云开发提供的微信付款时,您需要先执行微信付款的绑定,然后在云开发控制台中添加相应的商家编号

微信添加后会发送通知

按照提示打开帐户。

如果未绑定,它将报告错误“接受关系不存在”

功能代码调用

配置完成后,只需调用云功能中的微信支付接口即可实现相关的通话功能

const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV})// 云函数入口函数exports.main = async (event, context) => { console.log('请求中') console.log(cloud.getWXContext().ENV) let { orderId, amount, body } = event const wxContext = cloud.getWXContext() const res = await cloud.cloudPay.unifiedOrder({ body: body, outTradeNo: orderId, spbillCreateIp: '127.0.0.1', subMchId: '1447716902', totalFee: amount, envId: 'dinner-cloud', functionName: 'pay_cb' }) return res.payment}

此处functionName:“ pay_cb”是指微信付款成功后给我的回调信息,我们将在以后使用它来更新订单状态

小程序结束代码调用

调用cloud函数后,您将获得微信付款所需的各种参数,

这时,您可以在小程序端调用微信付款界面进行付款。您可以参考相关代码

const { result: payData } = res wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: 'MD5', paySign: payData.paySign, success: res => { console.log('支付成功', res) wx.showModal({ title: '支付成功', showCancel: false, success: () => { // 跳转订单详情页 wx.navigateTo({ url: '/order/detail/detail?objectId=' + order._id }) } }) },...

微信付款回调处理

微信统一顺序中有一个pay_cb回调函数。这是一个云功能。随后的微信次付款的付款信息将在此功能中发送。相应地,我们需要编写一种处理方法

// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV})const db = cloud.database()// 云函数入口函数exports.main = async (event, context) => { console.log('支付回调') console.log(event) console.log(cloud.getWXContext().ENV) const orderId = event.outTradeNo const resultCode = event.resultCode if (resultCode === 'SUCCESS') { const res = await db .collection('Order') .doc(orderId) .update({ data: { status: 1 } }) console.log(res) return { errcode: 0 } }}

摘要

经过云开发的经验,优势就不用多说了。 微信本机支持登录和付款,并且调用和调试非常方便,尤其是无需启动本地服务开发,这真的很容易使用;

我已经开源了此小程序的源代码。您可以访问Gitee获取源代码并自己使用它〜