原创 微信小程序学习系列(8) 微信小程序组件(下)

发布时间:2021-06-24 18:45:46 浏览 86 来源:猿笔记 作者:我是小柒

    #贡献主题。上一小节的学习总结了视图组件、基础内容组件以及表单组件相关内容:这一小节的主要是围绕的导航组件、媒体组件、地图组件组件进行学习:#导航组件;小程序可以使用导航组件进行页面的跳转的设置;可以使用`navigator`页面链接组件进行页面的跳转。保留当前页面跳转:效果如下图所示2#媒体组件`src`指定音频的播放路径`poster`指定音频的播放图片`name`指定音频名称'后来遇到他'//音频的名字/*设置当前播放时间为14秒*//*回到开头*/`camera`拍照组件相当于系统照片扫描二维码功能效果如下`image`组件有两类展示模式


    #主题列表:juejin,github,smartblue,cyanosis,channing-cyan,fancy,hydrogen,condensed-night-purple,greenwillow,v-green,vue-pro,healer-readable,mk-cute,jzman,geek-black,awesome-green,qklhk-chocolate

    #投稿主题:

    theme:qklhk-chocolate

    highlight:

    #前言

    上一节的研究总结了视图组件、基本内容组件和表单组件的相关内容。本节主要介绍导航组件、媒体组件和地图组件。

    #导航组件

    小程序可以使用导航组件来设置页面跳转。您可以使用导航器的页面链接组件来跳转页面。示例代码如下:

    在`.wxml`页面中navigator导航属性

    1.wx.navigatorTo保留当前页面跳转

    保持当前页面跳转

    2.wx.redirectTo关闭当前页面跳转

    保持当前页面跳转

    3.wx.switch跳转到TabBar

    保持当前页面跳转

    在`.wxss`页面中.section{

    width:90%;

    height:150rpx;

    margin:40rpxauto;

    border:1pxsolidgreen;

    border-radius:10rpx;

    }

    .section_title{

    text-align:center;

    }

    .section_body{

    text-align:center;

    }

    .section_body:hover{

    color:red;

    }

    效果如下图所示:

    #媒体组件

    ##audio(音频)组件

    audio音频组件需要绑定唯一标识Id,使用`wx.createAudioContext('Id')`;创建一个音频的播放环境。

    ` src `指定音频的播放路径;“海报”指定音频的播放画面;` name `指定音频名称。示例代码如下:

    在`.wxml`页面中

    audio音频组件

    播放

    暂停

    设置当前播放时间为14秒

    回到开头

    在`.wxss`页面中.section{

    width:90%;

    margin:10rpxauto;

    border:1pxsolidgreen;

    border-radius:5rpx;

    }

    .section_title{

    text-align:center;

    }

    .section_body{

    text-align:center;

    margin:20rpx;

    }

    .section_bodybutton{

    margin:10rpx;

    font-size:24rpx;

    }

    在`.js`页面中Page({

    onReady:function(e){

    //使用wx.createAudioContext获取audio上下文context

    this.audioCtx=wx.createAudioContext('myAudio');

    },

    data:{

    poster:'

    姓名:‘我后来遇到他了’,//音频的名字

    author:'胡66',//音频的作者

    src:'

    },

    /*播放*/

    audioPlay:function(){

    this.audioCtx.play();

    console.log("播放");

    },

    /*暂停*/

    audioPause:function(){

    this.audioCtx.pause();

    console.log("暂停");

    },

    /*将当前播放时间设置为14秒*/

    audio14:function(){

    this.audioCtx.seek(14);

    console.log("暂设置当前播放时间为14秒停");

    },

    /*回到开头*/

    audioStart:function(){

    this.audioCtx.seek(0);

    console.log("回到开头");

    }

    });

    效果如下:

    ##camera(拍照)组件

    相机的拍照组件相当于系统拍照和扫描二维码的功能。示例代码如下:

    在`.wxml`页面中

    camera组件

    拍照

    预览效果

    在`.wxss`页面中.section{

    width:90%;

    margin:10rpxauto;

    border:1pxsolidgreen;

    border-radius:5rpx;

    }

    .section_title{

    text-align:center;

    }

    .section_body{

    text-align:center;

    margin:20rpx;

    }

    .cam{

    width:100%;

    height:300px;

    }

    .section_bodybutton{

    margin:10rpx;

    }

    在`.js`页面中Page({

    takePhoto(){

    constctx=wx.createCameraContext();

    ctx.takePhoto({

    quality:'high',

    success:(res)=>{

    this.setData({

    src:res.tempImagePath

    });

    }

    });

    },

    error(e){

    console.log(e.detail)

    }

    });

    效果如下:

    ##image(图片)组件

    图像组件的显示模式有两种:一种是缩放模式,有四种模式;第二,有9种切割模式。示例代码如下:

    在`.wxml`页面种

    image图片组件

    {{item.name}}

    在`.wxss`页面中.section{

    width:90%;

    margin:10rpxauto;

    border:1pxsolidgreen;

    border-radius:5rpx;

    }

    .section_title{

    text-align:center;

    }

    .section_body{

    text-align:center;

    margin:20rpx;

    }

    .section_bodybutton{

    margin:10rpx;

    font-size:24rpx;

    }

    .img{

    width:200px;height:200px;background-color:#eeeeee;

    }

    在`.js`页面中Page({

    data:{

    array:[{

    mode:'scaleToFill',

    text:'scaleToFill:不保持纵横比缩放图片,使图片完全适应'

    },

    {

    mode:'aspectFit',

    文本:“aspectFit:保持宽高比以缩放图片,以便可以完全显示图片的长边”

    },

    {

    mode:'aspectFill',

    文字:' aspectFill:保持长宽比来缩放图片,只保证图片短边能充分显示

作者信息

我是小柒 [等级:3] 搬运工
发布了 16 篇专栏 · 获得点赞 31 · 获得阅读 1902

相关推荐 更多