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

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

　　这个将是最后一篇关于小程序的记录了，课程接近尾声，最后一个是关于用户的page页面，看看这个页面中有哪些值得学习的地方！

一、page中my开发

这个主要是展示用户喜欢的杂志，以及用户的信息，需要创建两个相关的组件，一个是like-button组件，这个作用是来美化按钮，一个是preview组件，这个是用来展示标记为喜欢的杂志的，先把页面page中的my相关的代码研究一下

1、my.wxml文件

 1 <view class="container">
 2   <image class="bg" src="/images/my/[email protected]"></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这种插槽，为了提高组件的通用性，具体的使用方法，不详细讲解了

2、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代码，这里就不贴出来了

二、image-button组件的开发

1、index.wxml相关代码

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

2、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 })

3、index.wxss样式

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

这个需要注意的是multipleSlots这个参数要设置成true

三、preview组件的开发

1、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>

2、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 })

3、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 }