微信小程序

目录

微信小程序

博客班级 https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标 1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改
2.熟悉git代码管理流程，将源代码上传到到github
3.在博客园班级中写一篇相应的博文
作业源代码 https://github.com/Nancie-09/miniprogram-1
学号/姓名 31801126 周奕楠
院系 计算机与计算科学学院

1.前言

  • 第一次做小程序，并没有很好的思路，在GitHub上下载的一个开源项目作为参考
    • 原小程序为美容小程序，受到启发自己修改为餐厅菜品介绍以及进行相关预定的小程序，但仅支持本地
  • 因为前几个学期有学过网页的一些知识，和小程序的大致结构相似，所以没有去看相关的学习视频，根据下载的小程序，以及官方的属性解释，一点点看懂代码，并且修改为自己期望的展示。

2.项目介绍

2.1 界面展示

  • 首页

    • 主要结构为轮播图（展示特色菜品）、选项卡（查看相关类型菜品）

    Index

  • 菜品详情页

    • 展示相关菜品图片、名称、价格、介绍以及相关用料

  • 预定界面

    • 可通过首页预定按钮或者菜品详情页预定按钮进入，可以通过选择框选择现有地址信息，以及日期和时间，并留下留言。
      • 预定界面已经完成，但未连接数据库，相关信息不能进行保留并记录。

  • 我的页面

    • 可以查看相关信息并增加地址。
      • 未深入制作相关功能，数据都为本地信息。

  • 新增地址

    • 页面基本完成，但不能做到数据录入。

2.2 文件结构

  • images存放小程序所需的图片以及一些图标
  • pages存放页面相关文件，book为预定界面，detail为菜品详情页面，edit_addr为新增地址页面，index为主页，user是我的界面
  • utils中，data.js存放相关数据，包括菜品介绍、地址等信息；util.js存放地址转换相关方法。

3.设计思路

3.1 轮播图

  • wxml中设置swiper滑块容器

  • 将图片数据以数组格式存放在data.js中

  • 通过循环调用数组中图片，并通过设置一系列属性使其进行轮播

    • interval属性设置自动切换时长
    • duration属性设置滑动动画时长，
    • autoplay属性设置使其自动播放
<swiper class="swiper-class" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
	<block wx:for-items="{{banner_url}}" wx:key="item.id">
		<swiper-item><block ><image src="{{item}}"/></block></swiper-item>
	</block>
</swipe>

3.2 选项卡

  • 在data.js中，存放图标及名称数据，并设置id
  • 设置一个点击事件bindtap，并且设置data-index索引，根据页面的index来改变tab的状态并决定下面view显示内容。
  • 通过页面点击获取当前当前选项卡id，并判断选择显示的图片，改变背景颜色、字体颜色及字体大小
<view class="nav_top">
    <block wx:for="{{navTopItems}}" wx:key="item.id">
      <view class="nav_top_items {{curNavId == item.id ? 'active_color': ''}}" bindtap="switchTab" data-index="{{index}}" data-id="{{item.id}}">
        <image wx:if = "{{curNavId == item.id}}" src="{{item.icon2}} "></image>
        <image wx:else src="{{item.icon}} "></image>
        <text >{{item.title}}</text>
      </view>
    </block>
</view>

3.3 选择框

picker选择器有5种，用mode属性区分，默认为普通选择器

  • 普通选择框

    • bindchange在value 的值改变时，触发 change 事件，并根据改变选择数据数组中的相应数据显示出来
    • value的值表示选择了 range 中的第几个（下标从 0 开始）
    • range选择器中相关数据
<picker bindchange="bindAddrPickerChange" value="{{addrIndex}}" range="{{addrArray}}">
  <view><text>{{addrArray[addrIndex]}}</text></view>
</picker>

bindAddrPickerChange : function(e){
    console.log('Addrpicker发送选择改变，携带值为', e.detail.value)
    this.setData({
      addrIndex: e.detail.value
    })
  }

  • 日期、时间选择框

    mode属性值分别为date和time

    • start设置有效开始时间
    • end设置有效结束时间
<picker mode="date" placeholder="选择日期" value="{{date}}" start="2020-10-24" end="2022-10-24" bindchange="bindDateChange" >
	<view>{{date}}</view>
</picker>

<picker mode="time" placeholder="选择时间" value="{{time}}" start="01:00" end="24:00" bindchange="bindTimeChange">
	<view>{{time}}</view>
</picker>

// 日期选择
  bindDateChange: function(e){
    console.log('date picker发送选择改变，携带值为', e.detail.value)
    this.setData({
          date: e.detail.value
    })
  },
// 时间选择
  bindTimeChange: function(e){
    console.log('time picker发送选择改变，携带值为', e.detail.value)
    this.setData({
          time: e.detail.value
    })
  }

4.总结

4.1 收获

第一次接触微信小程序，因为与之前web相类似，也不算从头开始，起码在写一些属性样式的时候大部分都是已经会的，基本都能共通。也是因为时间确实很短暂，很多功能没有更好的去发掘，没有来得及把一些希望的功能实现出来，后续有时间的话会尽可能完善这个小程序，毕竟这个小程序的想法也是很接近我周围生活实际的。

GitHub上很多代码不完整，真正基于一些数据库而非本地数据的小程序不能够运行出来，以及大部分都没有注释，只能通过自己理解来学习，在没有系统学习过相关知识的时候，不能流畅的把想要的内容做出来，需要不停地查阅资料以及官方文档，极度消耗时间了；以及需要不停调试来解决其中的一些问题，还是不太熟悉其中各种组件，以及能力不能够支持写出一些js的东西帮助想法实现。

4.2 优化

  • 使用的是静态数据，没有连接服务器，不能进行后台操作
  • 一些详情内容时间问题没有很好的设置好
  • 部分功能逻辑没有完全理通，地址部分还需要做出整改
posted @ 2020-10-25 21:53  Healer17  阅读(113)  评论(0)    收藏  举报