微信小程序之組件的集合（六）

　　這個將是最後一篇關於小程序的記錄了，課程接近尾聲，最後一個是關於用戶的page頁面，看看這個頁面中有哪些值得學習的地方！

1、page中my開發

這個主要是展現用戶喜歡的雜誌，以及用戶的信息，須要建立兩個相關的組件，一個是like-button組件，這個做用是來美化按鈕，一個是preview組件，這個是用來展現標記爲喜歡的雜誌的，先把頁面page中的my相關的代碼研究一下

一、my.wxml文件

 1 <view class="container">
 2   <image class="bg" src="/images/my/my@bg.png"></image>
 3   <!-- <open-data type="userAvatarUrl" class="avatar avatar-position"></open-data> -->
 4   <v-button wx:if="{{!authorized}}" class="avatar-position" bind:getuserinfo="onGetUserInfo" open-type="getUserInfo">
 5     <image class="avatar" slot="img" src="/images/my/my.png"></image>
 6   </v-button>
 7   <view wx:if="{{authorized}}" class="avatar-container avatar-position">
 8     <image src="{{userInfo.avatarUrl}}" class="avatar"></image>
 9     <text>{{userInfo.nickName}}</text>
10   </view>
11   <view class="about-container">
12     <view class="about-us" bindtap="onJumpToAbout">
13       <image src="/images/my/about.png"></image>
14       <text class="description">關於咱們</text>
15     </view>
16     <view class="about-us">
17       <text class="book_num">{{bookCount}}</text>
18       <text class="description">喜歡的書</text>
19     </view>
20   </view>
21   <!-- 喜歡雜誌列表 -->
22   <view class="like-container">
23     <image class=".headline" src="/images/my/like.png" />
24     <view class="preview-container">
25       <block wx:for="{{classics}}" wx:key="">
26         <v-preview bind:tap="onPreviewTap" class="preview" classic="{{item}}" />
27       </block>
28     </view>
29   </view>
30 </view>
31 <!-- <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">受權</button> -->
32 
33 <image bindtap="onStudy" class="study" src="/images/my/study.png"></image>

這裏須要注意的是如何獲取用戶信息的代碼，須要用戶進行受權，可是觸發用戶受權的彈窗是能是button按鈕，這裏的處理方法是自定義的封裝了一種button按鈕，這就是下面這段代碼

1   <v-button wx:if="{{!authorized}}" class="avatar-position" bind:getuserinfo="onGetUserInfo" open-type="getUserInfo">
2     <image class="avatar" slot="img" src="/images/my/my.png"></image>
3   </v-button>

 在封裝image-button的時候，使用了slot這種插槽，爲了提升組件的通用性，具體的使用方法，不詳細講解了

二、my.js文件代碼

  1 import {
  2   BookModel
  3 } from '../../models/book.js';
  4 
  5 import {
  6   ClassicModel
  7 }from '../../models/classic.js'
  8 // 實例化
  9 const bookModel = new BookModel();
 10 const classicModel = new ClassicModel();
 11 
 12 Page({
 13 
 14   /**
 15    * 頁面的初始數據
 16    */
 17   data: {
 18     authorized:false,
 19     userInfo:null,
 20     bookCount:0,
 21     classics:null
 22   },
 23 
 24   /**
 25    * 生命週期函數--監聽頁面加載
 26    */
 27   onLoad: function (options) {
 28     // wx.getUserInfo({
 29     //   success:data=>{
 30     //     console.log(data);
 31     //   }
 32     // })  
 33     this.userAuthorized();
 34     this.getMyBookCount();
 35     this.getMyFavor();
 36   },
 37   // 獲取書籍的喜歡的總數
 38   getMyBookCount(){
 39     bookModel.getMyBookCount().then(res => {
 40       this.setData({
 41         bookCount:res.count
 42       })
 43     })
 44   },
 45 
 46   // 獲取喜歡雜誌的列表
 47   getMyFavor(){
 48     classicModel.getMyFavor(res=>{
 49       this.setData({
 50         classics:res
 51       })
 52     })
 53   },
 54 
 55   // 判斷用戶是否受權
 56   userAuthorized(){
 57     wx.getSetting({
 58       success:data=>{
 59         if(data.authSetting['scope.userInfo']){
 60           wx.getUserInfo({
 61             success:data=>{
 62               // console.log(data)
 63               this.setData({
 64                 authorized:true,
 65                 userInfo:data.userInfo
 66               })
 67             }
 68           })
 69         }else{
 70           this.setData({
 71             authorized:false,
 72             userInfo:null
 73           })
 74         }
 75       }
 76     })
 77   },
 78 
 79   // 獲取用戶信息
 80   onGetUserInfo(event){
 81     const userInfo = event.detail.userInfo;
 82     if(userInfo){
 83       this.setData({
 84         userInfo: userInfo,
 85         authorized: true
 86       })
 87     }
 88   },
 89 
 90   onJumpToAbout(event){
 91     wx.navigateTo({
 92       url: '/pages/about/about',
 93     })
 94   },
 95 
 96   onStudy(event){
 97     wx.navigateTo({
 98       url: '/pages/course/course',
 99     })
100   },

js中邏輯也比較簡單，惟一須要注意的地方就是獲取用戶信息的那個地方，須要查看一下微信小程序的官方文檔來進行開發，否則你本身也不知道如何調用微信官方的接口來獲取用戶的數據，pages中還有兩個page頁面，一個是about一個是course，這兩個就比較簡單了，至於樣式css代碼，這裏就不貼出來了

2、image-button組件的開發

一、index.wxml相關代碼

1 // index.wxml代碼
2 <button bindgetuserinfo="onGetUserInfo" open-type="{{openType}}" class="container" plain="{{true}}">
3   <slot name="img"></slot>
4 </button>

二、index.js代碼

 1 // components/image-button/index.js
 2 Component({
 3   options:{
 4     multipleSlots: true
 5   },
 6   /**
 7    * 組件的屬性列表
 8    */
 9   properties: {
10     openType:{
11       type:String
12     }
13   },
14 
15   /**
16    * 組件的初始數據
17    */
18   data: {
19 
20   },
21 
22   /**
23    * 組件的方法列表
24    */
25   methods: {
26     onGetUserInfo(event){
27       this.triggerEvent('getuserinfo',event.detail,{});
28     }
29   }
30 })

三、index.wxss樣式

1 .container{
2   padding: 0 !important;
3   border: none !important;
4 }

這個須要注意的是multipleSlots這個參數要設置成true

3、preview組件的開發

一、index.wxml頁面代碼

1 <view catch:tap="onTap" class="container">
2   <view class="head">
3     <v-tag text="{{typeText}}" tag-class="tag" />
4     <v-like class="like" read-only="{{true}}" like="{{true}}" count="{{classic.fav_nums}}" />
5   </view>
6   <image class="{{classic.type==200?'music-img':'other-img'}}" src="{{classic.image}}"></image>
7   <view class="text">{{classic.content}}</view>
8 </view>

二、index.js代碼

 1 // components/preview/index.js
 2 Component({
 3   /**
 4    * 組件的屬性列表
 5    */
 6   properties: {
 7     classic: {
 8       type: Object,
 9       observer: function(newVal) {
10         if (newVal) {
11           var typeText = {
12             100: "電影",
13             200: "音樂",
14             300: "句子"
15           }[newVal.type]
16         }
17         this.setData({
18           typeText: typeText
19         })
20       }
21     }
22   },
23 
24   /**
25    * 組件的初始數據
26    */
27   data: {
28     typeText:String
29   },
30 
31   /**
32    * 組件的方法列表
33    */
34   methods: {
35     onTap:function(event){
36       // 注意catchtap與bindtap的區別
37       this.triggerEvent('tap',{
38         cid:this.properties.classic.id,
39         type:this.properties.classic.type
40       },{})
41     }
42   }
43 })

三、index.wxss樣式代碼

 1 .container{
 2   display: flex;
 3   flex-direction: column;
 4   align-items: center;
 5   width:330rpx;
 6   background-color: #ffffff;
 7 }
 8 
 9 .head{
10   display: flex;
11   width:100%;
12   flex-direction: row;
13   align-items: center; 
14   justify-content: space-between;
15   height:80rpx;
16 }
17 
18 .tag{
19   margin-left:20rpx;
20   margin-top:-2rpx;
21   height:40rpx;  
22   width:72rpx ;
23   font-size:24rpx;
24   background-color:#f7f7f7 !important;
25 }
26 
27 .like{
28   margin-top:4rpx;
29   margin-right:4rpx;
30 }
31 
32 .other-img{
33   width:100%;
34   height:240rpx;
35 }
36 
37 .music-img{
38   border-radius: 50%;
39   width:240rpx;
40   height:240rpx;
41 }
42 
43 .text{
44   padding:30rpx;
45   font-size:28rpx;
46   height:130rpx;
47   color:#666666;
48   overflow: hidden;
49 }

這樣的話，基本上整個page頁面基本上就完後了，小程序的整體開發也基本上完成了，以爲這個項目一路學下來，收穫最多不是學會了一點小程序開發的知識，而是對代碼格式，代碼風格的改善，我以爲這也是算對代碼的一種敬畏之心吧！

 

內容出處：七月老師《純正商業級小程序開發》視頻課程

視頻課程連接：https://coding.imooc.com/class/251.html