网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

做一個比較完整的微信小程序(一)

發(fā)布時間:2017-11-28 17:35 所屬欄目:小程序開發(fā)教程

簡介微信作為國民級應(yīng)用,在2017年1月9日推出微信小程序,目的是為了連接跟多的線下場景,業(yè)內(nèi)人士對微信小程序的看法各有千秋,我個人認(rèn)為,微信小程序想完全的替代原生Android應(yīng)用是很困難的,樹扎的深,風(fēng)再大也 ...

 

簡介

微信作為國民級應(yīng)用,在2017年1月9日推出微信小程序,目的是為了連接跟多的線下場景,業(yè)內(nèi)人士對微信小程序的看法各有千秋,我個人認(rèn)為,微信小程序想完全的替代原生Android應(yīng)用是很困難的,樹扎的深,風(fēng)再大也很難把它吹倒,只要你原生的Android應(yīng)用足夠優(yōu)秀,用戶足夠喜歡,你就不必太驚恐于微信小程序,而那些用戶很少用,或者功能比較簡單的原生Android應(yīng)用就很有可能被微信小程序給取代。其實微信小程序并不是首創(chuàng),百度在此之前已經(jīng)做過類似的嘗試,當(dāng)然結(jié)局就是不了了之了,上面這些都不是本文的重點,這篇文章主要來講講從0開始快速開發(fā)一個比較完整的微信小程序

 

 

如何學(xué)習(xí)微信小程序?

開發(fā)微信小程序其實并不難,我自身從0開始花了5天時間就做出了一個月經(jīng)管理小程序,先來看看具體的效果
首先是月經(jīng)設(shè)置界面,用于設(shè)置月經(jīng)的周期、長度和上次月經(jīng)的時間

 

 

 

 

設(shè)置完成后,就會通過簡單的算法,顯示出女性一個月內(nèi)不同的生理期

 

 

 

 

如果只是單純的月經(jīng)管理,那么這個小程序的功能就顯得比較單一,所以又開發(fā)一個內(nèi)容列表,展示一些月經(jīng)知識

 

 

 

 

 

 

 

 

如何在比較短的時間內(nèi)學(xué)會并使用這個新技術(shù)呢?我自己使用了5天左右的時間,首先可能因為我?guī)浰晕盏谋容^快,其次就是學(xué)習(xí)新技術(shù)也是有套路的

我的慣用套路就是,先看官方文檔,微信小程序的官方文檔比較全面,而且比較簡單,沒有什么深邃的內(nèi)容,花2~3個小時把里面的內(nèi)容大致的過一遍,有個大概的印象就好了,不要求你全部記住,知道有這個東西則可,然后混跡于比較成熟的技術(shù)論壇,直接Google微信小程序論壇,一搜一大堆,看看其他人使用微信小程序遇到什么問題,或者有什么比較好的第三方工具,然后就是從論壇上下載一些實戰(zhàn)視頻教程,我知道很多技術(shù)人員不推薦看視頻教程來學(xué)習(xí)技術(shù),覺得非常浪費時間,但是我覺得看實戰(zhàn)教程還是有點用處的,當(dāng)你看完文檔對微信小程序有個模糊的了解后,弄一些視頻來看,效果很不錯,當(dāng)然很多視頻中老師的語速非常慢,所以我一般都是以2.5倍的速度來看的,遇到自己會的內(nèi)容,就直接快進跳過,這樣就可以快速的學(xué)會開發(fā)一個完整項目的流程,如果有一些比較好的項目源碼,建議也要研究研究,我做完上面的工作用來1天左右的時間,接下來四天就是動手開發(fā)了,了解了這么多東西,如果不動手開發(fā),不去遇到一些實際上的問題,是很難掌握前面學(xué)習(xí)的理論知識的,動手的重要性就不多講了,總之很重要!

 

 

動手開發(fā)

下面來簡單的看看開發(fā)的邏輯,只給出代碼片段,具體代碼可以在文末找到下載鏈接,項目的結(jié)構(gòu)如下

 

 

 

 

首先是用于設(shè)置月經(jīng)周期、長度和上次月經(jīng)時間的設(shè)置界面,該界面使用了picker組件

1
2
picker
從底部彈起的滾動選擇器,現(xiàn)支持三種選擇器,通過mode來區(qū)分,分別是普通選擇器,時間選擇器,日期選擇器,默認(rèn)是普通選擇器。

 

設(shè)置完后,點擊按鈕,將設(shè)置完的數(shù)據(jù)保存到緩存中,然后跳轉(zhuǎn)到當(dāng)月生理期顯示界面(代碼在picker文件夾下)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 {
      //經(jīng)期長度
      wx.setStorageSync('jinqi', a)
      //周期長度
      wx.setStorageSync('zhouqi', a2)
      //最近一次月經(jīng)
      wx.setStorageSync('zuijinriqi', date)
    } catch (e) {
    }

    wx.switchTab({
      url: '../calendar/calendar'
    })
  }

這里有三個點要注意
1.這樣通過data-Xxx來實現(xiàn)將wxml界面中的數(shù)據(jù)傳遞到j(luò)s中,可以通過e.currentTarget.dataset.Xxx這段js代碼獲得相應(yīng)的數(shù)據(jù)
2.使用wx.setStorageSync(key, value)將數(shù)據(jù)存入緩存中,緩存中的數(shù)據(jù)將永久保存,除非用戶卸載了微信,最多可以緩存10M的數(shù)據(jù)
3.要跳轉(zhuǎn)到tabBar指定的界面要使用wx.switchTab(OBJECT),wx.navigateTo(OBJECT)只能跳轉(zhuǎn)到tabBar指定之外的界面

接著來看現(xiàn)實月經(jīng)規(guī)律的界面,該界面分為3部分

 

 

 

 

第一個部分:在app.json文件中進行設(shè)置,實現(xiàn)這個tabBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"tabBar": {
    "backgroundColor": "#343",
    "color": "#fff",
    "list": [
      {
        "pagePath": "pages/calendar/calendar",
        "text": "月經(jīng)記錄",
        "iconPath": "image/1.png",
        "selectedIconPath": "image/2.png"
      },
      {
        "pagePath": "pages/lists/lists",
        "text": "月經(jīng)知識",
        "iconPath": "image/3.png",
        "selectedIconPath": "image/4.png"
      },
      {
        "pagePath": "pages/picker/picker",
        "text": "月經(jīng)設(shè)置",
        "iconPath": "image/2.png",
        "selectedIconPath": "image/4.png"
      }
    ]
  }

 

如果要重其他界面跳轉(zhuǎn)到pagePath屬性指定的界面要使用wx.switchTab(OBJECT)

第二部分比較復(fù)雜,通過for循環(huán)和if判斷將對應(yīng)數(shù)組中的值渲染上去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<view class="days box box-lr box-wrap">
     <!--當(dāng)月空出的位置-->
     <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>
     <!--當(dāng)月空出的位置-->
     <!--月數(shù)-->
     <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>
       <!--月數(shù)-->
     </view>
   </view>
 </view>

 

這里有5個數(shù)組,empytGrids數(shù)組表示渲染時要空出的位置,days數(shù)組表示這個月所有的天數(shù),yue數(shù)組表示這個月月經(jīng)的天數(shù),weixian數(shù)組表示這個月危險期的天數(shù),anquan數(shù)組表示這個月安全期的天數(shù),使用不同的背景色渲染出來則可

先來看一下如何獲得empytGrids數(shù)組和days數(shù)組,代碼如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 獲取當(dāng)月共多少天,傳年和月
 getThisMonthDays(year, month) {
   //通過Date來獲取當(dāng)月天數(shù)
   return new Date(year, month, 0).getDate();
 },
 // 獲取當(dāng)月第一天星期幾,傳年和月
 getFirstDayOfWeek(year, month) {
   return new Date(Date.UTC(year, month - 1, 1)).getDay();
 },
 // 計算當(dāng)月1號前空了幾個格子
 calculateEmptyGrids(year, month) {
   const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
   let empytGrids = [];
   if (firstDayOfWeek > 0) {
     //將不渲染的添加進入empytGrids數(shù)組
     for (let i = 0; i < firstDayOfWeek; i++) {
       empytGrids.push(i);
     }
     this.setData({
       hasEmptyGrid: true,
       empytGrids
     });
   } else {
     this.setData({
       hasEmptyGrid: false,
       empytGrids: []
     });
   }
 },
 // 繪制當(dāng)月天數(shù)占的格子
 calculateDays(year, month) {
   let days = [];
   //獲得當(dāng)月共有多少天
   const thisMonthDays = this.getThisMonthDays(year, month);
   for (let i = 1; i <= thisMonthDays; i++) {
     days.push(i);
   }
   //設(shè)置當(dāng)月天數(shù)
   this.setData({
     days
   });
 },

 

代碼注釋非常清楚,要獲得empytGrids數(shù)組,先通過getFirstDayOfWeek()獲得這個月的第一個天是星期幾,因為wxml界面顯示時是從星期日開始的,所以這個月第一天是星期一就要空一格,而要獲得days數(shù)組,則通過getThisMonthDays()方法獲得這個月的天數(shù),然后循環(huán)賦值則可

接著要獲得yue數(shù)組、weixian數(shù)組和anquan數(shù)組,這里就要理解計算月經(jīng)的算法,網(wǎng)上有很多在線月經(jīng)計算器,在在線月經(jīng)計算器旁一般都會有介紹如何簡單的計算月經(jīng),其實就是通過上次月經(jīng)的日期獲得下次月經(jīng)的日期,然后通過下次月經(jīng)的日期減去14就可以獲得排卵日,一般排卵日的前5天和后4天就是排卵期,在前面的月經(jīng)設(shè)置界面,我們設(shè)置了月經(jīng)長度、月經(jīng)周期和上次月經(jīng)的日期,通過這些信息就可以寫出一個簡單的算法,將這個月的日期分成3個部分

1
2
3
4
5
6
7
8
9
a:當(dāng)前日期與初次月經(jīng)的日期相差的天數(shù)再與月經(jīng)周期取余

a<月經(jīng)長度---->此時在月經(jīng)期

月經(jīng)長度<a<月經(jīng)周期-14-5---->此時在安全期

月經(jīng)周期-14-5<a<月經(jīng)周期-14+4---->此時在排卵期

月經(jīng)周期-14+4<a<月經(jīng)周期---->此時在安全期

 

通過這個算法,就可以計算月經(jīng)情況了,部分代碼如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//計算天數(shù)差的函數(shù)
  DateDiff(sDate1, sDate2) {    //sDate1和sDate2是2002-12-18格式  
    var aDate, oDate1, oDate2, iDays
    aDate = sDate1.split("-")
    oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])    //轉(zhuǎn)換為12-18-2002格式  
    aDate = sDate2.split("-")
    oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
    iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24)    //把相差的毫秒數(shù)轉(zhuǎn)換為天數(shù)  
    return iDays
  },


  //計算上一個月月經(jīng)初潮的日期,用于判斷,day為月經(jīng)周期,yuejindate上次月經(jīng)日期
  oldyuejindate(yuejindate, day) {
    var yue = yuejindate.split("-")
    var yue2 = new Date(yue[0] + "/" + yue[1] + "/" + yue[2]);
    var intValue = 0;
    var endDate = null;
    var days
    //獲得指定日期的毫秒數(shù)
    intValue = yue2.getTime();
    // console.log("hahhaha"+intValue)
    intValue -= day * (24 * 3600 * 1000);
    endDate = new Date(intValue);
    days = endDate.getFullYear() + "-" + (endDate.getMonth() + 1) + "-" + endDate.getDate()
    // console.log("hahhaha"+days)
    return days
  },

 

DateDiff()方法用于計算兩個日期間相差的天數(shù),oldyuejindate()方法用于計算上一次初次月經(jīng)的時間,之所以要編寫oldyuejindate()方法是因為用戶有時喜歡看幾個月之前的月經(jīng)規(guī)律,這樣在月經(jīng)設(shè)置界面設(shè)置的初次月經(jīng)的日期就不能用了,該日期用于查看這個日期后的月份對應(yīng)的月經(jīng)規(guī)律,接著看代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
viewyue(cur_year, cur_month) {
    try {
      //月經(jīng)持續(xù)時間
      var jinqi = wx.getStorageSync('jinqi');
      //月經(jīng)周期
      var zhouqi = wx.getStorageSync('zhouqi');
      //上次月經(jīng)日期
      var zuijinriqi = wx.getStorageSync('zuijinriqi');
      if (zuijinriqi) {
        // Do something with return value
      }
    } catch (e) {
      // Do something when catch error
    }
    //當(dāng)前年月日
    var date = new Date();
    const day = date.getDate();
    var nowday = cur_year + "-" + cur_month + "-" + day;
    //將當(dāng)月所有的日期都根據(jù)條件判斷一下,然后放入不同的數(shù)組中
    var y = 0, a = 0, w = 0;
    var yuejinqi = [];
    var anquanqi = [];< 
 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/17982.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×