- 新版交易组件接入的指引与Q&A(本文不在更新,看文章内新地址)
本文不在更新,请看新版自定义交易组件接入指引 看帖不点赞,bug千千万 需要先申请开通“交易组件场景专用商户号”才可以完成新版交易组件场景接入(申请场景经营商户号这是必要条件),进行接入时一定要按照文档流程顺序进行接入,不要新旧接口混合调用,否则无法正常跑通完整流程,切记!切记!切记! 先配个图证明新版接入已完成 [图片] 有新问题可以留言,有准确答案(方案)后补充更新 一、升级版自定义交易组件接入说明 1、组件介绍 若商家此前已经完成视频号接入小程序,在小程序中调用升级版自定义交易组件组件后,可在保留原有的界面、功能及交易链路的情况下接入微信视频号场景。通过调用商品上传、订单生成、状态同步等接口,实现在视频号场景中交易资金流、售后、交易纠纷、客服等能力的标准化。 2、功能特点 可在视频号场景实现商品展示和带货等功能 未来可支持更多直播营销玩法(券、 秒杀、预售等) 支持小程序客服组件,商家能更方便收到用户的客服咨询 订单中心显示更完善的订单信息,用户可自行查看订单状态 支持用户在视频号订单中心继续付款、发起售后 3、上线案例 升级版自定义交易组件为商户提供保障用户体验的直播电商全链路能力: 可以使用微信支付商户号,资金结算更规范。 小程序和视频号的订单进行了双向打通,用户可以任选在小程序或视频号订单中心处理订单,例如重新发起支付、确认收货等,大大提升用户体验。 通过打通小程序客服组件,增强了商家处理商品咨询的能力。 [图片][图片][图片] 4、接入流程及官方文档 注意:整个接入流程需要15-30个工作日不等,建议提前准备商品的品牌、资质、类目信息,与开发调试并行,避免延误直播带货计划。 详情见:接入视频号指引 5、关键流程逻辑 注意“橙色”为新加入部分: [图片] [图片] 二、接入过程中常见问题 有新问题可以留言,有准确答案(方案)后补充更新 Q1:新版交易组件需要重新申请商户号吗?是否可以使用原有商户号? A1:不可以,新版交易组件必须要申请开通场景专用商户号 Q2:新版场景专用商户号费率是多少,是否有优惠,结算周期是多久? A2:商户号费率为0.6%,无费率优惠,结算周期为7+7日,即用户收货后7天后结算。 Q3:申请新商户号时,最后一步签约遇到“微信实名信息与管理员信息不一致”是什么原因? A3:申请新的场景专用商户号时,“超级管理员”这一项不支持修改,默认为小程序“超级管理员”实名信息,如需修改,需要为该用户前往成员管理为小程序绑定超级管理员。 Q4:申请新的商户号时,为什么不能修改主体信息? A4:“当前主体”这一项不支持修改,因为商户号主体必须和该小程序注册主体保持一致。 Q5:通过新版自定义交易组件申请的场景专用商户号是否对跨境类小程序(自助报关)有影响? A5:会,二级商户当前暂不支持自助清关接口调用,留意后续更新通知 Q6:自定义交易组件“升级版”跟升级前的自定义交易组件有什么区别,哪些接口需要升级? A6: 新支付接口,必须走新商户号。 取消订单, 小程序(小程序内以及发现-小程序我的订单)和视频号双向可取消,之前只可以在小程序上取消,然后同步给视频号状态。 申请退款,小程序和视频号双向可申请退款。 申请退货退款,小程序和视频号双向可申请退货退款,之前只有小程序上操作。 未付款订单,小程序和视频号 可在各自订单中心重新支付,同步状态。 确认收货,小程序和视频号双向可确认收货。 同步发货状态接口更新。 Q7:自定义交易组件验收流程走完后, 在MP后台点击完成依旧提示"检测到你未完成此项步骤, 请确认后重试"是什么原因? A7:需要通过调用新接口进行验收才可以通过。 Q8:调用自定义交易组件创建售后接口ecaftersale/add时报47001错误{“errcode”:47001,“errmsg”:"data format error "} A8:请检查“product_info”字段,注意对应类型为“object”。 Q9:调用自定义交易组件创建售后接口ecaftersale/add时报错2747002,参数错误{“errcode”:2747002,“errmsg”:"参数错误 "} A9:1.请检查“orderamt”参数,传参金额应不含邮费。 2.新旧接口不可混合调用,新接口不支持对旧接口生成的订单创建售后。 3.一个商品仅可以有一笔在流程的售后单,已创建或售后完结也会报次错误。 Q10:调用自定义交易组件“同意退货”接口ecaftersale/acceptreturn时报错“同意退货失败没有默认退货地址,需要在接口中传入” {“errcode”:9700210,“errmsg”:“errmsg” =>”同意退货失败没有默认退货地址,需要在接口中传入"} A10:需要调用“更新商家信息”接口,补充默认退货地址 Q11:调用自定义交易组件“添加商品”接口shop/spu/add时报错“该账号客服方式必须包含微信客服/小程序客服” {“errcode”:1040042,“errmsg”:"该账号客服方式必须包含微信客服/小程序客服”} A11:需要在MP后台配置微信客服/小程序客服后,然后通过“更新商家信息”接口更新商家信息[图片] 调用“获取商家信息”接口应返回一下内容才为成功,“service_agent_type”字段需要同时包含0,1,2三个值 [图片] Q12:调用自定义交易组件“创建订单”接口shop/order/add时报错“不支持的发货方式” {“errcode”:1010036,“errmsg”:"不支持的发货方式“} A12:视频号场景当前只支持“正常快递”方式,其他请留意后续更新。 Q13:自定义交易组件“创建售后单”接口中“refund_reason_type”字段 定义见枚举值定义 “emAfterSalesReason ”,“emAfterSalesReason”对应枚举值是什么? A13:INCORRECT_SELECTION = 1; // 拍错/多拍 NO_LONGER_WANT = 2; // 不想要了 NO_EXPRESS_INFO = 3; // 无快递信息 EMPTY_PACKAGE = 4; // 包裹为空 REJECT_RECEIVE_PACKAGE = 5; // 已拒签包裹 NOT_DELIVERED_TOO_LONG = 6; // 快递长时间未送达 NOT_MATCH_PRODUCT_DESC = 7; // 与商品描述不符 QUALITY_ISSUE = 8; // 质量问题 SEND_WRONG_GOODS = 9; // 卖家发错货 THREE_NO_PRODUCT = 10; // 三无产品 FAKE_PRODUCT = 11; // 假冒产品 OTHERS = 12; // 其它 Q14:自定义交易组件“获取售后单详情”接口中“status”字段 定义见枚举值定义 “AfterSalesState ”,“AfterSalesState”对应枚举值是什么? A14:AFTERSALESTATUS_INVALID = 0; USER_CANCELD = 1; // 用户取消申请 MERCHANT_PROCESSING = 2; // 商家受理中 MERCHANT_REJECT_REFUND = 4; // 商家拒绝退款 MERCHANT_REJECT_RETURN = 5; // 商家拒绝退货退款 USER_WAIT_RETURN = 6; // 待买家退货 RETURN_CLOSED = 7; // 退货退款关闭 MERCHANT_WAIT_RECEIPT = 8; // 待商家收货 MERCHANT_OVERDUE_REFUND = 12; // 商家逾期未退款 MERCHANT_REFUND_SUCCESS = 13; // 退款完成 MERCHANT_RETURN_SUCCESS = 14; // 退货退款完成 PLATFORM_REFUNDING = 15; // 平台退款中 PLATFORM_REFUND_FAIL = 16; // 平台退款失败 USER_WAIT_CONFIRM = 17; // 待用户确认 MERCHANT_REFUND_RETRY_FAIL = 18; // 商家打款失败,客服关闭售后 MERCHANT_FAIL = 19; // 售后关闭 Q15:自定义交易组件申请视频号专用商户号后,唤起支付报错: “商户号该产品权限未开通” A15:需要先调用“生成订单”接口,然后调用“生成支付参数”接口获取调取支付所需参数,不要调用微信支付统一下单接口获取调用支付参数 Q16:调用自定义交易组件“同意退款”接口shop/ecaftersale/acceptrefund时报错“同意退款失败” {“errcode”:9700209,“errmsg”:"同意退款失败 退款失败“} A:该问题是订单流转状态不对导致,请严格按照文档流程进行操作调用;新旧接口混合调用也会报此错误。 Q17:二级商户号订单支付流程与原有订单支付流程有什么区别? A17:主要区别是:二级商户号订单调起支付所需参数是通过“生成支付参数”获取,无需同步支付结果;原流程调起支付是需要通过微信支付统一下单获取,需要同步支付结果。 Q18:调用自定义交易组件售后相关接口:“创建售后单”、“用户取消售后单”、“用户上传物流信息”、“获取售后单列表”、“获取售后单详情”、“同意退款“、”同意退货“、“拒绝售后”、“上传退款凭证”、“更新售后单”等接口时报错{“errcode”: 48001,“errmsg”: “api unauthorized”} A18:未开通视频号场景经营商户号,需要先开通场景经营商户号才可以调用。 Q19:自定义交易组件二级商户单调起支付时报错“JSAPI缺少参数total_fee” A19:生成支付参数失败,没返回正确的预支付 ID,重新调用生成支付参数接口获取新的支付参数即可 Q20:调用自定义交易组件接口报错{“errcode”:61007,“errmsg”:“api is unauthorized to component”} A20:没有完成服务商授权。 Q21:已经开通了自定义交易组件,调用接口还是报错48001 A21:接口鉴权有本地缓存,一般最多10分钟,请稍后再试。 Q22:调用自定义组件接口报错“json异常” A22:结构体比较复杂,请检查字段层级。划重点: json不支持注释!!!json不支持注释!!!json不支持注释!!! Q23:调用自定义组件接口报错{“errcode”:1000000,“errmsg”:“订单状态流转异常”} A23: 订单严格按照:创建、支付、发货、收货的事件流转,如果已经取消,则不能继续流转。 Q24:调用自定义组件上传图片接口报错{“errcode”:1070008,“errmsg”:"获取图片失败,请使用流式上传 "} A24:一般是图片url在微信侧获取不刀,可能为图片cdn设置了白名单或者cdn服务商把微信出口ip 给“ban”了 Q25:调用自定义组件上传图片接口报错{“errcode”:1070001,“errmsg”:"文件/图片为空 "} A25:检查请求报文协议,需[代码]Content-Type: multipart/form-data[代码] Q26:调用自定义组件上传图片接口报错{“errcode”:1000035,“errmsg”:"无效链接 "} A26:请检查图片链接是否为有效链接 Q27:自定义交易组件接入后没有收到事件回调消息 A27:使用公众平台调试工具确保回调链路正常。事件消息如下 [图片] Q28:视频号橱窗管理获取不到对应小程序 A28:1、检查是否开通视频号场景;2、检查是否绑定了推广员(非小程序超管需要绑定推广员) 持续更新中~~~
2022-04-14 - 小程序流量主运营之ECPM怎么提高
目前小程序流量主共有8个广告类型:banner、视频、插屏、前贴、激励、格子、模板、开屏。 首先说下ECPM是什么意思。ECPM指的是每一千次展示可以获得的广告收入。 ECPM是取决于用户点击广告次数,也就是1000次曝光里面点击广告的人数越多,ECPM值越高,不单单是曝光1000次的收益。 也就是说如果你曝光了1000次banner广告,但是没有用户点击,那么你banner广告位的ECPM就是0。 [图片] 然后我们说下今天的主题,ECPM怎么提高。 1、首先你流量主小程序里面的所有广告,都是广告主去投放的。广告主可投放的类型有很多种,根据广告主投放城市、行业等决定。 1-1、比如我在呼和浩特,我把广告投放到呼和浩特,如果我按竞价CPC的投放,一个点击最低1.06,除了微信要扣除流量主收益的50%之外,剩下的50%就是你的收益。 [图片] 1-2、我按合约广告投放,1000次曝光我花费的是15元,微信扣除50%,你的ECPM就是7.5,这么说懂了吧。 [图片] 1-3、所以基于广告主广告投放,你要选好广告,尽量避免第二条里面的1000次曝光这种CPM广告主,这种广告主一般都是大品牌,不在乎你点不点,就是让你看。所以我们要有犀利的眼光去判断屏蔽哪种广告位。 [图片] 2、ECPM的高低取决于你的小程序用户分布年龄 比如30岁IOS用户就是比20岁的IOS用户质量高,30岁左右的IOS用户属于高价值用户,对电商、游戏等付费能力会更强,会比20岁的人群要高,所以我们在开发小程序的时候,尽量往这个年龄段靠。还有30岁的女性电商用户,都是ECPM拉高点的关键用户群体。(此处仅仅是举例分析,无年龄歧视) 所以我们再开发、购买小程序时,选题材、素材的时候可以尽量往这个年龄段靠一下,ECPM会高一些。 3、广告设计体验 广告设计是一门艺术,但是不能违规。要优雅的设计广告,让用户看着舒服,看的清楚,主动去点击广告,这也是广告主投放广告的目的。最近有多人私信和我说买1000多个手机,弄1000多个微信去刷广告。真的是想瞎了心了,如果你是广告主,你投放出去的广告希望用户这样点击吗?再说了,微信广告的风控机制是你承受不住的,微信也得保护广告主投放的利益。如果全部都是这种样点广告,微信生态早就活不下去了。不要想着投机取巧,踏踏实实做流量才是王道。 [图片] 4、站外引流提升ECPM 所有的APP都缺流量,不要以为微信是国民产品就不缺流量。微信小程序也喜欢站外流量引进来,所以大家在引流的时候,可以从其他APP引流,这样你的ECPM也是很高。 [图片] [图片]
2020-12-19 - 2020年最新最全小程序支付功能实现,借助小程序云开发实现小程序支付功能
第一节~企业微信小程序的注册图文详解 石头哥的公司终于注册下来了,所以接下来,石头哥也可以愉快的注册一个企业微信小程序了,主要是想实现微信支付功能,获取用户手机号功能,这些都需要企业小程序。所以今天就来注册一把企业小程序。顺便把这个过程通过这篇文章记录下来,后面注册微信支付商户号,还有实现小程序支付功能的时候,都会写对应的文章出来。 注册企业小程序必备 1,一个全新的邮箱,没有注册过小程序,没有注册过公众号的邮箱 2,企业或者个体工商户的营业执照 1,邮箱注册界面 首先,在注册界面选择小程序 [图片] 如果你的邮箱被占用过,那么就会出现下面的错误 [图片] 如果邮箱没用过,就会进入下面页面,这个页面用来验证邮箱 [图片] 2,企业注册界面 上面的邮箱验证成功以后,我们这里就要选企业了,当然如果你是个体工商户,你也可以选择个体工商户。 [图片] 这里的信息如实填写即可 [图片] 信息填写完毕,提交时会有如下一个确认框 [图片] 这样我们企业小程序就注册好了,可以看到企业小程序后台有微信支付选项的,个人小程序是没有这一选项的。 [图片] 3,登录小程序后台,做微信支付关联 我们这个时候如果想直接做微信支付商户号关联,会提示如下错误。 [图片] 也就是说我们必须先经过微信认证后,才可以关联微信支付。所谓的微信认证,也就是每年给微信交300元认证费。 4,微信认证 点击这里的认证 [图片] 仔细一看,微信认证要填的信息还是比较多的 [图片] 填写发票信息,也就是你花300元给微信,微信给你开个发票。 [图片] 然后就是付300元给微信了。 [图片] 支付完就等着微信审核吧,只有认证审核后,才可以做别的操作 [图片] 耐心等待吧,认证完,我就可以关联微信支付商户号了,就可以愉快的做支付功能了。我们下一节见。 我是晚上提交的认证,第二天也就是周三工作日的上午,认证机构给我打电话了,是个小姐姐,声音很好听,确认些信息,再问我下对公账号收到了一笔2分钱内的数字,做下验证,就审核通过了。 [图片] 第二节~注册微信支付商户号 我们上一节已经注册了企业小程序,这一节我们就来注册微信支付商户号,这种实现微信支付的必须一步,因为没有微信支付商户号,就好比你没有银行卡一样,怎么收钱呢。 写在前面 微信商户号申请还是比较麻烦的,不仅要填写很多信息,还有最麻烦的一步就是经营场所的实景图验证,这一步很麻烦,我也是修改了好多次,才通过验证的。 一,注册微信支付商户号 1,接入微信支付 其实微信官方有对应的注册文档。https://kf.qq.com/product/wechatpaymentmerchant.html#hid=2449 [图片] 申请地址:https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal 这个地址可能会变动,如果变动的话,大家就去上面的这个官方文档里跟着一步步来。 [图片] 然后跟着步骤一步步的如实填写即可。 [图片] 然后就是填写信息页 [图片] 二,注册时的注意事项 下面我会把注册过程中的一些注意事项给大家说下。我这里用的是微信支付服务商关联注册(至于为什么这么做,这里不便透漏,只给大家说下,用服务商注册可以降低微信支付的手续费),大家注册微信商户时,可以找石头哥,石头哥现在也会微信支付的服务商啦。。。 [图片] 接下来就要漫长的资料填写过程了。 [图片] 这一点是最麻烦的,所以会重点讲下。 如果你有线下实体店,需要把下面要求的照片拍下,然后上传 [图片] 如果你有认证过的微信服务号 [图片] 如果你有已经上线的小程序或者有自己的小程序设计图,可以用下面的这个,不过小程序申请微信支付通常比较麻烦些,最简单的是线下门店和公众号。 [图片] 用app来申请,需要下面这些。 [图片] 有网站的话,可以用下面这些。 [图片] 企业微信也可以注册微信支付。 [图片] 结算规则这里尽量选择费率低的,符合自己业务场景的。 [图片] 资料提交也是比较慢的,耐心等待就行。 [图片] 然后还需要一步验证。 [图片] 验证完成以后,就等待审核就可以了。 [图片] 提交完成以后,耐心等待审核就行。如果有审核不通过的情况,根据实际情况修改就行。这里审核通过以后,我们才可以进行接下来小程序绑定支微信支付的操作,如果多次提交审核不通过,可以找石头哥来帮忙。 下图是我第二天审核通过以后的截图 [图片] 审核通过以后,还需要进行协议签署 [图片] [图片] 协议签署完以后,我们的微信支付商户号就正式申请下来了。 第三节~借助云开发10行代码实现小程序支付功能 接上篇,上一篇我们已经注册完企业小程序,并成功的完成了微信认证。这一节我们就来开始正式的关联微信支付了,给我们的小程序接入支付功能。 传送门:《企业微信小程序的注册图文详解》 必备条件 1,必须注册微信支付的商户号 2,企业小程序必须通过认证 3,小程序关联微信支付商户号 一,小程序关联微信商户 1,登录小程序后台,点击关联更多商户号 [图片] 2,关联商户号需要用到appid,点击如下所示的关联更多AppID [图片] 把我们小程序的appid复制下 [图片] 然后去授权关联我们的微信支付商户号 [图片] 微信商户号申请下来以后,就可以直接微信扫码登录了,然后就可以在商户号里关联小程序了。 [图片] 商户号里关联好,我们需要去小程序里确认下授权。 [图片] 授权完成以后,我们的小程序端会出现下面这样的,点击下确认即可。 [图片] 点击下上图的确认,然后再点击下图所示的授权。 [图片] 可以看到我们的小程序和微信商户号成功的关联起来了 [图片] 到这里我们小程序和商户号的关联操作就完成了。 二,开通云开发并绑定微信商户号 1,然后新建小程序,开始代码部分。 这里的appid一定要是你关联过微信支付商户的,并且还得是企业小程序。这里创建项目时记得选择不使用云服务,因为使用默认云开发的话,会创建一大堆无用的文件。 [图片] 2,开通云开发功能 [图片] 会弹出协议,直接点确定就可以了 [图片] 3,给你的云开发环境起个名,英文或者拼音 [图片] 现在云开发只可以免费试用一个月,学习的话,一个月够了,所以这里支付方式,随便选一个就行了。下一步的选择配额,也随便选一个就行了,然后提交。 [图片] 等待创建云开发,创建好以后如下。 [图片] 4,然后点击设置,全局配置,可以看到有个微信支付配置 [图片] 有的同学这里看不到微信支付配置,是因为你的小程序开发工具版本过低。最好下载最新版本的开发者工具。 5,云开发配置微信商户号。 [图片] 添加完以后还需要手机上进行授权确认 [图片] 6,手机微信上进行确认 [图片] [图片] 可以看到这里已经授权绑定了 [图片] 退款的我们后面会再讲。 这个时候我们准备工作就全部做好了,接下来就要愉快的写代码。 三,云开发支付代码的编写 1,看官方文档,其实说的很详细了,接下来我带大家过一遍。 [图片] 这里也把官方链接贴出来给大家。 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/pay/CloudPay.unifiedOrder.html 其实官方有给我们完整的示例。 [图片] 我们只需要把这段代码复制到我们自己的云函数里就行了。 2,创建云开发统一支付的云函数 我们首先要创建云函数的根目录 [图片] 然后新建云函数pay0610 [图片] 然后把官方示例直接复制到我们自己的云函数里 [图片] 3,把云函数里的信息替换成我们自己的 [图片] 上面标注重要的是一定要替换成自己的。然后保存修改,部署云函数 [图片] 4,编写页面 在index.wxml里写一个按钮,点击的时候调起我们的支付云函数 [图片] 然后在index.js里编写点击事件 [图片] 我们这个时候直接点击支付,看看会不会调起支付 [图片] 这个时候一大堆爆红,仔细看下,可以看出我们云开发环境id没有初始化。 5,app.js里配置云开发环境id 这里取到环境id [图片] 然后在app.js里配置 [图片] 然后我们再点击下支付,可以看到我们成功的调起了支付 [图片] 6,然后我用手机微信支付下试试 [图片] [图片] [图片] 支付成功后,我们的控制台也会有相应的日志打印。 [图片] 到这里我们就可以成功的在小程序里使用微信支付了,后面无非把价格和商品名字做活,做成动态传入的。 后面我也会把源码放到网盘里,有需要的同学,去我公号里回复‘云开发支付’就可以获取了。 [图片] 第四节,商品订单支付案例讲解 上面我们学会了支付功能,那么我们接下来就用一个简单的案例来教大家试下一个简单的商城小程序,包含以下功能 1,商品列表 2,订单列表(分已支付和待支付) 3,支付功能 4,解决一些支付中常见的问题 老规矩,先看下效果图 [图片] [图片] 页面比较简陋,因为我这里主要教大家如何实现支付功能的,所以页面美化的问题,大家课下有时间时,自己做下美化就行了。 一,在app.json里配置tabbar多页面 由于我们这里用到了两个页面,还是在我们前面章节的基础上,直接改造页面。我们配置多页面就要用到tabbar了。所以我们先创建一个order页面,页面如何创建,我这里就不再累述了。小程序基础的课里讲了很多遍。 然后在app.json里配置如下 [图片] 由于这里的配置不是本节的学习重点,这里把代码给到大家,大家直接粘贴到自己项目里就可以的。 [代码] "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配置好了,我们接下来就要开始代码部分了。 二,把商品做活,放到数据库里 我们前面学习的时候,用的是本地数据,接下来我就来给大家演示下,如何把商品数据放到数据库,方便后期动态修改。 1,在云开发数据库里新建goods集合(表) [图片] 创建好以后,记得把权限改为所有人可读写 [图片] 创建好goods集合以后,就要往里面添加数据了,把我们之前本地写死的数据,就可以做成活的了。 [图片] 添加好的数据如下 [图片] 2,改造商品列表代码 我们之前的商品数据是写死在本地的,这次我们就可以请求云开发数据库里的数据了,后期可以动态增删,修改。 [图片] 通过上图我们可以看出,已经成功的请求到了数据库里的商品数据,接下来把数据动态的绑定到小程序页面上就可以了。 [图片] 可以看到,我们的数据已经成功的显示出来了。 到这里我们的商品列表页改造就算完成了。 三,创建订单 我们之前学习是点击购买就直接支付了,没有一个订单来动态的记录。所以我们这一节,先来教大家如何新建订单。 1,新建order表 我们要在云开发数据库里生成订单,其实就是往订单表里增加数据。所以还是要先新建order集合(表) [图片] 这里要注意下,我们的订单表的权限设置为“仅创建者可读写”,为什么呢? 因为我们每个人的订单肯定不想让别人看到吧。所以我们设置完仅创建者可读写,那么这个订单就只有我们自己可以看。上面的goods表只所以设置为所有人可读,是因为我们的商品数据是要每个客户都能看到的。 2,创建订单代码编写 我们上面order表创建好以后,我们用户再点购买的时候,就不能直接去支付了,应该先创建一个订单,然后再去支付。下面我们就分解开。教大家实现订单的创建。 [图片] 上面代码注释很清楚了,我们创建订单时需要往订单里保存商品名,金额,下单时间,订单状态。然后看下order表里的订单数据如下 [图片] 这样我们新的订单就创建成功了。 创建订单时,我们有用到一个获取当前时间的方法,这个方法是我们自定义的,由于不是本节学习重点,我就把这个方法的代码贴出来给大家,大家后面直接把代码放到自己项目里用就行了。 [代码] // 获取当前时间的工具方法 _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; }, [代码] 四,订单支付 我们上面创建好订单以后,应该在订单创建成功的回调里调起支付。其实支付的代码和我们前面学习基本都一样,唯一变化的就是要把我们新建的订单id传给支付云函数,把订单id作为支付时的单号。 [图片] 上图是我们创建订单时,返回的信息,可以看到返回信息里有一个_id字段,这个字段在我们order表里也有。 [图片] 其实我们支付的时候单号要保证唯一性,其实这个_id是微信官方自动为我们创建的,是唯一的,所以可以直接拿来用的,那么我们把之前的goPay支付方法稍微改造下。把这个_id作为订单号传给支付云函数。 [图片] 可以看出我们在创建订单成功的回调里去调起支付,依然可以支付成功。 我们的pay0611云函数唯一的变化就是把订单号做成了活的。 [图片] 重点注意: 我们的云函数只要有任何改动,都要记得重新部署云函数。 [图片] 到这里我们的支付和订单部分就改造完成了,接下来就要去实现订单的未支付和已支付列表了。 五,订单页面的展示(分已支付和未支付) 这一节知识点比较多,也比较复杂,我先把代码贴给大家,会在视频里仔细给大家一步步讲解。 order.wxml [图片] 这里切换未支付和已支付的分类栏代码如下: [代码]<!--导航条--> <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> <!-- 列表区域 --> <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'>数据为空哦~~</label> </view> [代码] 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(); }, onLoad() { this.getMyOrderList(); }, //获取订单 getMyOrderList() { let that = this; DB.collection("order") .where({ status: orderStatus }) .get({ success: function (res) { console.log("获取成功", res.data) let datalist = res.data; console.log(res); if (datalist && datalist.length > 0) { that.setData({ list: datalist }) } else { that.setData({ list: [] }) } } }) }, //支付订单 payOrder(event) { let good = event.currentTarget.dataset.item console.log('支付的good', good) wx.cloud.callFunction({ name: 'pay0611', data: { outTradeNo: good._id, goodName: good.name, totalFee: good.totalFee }, success: res => { console.log("获取支付参数成功", res) const payment = res.result.payment //调起支付 wx.requestPayment({ ...payment, success(res) { console.log('支付成功', res) }, fail(res) { console.error('支付失败', res) } }) }, fail: res => { console.log("获取支付参数失败", res) }, }) } }) [代码] 我会在视频里给大家做仔细讲解,手把手的教大家把这部分代码敲出来。 《微信云开发实现小程序支付功能》 学习过程中有任何问题,可以加石头哥微信2501902696
2020-12-01