答题微信小程序实现（4）：数据库题库的调用/上一题、下一题/题量length的获取

不积跬步无以至千里，不计小流无以成江海。
本来想直接上选择题的，但步子就有点太大了，不是一点点来的。选择题除了题库的调用外，还需要判断答案对错，涉及到if语句，这个if语句应该单独写一个，对于初学者来说，我得一点点来，要不然想一口吃成个胖子，还没长肉，就食物中毒了。
不要急，不要急，一步一步来，一点一点做，总归能做出来的。
还是以李贺作品集为例，数据库的调用和题量的获取。

如图可见，首界面是作品列表，南园、马诗、金铜仙人辞汉歌，为了写程序，随便上了这三首做测试。点击题目进入第二个界面，点击◀和▶，切换上一首，下一首，除了内容外，还显示第2首/共3首。结构如最右，html和images文件夹不用看，这俩文件夹忘删了。data文件夹下面有一个post-data.js文件，数据库存在这个文件中了，pages下面有index和detail两个页面，主要就是这两个页面。
先看看数据库post-data.js文件里的代码：

var local_database = [{"name":"南园","content":"男儿何不带吴钩"
},
{"name": "马诗","content": "大漠沙如雪，燕山月似钩"
},
{"name": "金铜仙人辞汉歌","content": "衰兰送客咸阳道，天若有情天亦老。"}
]
module.exports = {postList: local_database
}

json结构，前面一个声明var，后面一个module.exports，固定格式，这样这个数据库就可以被调用了。

然后看首界面index。
index.wxml代码：

<view wx:for="{{postList}}" wx:for-item="item" wx:for-index="index"><navigator url="./../detail/detail?id={{index}}"><text>{{item.name}}</text></navigator>
</view>
<text>共{{postList.length}}首作品</text>

这里面用了一个wx:for循环，这个就是固定模式了，wx:for=”{{postList}},循环这个数组，for-item=”item”，在循环里把postList数组命名为item，wx:for-index=”index”，循环的序号（数组的角标，就像postList[index]），navigator打开内部页面，url网址是id={{index}}，这个就是参数传递了。点击的是哪个题目，打开的页面显示的就是哪个内容，虽然只有一个detail页面。{{postList.length}}就是获得postList这个数组的长度了，我就放了3首诗。
index.js代码：

var postData = require("../../data/post-data.js");
Page({data: {// text:"这是一个页面"postList: postData.postList,}
})

require获取数据库。
detail.wxml代码：

<view><view>{{details[id].name}}</view><view>{{details[id].content}}</view>
</view>
<text>第{{id+1}}首/共{{details.length}}首</text>
<button bindtap="lastQuestion">◀</button>
<button bindtap="nextQuestion">▶</button>

detail.js代码：

var postData = require("../../data/post-data.js");Page({data: {id: "",details: postData.postList,},onLoad: function (options) {this.setData({id: parseInt(options.id)})console.log('options---', options)console.log('详情', this.data.details)},nextQuestion: function () {var that = this;if (that.data.id < postData.postList.length-1) {this.setData({id: that.data.id + 1});}},lastQuestion: function () {var that = this;if (that.data.id > 0) {this.setData({id: that.data.id - 1});}}})

这里面的id是传参传过来的，就是index中的id={{index}}，details: postData.postList把数组重命名（赋值给）details，所以在wxml中就是details[id]了。id: parseInt(options.id)这个是把id给数值化了一下，要不然在wxml中id+1出现的数字就会比较随性。
lastQuestion函数点击上一首，if里面有一个这个that.data.id > 0，id大于0的时候，才有上一首嘛，nextQuestion函数点击下一首，if里面有一个that.data.id < postData.postList.length-1，点击不能超过总数，虽然已经把数组赋给了details，但是还得这么写postData.postList.length才能获得数组长度，不知道为什么，我写成details.length，程序无法运行。
这也是一个作品集的雏形模板。
下一个目标，判断答案对错！
go！

答题微信小程序实现（4）：数据库题库的调用/上一题、下一题/题量length的获取相关推荐

微信小程序基于云数据库简单实现帖子点赞功能。
思路: 1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid.获取帖子云数据存放到suju:[]里. 2·点击点赞按钮图标变换 ...
c语言京东购物系统,仿京东商城: 自主使用微信小程序实现的网上商城案例（包括前端和后台），利用了微信小程序的云数据库...
仿京东网上商城介绍自主使用微信小程序实现的仿京东网上商城案例(包括前端和后台),数据库利用了微信小程序的云数据库软件架构软件架构说明数据库表设计本系统数据库主要用了微信小程序自带的云数据库 ...
修复登录答题微信小程序源码下载
功能简介: 1.答题有奖 3.后台含有区间余额区间奖励配置: 4.签到邀请好友获取答题卡, 更多功能具体自己研究,支持用户提现等后台系统设置: 基础设置.奖励管理.分享配置题目管理: 题目增加.题 ...
微信小程序+云开发+数据库使用
微信小程序+云开发+数据库使用参考地址:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.ht ...
新手如何用微信小程序和云数据库做一个论坛？【帖子页】
新手小白用微信小程序和云数据库做一个论坛[帖子页] 先放个效果图由于后面换了头像,所以评论的头像和发帖的头像不一样. 要做个同款论坛,首先需要用到云数据库.在微信开发者工具的左上角开通云开发就可以了 ...
微信小程序云开发数据库网页管理后台
目录一.前言使用云开发来开发微信小程序提供云数据库.云存储.云函数.云调用等支持,可以快速配置云端环境进行开发,但暂时并没有提供好的运维解决方案.了解到微信小程序官方文档中提供了云开发HTTP A ...
微信小程序怎么取mysql,微信小程序怎么读取数据库?小程序如何读取数据?
微信小程序怎么读取数据库?小程序如何读取数据?各位微信用户们,如果你再开发微信小程序的过程中,需要微信小程序读取数据库的话,就跟着小编往下看微信小程序怎么读取数据库. 微信小程序怎么读取数据库? 微信 ...
uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题
uniapp实现微信小程序云开发数据库访问,并解决云开发数据库获取不到数据问题使用工具是HBuilder X 1.配置好AppID(小程序ID) 在HBuilder X工具的manifest.js文 ...
【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...

答题微信小程序实现（4）：数据库题库的调用/上一题、下一题/题量length的获取

答题微信小程序实现（4）：数据库题库的调用/上一题、下一题/题量length的获取相关推荐

最新文章

热门文章