0基礎入門完成簡單的“每天有樂”微信小程序（不含后台）

博客班級	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作業要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作業目標	編寫一個小程序，可以全新編寫，也可以學習別人的小程序進行修改 熟悉git代碼管理流程，將源代碼上傳到到github 在博客園班級中寫一篇相應的博文
作業源代碼	https://github.com/aiai0603/software-engineering-demo-1.git
學號/姓名	31801150/張帥
院系	浙大城市學院計算機系

 

　　

　　前言：軟件工程課程的第一次作業，單獨完成一個簡單的微信小程序（不含后台），本文主要講解如何從0基礎入門來編寫，含源代碼和注解。本人純小白，大佬勿噴，有錯誤請批評指正。

　　最終作品地址：https://github.com/aiai0603/software-engineering-demo-1.git（僅供參考）

　　開發工具：微信開發者工具

　　效果演示

         

 　　（預覽版）

　　全局配置

　　app.json：

　　pages：配置微信的小程序的所有頁面。第一項"pages/index/index"為默認顯示的界面，本程序包含9個界面。

    "pages/index/index",      //個人信息首頁
    "pages/logs/logs",        //獎券列表展示頁
    "pages/main/main",        //主頁
    "pages/rule/rule",        //積分規則
    "pages/policy/policy",    //隱私政策
    "pages/score/score",      //積分頁面
    "pages/set/set",          //個人設置
    "pages/show/show",        //領券頁面
    "pages/shop/shop"         //積分商店

　　windows：全局配置頁面效果，具體請參看官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

  "window":{
    "backgroundTextStyle":"dark",                      
    "navigationBarBackgroundColor": "#f21515",
    "navigationBarTitleText": "Happy everyday",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  }, 

　　tabbar：下方導航條配置，設置導航條的文字和圖標

"tabBar": {
    "selectedColor":  "#f21515",                //選中時文字顏色
    "list": [{
      "pagePath": "pages/main/main",            //跳轉的頁面
      "text": "首頁",                            //文字
      "iconPath":"pages/1.jpg" ,                //未選中時顯示的圖表
      "selectedIconPath": "pages/1-1.jpg"       //選中時的圖標
    },{
      "pagePath": "pages/logs/logs",
      "text": "優惠券",
      "iconPath":"pages/3.jpg" ,
      "selectedIconPath": "pages/3-3.jpg"
    },{
      "pagePath": "pages/index/index",
      "text": "我的",
      "iconPath":"pages/2.jpg" ,
      "selectedIconPath": "pages/2-2.jpg"
    }]
}

 　　　

　　　 app.js：

 　　　globalData：全局變量，用於存儲數據，模擬變化。

globalData: {
    userInfo: null,                            //個人信息
    disabled:false,                            //控制按鈕是否可用
    color:"red",                               //控制按鈕顏色
    pricenum:3,                                //控制持有券數
    price:[                                    //持有券的列表
      {
        available:0,                              //是否可用
        count:2,                                  //折扣
        money:3,                                  //滿多少可用
        name:"雪碧滿3減2券",                        //券名
        day:"2020.1.1-2021.1.1可用"                //說明
      }........(此處省略）
    ],
    score:[{                                       //積分信息
          day:"2020/10/11 12:00:31",               //時間
          title:"簽到獎勵",                         //說明
          point:2                                  //獲得積分數
    }........(此處省略）],
　　scorenum:506,                                   //積分總數
　　sign:"簽到",                                     //簽到按鈕文字
　　style:"qd"                                      //簽到按鈕樣式名
  },
 

　　分頁代碼

 　　在每一頁的json文件中，設置好每一頁的標題文字和顏色

{
  "usingComponents": {},                        //使用組建（本dome未使用）
  "navigationBarTitleText": "我的",              //標題文字
  "navigationBarTextStyle":"white",             //標題顏色
}

　　

　　pages/index/index（主頁）：

　　上半使用 wx:if/wx else 控制，如果未授權登錄且條件支持則顯示授權按鈕，如果已經有授權信息則顯示頭像和微信名

　　     

　　index.wxml

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">授權登錄 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>

　　index.js

onLoad: function () {
    if (app.globalData.userInfo) {               //如果全局變量中已經存在授權信息則賦值給當前頁面的變量
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },

  getUserInfo: function(e) {                               //獲得授權的者的微信名
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

　　下方為view標簽編寫的功能欄，使用navigator標簽實現跳轉到指定的頁面

　　PS：navigator標簽只能跳轉到非tabbar的頁面，跳轉到tabbar界面需要使用函數：

 wx.switchTab({             //跳轉至tabbar頁面
      url: '../logs/logs'
  })

<navigator url="../score/score">            //跳轉到非tabbar界面   

　　

　　pages/logs/logs（優惠券的展示頁面）:

　　要調用全局變量，需要在js文件開頭寫上調用語句

var app=getApp();

　　將全局變量的值賦值給當前頁面的變量，即可在當前頁面使用

 onShow: function () {
    this.setData({
      price:app.globalData.price
  })

　　頭部使用選項卡檢索“未使用”和“歷史記錄”的信息，綁定事件點擊切換

　　    

　　logs.wxml

<view id='tabs'>
  <view class='tabs-box'>
    <block wx:for="{{['未使用','歷史記錄']}}" wx:key="index">
      <view class="tabs-item {{currentTabIndex == index ? 'selected' : '' }}" bindtap='onTabsItemTap' data-index='{{index}}'>
        {{item}}      
      </view>
    </block>
  </view>
  <view class='ordert-detail'>
    <view hidden='{{currentTabIndex != 0}}'>(省略）
    </view>
    <view hidden='{{currentTabIndex != 1}}'>（省略）

  </view>
</view>

　　logs.js

 onTabsItemTap:function(event){
    let index=event.currentTarget.dataset.index;
    this.setData({
      currentTabIndex:index,
    })
  }

　　使用wx:for將數據渲染到頁面中，使用availabel判斷為哪種優惠券，從而渲染到不同的選項下，並綁定不同的樣式

 <view class="card"  wx:for="{{price}}" wx:if="{{item.available!=0}}">
          <view class="left-2">
            <view class="left-title">¥{{item.count}}</view>
            <view class="left-under">滿{{item.money}}元可用</view>
          </view>
          <view class="word">
              <view class="title">
                {{item.name}}
              </view>
              <view class="under">

               {{item.day}}
              </view>
          </view> 
        </view>

 

　　pages/policy/policy、pages/rule/rule、pages/set/set  ：（三張簡單的內容頁面，不過多贅述）

                   

 

　　pages/main/main（主頁）：

　　上方為與個人信息頁相同的授權判定，授權則顯示用戶信息，未授權則顯示登錄按鈕。簽到按鈕通過全局變量中的sign判斷是否曾簽到過，並在簽到后改變樣式

        

　　main.wxml

    <view class="{{style}}" bindtap="sign" >{{sign}}</view>

　　main.js

var util = require('../../utils/util.js');                   //導入官方自帶的js文件，內含時間處理函數
 sign:function(){
      if( app.globalData.sign=="簽到")                        //判斷是否曾簽到
      {
        console.log("ok")
        app.globalData.sign="已簽"                   
        app.globalData.style="qd-1"                            //改變樣式
        app.globalData.scorenum=app.globalData.scorenum+2      //改變總積分
        var newpoint={                                          
          day: util.formatTime(new Date()),
          title:"簽到獎勵",
          point:2
        }
        app.globalData.score.unshift(newpoint);                 //在積分信息數組中加入新的數據
        this.setData({                                          //修改當前界面的數據，及時刷新
            style:"qd-1", 
            sign:"已簽",
            score:app.globalData.scorenum
        })
      }else{
      }
  },

　　下方使用swiper組件實現輪播

 

　　pages/show/show（領券頁面）：

　　領券按鈕主要通過全局變量disabled判斷是否已經領過券，第一次領取則領取成功並彈窗

　　     

　　show.wxml

   <button disabled="{{disabled}}" bindtap="get" style="width:200rpx;color:white;background-color:{{color}}" >領取</button>

　　show.js

  get(){
    wx.showToast({                                        //彈窗
      title: '領取成功！', // 標題
      icon: 'success',  // 圖標類型，默認success
      duration: 1500  // 提示窗停留時間，默認1500ms
    }),
    app.globalData.color="grey",
    app.globalData.disabled=true,
    app.globalData.pricenum+=1,                           //修改了全局變量
    console.log(app.globalData.disabled)
    this.setData({
     color:"grey",
     disabled:true                                        //在當前界面更新
    })
    var newprice={
      available:0,
      count:2,
      money:4,
      name:"雪碧滿4減2券",
      day:"2020.1.1-2021.1.1可用"
    }
    app.globalData.price.push(newprice)                    //將新的優惠券信息插入全局數組中

    
  },

 

　　pages/score/score（積分界面）：

　　積分信息的渲染同優惠券界面，篩選功能通過picker組件控制，選擇后重置當前界面的數組，使得當前界面的信息發生改變

　　

　　score.wxml

<picker  mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="button" >篩選</view>
</picker>

　　score.js

 data: {
    array: ['全部', '增加', '減少'],        //綁定在選擇器的數據
    objectArray: [                        
      {
        id: 0,
        name: '全部'
      },
      {
        id: 1,
        name: '增加'
      },
      {
        id: 2,
        name: '減少'
      }
    ],
    index: 0                               //當前所選的條目的下標
  },

 bindPickerChange: function (e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      index: e.detail.value                             //綁定選擇的下標
    })
    if(e.detail.value==0)                               //下標為0則全選，將完整的數組賦值給當前
    {
      this.setData({
        score:app.globalData.score
      })
    }else if(e.detail.value==1){                         //下標為1，選擇增加積分的頁面
     var i;
     var temp=[];
     for(i=0;i<app.globalData.score.length;i++)           //遍歷數組，找出增值為正的值存入中間tmp數組
     {
       if(app.globalData.score[i].point>0){
            temp.push(app.globalData.score[i]);
       }
     }
     this.setData({
      score:temp                                          //修改為處理后的數組
    })
    }else{                                                 //檢索減少的值為同理
      var i;
      var temp=[];
      for(i=0;i<app.globalData.score.length;i++)
      {
        if(app.globalData.score[i].point<0){
             temp.push(app.globalData.score[i]);
        }
      }
      this.setData({
       score:temp
     })
    }
  }

 

 　　pages/shop/shop（積分商城）：

 　　通過wx:for將商品信息綁定至界面。點擊時將點擊的商品卡片對應的信息傳入函數，函數比較當前積分和商品所需積分，滿足需求彈出確認窗口，積分不足則彈出提示框

　　       

 　　shop.wxml

<view class="card-group" >
    <view class="card" wx:for="{{shop}}" wx:key="{{item.index}}" bindtap="buy" data-item="{{item}}">
    <image class="img" src="{{item.src}}">
    </image>
    <view class="title">
   {{item.title}}
    </view >
    <view class="score">
       {{item.point}}積分
    </view>
 </view>

　　shop.js

 buy(e){
       var good = e.currentTarget.dataset.item;                   //獲得當前商品信息
       if(good.point>=app.globalData.scorenum)                    //比較積分是否滿足
       {
        wx.showToast({                                             //積分不足，彈出純文字信息
          title: '積分不足',
          icon: 'none',    //如果要純文本，不要icon，將值設為'none'
          duration: 2000     
        })  
       }else{ 
        let that = this;                                            //保存當前page信息，在后續回調函數中this將無法調用
        wx.showModal({                                              //確認框
              title:"確認",
              content:"將扣除500積分，您確定嗎？",
              success:function(res){                                 //確認兌換，扣除積分
              if(res.confirm){
                  app.globalData.scorenum-=good.point;
                 
                  that.setData({
                    score:that.data.score-good.point
                  })
                  wx.showToast({
                  title: '兌換成功',
                  icon: 'none', 
                  duration: 1000     
                })  

                var newprice={
                  available:0,
                  count:1,
                  money:3,
                  name:"可樂滿3減1券",
                  day:"2020.1.1-2021.1.1可用"
                }
                app.globalData.price.push(newprice);                //把兌換的券加入券的數組

                var newpoint={
                  day: util.formatTime(new Date()),
                  title:"兌換商品",
                  point:-500
                }
                app.globalData.score.unshift(newpoint);               //吧兌換的積分信息加入積分信息的數組
                app.globalData.pricenum+=1;
              }
              else if(res.cancel){
                wx.showToast({                                          //取消兌換，彈出信息
                  title: '已經取消',
                  icon: 'none',    //如果要純文本，不要icon，將值設為'none'
                  duration: 1000     
                })  
              }}
        })
       }
    },

 

　　收獲總結

　　雖然是軟件工程作業的第一份作業，也着實花了不少功夫，從0基礎到完成一份較為完善的小demo，一步步查找文檔和資料，將一個個功能完善。其中也經過了不少的彎路，犯了不少錯誤。希望在今后的編碼中，可以吸取這次開發的經驗，將這次寫demo的經驗用在之后的大作業和編碼中。同時，可以繼續保持認真學習，自主學習的態度，同時向周圍優秀的同學學習，繼續完善持續跟進軟件工程的學習。