应用场景： 该项目的宗旨是以广东石油化工学院为起始，以小程序为运营主体的校园招聘平台！是一个专门为“大学生校园招聘会”服务的小程序。该小程序可以分为三大个部分，一个是企业部分，一个是毕业生部分，另一部分是企业与毕业生线上交流部分。 小程序通过云开发，实现学生投简、企业招贤、线上咨询三大主要功能 目标群体： 在校毕业生、校园招聘会企业 应用功能概述： [图片] 企业注册+创建职位： [图片] [图片] [图片] 企业招贤 [图片] [图片] 企业面试 []([图片] [图片] 毕业生简历 [图片] 毕业生投简 [图片] [图片] 线上交流 [图片] 体验版本 [图片] 项目开源地址 https://github.com/ELBUND/JobFair 介绍视频地址 https://v.qq.com/x/page/w3153yg749g.html 团队介绍 南京大学金陵学院 梅同学 广东石油化工学院 李同学

我们在开发小程序时，一个列表里难免会有很多条数据，比如我们一个列表有1000条数据，我们一下加载出来，而不做分页，将会严重影响性能。所以这一节，我们来讲讲小程序分页加载数据的实现。 老规矩，先看效果图 [图片] 可以看到我们每页显示10条数据，当滑动到底部时，会加载第二页的数据，再往下滑动，就加载第三页的数据。由于我们一共21条数据，所以第三页加载完以后，会有一个“已加载全部数据”的提示。 本节知识点 1，小程序分页加载 2，小程序列表显示 3，云数据库的使用 4，云数据库分页请求数据的实现 一，先定义数据 我们做分页数据加载，肯定要先准备好数据，数据已经给大家准备好，如下图，文章末尾会贴出数据源和本节课源码的下载地址。 [图片] 然后把数据导入到我们的云开发的数据库里，关于数据如何导入，这里不再讲解，不知道的同学，请看下面这篇文章。或者去老师历史文章里找一下。 《小程序云开发入门—云数据库数据源的导入与导出》 下面给大家看下我们的数据源，长什么样。其实很简单，就是简单的定义21条数据。 [图片] 然后在看导入到数据库的样子。 [图片] 二，分页请求数据 我们第一步准备好了数据以后，接下来就来讲讲如何在js里做分页加载数据。 首先我们这里用到了小程序云开发数据库的知识点 1，get方法：获取云数据库数据 2，skip方法：跳过前面几条数据，请求后面的数据 3，limit方法：请求多少条数据。 比如下面这段代码,就是跳过前5条，请求从第6条开始往后的10条数据，就是请求6～15的数据，我们做分页加载也就是基于这个原理。 [代码] wx.cloud.database().collection("list") .skip(5) //从第几个数据开始 .limit(10) [代码] 下面把我们index.js的完整代码贴给大家。 [代码]//老师微信：2501902696 let currentPage = 0 // 当前第几页,0代表第一页 let pageSize = 10 //每页显示多少数据 Page({ data: { dataList: [], //放置返回数据的数组 loadMore: false, //"上拉加载"的变量，默认false，隐藏 loadAll: false //“没有数据”的变量，默认false，隐藏 }, //页面显示的事件 onShow() { this.getData() }, //页面上拉触底事件的处理函数 onReachBottom: function() { console.log("上拉触底事件") let that = this if (!that.data.loadMore) { that.setData({ loadMore: true, //加载中 loadAll: false //是否加载完所有数据 }); //加载更多，这里做下延时加载 setTimeout(function() { that.getData() }, 2000) } }, //访问网络,请求数据 getData() { let that = this; //第一次加载数据 if (currentPage == 1) { this.setData({ loadMore: true, //把"上拉加载"的变量设为true，显示 loadAll: false //把“没有数据”设为false，隐藏 }) } //云数据的请求 wx.cloud.database().collection("list") .skip(currentPage * pageSize) //从第几个数据开始 .limit(pageSize) .get({ success(res) { if (res.data && res.data.length > 0) { console.log("请求成功", res.data) currentPage++ //把新请求到的数据添加到dataList里 let list = that.data.dataList.concat(res.data) that.setData({ dataList: list, //获取数据数组 loadMore: false //把"上拉加载"的变量设为false，显示 }); if (res.data.length < pageSize) { that.setData({ loadMore: false, //隐藏加载中。。 loadAll: true //所有数据都加载完了 }); } } else { that.setData({ loadAll: true, //把“没有数据”设为true，显示 loadMore: false //把"上拉加载"的变量设为false，隐藏 }); } }, fail(res) { console.log("请求失败", res) that.setData({ loadAll: false, loadMore: false }); } }) }, }) [代码] 上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码 1，我们首先进页面时会请求前10条内容 2，10条内容请求成功以后，我们会把请求到的内容加入dataList数组，然后把dataList里的数据显示到页面上。并将currentPage加一，用于请求第二页数据。 3，当用户滑动到底部时，会触发onReachBottom事件，在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1，这里要记住一定，一定要请求成功以后才将currentPage +1。 三，列表布局和样式 其实index.wxml和index.wxss的代码很简单，给大家把代码贴出来。 1，index.wxml [代码]<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower"> <view class="result-item" wx:for="{{dataList}}" wx:key="item"> <text class="title">{{item.content}}</text> </view> <view class="loading" hidden="{{!loadMore}}">正在载入更多...</view> <view class="loading" hidden="{{!loadAll}}">已加载全部</view> </scroll-view> [代码] 2,index.wxss [代码]page { display: flex; flex-direction: column; height: 100%; } .result-item { display: flex; flex-direction: column; padding: 20rpx 0 20rpx 110rpx; overflow: hidden; border-bottom: 2rpx solid #e5e5e5; } .title { height: 110rpx; } .loading { position: relative; bottom: 5rpx; padding: 10rpx; text-align: center; } [代码] 到这里我们就完整的实现里分页加载功能了。 [图片] 源码和数据源，已经给大家放到网盘里了，有需要的同学请在文章底部留言，或者私信老师。 视频讲解：https://edu.csdn.net/course/detail/9604

我们在做小程序支付相关的开发时，总会遇到这些难题。小程序调用微信支付时，必须要有自己的服务器，有自己的备案域名，有自己的后台开发。这就导致我们做小程序支付时的成本很大。本节就来教大家如何使用小程序云开发实现小程序支付功能的开发。不用搭建自己的服务器，不用有自己的备案域名。只需要简简单单的使用小程序云开发。 老规矩先看效果图： [图片] 本节知识点 1，云开发的部署和使用 2，支付相关的云函数开发 3，商品列表 4，订单列表 5，微信支付与支付成功回调 支付成功给用户发送推送消息的功能会在后面讲解。 下面就来教大家如何借助云开发使用小程序支付功能。 支付所需要用到的配置信息 1，小程序appid 2，云开发环境id 3，微信商户号 4，商户密匙 一，准备工作 1，已经申请小程序，获取小程序 AppID 和 Secret 在小程序管理后台中，【设置】 →【开发设置】 下可以获取微信小程序 AppID 和 Secret。 [图片] 2，微信支付商户号，获取商户号和商户密钥在微信支付商户管理平台中，【账户中心】→【商户信息】 下可以获取微信支付商户号。 [图片] 在【账户中心】 ‒> 【API安全】 下可以设置商户密钥。 [图片] 这里特殊说明下，个人小程序是没有办法使用微信支付的。所以如果想使用微信支付功能，必须是非个人账号（当然个人可以办个体户工商执照来注册非个人小程序账号） 3，微信开发者 IDE https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 4，开通小程序云开发功能：https://edu.csdn.net/course/play/9604/204526 二，商品列表的实现 效果图如下，由于本节重点是支付的实现，所以这里只简单贴出关键代码。 [图片] wxml布局如下： [代码]<view class="container"> <view class="good-item" wx:for="{{goods}}" wx:key="*this" ontap="getDetail" data-goodid="{{item._id}}"> <view class="good-image"> <image src="{{pic}}"></image> </view> <view class="good-detail"> <view class="title">商品: {{item.name}}</view> <view class="content">价格： {{item.price / 100}} 元 </view> <button class="button" type="primary" bindtap="makeOrder" data-goodid="{{item._id}}" >下单</button> </view> </view> </view> [代码] 我们所需要做的就是借助云开发获取云数据库里的商品信息，然后展示到商品列表，关于云开发获取商品列表并展示本节不做讲解（感兴趣的同学可以翻看我的历史博客，有写过的） 也有视频讲解： https://edu.csdn.net/course/detail/9604 [图片] 三，支付云函数的创建 首先看下我们支付云函数都包含那些内容 [图片] 简单先讲解下每个的用处 config下的index.js是做支付配置用的，主要配置支付相关的账号信息 lib是用的第三方的支付库，这里不做讲解。 重点讲解的是云函数入口 index.js 下面就来教大家如何去配置 1,配置config下的index.js, 这一步所需要做的就是把小程序appid，云开发环境ID，商户id，商户密匙。填进去。 [图片] 2，配置入口云函数 [图片] 详细代码如下，代码里注释很清除了，这里不再做单独讲解： [代码]const cloud = require('wx-server-sdk') cloud.init() const app = require('tcb-admin-node'); const pay = require('./lib/pay'); const { mpAppId, KEY } = require('./config/index'); const { WXPayConstants, WXPayUtil } = require('wx-js-utils'); const Res = require('./lib/res'); const ip = require('ip'); /** * * @param {obj} event * @param {string} event.type 功能类型 * @param {} userInfo.openId 用户的openid */ exports.main = async function(event, context) { const { type, data, userInfo } = event; const wxContext = cloud.getWXContext() const openid = userInfo.openId; app.init(); const db = app.database(); const goodCollection = db.collection('goods'); const orderCollection = db.collection('order'); // 订单文档的status 0 未支付 1 已支付 2 已关闭 switch (type) { // [在此处放置 unifiedorder 的相关代码] case 'unifiedorder': { // 查询该商品 ID 是否存在于数据库中，并将数据提取出来 const goodId = data.goodId let goods = await goodCollection.doc(goodId).get(); if (!goods.data.length) { return new Res({ code: 1, message: '找不到商品' }); } // 在云函数中提取数据，包括名称、价格才更合理安全， // 因为从端里传过来的商品数据都是不可靠的 let good = goods.data[0]; // 拼凑微信支付统一下单的参数 const curTime = Date.now(); const tradeNo = `${goodId}-${curTime}`; const body = good.name; const spbill_create_ip = ip.address() || '127.0.0.1'; // 云函数暂不支付 http 触发器，因此这里回调 notify_url 可以先随便填。 const notify_url = 'http://www.qq.com'; //'127.0.0.1'; const total_fee = good.price; const time_stamp = '' + Math.ceil(Date.now() / 1000); const out_trade_no = `${tradeNo}`; const sign_type = WXPayConstants.SIGN_TYPE_MD5; let orderParam = { body, spbill_create_ip, notify_url, out_trade_no, total_fee, openid, trade_type: 'JSAPI', timeStamp: time_stamp, }; // 调用 wx-js-utils 中的统一下单方法 const { return_code, ...restData } = await pay.unifiedOrder(orderParam); let order_id = null; if (return_code === 'SUCCESS' && restData.result_code === 'SUCCESS') { const { prepay_id, nonce_str } = restData; // 微信小程序支付要单独进地签名，并返回给小程序端 const sign = WXPayUtil.generateSignature({ appId: mpAppId, nonceStr: nonce_str, package: `prepay_id=${prepay_id}`, signType: 'MD5', timeStamp: time_stamp }, KEY); let orderData = { out_trade_no, time_stamp, nonce_str, sign, sign_type, body, total_fee, prepay_id, sign, status: 0, // 订单文档的status 0 未支付 1 已支付 2 已关闭 _openid: openid, }; let order = await orderCollection.add(orderData); order_id = order.id; } return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: { out_trade_no, time_stamp, order_id, ...restData } }); } // [在此处放置 payorder 的相关代码] case 'payorder': { // 从端里出来相关的订单相信 const { out_trade_no, prepay_id, body, total_fee } = data; // 到微信支付侧查询是否存在该订单，并查询订单状态，看看是否已经支付成功了。 const { return_code, ...restData } = await pay.orderQuery({ out_trade_no }); // 若订单存在并支付成功，则开始处理支付 if (restData.trade_state === 'SUCCESS') { let result = await orderCollection .where({ out_trade_no }) .update({ status: 1, trade_state: restData.trade_state, trade_state_desc: restData.trade_state_desc }); let curDate = new Date(); let time = `${curDate.getFullYear()}-${curDate.getMonth() + 1}-${curDate.getDate()} ${curDate.getHours()}:${curDate.getMinutes()}:${curDate.getSeconds()}`; } return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: restData }); } case 'orderquery': { const { transaction_id, out_trade_no } = data; // 查询订单 const { data: dbData } = await orderCollection .where({ out_trade_no }) .get(); const { return_code, ...restData } = await pay.orderQuery({ transaction_id, out_trade_no }); return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: { ...restData, ...dbData[0] } }); } case 'closeorder': { // 关闭订单 const { out_trade_no } = data; const { return_code, ...restData } = await pay.closeOrder({ out_trade_no }); if (return_code === 'SUCCESS' && restData.result_code === 'SUCCESS') { await orderCollection .where({ out_trade_no }) .update({ status: 2, trade_state: 'CLOSED', trade_state_desc: '订单已关闭' }); } return new Res({ code: return_code === 'SUCCESS' ? 0 : 1, data: restData }); } } } [代码] 其实我们支付的关键功能都在上面这些代码里面了。 [图片] 再来看下，支付的相关流程截图 [图片] 上图就涉及到了我们的订单列表，支付状态，支付成功后的回调。 今天就先讲到这里，后面会继续给大家讲解支付的其他功能。比如支付成功后的消息推送，也是可以借助云开发实现的。 由于源码里涉及到一些私密信息，这里就不单独贴出源码下载链接了，大家感兴趣的话，可以私信我，或者在底部留言。单独找我要源码也行（微信2501902696） 视频讲解地址：https://edu.csdn.net/course/detail/24770