注册时候是选择的个人程序没有选择企业，但是小程序起名字的时候就不让用某某公司了，比较苦恼，请大神帮忙指点。

为了优化用户的使用体验，平台将回收“使用 wx.getUserInfo 接口直接弹出授权框”以及“使用 wx.authorize 接口直接申请提前授权用户信息”的能力，开发者需要使用组件方式唤起登录授权弹窗。 2018年10月10日后发布新版本的小程序，将无法在线上版本中使用接口直接弹出授权框。开发者可结合平台设计建议，提前做好兼容，合理使用微信登录能力。 能力调整背景 怎么合理使用微信登录能力 小程序登录流程设计建议 01 能力调整背景 推出微信登录能力的初衷是希望：当用户使用小程序时，可以便捷地使用微信身份登录小程序。但在实际使用场景中，我们发现：很多开发者在打开小程序时直接弹出授权框，如果用户点击拒绝授权，无法使用小程序。 在用户无法获知当前小程序服务内容的情况下，很多用户就会选择拒绝授权并离开当前小程序。所以“一进入小程序就要求用户授权”的做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。 所以平台调整登录接口，回收“使用 wx.getUserInfo 接口直接弹出授权框”以及“使用 wx.authorize 接口直接申请提前授权用户信息”的能力，并鼓励开发者参照以下指引合理改造小程序内的登录流程。 02 怎么合理使用微信登录能力 平台分别提供多种方式实现微信登录： 1. 调用wx.login接口，静默获取openid 适用场景：无需使用用户头像、昵称、Unionid信息 2. 使用 open-data （小程序）或者开放数据域（小游戏）的方式展示用户信息（无需用户授权） 适用场景：需要在前端“展示”用户头像、昵称信息，但不需要获取Unionid 3.使用button（小程序）或UserInfoButton（小游戏）组件，用户点击后弹窗请求用户授权 适用场景：需要获取用户头像、昵称、Unionid等基本信息 开发建议 第一步：获取openID 当用户访问小程序时，先通过wx.login，获取用户openID 。这时无需弹框授权，开发者拿到 openID 可以建立自身的帐号 ID。 第二步： 使用open-data方式或开放数据域方式展示头像昵称 如需要在前端展示用户头像、昵称信息， 使用open-data 方式或者开放数据域的方式展示用户信息 第三步：根据实际使用场景，使用组件，引导用户登录 在关键操作中，如必须获取用户头像、昵称、UnionID信息，可根据第一步获取的openID判断是新用户还是旧用户：     如果是旧用户，可以直接登录，也可定期使用wx.getUserInfo更新用户的信息；     如果是新用户，使用button（小程序）或UserInfoButton（小游戏）组件，在用户点击后弹窗请求获取用户基本信息。 03 小程序登录流程设计建议 a. 在必须用到登录信息的环节引导用户登录 在用户必须登录时才引导用户登录（如：购买前需要获取会员信息，用于同步积分数据），而不是用户一进入小程序就弹窗要求用户授权。如只需要在前端展示用户头像、昵称，无需要求用户授权，可直接展示。 [图片] b.清晰、准确地引导用户登录 在登录页面中，清晰、准确地告知用户当前操作是登录，说明获取登录信息的目的（如：用于同步会员积分数据等） [图片] c. 不强制用户必须登录后才能使用小程序服务 提供游客模式，不强制用户必须登录后才能进入小程序。如要求必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 [图片]

针对近期部分小程序接口能力使用不合理的情况，微信公众平台将对下列能力进行调整。开发者可在最新版开发者工具内，选择最新基础库版本体验。调整方案具体如下，请开发者尽快完成适配。 1、分享监听接口 10月10日起新提交的版本，用户从小程序、小游戏中分享消息给好友时，开发者将无法获知用户是否分享完成，也无法在分享后立即获得群ID。请参考调整指引   2、getUserInfo接口 10月10日起新提交的版本，用户在小程序、小游戏中需要点击组件后，才可以触发登录授权弹窗、授权自己的昵称头像等数据。请参考调整指引   3、openSetting接口 10月10日起新提交的版本，用户在小程序、小游戏中需要点击行为后，才可以跳转打开设置页，管理授权信息。请参考调整指引

我们在开发小程序时，如果想获取用户信息，就需要获取用的授权，如果用户误点了拒绝授权，我们怎么样去正确的引导用户重新授权呢。今天就来给大家讲讲如果正确的引导用户授权。 老规矩，先看效果图 [图片] 从上图可以看出，我们在用户点击拒绝授权时，我们会弹出一个提示框，提示用户去设置页重新授权，当用户去授权页重新授权以后，我们再回到首页，点击获取用户信息时，就可以成功的获取到用户信息了。 如下图蓝色框里，就是我们成功的获取的用户信息。 [图片] 一，我们获取用户信息的时候需要用户授权 我们点击获取用户信息时，通常会弹出如下提示框，如果用户点击了取消，就再也没有办法通过点击授权按钮获取用户信息了。 [图片] 所以接下来我们要做的就是在用户拒绝了授权时，引导用户去设置页重新授权。 把获取用户授权的代码先贴给大家 [代码]<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button> [代码] 二，检测用户是否授权 我们在用户点击了上面定义的button按钮后，做权限检测。代码如下。 [代码] getUserInfo: function(e) { let that = this; // console.log(e) // 获取用户信息 wx.getSetting({ success(res) { // console.log("res", res) if (res.authSetting['scope.userInfo']) { console.log("已授权=====") // 已经授权，可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success(res) { console.log("获取用户信息成功", res) that.setData({ name: res.userInfo.nickName }) }, fail(res) { console.log("获取用户信息失败", res) } }) } else { console.log("未授权=====") that.showSettingToast("请授权") } } }) }, [代码] 给大家简单解析下。 wx.getSetting ：用来获取用户授权列表 if (res.authSetting[‘scope.userInfo’]) 代码用户授权成功，如果用户没有授权，就代表授权失败。 在授权失败时，我们调用that.showSettingToast()方法 三，showSettingToast方法如下 [代码] // 打开权限设置页提示框 showSettingToast: function(e) { wx.showModal({ title: '提示！', confirmText: '去设置', showCancel: false, content: e, success: function(res) { if (res.confirm) { wx.navigateTo({ url: '../setting/setting', }) } } }) } [代码] 这方法做的就是引导用户去设置页。 四，我们的设置页 [图片] 我们的设置页其实很简单，只有上图这么一段代码。 [图片] 五，去系统设置页。 我们上面第四步的button按钮，点击以后，就会去系统设置页。 [图片] 可以看到系统设置页，有一个开关，当用户点击开关时，就可以重新授权啦。 [图片] 重新授权成功以后，我们回到首页，就可以成功的获取到用户信息了。 [图片] 到这里我们就成功的实现了引导用户授权的功能了。 把index.wxml和index.js代码贴出来给大家 index.wxml [代码]<!--index.wxml--> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 授权获取头像昵称 </button> <text>{{name}}</text> [代码] index.js [代码]//index.js Page({ getUserInfo: function(e) { let that = this; // console.log(e) // 获取用户信息 wx.getSetting({ success(res) { // console.log("res", res) if (res.authSetting['scope.userInfo']) { console.log("已授权=====") // 已经授权，可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success(res) { console.log("获取用户信息成功", res) that.setData({ name: res.userInfo.nickName }) }, fail(res) { console.log("获取用户信息失败", res) } }) } else { console.log("未授权=====") that.showSettingToast("请授权") } } }) }, // 打开权限设置页提示框 showSettingToast: function(e) { wx.showModal({ title: '提示！', confirmText: '去设置', showCancel: false, content: e, success: function(res) { if (res.confirm) { wx.navigateTo({ url: '../setting/setting', }) } } }) }, }) [代码] 有任何关于编程的问题都可以留言或者私信我，我看到后会及时解答 编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。 有任何关于小程序的问题可以加我微信：2501902696（备注小程序） 视频讲解： https://edu.csdn.net/course/detail/9531

最近很多朋友问个人小程序有没有办法现实支付功能？ 在微信小程序里，主体为个人时，是无法发现支付的。 所以我们要实现支付功能，我们需要借助第三方的支付功能。下面我来分享一下实现方法。 步骤一：在小蜜蜂支付平台开通支付功能。目前支持个人申请 步骤二：跳转至“收银台小助手” 完成收款 以下是实现代码： [代码]var shop_no = "20191024308978649d";//门店号，小蜜蜂服务平台分配 var outTradeNo = shop_no + Date.parse(new Date()); wx.navigateToMiniProgram({ appId: 'wx113f2407af0ed4da', path: 'pages/pay/index', extraData: { "shop_no": shop_no, "secret": "wD7Ct61VJePUad1KyA2Iz5EYKLO2b8",//支付秘钥，小蜜蜂服务平台分配 "totalAmount": 0.1*100, //金额单位：分 "outTradeNo": outTradeNo }, envVersion: 'release', success(res) { // 打开成功 } }) [代码] 小蜜蜂支付平台官方文档：https://www.bestsmartbee.com/index/paydoc

众所周知，个人小程序受限于微信的政策，很多内容或者类目无法去做，对于变现，大家的目光基本也就聚焦在广告变现这一条路上。 随着小程序各种广告的开放，个人小程序的变现之路似乎也越来越明朗。然而，现实的情况却是，月底结算的时候，流量主们看着结算单上的两位数，欲哭无泪。 那么，对于个人小程序，广告变现的路子该如何去走？ 如何才能实现收益最大化？ 如何才能广告月入30k，当上CEO，赢取白富美，走上人生巅峰？ **下面是满满的干货，一定要看到最后一行！** 1. 做什么方向？做什么内容？起什么名字？ 以变现为目的的小程序，名字很重要，一定要和其他热门小程序相似、相近、相仿！ 内容？ 内容从来不是重点，只需要记住一点， 什么火做什么，什么话题热做什么！ 以这个小程序为例： [图片] 看明白了吧，短视频现在多火啊，做他准没错！ 说到这里，有人发现问题了，视频类目明明是个人不允许做的啊，这怎么办？  这个问题待会说。 2. 善用广告 目前可用的广告基本有banner，开屏，激励视频，贴片，这几种广告形式一定要在小程序中运用的淋漓尽致！ 仍以此小程序为例： [图片] [图片] [图片] a. 打开小程序就开屏广告，切换tab就开屏广告，没事滚滚屏也给你来一个，不怕你不点，反正不小心也会点到 b. 视频流里面能放多少个就放多少个，万一不小心点到了呢？ c. 视频的贴片广告一定要加的，不然就浪费了 d. 视频下方的相关视频一定要做，想看可以，先看一下激励视频再说。反正客户群体主要是大爷大妈，有的是时间，不在乎这15秒到30秒。 3. 善用分享     凡是目所能及的地方，一定要加上分享，分享朋友圈这种不仅要加还要做动态效，让用户记得去点。 [图片]  4. 善于召回用户   一定要用好小程序的下发通知功能，收集formid，没事就给用户发个通知什么的，不愁他不回头（至于formid怎么收集，不在本教程讨论范畴之内，自行搜索）。   [图片] 6. 绕审（敲黑板！划重点！） 说了这么多，一定有人要说了，你这小程序类目不对，广告乱搞，怎么可能过审啊？ 重点来了，绕审，这个一定要做。 众所周知，微信的审核是 有人工环节的，只需要在提审期间，让审核人员看到你想让他看到的，不就行了么？ 这个也很简单，审核期间，接口返回的数据做点手脚，页面上加个判断不就是了。 [图片] 看到了吧，审核期间所有视频都变成了图片，点击查看大图而已。 完美解决！！ 好了说了这么多，对于月入30K是不是有点心得了？？？如果有兴趣，继续往下看 -------------------- -------------------- -------------------- 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！ 以上内容均属严重违规行为，请大家引以为鉴！！！

最近社区里关于审核的帖子很多，不能愉快的在社区划水了。 很多人在社区发帖各种急，有活动要上线的，有严重BUG要修复的，有客户催的，有老板提着大刀在后面等着等等的理由，但是这些理由官方几乎是直接忽略的，不要指望审核人员能为你做什么。 社区能看到不少几个小时未审核就发帖催的，只有真正超过7个工作日未审核的小程序官方才会处理，否则普通的催审帖子发的越多不仅不会加快审核效率，可能还会降低审核的速度。与其浪费时间发无意义的帖子，还不如利用官方提供的资源和奖励去争取真正的极速审核资格，如果自己没有能力满足极速审核的条件，请耐心等待正常审核。 审核周期 普通小程序： 工作时间：1-7个工作日（无特殊情况都能在这期间审核完成）。 极速审核： 工作时间：周一到周五，9点-21点；周六周日，9点-19点。 第三方服务商预上线请参考官方公告：《第三方服务商quota调整与加急审核机制上线》 PS：审核未通过时候尽量不要撤回重新提交，否则重新排队。 极速审核 【推荐】小程序评测 小程序评测，旨在鼓励开发者将小程序做的更好，提供更优质的服务、更优秀的用户体验。通过运营、性能、用户指标综合评估小程序的数据情况，并经由人工审核评估小程序的功能体验情况，最终得出综合评定，并给予达标的小程序诸如加速审核，内测能力的奖励。 根据上个月最后一天的运营、性能、用户指标情况判断是否进行服务审核评定，每月初更新审核结果。小程序进入服务审核的前提是，运营指标为达标，性能指标为优秀，用户指标为优秀；反之，则当月不进行服务审核。 《小程序评测服务审核细则》 社区突出贡献者激励计划 小程序极速审核通道，开发者参与开发的小程序将可享受一个月快速审核的奖励。 时间：每个自然月的贡献统计，下个月将清零重新计算。 《社区突出贡献者激励计划》 催审官方回复截图（仅供参考） [图片] [图片] [图片]

最近朋友圈里经常有看到这样的头像 [图片] 既然这么火，大家要图又这么难，作为程序员的自己当然要自己动手实现一个。 老规矩，先看效果图 [图片] 仔细研究了下，发现实现起来并不难，核心代码只有下面10行。 [代码] wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: num, destWidth: num, destHeight: num, canvasId: 'shareImg', success: function(res) { that.setData({ prurl: res.tempFilePath }) wx.hideLoading() }, fail: function(res) { wx.hideLoading() } }) [代码] 一，首先要创建一个小程序 至于如何创建小程序，我这里就不在细讲了，我也有写过创建小程序的文章，也有路过相关的学习视频，去翻下我历史文章找找就行。 二，创建好小程序后，我们就开始来布局 布局很简单，只有下面几行代码。 [代码]<!-- 画布大小按需定制 这里我按照背景图的尺寸定的 --> <canvas canvas-id="shareImg"></canvas> <!-- 预览区域 --> <view class='preview'> <image src='{{prurl}}' mode='aspectFit'></image> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="1">生成头像1</button> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="2">生成头像2</button> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="3">生成头像3</button> <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="4">生成头像4</button> <button type='primary' bindtap='save'>保存分享图</button> </view> [代码] 实现效果图如下 [图片] 三，使用canvas来画图 其实我们实现微信头像挂红旗，原理很简单，就是把头像放在下面，然后把有红旗的相框盖在头像上面 [图片] 下面就直接把核心代码贴给大家 [代码]let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: "../../images/xiaoshitou.jpg", success: function(res) { console.log("promise1", res) resolve(res); } }) }); let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: `../../images/head${index}.png`, success: function(res) { console.log(res) resolve(res); } }) }); Promise.all([ promise1, promise2 ]).then(res => { console.log("Promise.all", res) //主要就是计算好各个图文的位置 let num = 1125; ctx.drawImage('../../'+res[0].path, 0, 0, num, num) ctx.drawImage('../../' + res[1].path, 0, 0, num, num) ctx.stroke() ctx.draw(false, () => { wx.canvasToTempFilePath({ x: 0, y: 0, width: num, height: num, destWidth: num, destHeight: num, canvasId: 'shareImg', success: function(res) { that.setData({ prurl: res.tempFilePath }) wx.hideLoading() }, fail: function(res) { wx.hideLoading() } }) }) }) [代码] 来看下画出来的效果图 [图片] 四，头像加红旗画好以后，我们就要想办法把图片保存到本地了 [图片] 保存图片的代码也很简单。 [代码]save: function() { var that = this wx.saveImageToPhotosAlbum({ filePath: that.data.prurl, success(res) { wx.showModal({ content: '图片已保存到相册，赶紧晒一下吧~', showCancel: false, confirmText: '好哒', confirmColor: '#72B9C3', success: function(res) { if (res.confirm) { console.log('用户点击确定'); } } }) } }) } [代码] 来看下保存后的效果图 [图片] 到这里，我的微信头像就成功的加上了小红旗了。 [图片] 源码我也已经给大家准备好了，有需要的同学在文末留言即可。 [图片] 后面我准备录制一门视频课程出来，来详细教大家实现这个功能，敬请关注。

1. 小程序功能 古诗词大全 成语大全 成语接龙 诗词飞花令 诗词分享、收藏 诗词接龙 唐诗宋词起名字 百家姓 猜谜语 2. 小程序预览： [图片] 3. 部分截图 首页 [图片] 列表页 [图片] 详情页 分享页 [图片] 唐诗宋词 [图片] 成语接龙 [图片] 4. 项目结构 [代码]. ├── README.md ├── project.config.json // 项目配置文件 ├── cloudfunctions | 云环境 // 存放云函数的目录 │ ├── login // 用户登录云函数 │ │ ├── index.js │ │ └── package.json │ └── collection_get // 数据库查询云函数 │ │ ├── index.js │ │ └── package.json │ └── collection_update // 数据库更新云函数 │ ├── index.js │ └── package.json └── miniprogram    ├── images // 存放小程序图片    ├── lib // 配置文件    ├── pages // 小程序各种页面    | ├── index // 首页    | └── menu // 分类页    | └── user // 用户中心    | └── search // 搜索页    | └── list // 列表页 搜索结果页    | └── detail // 详情页    | └── collection // 收藏页    | └── find // 发现页    | └── idiom-jielong // 成语接龙页    | └── poet // 作者页    | └── baijiaxing // 百家姓    | └── xiehouyu // 歇后语    | └── poet // 作者页    | └── suggest // 建议反馈    | └── ... // 其他    ├── style // 样式文件目录 ├── app.js // 小程序入口文件 ├── app.json // 全局配置 └── app.wxss // 全局样式 [代码] 5. 封装云函数操作数据库 本项目是使用的小程序云开发。云开发提供了一个 JSON 数据库，用户可以直接在云端进行数据库增删改查，但是，小程序对用户操作数据的权限进行了一定的限制（例如数据update、一次性get记录的条数限制等），所以，这里主要采用云函数来操作数据库。 查询数据、分页查询 函数根目录上右键，在右键菜单中，选择创建一个新的 Node.js 云函数，我们将该云函数命名为 collection_get。 编辑 index.js： [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() exports.main = async (event, context) => { /** * page: 第几页 * num: 每页几条数据 * condition： 查询条件，例如 { name: '李白' } */ const {database, page, num, condition} = event console.log(event) try { return await db.collection(database) .where(condition) .skip(num * (page - 1)) .limit(num) .get() } catch (err) { console.log(err) } } [代码] 使用 collection_get 云函数 例如，按照查询条件[代码]{tags: '唐诗三百首'}[代码]查询诗词列表，每页[代码]num = 10[代码]条数据: [代码]let {list, page, num} = this.data let that = this this.setData({ loading: true }) wx.cloud.callFunction({ name: 'collection_get', data: { database: 'gushici', page, num, condition: { tags: '唐诗三百首' } }, }).then(res => { if(!res.result.data.length) { // 没搜索到 that.setData({ loading: false, isOver: true }) } else { let res_data = res.result.data list.push(...res_data) that.setData({ list, page: page + 1, // 页面加1 loading: false }) } }) .catch(console.error) } [代码] 更新数据 注意，当我们向数据库中添加记录时，系统会自动帮我们为每条记录添加上用户的 [代码]openid[代码] 字段，但如果，数据表是自己用 json/csv 文件导入的，就不存在 [代码]openid[代码] 字段，此时，当更新这个数据表时，系统会认为你不是创建者，所以也就无法更新。 此时，就需要通过云函数更新数据库，新建云函数 collection_update, 编辑 index.js: [代码]// 更新数据 - 根据 _id 更新已打开人数 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const _ = db.command exports.main = async (event, context) => { const { id } = event console.log(event) try { return await db.collection('gushici').doc(id) .update({ data: { opened: _.inc(1) }, }) } catch (e) { console.error(e) } } [代码] 使用 collection_update 云函数 更新某_id数据的打开人数： [代码]let _id = e.currentTarget.dataset.id wx.cloud.callFunction({ name: 'collection_update', data: { id: _id }, }).then(res => { console.log(res.data) }) .catch(console.error) [代码] 6. 数据库模糊查询 小程序云开发可以使用正则表达式进行模糊查询。例如， 根据用户输入关键词，查询标题中存在改关键词的古诗词。 [代码]let database = 'gushici' let condition = { name: { $regex:'.*'+ inputValue, $options: 'i' } } let { list, page, num } = this.data let that = this this.setData({ loading: true }) // 模糊查询 wx.cloud.callFunction({ name: 'collection_get', data: { database, page, num, condition }, }).then(res => { if (!res.result.data.length) { // 没搜索到 that.setData({ loading: false, isOver: true }) } else { let res_data = res.result.data list.push(...res_data) that.setData({ list, loading: false }) } }) .catch(console.error) [代码] 7. 分享或转发功能 小程序中页面触发转发的方式有两种： 1.在小程序的右上角选择转发，需要定义函数 Page.onShareAppMessage，如果当前页面没有定义此事件，则点击后无效果。 2.通过给 [代码]button[代码] 组件设置属性 [代码]open-type="share"[代码]，可以在用户点击按钮后触发 Page.onShareAppMessage 事件，如果当前页面没有定义此事件，则点击后无效果。 用户还可以在 Page.onShareAppMessage 事件中自定义转发后显示的标题、图片、路径： [代码]onShareAppMessage(res) { let id = wx.getStorageSync('shareId') if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } return { title: `跟我一起挑战最长的成语接龙吧！`, path: `pages/find/find`, imageUrl: '/images/img.jpg', } }, [代码] 注意：转发成功/失败的 callback 已经被官方废弃，所以理论上小程序是无法得知用户是否将页面分享成功的 8. 用户授权 详情请参考文章：微信小程序之授权 9. 需要注意的几个坑 查询不到数据 数据表中明明有数据，但是 collection.get 到的却为空。解决：可以在云开发控制台中打开数据库权限设置，设置权限。 更新数据失败 collection.update 函数调用成功单返回的却是0行记录被更新，因为小程序端不允许更新没有 openid 字段的数据。解决：可以通过云函数更新数据库。 background 图片 url 不能为本地图片 解决：1：将图片上传到服务器，填写服务器上的图片路径地址。2：将图片转为 base64 编码。 往云数据库中批量导入 json 数据失败 原因：请看文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/import.html 解决：去掉json数据 [代码]{}[代码]之间的逗号, 如果最外层为 [代码][][代码]，也必须去掉, 最终形如： [代码]{ "index": "作者_1", "type": "作者", "poet": "李白", "abstract": "李白（701年－762年），字太白，号青莲居士，唐朝浪漫主义诗人，被后人誉为“诗仙”..." } { "index": "作者_2", "type": "作者", "poet": "白居易", "abstract": "白居易（772年－846年），字乐天，号香山居士..." } [代码] 源码链接 https://github.com/TencentCloudBase/Good-practice-tutorial-recommended 如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！ [图片]

我们在开发小程序时，一个列表里难免会有很多条数据，比如我们一个列表有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

我在启动页里的onshow里面加了一段延时5秒自动跳转到首页的代码，然后启动页中有个按钮，点击按钮可立即进入到首页。 现在的问题是，如果不点击那个按钮，等5秒会自动跳转到首页，没有什么问题。如果在5秒内点击那个按钮进入到首页后，到5秒后又返回到启动页，并秒跳转到首页，这是什么原因？代码如下： [图片] [图片]

[图片] [图片] 判断条件都是成立的。

这个是bug吧 数据库里操作能用 代码里不行