微信小程序之组件的集合(六)
这个将是最后一篇关于小程序的记录了,课程接近尾声,最后一个是关于用户的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页面基本上就完后了,小程序的总体开发也基本上完成了,觉得这个项目一路学下来,收获最多不是学会了一点小程序开发的知识,而是对代码格式,代码风格的改善,我觉得这也是算对代码的一种敬畏之心吧!
微信小程序之组件的集合(六)的更多相关文章
- 微信小程序之组件的集合(四)
这个主要是来开发book的这个大模块的,看看如何优雅的开发出booked模块! 一.book模块的创建 这个就很简单了,创建一个大的框架是很简单的 二.组件的编写 (1)wxml组件页面的编码 首先是 ...
- 微信小程序之组件的集合(三)
看看音乐播放组件是如何实现完成的音乐的播放的!!! 一.音乐music组件的开发 1.页面以及页面样式的开发 // music组件页面开发 <view hidden="{{hidden ...
- 微信小程序之组件的集合(二)
继续微信小程序开发的学习,继续跟着老师的讲课思路来学习,继续开发项目中所用到的组件 一.导航栏navi组件的开发 1.新建组件的文件结构 这个就是先新建目录navi.然后在navi文件夹中新建comp ...
- 微信小程序之组件的集合(五)
这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内 ...
- 微信小程序之组件的集合(一)
小程序中是很强调组件中开发的,我们看到的页面是由许多组件组成的,但是这些组件是如何组合在一起的呢?来学习一下! 一.组件中数据的获取 接着上一篇文章,继续来优化代码,如何把从服务器上获取的数据显示到 ...
- 微信小程序把玩(二十六)navigator组件
原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指定. 主要属性: wxml <naviga ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
随机推荐
- 2019亚太内容分发大会,阿里云获CDN领袖奖、技术突破奖
近日,亚太CDN产业联盟主办的2019亚太内容分发大会在上海召开.本次大会以"5G分发"为主题,集结了CDN领域近千名行业领袖.专家参与.在会上,阿里云斩获“CDN领袖奖”.“技术 ...
- Markdown转义字符表
- 微信sdk 隐藏右上角菜单项
wx.ready(function () { // 8.3 批量隐藏菜单项 wx.hideMenuItems({ menuList: [ 'menuItem:share:qq', //分享到QQ 'm ...
- 微信小程序——单选项
对于小程序单选,官方文档已经贴出了代码,我这里也不做过多解释,只是分享给大家一个小功能 一般在单选或者多选时,都会出现“其他”这个选项,如果通过input焦点事件.失焦事件来控制,代码会很繁琐 这里可 ...
- 【LGP4714】「数学」约数个数和
题目 众所周知,除数个数函数\(\sigma_0=I^2\),\(I\)就是狄利克雷卷积里的\(1\)函数 于是熟悉狄利克雷卷积的话很快就能看出我们要求的就是\(I\times I^{k}\),即\( ...
- HDU - 2222,HDU - 2896,HDU - 3065,ZOJ - 3430 AC自动机求文本串和模式串信息(模板题)
最近正在学AC自动机,按照惯例需要刷一套kuangbin的AC自动机专题巩固 在网上看过很多模板,感觉kuangbin大神的模板最为简洁,于是就选择了用kuangbin大神的模板. AC自动机其实就是 ...
- selenium基础(脚本模块化)
selenium基础(脚本模块化)
- C# 串口编程 对端口的访问被拒绝
感谢Sunny秋刀鱼.https://www.cnblogs.com/527289276qq/p/5595798.html 在页面或者窗口Unloaded事件中关闭串口即可.
- 编写Map处理逻辑
- Qt连接sql server数据库遇到的问题
在QT中使用addDataBase添加一个数据库连接,其中第一个参数应该填入使用数据库驱动的类型,如QMYSQL.QSQLLITE.QSQLPSSQL等. QSqlDatabase QSqlD ...