程序地带

微信小程序|开发实战篇之四



开发实战篇之四
前言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/my@bg.png" 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.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
},{})
}
}
})
var typeText = {100: "电影",200: "音乐",300: "句子"}[newVal.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;
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34069882/article/details/112689436

随机推荐

卷积神经网络_卷积神经网络实战经验总结

卷积神经网络_卷积神经网络实战经验总结

//前言//“最近在参与一个时间序列分类的任务,目前仍在继续。在完成任务期间使用各类卷积网络以及很多模块,积累了一些自己的使用心得,在此记录。”卷积神经网络卷...

weixin_39956036 阅读(939)

2019年物联网行业市场研究报告

物联网(Internetofthings,Iot)是通信网和互联网的拓展应用和网络延伸,它利用感知技术与智能装置对物理世界进行感知识别,通过网络...

分析猿 阅读(594)

[Mac] selenium打开Chrome浏览器

在Mac电脑用python+selenium打开Chrome还遇到几个问题,这里总结下,以防忘记,也可帮到别人。前提:已安装好pytho...

灵枢_ 阅读(916)

Eigen学习笔记1---简单了解

Eigen学习笔记1---简单了解

【1】矩阵的定义(1)行数和列数都是未知的声明一个矩阵A时,A是未知行列数的:MatrixXdA;(2)现有的简化定...

你好,Albert 阅读(684)

的sql_神奇的 SQL 之性能优化 让 SQL 飞起来

点击上方“服务端思维”,选择“设为星标”回复”669“获取独家整理的精选资料集回复”加群“加入全国服务端高端社群「后端圈」写在前面在像Web服务这样需要快速响应的应用场景中,...

weixin_39661353 阅读(431)

S.D.W——静态链表

静态链表1,定义用数组描述的链表叫做静态链表,也叫游标实现法/*线性表的静态链表存储结构*/#defineMAXSIZE1000typedefstruct{ElemType...

不大好吧 阅读(399)

EmWin自定义消息发送

例如我要定义一个WM_IC的消息1.在emwin窗口文件的头文件.h文件中声明#defineWM_IC(WM_USER+0x00)//自定义消息2.然后在switch(pMsg->Msg...

若水千点 阅读(347)