欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

7.16总结(维信小程序开发)

程序员文章站 2022-03-03 10:33:59
今天正式要做一个体育场地预约系统,用微信小程序云开发,想用博客来做一个完整的项目进展记录,记录每天的成果与收获。可能这个过程有点困难,因为记录可能会不完整,或者不知道该怎么记录,我就尽力而为吧,每天晚上用半个小时总结自己这一天的成果,希望自己能坚持下去。下面分享一下我今天的成果:先是做了需求分析,画了ER图,顶层数据流图,0层数据流图一.ER图二.顶层数据流图三.0层数据流图备注:这是自己第一次做需求分析图,可能画的有问题,或者不正确,有错误的大家可以给我指正。大概做完这些后,就开始进行...

今天正式要做一个体育场地预约系统,用微信小程序云开发,想用博客来做一个完整的项目进展记录,记录每天的成果与收获。可能这个过程有点困难,因为记录可能会不完整,或者不知道该怎么记录,我就尽力而为吧,每天晚上用半个小时总结自己这一天的成果,希望自己能坚持下去。
下面分享一下我今天的成果:
先是做了需求分析,画了ER图,顶层数据流图,0层数据流图

一.ER图

7.16总结(维信小程序开发)

二.顶层数据流图

7.16总结(维信小程序开发)

三.0层数据流图

7.16总结(维信小程序开发)
备注:这是自己第一次做需求分析图,可能画的有问题,或者不正确,有错误的大家可以给我指正。
大概做完这些后,就开始进行小程序开发了
(1).先在微信开发者平台注册,申请的是个人,得需要在开发者平台的<开发>的里面里面查找AppID(小程序ID),一会再微信开发者工具里创建项目时用到。
7.16总结(维信小程序开发)
(2)然后就是微信开发者工具里创建项目,还有申请云开发
7.16总结(维信小程序开发)
(3)根据微信小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
学习,文档很详细,也建议初学者多看看开发文档,今天大概学习了微信小程序的整体架构,还有目录结构,还学习了project.config.json和app.json的配置
下面来一点app.json里的
tabBar
组件的代码(是下面的导航栏)

  "tabBar": {
     "list": [{
       "pagePath": "pages/home/home",
       "text": "首页",
       "iconPath": "images/home.png",
       "selectedIconPath":"images/home-active.png"
     },
     {
      "pagePath": "pages/book/book",
      "text": "预约",
      "iconPath": "images/book.png",
      "selectedIconPath": "images/book-active.png"
    },{
      "pagePath": "pages/order/order",
      "text": "订单",
      "iconPath": "images/order.png",
      "selectedIconPath": "images/order-active.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "images/mine.png",
      "selectedIconPath": "images/mine-active.png"
    }]
   }

还有轮播图:

<view class="home-top">
    <view class="home-swiper">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activecolor}}">
          <block wx:for="{{imgUrls}}" wx:key="*this" >
            <swiper-item>
                <image src="{{item}}" style="width:100%;height:200px" class="slide-image" mode="widthFix"  />
            </swiper-item>
          </block>
        </swiper>
    </view>
</view>

(4)看一下今天的效果图
7.16总结(维信小程序开发)
总结:今天差不多就是这些了,明天继续完善,明天可能会把四个页面的大体框架做完

本文地址:https://blog.csdn.net/weixin_44415209/article/details/107395393