微信小程序-微信小程序-月经管理、月经知识列表

# 微信小程序-月经管理 ## 简介 微信作为国民级应用，在2017年1月9日推出微信小程序，目的是为了连接跟多的线下场景，业内人士对微信小程序的看法各有千秋，我个人认为，微信小程序想完全的替代原生Android应用是很困难的，树扎的深，风再大也很难把它吹倒，只要你原生的Android应用足够优秀，用户足够喜欢，你就不必太惊恐于微信小程序，而那些用户很少用，或者功能比较简单的原生Android应用就很有可能被微信小程序给取代。其实微信小程序并不是首创，百度在此之前已经做过类似的尝试，当然结局就是不了了之了，上面这些都不是本文的重点，这篇文章主要来讲讲从0开始快速开发一个比较完整的微信小程序 ## 如何学习微信小程序？ 开发微信小程序其实并不难，我自身从0开始花了5天时间就做出了一个月经管理小程序，先来看看具体的效果 首先是月经设置界面，用于设置月经的周期、长度和上次月经的时间  设置完成后，就会通过简单的算法，显示出女性一个月内不同的生理期  如果只是单纯的月经管理，那么这个小程序的功能就显得比较单一，所以又开发一个内容列表，展示一些月经知识   如何在比较短的时间内学会并使用这个新技术呢？我自己使用了5天左右的时间，首先可能因为我帅所以吸收的比较快，其次就是学习新技术也是有套路的 我的惯用套路就是，先看官方文档，微信小程序的官方文档比较全面，而且比较简单，没有什么深邃的内容，花2~3个小时把里面的内容大致的过一遍，有个大概的印象就好了，不要求你全部记住，知道有这个东西则可，然后混迹于比较成熟的技术论坛，直接Google微信小程序论坛，一搜一大堆，看看其他人使用微信小程序遇到什么问题，或者有什么比较好的第三方工具，然后就是从论坛上下载一些实战视频教程，我知道很多技术人员不推荐看视频教程来学习技术，觉得非常浪费时间，但是我觉得看实战教程还是有点用处的，当你看完文档对微信小程序有个模糊的了解后，弄一些视频来看，效果很不错，当然很多视频中老师的语速非常慢，所以我一般都是以2.5倍的速度来看的，遇到自己会的内容，就直接快进跳过，这样就可以快速的学会开发一个完整项目的流程，如果有一些比较好的项目源码，建议也要研究研究，我做完上面的工作用来1天左右的时间，接下来四天就是动手开发了，了解了这么多东西，如果不动手开发，不去遇到一些实际上的问题，是很难掌握前面学习的理论知识的，动手的重要性就不多讲了，总之很重要！ ## 动手开发 下面来简单的看看开发的逻辑，只给出代码片段，具体代码可以在文末找到下载链接，项目的结构如下  首先是用于设置月经周期、长度和上次月经时间的设置界面，该界面使用了picker组件 ``` picker 从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。 ``` 设置完后，点击按钮，将设置完的数据保存到缓存中，然后跳转到当月生理期显示界面（代码在picker文件夹下） ```js save_btn(e) { const date = e.currentTarget.dataset.date const a = e.currentTarget.dataset.array const a2 = e.currentTarget.dataset.arrayb console.log(date, a, a2) try { //经期长度 wx.setStorageSync('jinqi', a) //周期长度 wx.setStorageSync('zhouqi', a2) //最近一次月经 wx.setStorageSync('zuijinriqi', date) } catch (e) { } wx.switchTab({ url: '../calendar/calendar' }) } ``` 这里有三个点要注意 1.这样通过data-Xxx来实现将wxml界面中的数据传递到js中，可以通过e.currentTarget.dataset.Xxx这段js代码获得相应的数据 2.使用wx.setStorageSync(key, value)将数据存入缓存中，缓存中的数据将永久保存，除非用户卸载了微信，最多可以缓存10M的数据 3.要跳转到tabBar指定的界面要使用wx.switchTab(OBJECT)，wx.navigateTo(OBJECT)只能跳转到tabBar指定之外的界面 接着来看现实月经规律的界面，该界面分为3部分  第一个部分:在app.json文件中进行设置，实现这个tabBar ``` "tabBar": { "backgroundColor": "#343", "color": "#fff", "list": [ { "pagePath": "pages/calendar/calendar", "text": "月经记录", "iconPath": "image/1.png", "selectedIconPath": "image/2.png" }, { "pagePath": "pages/lists/lists", "text": "月经知识", "iconPath": "image/3.png", "selectedIconPath": "image/4.png" }, { "pagePath": "pages/picker/picker", "text": "月经设置", "iconPath": "image/2.png", "selectedIconPath": "image/4.png" } ] } ``` 如果要重其他界面跳转到pagePath属性指定的界面要使用wx.switchTab(OBJECT) 第二部分比较复杂，通过for循环和if判断将对应数组中的值渲染上去 ```xml <view class="days box box-lr box-wrap"> <!--当月空出的位置--> <view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}"> </view> <!--当月空出的位置--> <!--月数--> <view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}"> <view wx:for="{{yue}}" wx:for-item="y"> <view wx:if="{{item == y}}"> <view class="day box box-align-center box-pack-center border-radius pink-bg">{{item}}</view> </view> </view> <view wx:for="{{weixian}}" wx:for-item="w"> <view wx:if="{{item == w}}"> <view class="day box box-align-center box-pack-center border-radius purple-bg">{{item}}</view> </view> </view> <view wx:for="{{anquan}}" wx:for-item="a"> <view wx:if="{{item == a}}"> <view class="day box box-align-center box-pack-center border-radius green-bg">{{item}}</view> </view> </view> <view wx:if="{{item == pailuanri}}"> <view class="day box box-align-center box-pack-center border-radius orange-bg">{{item}}</view> </view> <!--月数--> </view> </view> </view> ``` 这里有5个数组，empytGrids数组表示渲染时要空出的位置，days数组表示这个月所有的天数，yue数组表示这个月月经的天数，weixian数组表示这个月危险期的天数，anquan数组表示这个月安全期的天数，使用不同的背景色渲染出来则可 先来看一下如何获得empytGrids数组和days数组，代码如下 ```js // 获取当月共多少天，传年和月 getThisMonthDays(year, month) { //通过Date来获取当月天数 return new Date(year, month, 0).getDate(); }, // 获取当月第一天星期几，传年和月 getFirstDayOfWeek(year, month) {