答题微信小程序实现(4):数据库题库的调用/上一题、下一题/题量length的获取
2018-01-27 21:29
876 查看
不积跬步无以至千里,不计小流无以成江海。
本来想直接上选择题的,但步子就有点太大了,不是一点点来的。选择题除了题库的调用外,还需要判断答案对错,涉及到if语句,这个if语句应该单独写一个,对于初学者来说,我得一点点来,要不然想一口吃成个胖子,还没长肉,就食物中毒了。
不要急,不要急,一步一步来,一点一点做,总归能做出来的。
还是以李贺作品集为例,数据库的调用和题量的获取。
如图可见,首界面是作品列表,南园、马诗、金铜仙人辞汉歌,为了写程序,随便上了这三首做测试。点击题目进入第二个界面,点击◀和▶,切换上一首,下一首,除了内容外,还显示第2首/共3首。结构如最右,html和images文件夹不用看,这俩文件夹忘删了。data文件夹下面有一个post-data.js文件,数据库存在这个文件中了,pages下面有index和detail两个页面,主要就是这两个页面。
先看看数据库post-data.js文件里的代码:
json结构,前面一个声明var,后面一个module.exports,固定格式,这样这个数据库就可以被调用了。
然后看首界面index。
index.wxml代码:
这里面用了一个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代码:
require获取数据库。
detail.wxml代码:
detail.js代码:
这里面的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!
本来想直接上选择题的,但步子就有点太大了,不是一点点来的。选择题除了题库的调用外,还需要判断答案对错,涉及到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!
相关文章推荐
- 微信小程序调用第三方地图API实现获取输入提示词
- 答题微信小程序实现(1):单题实现和随机数获取
- 答题微信小程序实现(7):python3将题库处理成json格式的。
- 答题微信小程序实现(5):大功告成,整个模板,题库导入/切换/积分/选择对错判断/闯关成功
- 微信小程序 实现获取当前位置并在地图上显示
- 【微信小程序】用户首次进入小程序拒绝授权,如何再次调用授权页面,获取用户信息userInfo
- 微信小程序java实现AES解密并获取unionId
- 原创:微信小程序java实现AES解密并获取unionId
- Thinkphp5微信小程序获取用户信息接口调用笔记
- 答题微信小程序实现(3):退出/闯关成功
- 工作问题积累(九)C++:实现从注册表中获取程序安装路径并调用exe文件
- 微信小程序 获取openid 存入数据库 C#
- 微信小程序调用微信登陆获取openid及java做为服务端示例
- C++编程实现从注册表中获取程序安装路径并调用exe文件。
- 微信小程序实现页面跳转传值以及获取值的方法分析
- 如何在 React Native 实现类微信小程序平台:WebView 调用原生组件
- 微信小程序获取用户openId的实现方法
- C++编程实现从注册表中获取程序安装路径并调用exe文件
- 原创:微信小程序java实现AES解密并获取unionId
- 微信小程序简单实现form表单获取输入数据功能示例