WeChat小程序開發（三）

功能實現：

1. WeUI的使用
2. 交互式界面：實現模態對話框：wx.showModal()
3. 受權頁面：實現微信帳號受權
4. 註冊頁面：實現用該帳號註冊
5. 用戶我的頁面：實現我的信息和主頁信息

 

本次筆記教程來自於MOOC平臺浙江工商大學的課程「微信小程序開發從入門到實踐」：https://www.icourse163.org/course/HZIC-1205901813

 

• WeUI的使用：

在GitHub https://github.com/Tencent/weui-wxss 上下載文檔到本地，用微信開發者工具直接打開這個文件包裏的dist文件夾，而後就能夠看見微信官方提供的各類組件的界面樣式，若是想要引用其中某個樣式，只須要把該文件夾下的sytle文件夾複製到你的程序文件夾中，而後在你的程序的app.wxss中添加代碼： @import ‘style/weui.wxss’ 

而後若是你想要使用那種樣式的組件，就直接在wxml組件中引用class就行。

 

• 打開小程序後的浮窗提醒：

 

打開app.js文檔，編輯wx.login()：

   // 登陸
    wx.login({//返回和用戶對應的惟一的openid
      success:res=>{//參數success：若是成功則返回res
        console.log('res',res)//在日誌上打印出res的信息
        wx.request({//向後臺發起請求
          url: 'https://zjgsujiaoxue.applinzi.com/index.php/Api/Weixin/code_to_openidv2',//浙江工商大學提供的後臺
          data:{//這裏的做用是把信息賦值給後臺對應數據庫裏具體項的信息，‘code','from'是固定的，只能從後端變動，且一個也不能少。
            'code':res.code,
            'from':'wxf721e37fc9199f11'
          },
          success:function(res){//若是請求成功則執行函數
            console.log('openid',res.data)
            wx.setStorageSync('test1_openid', res.data.openid)//將openid的值存入緩存當中if(!res.data.is_resgiter){
               wx.showModal({//現實模態彈窗
                title:'提示',
                content:'請先註冊',
                //showCancel:false,
                success:function(res){//若是按下肯定則跳轉頁面
                  wx.navigateTo({
                    url: '/pages/register/userlogin',
                  })
                }
              })
            }
             
              console.log('rrr',res)
          },
          fail:function(res){
            console.log('res'+res)
          }
        })
      }
    })

 

這裏有幾個重要的API：

 wx.login :獲取登陸憑證（code），經過憑證換取用戶登錄態信息，包括該用戶的惟一標識符：openid。

 wx.request :向後端服務器發起請求，調用服務器的接口地址的參數是url，請求的參數放在data裏，成功請求的參數是success,失敗請求的參數是fail。

 wx.setStrageSync :緩存數據，使用形式爲 wx.setStorageSync('key', 'value') ，以後調用value可直接引用key。

 wx.showModal ：顯示模態對話框。

 

• 受權頁面的實現：

 

在pages下新建文件夾register，在裏面新建page:userlogin，此時不用手動在app.json裏添加地址信息，已自動添加。

簡單構建userlogin.wxml，要求實現點擊受權登錄按鈕後容許微信號受權後就跳轉到註冊頁面。這裏的樣式直接使用WeUI樣式庫裏的樣式，代碼以下：

<view class="container">
     <view class="weui-article__h1">請先登陸</view>

    <button  wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="weui-btn weui-btn_primary">受權登錄</button>
</view>

在userlogin.js裏實現onlogin函數，在實現受權微信用戶信息的基礎上加上一個判斷語句：若是成功受權則跳轉到註冊頁面，下面是userlogin中的onlogin代碼：

 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
          })
        }
      })
    }
    if(this.data.hasUserInfo){//若是已經受權，則跳轉到註冊頁面
      wx.navigateTo({
        url: '/pages/register/register',
      })
    }
  },

• 註冊頁面的實現：

註冊頁面的格式採用了WeUI裏的一個表單格式，具體代碼以下：

<!--pages/register/register.wxml-->
<view>
    <view class="weui-cell weui-cell_active">
        <view class="weui-cell__hd">
            <view class="weui-label">姓名</view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="請輸入姓名" bindchange="changeName" />
        </view>
    </view>
    <view class="weui-cell weui-cell_active">
        <view class="weui-cell__hd">
            <view class="weui-label">手機號</view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="請輸入手機號" bindchange="changeTel"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_active">
        <view class="weui-cell__hd">
            <view class="weui-label">學校</view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="請輸入學校" bindchange="changeSch"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_active">
        <view class="weui-cell__hd">
            <view class="weui-label">學號</view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="請輸入學號" bindchange="changeSNo"/>
        </view>
    </view>
    <view class="weui-cell weui-cell_active">
        <view class="weui-cell__hd">
            <view class="weui-label">入學年份</view>
        </view>
        <view class="weui-cell__bd">
            <input class="weui-input" placeholder="請輸入入學年份" bindchange="changeEYear"/>
        </view>
    </view>
  <button class="weui-btn weui-btn_primary" bindtap="tabSubmit" >提交</button>
</view>

這裏對input組件有一個 bindchange 功能，這個功能是實現當在這裏寫進信息時，會啓動相應的函數而且會傳送輸入的信息。

註冊頁面的最關鍵的是完成註冊信息輸入到後端服務器的實現，

首先咱們先定義了一些數據，分別是咱們註冊時要填寫的信息，也是要傳入後端數據庫的信息，在register.js中的代碼以下：

data: {
    userName:'',
    userTel:'',
    userSch:'',
    userSNo:'',
    userEYear:''
  },

其次，對應的輸入信息時的處理函數以下（這裏只舉同樣，其餘都同樣）：

  changeName:function(e){
    this.setData({
      userName:e.detail.value
    })
  },

最後再實現點擊提交時的處理函數：

  tabSubmit:function(){
    if(!this.data.userName){
      wx.showToast({
        title: '姓名不能爲空',
      })
      return
    }
    else if(!this.data.userTel){
      wx.showToast({
        title: '手機號不能爲空',
      })
      return
    }
    else if(!this.data.userSch){
      wx.showToast({
        title: '學校不能爲空',
      })
      return
    }
    else if(!this.data.userSNo){
      wx.showToast({
        title: '學號不能爲空',
      })
      return
    }
    else if(!this.data.userEYear){
      wx.showToast({
        title: '入學年份不能爲空',
      })
      return
    }
    wx.request({
      url: 'https://zjgsujiaoxue.applinzi.com/index.php/Api/User/register_by_openid',
      data:{
        openid:wx.getStorageSync('test1_openid'),
        globalData:JSON.stringify(app.globalData.userInfo),
        name:this.data.userName,
        tel:this.data.userTel,
        school:this.data.userSch,
        num:this.data.userSNo,
        enter_year:this.data.userEYear
      },
      success:res=>{
        console.log('ree',res)
        if(res.data.is_register){
          wx.redirectTo({
            url: '/pages/my/myInfo/myInfo',
          })
        }
      }
    })
  },

 

這裏前面的判斷語句是防止輸入表單的信息爲空，當全部信息都不爲空時調用 wx.request 請求傳入數據到後端。最後傳入成功時就跳轉頁面。

 

• 個人頁面的實現：

這裏實現最簡單的個人頁面，首先wxml佈局文件也是採用了WeUI，具體以下：

<!--pages/my/myInfo/myInfo.wxml-->
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__bd">姓名</view>
    <view class="weui-cell__ft weui-cell__ft_in-access">{{myInfo.name}}</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__bd">手機號</view>
    <view class="weui-cell__ft weui-cell__ft_in-access">{{myInfo.tel}}</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__bd">學校</view>
    <view class="weui-cell__ft weui-cell__ft_in-access">{{mschoolyInfo.school}}</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__bd">學號</view>
    <view class="weui-cell__ft weui-cell__ft_in-access">{{myInfo.number}}</view>
</navigator>
<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__bd">入學年份</view>
    <view class="weui-cell__ft weui-cell__ft_in-access">{{myInfo.enter_year}}</view>
</navigator>

爲了從服務器中調用客戶信息，要在app.js裏提早調用用戶的信息，這裏在app.js裏 wx.login 接口中 success 參數的函數中添加代碼以下：

wx.request({
              url: 'https://zjgsujiaoxue.applinzi.com/index.php/Api/User/getInfo',
              data:{
                'openid':res.data.openid
              },
              success:function(res1){
                wx.setStorageSync('userInfo',res1.data.data )
              }
            })

 

把userInfo信息存入緩存，以後就能夠利用接口 wx.getStrogeSync(‘key’) 調用具體信息了，其中，在myInfo.js裏具體調用的代碼以下：

data: {
   myInfo:{}
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    this.setData({
      myInfo:wx.getStorageSync('userInfo')
    })
  },

 

 具體代碼已經傳到GitHub: https://github.com/SixteenTime/LittleLittle_Time/tree/master/miniprogram-x

總結：

注意：其實這份未完成的小程序有bug！說一下我在學習時遇到的問題吧，首先就是否是很理解後臺的運行流程以及前端到後端之間利用API的具體實現過程，由於這裏學習提供的後臺接口是浙江工商大學的接口，我沒法查看本身也暫時沒有學習到後端開發，因此有不少問題我也不能肯定是否是後端那裏的問題，由於對我來講如今後端就是一片被迷霧遮擋的建築，我在今天的學習中遇到的問題有1.個人頁面調用的信息不是我輸入的註冊信息！可是我調試的過程當中查看openid號和其餘的一些信息都沒有問題，也沒有報錯，因此我到如今也不知道問題到底出在哪裏，我想可能要把這個問題放一下，等我再往下學時，應該會一點點解決，起碼學到後端部分時應該會有點頭緒吧。2.我原本是想加一個tabbar可是也不知道怎麼回事，我只是加了一個tabbar後就再也顯示不了一進入app的那個模態彈窗了，並且一進去的頁面是index頁面，我後來查資料發如今app.json中page裏記錄的目錄順序也是默認的進入小程序出現的頁面順序，我調整了一下後只能實現頁面可以成功進入受權頁面可是也沒有彈窗，我後來把跳出彈窗前的判斷語句給刪了果真出現了，那麼，那個判斷語句究竟是判斷什麼呢？是if(!res.data.is_resgiter)，若是沒有註冊過，則跳出彈窗，但是我依舊屢次清空緩存，按道理是沒有註冊過的啊！難道是後臺已經有對應信息就表示已經註冊過了？（我以爲多是這樣的，應該就是這樣的吧，這樣就說得通了，也能顯示爲何註冊頁面和後面註冊的信息不對應 的問題了，由於我一開始註冊過了。）

綜上所述，我對於後臺的陌生，對於微信提供的API的陌生致使我會在不少明明很輕鬆簡單的地方一直徘徊，繼續學習吧。