【原创】适合零基础-微信小程序开发之预约小程序-图书馆预约

实现这个小程序分三个步骤（不是云开发）使用语言JavaScript语言。

第一步骤：

首页

代码：

App.json

{
  "pages": [ 
    "pages/index/index",
    "pages/yuyue/index", 
    "pages/user/index",
    "pages/login/index",
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "预约须知",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/yuyue/index",
        "text": "预约",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },
  
    
  "sitemapLocation": "sitemap.json"
}

index.wxml 主要实现轮播图和文字的效果（包可根据第一个代码的包建）

<!--index.wxml-->
<view class="index">
    <!--轮播图-->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}">
    <block wx:for-items="{
  {lunboData}}">
      <swiper-item>
        <image src="{
  {item.imgurl}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>




<text>

<text class="Go">【预约须知】</text>
1.图书馆现实行预约制,请同学提前通过图书馆微信小程序进行预约。每日19:00停止预约。
<text class="Go">2.疫情期间,开馆时间为8:00-21:00,法定节假日除外。</text>
3.疫情期间,每日同时在馆人数上限为300人。当馆内人数临近人数上限时,我馆将视情况采取限流措施。
4.一个微信号最多可预约1人。
<text class="Go">5.微信公众号预约目前仅支持校园卡，学生证及手机号实名认证,请务必填写真实有效信息。</text>
6.疫情期间,进馆时请全程正确佩戴口罩。
7.如有疑问请去图书馆一楼服务台咨询，感谢配合！

</text>
<view class="shuoming">
    <view class="shuoming_biaoti">预约订座使用说明</view>
    <view class="shuoming_xiangmu">1：需要登录，可提前预约4天</view>
    <view class="shuoming_xiangmu">2：先选定日期，然后选类型，选座位</view>
    <view class="shuoming_xiangmu">3：填写预约人的姓名和联系方式，然后按“提交座位预约”按扭即可。</view>
</view>
<navigator class="yuyue" url="/pages/dingzuo/index"  open-type='switchTab' >
    我要预约座位
</navigator>
</view>

index.js-引用图片数据

//index.js
Pag