<dl id="opymh"></dl>

<div id="opymh"></div>
      <div id="opymh"><tr id="opymh"></tr></div>

        <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

        <em id="opymh"></em>

        <em id="opymh"><ol id="opymh"></ol></em>

              频道栏目
              首页 > 网络 > 云计算 > 正文

              斜杠青年与你共探微信小程序云开发

              2019-03-08 10:28:11           
              收藏   我要投稿

              1.jpg

              没想到2018年“活下去”这个词£¬会因为万?#39057;?#19968;场发布会而成为无数企业主发自内心的呐喊£¬于是“开源节流”成了众多公司2019主旋律~

              \

              我们改变不了大环境£¬但可以改变自己¡£如果现状不能使自己满意£¬至少知识可以改变生活¡£

              \

              前情回顾

              技本功丨收藏£¡斜杠青年与你共探微信小程序云开发£¨上篇£©

              在上文中我们一起体验了一下最基本的小程序数据库操作£¬编写了我们“吃什么”小程序的第一个页面£º增加页面¡£

              上篇讲了小程序的基本信息以及基本的添加操作£¬本篇文章将进一步完成“吃什么”小程序£º添加首页和?#26012;?#39029;面¡£

              开发步骤£º

              新建页面文件

              编写页面wxml

              编写js

              编写样式

              测试

              下面进行首页的编写¡£

              首页

              首页功能: 在所有菜单里?#33756;?#26426;抽取一个进行展示¡£

              首先我们需要获取所有的菜单£¬云开发的限制每次请求最多只能获取表里的20条数据£º

              \

              因此我们要先获取表里记录的数量计算出页数£¬再根据页数进行递归获取到所有数据£¬最后使用random方法随机获取一条展?#22659;?#26469;就OK了¡£

              首先看一下官方api文档提供的api接口¡£获取记录数量的是count函数£º

              \

              获取到数量后就可以计算出页数然后根据页数进行递归了£¬获取数据的仍然是试用collection.get方法£¬详细的方法定义可查阅官方文档¡£

              我们在until文件夹下的ajax文件里编写获取一张表里所有记录的方法¡£

              首先获取要表里记录的数量£º

              \

              再编写一个根据where条件¡¢页码¡¢每页记录数量获取表数据的方法方便进行递归£º

              \

              然后编写递归方法£º

              \

              最后编写首页需要用到的获取所有菜单的方法getAllFood£º

              \

              通过上面的三个方法就可以获取到菜单表的所有数据了£¬实?#20160;?#35797;下访问速?#28982;?#26159;蛮快的¡£下面在首页调用这个方法就可以展?#22659;?#26469;所有菜单了£¬同时给一个选择的按钮£¬?#27809;?#28857;击之后我们就随机挑选一个菜名呈现出来即可¡£

              在首页我们一共需要三个按键£º添加¡¢所有菜品?#26012;í£?#21487;?#22659;?#33258;己创建的菜品£©和一个选择按键¡£我们首先定义一些颜色用于随机挑选待会滚动显示的菜?#35775;?#31216;颜色£¬具体的页面需要用到的变量如下图£º

              \

              首先我们获取所有菜品记录£¬根据ajax文件里编写的getAllFood方法调用即可通过循环获取到表里的所有数据£º£¨数据库api获取到的数据在network面板里没有记录£¬建议使用其它方式验证获取的数据是否正确£©

              \

              processList方法主要用于为每个菜名添?#30001;?#21160;画效果£¬首页的菜名需要有自己的滚动效果keyframe延迟时间¡¢字体颜色¡¢动画?#20013;?#26102;间¡¢位置偏移数据£¨top¡¢left£©¡£主要用到随机数生成方法rd£º

              \

              rd方法生成一个介于n和m之间的随机整数£¬我们菜名的展示的一些特性都依靠这个方法£¬下面是processList方法的实现£º

              \

              编写完成后我们在onShow函数里调用getDataProcess方法进行数据渲染£º

              \

              方法执行完之后我们的itemList就有了数据£¬下面编写wxml文件进行显示¡£wxml比较简单£¬使用wx:for循环显?#22659;öitemList里面的数据£¬添加三个button:

              \

              添加和?#26012;?#25353;钮?#24049;?#21040;各自的页面£¬“吃什么”按钮绑定了choose方法£¬choose方法?#35789;?#20174;所有菜品集合itemList里随机挑选出一个展示£º

              \

              编写完之后我们的首页变成了这样£º

              \

              没有样式的首页

              下面我们?#30001;?#26679;式文件£¬滚动效果我们使用CSS的keyframe实现即可£º

              \

              其他样式比较简单£¬index.wxss文件整体内容如下供参考£º

              \

              \

              \

              \

              整个完成后我们的首页就编写完成了£¬运行起来的效果如图£º

              \

              首页效果

              \

              挑选

              结 语

              至此我们已经完成了首页和添加页面的编写£¬其实一个个添加数据还是很麻烦的£¬对于云开发的数据库我们可以使用开发者工具直接进行json导入£¬只是json导入对jso格式有一定的要求£¬读者可以按照下面这样的格式进行扩展£º

              \

              这种json文件的格式跟标准的json格式又一定区别的£¬比如没有,号¡£我们在微信开发者工具的云开发面板里导入£º

              \

              在云开发面板导入json文件

              导入数据之后数据库里就有一些初始数据了£¬导入的数据会自动追?#30001;?#21807;一标识符 _id字段£¬通过数据库api添加的记录不仅会记录下 _id字段£¬还会?#30001;?#28155;加?#27809;?#30340; _openid£¬下一节我们编写?#26012;?#39029;将会使用到openid来区分是否有?#22659;?#25968;据权限¡£

              -本期完-

              敬请期待下篇

                上一篇£ºK8S漏洞报告|近期bugfix解读
                下一篇£º企业如何选择混合云管理平台
                相关文章
                图文推荐

                关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

                版权所有: 红黑联盟--致力于做实用的IT技术学习网站

                ¼«ËÙ·ÉͧºÃ¼Ù
                <dl id="opymh"></dl>

                <div id="opymh"></div>
                    <div id="opymh"><tr id="opymh"></tr></div>

                      <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                      <em id="opymh"></em>

                      <em id="opymh"><ol id="opymh"></ol></em>

                            <dl id="opymh"></dl>

                            <div id="opymh"></div>
                                <div id="opymh"><tr id="opymh"></tr></div>

                                  <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                                  <em id="opymh"></em>

                                  <em id="opymh"><ol id="opymh"></ol></em>