开发实战篇之四

前言
1、用户页面my的开发
- 1.1 my.wxml骨架文件
- 1.2 my页面的布局和样式分析
- - 1.2.1 从原型页面来分析：
  - 1.2.2 继续分析每个大组件中的小组件布局：
- 1.3 my页面的逻辑代码分析
2、image-button组件的开发
3、preview组件的开发

前言

实战篇内容参考：

1、小程序开发实战：https://coding.imooc.com/class/chapter/251.html#Anchor

2、博主：ssc在路上

1、用户页面my的开发

用户my页面是tar栏第三个按钮切换的页面，主要是展示用户信息和用户喜欢的杂志，需要创建两个新组件，一个是image-button，这个可以用来自定义按钮样式和功能，一个是preview组件，这个是用来展示标记为喜欢的书籍的。

1.1 my.wxml骨架文件

<!--pages/my/my.wxml-->
<view class="container">
  <image src="/images/my/[email protected]" class="bg"></image>
  <!-- <open-data type="userAvatarUrl" class="avatar avatar-position"></open-data> -->
  <!-- 授权 -->
  <v-button wx:if="{{!authorized}}"
  open-type="getUserInfo" class="avatar-position"
  bind:getuserinfo="onGetUserInfo">
    <image slot="img" class="avatar"
    src="/images/my/my.png" />
  </v-button>
  <view wx:if="{{authorized}}" class="avatar-container avatar-position">
    <image class="avatar"
    src="{{userInfo.avatarUrl}}" />
    <text>{{userInfo.nickName}}</text>
  </view>

  <view class="about-container"> 
    <view class="about-us" bind:tap="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"></image>
    <!-- 喜欢的书籍卡片预览 -->
    <view class="preview-container">
      <block wx:for="{{classics}}">
        <v-preview bind:tapping="onPreviewTap" class="preview" classic="{{item}}" />
      </block>
    </view>
  </view>

</view>

<image bind:tap="onStudy" class="study" src="/images/my/study.png"></image>

1.2 my页面的布局和样式分析

为了熟练界面的开发，还是事无巨细地将整个my页面分析一下。

微信小程序|开发实战篇之四前言1、用户页面my的开发2、image-button组件的开发3、preview组件的开发

1.2.1 从原型页面来分析：

首先整个页面处于大的 container 布局之下， container 应该是 flex column 布局，非主轴上居中。
container 中是一张image，需设置height、width。
container 中包含一个 image-button 组件，一个 view 组件（授权之后显示的view，包含一个image和text），由 properties 中的 authorized 的true or false来wx:if渲染与否。 image-button 组件的 position 设置为绝对布局，设置top属性即可。当授权之后显示view，view的布局为 flex column ，非主轴都居中对齐。
container 中接下来是一个 about 布局，该 about 布局包含view(一个内部是image和text，另一个两个text)， about 是 flex row 布局，非主轴居中，主轴两端对齐。PS：这里是我没分析出来的about布局细节。首先about这里也是一个绝对布局，设置一个合适的width:550rpx，设置一下padding上下0，左右100rpx。top也要设置一下。
container 中是一个 like 布局，该 like 布局包含一个image和view。 like 布局是 flex column ，非主轴居中，背景颜色设置为 #f5f5f5 。
container 外部有一个image， position 设置为绝对布局。设置width和height，还有 top 和 right 让其位于右上方。

1.2.2 继续分析每个大组件中的小组件布局：

about 布局中的两块view组件，各自都是 flex column 布局，非主轴居中对齐，主轴两端对齐，设为不靠的太近即可。
like 布局中包括一个image，需要设置headline样式：width和height， margin-top 距离上边距离。然后是显示喜欢书籍的缩略图的 preview-container 布局，是一个 flex row 布局，主轴两端对齐，设置 margin-top 距离上部的距离。PS：这里是我没分析出来的like布局细节。首先要设置一个合适的width:690rpx，设置一下左右的内边距，padding上下0，左右30rpx。重要！！！设置flex-wrap：wrap；让preview组件之间有空隙！
image-button 显示的 image 需要对头像的位置及大小进行设置，首先对width、height设置合适rpx，再设置 overflow：hidden 多出来的图片隐藏掉， border-radius：50% 设置头像为圆形才会生效。
对 preview 组件进行设置 margin-bottom：30rpx ，让 wx:for 每个 preview 组件上下之间空出一段距离。

my页面中用户信息的处理：

获取用户信息现在需要用户自己进行授权，触发用户授权的可以使用button，因此封装了一个自定义按钮image-button。为提高image-button的通用性使用了slot插槽。

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

点击会触发onGetUserInfo函数，my.js中：

// 点击授权函数，保存用户信息userInfo
  onGetUserInfo(event){
    const userInfo = event.detail.userInfo;
    if(userInfo){
      this.setData({
        userInfo,
        authorized:true
      });
      console.log(userInfo);
    }  
  },

1.3 my页面的逻辑代码分析

// pages/my/my.js
import {
  ClassicModel
} from '../../models/classic.js'
import {
  BookModel
} from '../../models/book.js'

const classicModel = new ClassicModel();
const bookModel = new BookModel();

Page({

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

    classics:[{
        "content": "人生不能像做菜，把所有的料准备好才下锅",
        "fav_nums": 1,
        "id": 1,
        "image": "/components/classic/movie/images/movie.jpg",
        "pubdate": "2018-06-22",
        "title": "李安<<饮食男女>>",
        "type": 100
      },
      {
        "content": "你陪我步入蝉夏 越过城市喧嚣",
        "fav_nums": 0,
        "id": 3,
        "image": "/components/classic/movie/images/movie.jpg",
        "index": 1,
        "like_status": 0,
        "pubdate": "2018-06-22",
        "title": "纸短情长",
        "type": 200,
        "url": "http://music.163.com/song/media/outer/url?id=557581284.mp3"
      },
      {}]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  
  onLoad: function (options) {
    this.userAuthorized();
    this.getMyBookCount();
    this.getMyFavor();
  },

  // 点击跳转页面
  onPreviewTap(event){
    console.log(event);
    const cid = event.detail.cid;
    const type = event.detail.type
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },

  // 取得我的喜欢
  getMyFavor(){
    classicModel.getMyFavor(res=>{
      this.setData({
        classics:res
      })
    })
  },

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

  // 点击授权函数
  onGetUserInfo(event){
    const userInfo = event.detail.userInfo;
    if(userInfo){
      this.setData({
        userInfo,
        authorized:true
      });
      console.log(userInfo);
    }  
  },

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

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

  // 获取喜欢书的数量
  getMyBookCount(event){
    bookModel.getMyBookCount()
    .then(res =>{
      this.setData({
        bookCount:res.count
      })
    })
  }

  
})

其中的bookCount表示我喜欢的书籍数量，需要通过BookModel中的getMyBookCount()函数，显示对应的期刊信息需要通过ClassicModel中的getMyfavor()函数。所以可以将这两个函数的调用放到页面的Load()生命周期函数中。
点击授权函数onGetUserInfo()，主要是验证用户是否验证，并且保存userInfo，对authorized信号量设为true。
onStudy()函数跳转到course页面。
onJumpToAbout()函数跳转到about页面。
每个preview点击的响应事件onPreviewTap()携带cid和type跳转到对应期刊界面。

2、image-button组件的开发

image-button组件主要是由一个button组件和一个slot插槽组成。

open-type代表外部传入的系统操作类型，例如“ getUserInfo ”获取用户授权信息
plain="{{true}}" 表示按钮镂空。
slot添加插槽。

<button bind:getuserinfo="onGetUserInfo"
  open-type="{{openType}}" plain='{{true}}' size="mini"
  class="container">
  <slot name="img"></slot>
</button>

js设置onGetUserInfo()自定义函数，并且开启多插槽：

/**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true
  },
  properties: {
    openType: {
      type: String
    }
  },
 /**
   * 组件的方法列表
   */
  methods: {
    onGetUserInfo(event){
      this.triggerEvent('getuserinfo', event.detail, {})
    }
  }

wxss样式：

/* components/image-button/index.wxss */
.container {
  /* display: inline-flex; */
  padding: 0 !important;
  border: none !important;
}

3、preview组件的开发

preview的骨架代码：

<!--components/preview/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>

preview的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: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {

    onTap:function(event){
      this.triggerEvent('tapping',{
        cid:this.properties.classic.id,
        type:this.properties.classic.type
      },{})
    }

  }
})

这是js语法取数组中对应key的value。

preview的样式代码：

/* components/preview/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;
}

微信小程序|开发实战篇之四前言1、用户页面my的开发2、image-button组件的开发3、preview组件的开发

开发实战篇之四

前言

1、用户页面my的开发

1.1 my.wxml骨架文件

1.2 my页面的布局和样式分析

1.2.1 从原型页面来分析：

1.2.2 继续分析每个大组件中的小组件布局：

1.3 my页面的逻辑代码分析

2、image-button组件的开发

3、preview组件的开发

继续阅读

Java小案例——随机数猜测随机数猜测

nginx location中斜线的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的简单使用

android 主线程的相关问题

neo4j之cypher使用文档

GitHub连夜封杀！这份阿里 10W 字内部 Java 字面试手册到底有多强？

spark/scala关于【资源文件】加载方法概述外部文件加载方案测试资源文件打包入jar包中小结

mybatis_入门程序Mybatis入门

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Effective Java 8:通用程序设计

OOM三种类型

工厂模式-三种类型

【递归】高效率求2的n次幂

win10本地scala和spark安装安装scala安装spark

scala (3) Function 和 Method