这个将是最后一篇关于小程序的记录了，课程接近尾声，最后一个是关于用户的page页面，看看这个页面中有哪些值得学习的地方！
一、page中my开发
这个主要是展示用户喜欢的杂志，以及用户的信息，需要创建两个相关的组件，一个是like-button组件，这个作用是来美化按钮，一个是preview组件，这个是用来展示标记为喜欢的杂志的，先把页面page中的my相关的代码研究一下
1、my.wxml文件
1 <view class="container"> 2 <image class="bg" src="/images/my/my@bg.png"></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 }
这样的话，基本上整个page页面基本上就完后了，小程序的总体开发也基本上完成了，觉得这个项目一路学下来，收获最多不是学会了一点小程序开发的知识，而是对代码格式，代码风格的改善，我觉得这也是算对代码的一种敬畏之心吧！
内容出处：七月老师《纯正商业级小程序开发》视频课程