1. 项目要求 小程序端开发 WEB管理后台开发 2. 项目功能 主栏目分为科目一答题练习、科目四答题练习、满分学习、注销恢复、资格证，包含小车、客车、摩托车等，功能包含视频讲解、章节练习、模拟考试、错题、收藏等等。 支持支付、分享、提成、提现等 3. 项目选型 小程序选择 Serverless架构，以最高效率开发 这里使用以下技术产品 小程序端： Bmob后端云+iview VUE + Bmob后端云 Bmob后端云，自带了支付，生成二维码等接口，这里集成可以快速上线。VUE 有丰富的后台模板，可以更快的做出管理后台。 4.开发过程 第一步：清晰了解需求 参考、分析行业有关产品：驾校一点通与驾考宝典。 第二步：数据库设计 思路：数据库参考其他驾考类小程序，优先把核心字段建立出来，尽量考虑周全， 不够后面再补。 这里注意的是，Serverless架构，主要适合做一些中小型应用，如果应用数据量很大， 尽量提前考虑分表。 数据表： 题目表 题目类别表（题形） 错题表 收藏表 成绩表 用户表 用户表（Bmob系统自带 ）了 数据库文档 由于使用Bmob后端云数据库，默认每条记录都带id、创建时间与更新时间，此数据表说明不带这2个字段。 题目表（question） 名称 类型 描述 title string 题目名称 choseList Array 选择列表 [{“item”:“选选一”},{“item”:“选选二”,“isChose”:true}] type int 类型 1.单选 2.多选 3.判断 pic string 图片地址 video string 视频地址 help string 帮助描述 bSubjects int 所属科目 1.科目一 2.科目四 bModels int 所属车型 1.小车 2.货车 3.客车 4.摩托车 bType string 所属类别 关联类别表 题目类别表（questionType） 名称 类型 描述 bSubjects string 所属科目 1.科目一 2.科目四 title sting 类别名称 错题表 名称 类型 描述 id string 题目id uid string 用户id 收藏表 名称 类型 描述 id string 题目id uid string 用户id 成绩表 名称 类型 描述 time string 用时 score int 成绩 设计好数据表之后，做准备工作 拿到小程序的 AppID填写到Bmob控制台，应用设置-》应用配置 把上面所有想好建立好的数据表添加到数据库 小程序开发工具新建一个空白项目，复制BmobSDK，到utils目录 引入SDK，初始化。 引入SDK，初始化。文档在这里： https://bmob.github.io/hydrogen-js-sdk/#/?id=%E5%88%9D%E5%A7%8B%E5%8C%96 最终效果如下： 效果一：所写代码➕预览 [图片] 效果二：数据表变化 [图片] 这样我们就实现了，整个小程序开发的第一步，自动注册登陆，获取openid。 后面将继续讲解该小程序的答题功能、顺序练习、模拟考试、题目采集、语音读题等功能开发，敬请关注

前言 上一篇文章讲的是view组件，写的很简单我感觉应该还有一些东西没有说到，但是还是得到了一些小伙伴的支持（大神勿喷😝），我觉得很有动力，今天继续更新，聊聊 <text> 和 <image>组件。 <text>组件作用 <text>是一个文本组件，也就是说，我们在小程序里面要展示的一些文字可以用<text>包起来，然后小程序框架就可以渲染出来了，（ps:其实不包也可以渲染出来）包起来之后就可以通过wxss来改变文本的样式，搭配出漂亮的UI啦 使用 <text>组件默认是在一行显示的，如果按照HTML的意思来说的话：<text>其实是一个行内元素，而且<text>的宽高都是由里面的内容来决定的，也就是说里面没有文字的话，你的界面就不会显示<text>，下面代码大家可以更清晰的看到 wxml代码 [代码]<text class='temp'></text> <text class='textOne'>你好哇！</text> <text class='textTwo'>我还可以！</text> <text class='textThree'> 开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭互兼容，并不互斥。 </text> [代码] wxss代码 [代码].temp{ background-color: orange; } .textOne{ background-color: red; } .textTwo{ width: 400rpx; /* 设置宽高进行对比 */ height: 400rpx; background-color: blue; } .textThree{ background-color: orange; } [代码] 运行效果图 [图片] 通过上面可以看到<text>普通情况下指定宽高是没有用的，那要怎么办呢？在这里就需要wxss的display属性来控制它是行内还是块级元素了，在对应的wxss样式里面加上 display: block ; 就可以使<text>变身，现在它既可以设置宽高，也可以加外边距等等，还是通过代码看看 wxml代码 [代码]<text class='textOne'>你好哇！</text> <text class='textTwo'>我还可以！</text> [代码] wxss代码 [代码].textOne{ background-color: red; } .textTwo{ display: block; /*注意这里 */ width: 400rpx; height: 400rpx; background-color: blue; } [代码] 运行效果图 [图片] text属性 微信小程序的官方文档提供了三个属性selectable、space、decode。我个人觉得用的最多的应该就是selectable了，它的值是布尔类型，默认为false,它的作用就是设置这段文字是不是可以长按复制 wxml代码 [代码]<text class='textOne' selectable='true'>你好哇！</text> <text class='textTwo'>我还可以！</text> [代码] 真机运行图 [图片] 结语 🆗！这一篇<text>也就差不多了，小插曲：不知道为什么编辑的时候图片总是显示不出来，然后就截图保存到本地在插入了，但是图片的清晰度很感人，大家将就的看一下吧。。呜呜呜，后期我看能不能改一改。最后还是谢谢大家的支持，希望可以帮到你。期待下一篇<image>组件😍 ps:图片已经改了，但是真机运行图那个没办法了…反正就是可以复制，在模拟器上不好显示，所以。。。