• 微信小程序之组件的集合(二)


      继续微信小程序开发的学习,继续跟着老师的讲课思路来学习,继续开发项目中所用到的组件

    一、导航栏navi组件的开发

    1、新建组件的文件结构

    这个就是先新建目录navi。然后在navi文件夹中新建component组件index,最后新建images文件夹,存放组件中所需的图片,建好之后如下图:

    2、设置组件中相关属性和变量

    设置组件中的属性,这里有title、first、latest属性

    设置组件中变量,这里有图片的路径,disLeftSrc、leftSrc、disRightSrc、rightSrc

    最后将属性以及变量绑定到相关标签上,这里需要注意的是图片路径的切换

     1 // index.wxml中静态页面的布局
     2 <view class='container'>
     3   <image class='icon' src='{{latest?disLeftSrc:leftSrc}}' />
     4   <text class='title'>{{title}}</text>
     5   <image class='icon' src='{{first?disRightSrc:rightSrc}}' />
     6 </view>
     7 
     8 // index.js中属性和变量的确定
     9 Component({
    10   /**
    11    * 组件的属性列表
    12    */
    13   properties: {
    14     title: String, 
    15     first:Boolean,
    16     latest:Boolean
    17   },
    18 
    19   /**
    20    * 组件的初始数据
    21    */
    22   data: {
    23     disLeftSrc:'images/triangle.dis@left.png',
    24     leftSrc:'images/triangle@left.png',
    25     disRightSrc:'images/triangle.dis@right.png',
    26     rightSrc:'images/triangle@right.png'
    27   },
    28 
    29   /**
    30    * 组件的方法列表
    31    */
    32   methods: {
    33 
    34   }
    35 })

    3、将组件注册到classic.json 中,供classic使用

    // classic.json中注册组件
    {
      "usingComponents": {
        "v-navi": "/components/navi/index"
      }
    }
    // classic.wxml中使用
    <v-navi></v-navi>

    4、调整组件中样式 css样式,我可不会写这个

    这个是老师调整好的,我肯定是写不出来的,继续学习吧

     1 .container{
     2    600rpx;
     3   height: 80rpx;
     4   background-color: #f7f7f7;
     5   border-radius: 2px;
     6   display: inline-flex;
     7   flex-direction: row;
     8   justify-content: space-between;
     9   align-items: center
    10 }
    11 
    12 .icon{
    13   height: 80rpx;
    14    80rpx;
    15 }
    16 
    17 .title{
    18   font-size: 28rpx;
    19 }

     5、在page页面中的使用

     1 // classic.wxml 文件中新增代码
     2 <v-navi class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>
     3 
     4 // classic.js 中新增变量
     5  /**
     6    * 页面的初始数据
     7    */
     8   data: {
     9     classic: null,
    10     latest:true, // 最新期刊?默认值true
    11     first:false // 第一期期刊?默认值false
    12   },

    6、完善navi组件的左右切换的功能

    // navi组件中的index.wxml 绑定自定义左右切换事件
    <view class='container'>
      <image bind:tap='onLeft' class='icon' src='{{latest?disLeftSrc:leftSrc}}' />
      <text class='title'>{{title}}</text>
      <image bind:tap='onRight' class='icon' src='{{first?disRightSrc:rightSrc}}' />
    </view>
    
    // navi组件中的index.js 中实现这两个方法
      /**
       * 组件的方法列表
       */
      methods: {
        onLeft:function(event){
          if(!this.properties.latest){
            // 触发自定义事件
            this.triggerEvent('left', {}, {});
          }
        },
        onRight:function(event){
          if(!this.properties.first){
            // 触发自定义事件
            this.triggerEvent('right', {}, {});
          }
        }
      }
    })

    page文件夹中的classic中的文件的代码完善

     1 // 监听navi组件中的切换事件
     2 <v-navi bind:left='onNext' bind:right='onPrevious' class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>
     3 
     4 // classic.js 中监听事件的实现,暂时没有具体的代码实现,只是空的方法体
     5   // 监听navi组件的切换上一期
     6   onNext:function(event){
     7 
     8   },
     9   // 监听navi组件的切换下一期
    10   onPrevious:function(event){
    11 
    12   },

    因为classic中不只有movie组件,还有music组件以及句子组件,所以先把这些组件来实现出来

    二、music组件的开发

    1、首先来新建music组件中所需要的一些文件以及将图片复制过来

    2、music组件中简单代码的编写

     1 // index.wxml页面中的代码
     2 <view>
     3   <image src='{{img}}'/>
     4   <image src='{{playSrc}}' />
     5   <image src='images/music@tag.png' />
     6   <text>{{content}}</text>
     7 </view>
     8 
     9 // index.js中属性以及变量的定义
    10 Component({
    11   /**
    12    * 组件的属性列表
    13    */
    14   properties: {
    15     img: {
    16       type: String
    17     },
    18     content: String
    19   },
    20 
    21   /**
    22    * 组件的初始数据
    23    */
    24   data: {
    25     pauseSrc:'images/player@waitting.png',
    26     playSrc:'images/player@playing.png'
    27   },
    28 
    29   /**
    30    * 组件的方法列表
    31    */
    32   methods: {
    33 
    34   }
    35 })

    三、essay组件的开发(文章组件)

    1、首先新建essay组件中的各种文件

    2、先插个队,来看一下代码的优化

    这个是优化组件中的js文件中的一些属性和变量以及一些方法的代码的,可以将组件中通用的代码来抽离出来,通过behavior来连接

    (1)新建一个classic-beh.js文件

     1 /**
     2  * behavior 定义组件中共有的属性 主要作用是抽离出相同的代码
     3  * Behavior 与index.js中的Component是类似的
     4  * 2019年7月29日22:13:10
     5  */
     6 var classicBeh = Behavior({
     7   properties: {
     8     img: {
     9       type: String
    10     },
    11     content: String
    12   }, 
    13   data:{
    14 
    15   },
    16   methods:{
    17 
    18   }
    19 })
    20 
    21 export {classicBeh}

    (2)组件中的使用behavior 同时将music组件以及movie组件中替换掉

     1 // essay组件中使用behavior
     2 
     3 import {classicBeh} from '../classic-beh.js'; // 需要引入
     4 
     5 Component({
     6   /**
     7    * 组件的属性列表
     8    */
     9   behaviors: [classicBeh], // 这是重点
    10   properties: {
    11   },
    12 
    13   /**
    14    * 组件的初始数据
    15    */
    16   data: {
    17 
    18   },
    19 
    20   /**
    21    * 组件的方法列表
    22    */
    23   methods: {
    24 
    25   }
    26 })

     四、导航栏实现组件的切换

    看下页面的中的代码以及js中代码:

     1 // classic.wxml中代码 主要是针对navi组件的
     2 <v-navi bind:left='onNext' bind:right='onPrevious' class='navi' title='{{classic.title}}' first='{{first}}' latest='{{latest}}'></v-navi>
     3 
     4 // classic文件夹中的中的classic.js
     5   // 监听navi组件的切换下一期
     6   onPrevious:function(event){
     7     var index = this.data.classic.index;
     8     classicModel.getPrevious(index, (res) =>{
     9       this.setData({
    10         classic:res,
    11         latest: classicModel.isLatest(res.index),
    12         first: classicModel.isFirst(res.index)
    13       })
    14     });
    15   },
    16 
    17 // models文件夹下的classic.js 文件中新增代码
    18   // 是否是第一期
    19   isFirst(index) {
    20     return index == 1 ? true : false;
    21   }
    22 
    23   // 是否是最新一期
    24   isLatest(index) {
    25     var latestIndex = this._getLatestIndex();
    26     return index == latestIndex ? true : false;
    27   }
    28 
    29   // 保存最新一期的index这里将信息保存到小程序提供的缓存中
    30   _setLatestIndex(index) {
    31     wx.setStorageSync('latest', index);
    32   }
    33 
    34   _getLatestIndex() {
    35     var index = wx.getStorageSync('latest');
    36     return index;
    37   }
    38 
    39   getLatest(sCallBack) {
    40     this.request({
    41       url: 'classic/latest',
    42       success: (res) => {
    43         sCallBack(res);
    44         // 将最新一期的index放入缓存中
    45         this._setLatestIndex(res.index);
    46       }
    47     })
    48   }

    这只是完成了先后点击触发的事件。来切换不同的数据,向前点击事件还没有完成。接下来,看看getNext()获取后一期的期刊数据

     1 // classic文件夹下的classic.js 中新增代码
     2   // 监听navi组件的切换下一期
     3   onNext:function(event){
     4     var index = this.data.classic.index;
     5     classicModel.getNext(index, (res) => {
     6       this.setData({
     7         classic: res,
     8         latest: classicModel.isLatest(res.index),
     9         first: classicModel.isFirst(res.index)
    10       })
    11     });
    12   },
    13 
    14 // models文件夹下新增代码
    15   // 获取下一期数据
    16   getNext(index, sCallBack){
    17     this.request({
    18       url: 'classic/' + index + '/next',
    19       success:(res) =>{
    20         sCallBack(res);
    21       }
    22     })
    23   }

     代码的优化,感觉这个是很有必要的一个东西,当然在做一款产品的时候,这个东西是肯定要去做的,奈何,自己现在做的东西就是一坨,很想尝试着做感觉有意义的东西

     1 // 主要是将重复的代码抽离出来,通过传递参数的方案
     2 // model文件夹下的classic.js 文件中将getNext和getPrevious合并成一个方法
     3   // 获取期刊数据
     4   getClassic(index, nextOrPrevious, sCallBack) {
     5     this.request({
     6       url: 'classic/' + index + '/' + nextOrPrevious,
     7       success: (res) => {
     8         sCallBack(res);
     9       }
    10     })
    11   }
    12 
    13  // classic文件夹下的classic.js 文件中的代码优化
    14   // 监听navi组件的切换下一期
    15   onNext:function(event){
    16     this._updateClassic('next');
    17   },
    18 
    19   // 监听navi组件的切换上一期
    20   onPrevious:function(event){
    21     this._updateClassic('previous');
    22   },
    23 
    24   _updateClassic: function (nextOrPrevious) {
    25     var index = this.data.classic.index;
    26     classicModel.getClassic(index, nextOrPrevious, (res) => {
    27       this.setData({
    28         classic: res,
    29         latest: classicModel.isLatest(res.index),
    30         first: classicModel.isFirst(res.index)
    31       })
    32     });
    33   },
    内容出处:七月老师《纯正商业级小程序开发》视频课程
  • 相关阅读:
    ajax设置自定义请求头
    tomcat修改端口号
    下载文件(前端+后台)
    ajax请求超时判断(转载)
    js判断变量类型
    js中判断是否包含某个字符串
    Java将json字符串转成map
    Linux上安装设置mysql 5.7.24
    js格式化json字符串和json对象
    bootstrap中的data-toggle模态框相关
  • 原文地址:https://www.cnblogs.com/ssh-html/p/11241478.html
Copyright © 2020-2023  润新知