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

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

一、page中my开发

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

1、my.wxml文件

 <view class="container">
   <image class="bg" src="/images/my/my@bg.png"></image>
   <!-- <open-data type="userAvatarUrl" class="avatar avatar-position"></open-data> -->
   <v-button wx:if="{{!authorized}}" class="avatar-position" bind:getuserinfo="onGetUserInfo" open-type="getUserInfo">
     <image class="avatar" slot="img" src="/images/my/my.png"></image>
   </v-button>
   <view wx:if="{{authorized}}" class="avatar-container avatar-position">
     <image src="{{userInfo.avatarUrl}}" class="avatar"></image>
     <text>{{userInfo.nickName}}</text>
   </view>
   <view class="about-container">
     <view class="about-us" bindtap="onJumpToAbout">
       <image src="/images/my/about.png"></image>
       <text class="description">关于我们</text>
     </view>
     <view class="about-us">
       <text class="book_num">{{bookCount}}</text>
       <text class="description">喜欢的书</text>
     </view>
   </view>
   <!-- 喜欢杂志列表 -->
   <view class="like-container">
     <image class=".headline" src="/images/my/like.png" />
     <view class="preview-container">
       <block wx:for="{{classics}}" wx:key="">
         <v-preview bind:tap="onPreviewTap" class="preview" classic="{{item}}" />
       </block>
     </view>
   </view>
 </view>
 <!-- <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">授权</button> -->

 <image bindtap="onStudy" class="study" src="/images/my/study.png"></image>

这里需要注意的是如何获取用户信息的代码，需要用户进行授权，但是触发用户授权的弹窗是能是button按钮，这里的处理方法是自定义的封装了一种button按钮，这就是下面这段代码

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

在封装image-button的时候，使用了slot这种插槽，为了提高组件的通用性，具体的使用方法，不详细讲解了

2、my.js文件代码

 import {
   BookModel
 } from '../../models/book.js';

 import {
   ClassicModel
 }from '../../models/classic.js'
 // 实例化
 const bookModel = new BookModel();
 const classicModel = new ClassicModel();

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     authorized:false,
     userInfo:null,
     bookCount:0,
     classics:null
   },

   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
     // wx.getUserInfo({
     //   success:data=>{
     //     console.log(data);
     //   }
     // })
     this.userAuthorized();
     this.getMyBookCount();
     this.getMyFavor();
   },
   // 获取书籍的喜欢的总数
   getMyBookCount(){
     bookModel.getMyBookCount().then(res => {
       this.setData({
         bookCount:res.count
       })
     })
   },

   // 获取喜欢杂志的列表
   getMyFavor(){
     classicModel.getMyFavor(res=>{
       this.setData({
         classics:res
       })
     })
   },

   // 判断用户是否授权
   userAuthorized(){
     wx.getSetting({
       success:data=>{
         if(data.authSetting['scope.userInfo']){
           wx.getUserInfo({
             success:data=>{
               // console.log(data)
               this.setData({
                 authorized:true,
                 userInfo:data.userInfo
               })
             }
           })
         }else{
           this.setData({
             authorized:false,
             userInfo:null
           })
         }
       }
     })
   },

   // 获取用户信息
   onGetUserInfo(event){
     const userInfo = event.detail.userInfo;
     if(userInfo){
       this.setData({
         userInfo: userInfo,
         authorized: true
       })
     }
   },

   onJumpToAbout(event){
     wx.navigateTo({
       url: '/pages/about/about',
     })
   },

   onStudy(event){
     wx.navigateTo({
       url: '/pages/course/course',
     })
   },

js中逻辑也比较简单，唯一需要注意的地方就是获取用户信息的那个地方，需要查看一下微信小程序的官方文档来进行开发，不然你自己也不知道如何调用微信官方的接口来获取用户的数据，pages中还有两个page页面，一个是about一个是course，这两个就比较简单了，至于样式css代码，这里就不贴出来了

二、image-button组件的开发

1、index.wxml相关代码

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

2、index.js代码

 // components/image-button/index.js
 Component({
   options:{
     multipleSlots: true
   },
   /**
    * 组件的属性列表
    */
   properties: {
     openType:{
       type:String
     }
   },

   /**
    * 组件的初始数据
    */
   data: {

   },

   /**
    * 组件的方法列表
    */
   methods: {
     onGetUserInfo(event){
       this.triggerEvent('getuserinfo',event.detail,{});
     }
   }
 })

3、index.wxss样式

 .container{
   padding: 0 !important;
   border: none !important;
 }

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

三、preview组件的开发

1、index.wxml页面代码

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

2、index.js代码

 // components/preview/index.js
 Component({
   /**
    * 组件的属性列表
    */
   properties: {
     classic: {
       type: Object,
       observer: function(newVal) {
         if (newVal) {
           var typeText = {
             100: "电影",
             200: "音乐",
             300: "句子"
           }[newVal.type]
         }
         this.setData({
           typeText: typeText
         })
       }
     }
   },

   /**
    * 组件的初始数据
    */
   data: {
     typeText:String
   },

   /**
    * 组件的方法列表
    */
   methods: {
     onTap:function(event){
       // 注意catchtap与bindtap的区别
       this.triggerEvent('tap',{
         cid:this.properties.classic.id,
         type:this.properties.classic.type
       },{})
     }
   }
 })

3、index.wxss样式代码

 .container{
   display: flex;
   flex-direction: column;
   align-items: center;
   width:330rpx;
   background-color: #ffffff;
 }

 .head{
   display: flex;
   width:100%;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   height:80rpx;
 }

 .tag{
   margin-left:20rpx;
   margin-top:-2rpx;
   height:40rpx;
   width:72rpx ;
   font-size:24rpx;
   background-color:#f7f7f7 !important;
 }

 .like{
   margin-top:4rpx;
   margin-right:4rpx;
 }

 .other-img{
   width:100%;
   height:240rpx;
 }

 .music-img{
   border-radius: 50%;
   width:240rpx;
   height:240rpx;
 }

 .text{
   padding:30rpx;
   font-size:28rpx;
   height:130rpx;
   color:#666666;
   overflow: hidden;
 }

这样的话，基本上整个page页面基本上就完后了，小程序的总体开发也基本上完成了，觉得这个项目一路学下来，收获最多不是学会了一点小程序开发的知识，而是对代码格式，代码风格的改善，我觉得这也是算对代码的一种敬畏之心吧！

内容出处：七月老师《纯正商业级小程序开发》视频课程

视频课程链接：https://coding.imooc.com/class/251.html