看看音乐播放组件是如何实现完成的音乐的播放的!!! 一.音乐music组件的开发 1.页面以及页面样式的开发 // music组件页面开发 <view hidden="{{hidden}}" class="container"> <image class="classic-img {{playing?'rotation':''}}" src='{{img}}'/> <image class="player-…

这个主要是来开发book的这个大模块的,看看如何优雅的开发出booked模块! 一.book模块的创建 这个就很简单了,创建一个大的框架是很简单的 二.组件的编写 (1)wxml组件页面的编码 首先是将一本书的展示看做是一个组件,然后就是循环展示所有请求的书籍的信息,所以需要把一本书当做一个组件来制作,这样就能比较合理的解决这个问题! // book组件的页面的代码 <view class="container"> <image src="{{book.im…

这个将是最后一篇关于小程序的记录了,课程接近尾声,最后一个是关于用户的page页面,看看这个页面中有哪些值得学习的地方! 一.page中my开发 这个主要是展示用户喜欢的杂志,以及用户的信息,需要创建两个相关的组件,一个是like-button组件,这个作用是来美化按钮,一个是preview组件,这个是用来展示标记为喜欢的杂志的,先把页面page中的my相关的代码研究一下 1.my.wxml文件 <view class="container"> <image clas…

继续微信小程序开发的学习,继续跟着老师的讲课思路来学习,继续开发项目中所用到的组件 一.导航栏navi组件的开发 1.新建组件的文件结构 这个就是先新建目录navi.然后在navi文件夹中新建component组件index,最后新建images文件夹,存放组件中所需的图片,建好之后如下图: 2.设置组件中相关属性和变量 设置组件中的属性,这里有title.first.latest属性 设置组件中变量,这里有图片的路径,disLeftSrc.leftSrc.disRightSrc.rightSr…

这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内容,其实在后端的开发中是很成熟的,所以学起来并不是很难以理解,这也是我们的一个优势吧,毕竟选择后端的同学应该是不错的啊,哈哈哈!这种组件其实是有一个特别的名字的,那就是高阶组件,来,把这个东西尽快学习掌握! 一.新建search组件 首先还是新建search组件的各个文件,这里微信开发者工具的功能很…

小程序中是很强调组件中开发的,我们看到的页面是由许多组件组成的,但是这些组件是如何组合在一起的呢?来学习一下!  一.组件中数据的获取 接着上一篇文章,继续来优化代码,如何把从服务器上获取的数据显示到组件的页面中? (1)继续优化代码 创建models文件夹,来将classic.js中的代码继续分离出来,来创建一个classicModel类 进一步进行代码的抽离,代码如下: // models文件夹下classic.js代码如下 import { HTTP } from '../util/htt…

概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demodashi.com/demo/13177.html 一.前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢.可能你会去看官方文档,但是微信的官方文档也是…

上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导航图标示例,微信小程序最多能加5个) 1. 图标准备 阿里图标库 http://www.iconfont.cn/collections/show/29 在这个网站上下载一些自己要用到的图标,比如人员头像,home主页等一些常用的图标,直接点击下载保存到本地,修改一下命名.也可以使用UI准备好的图标.…

微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size:icon的大小,单位px(2.4.0起支持rpx)[默认值23px] color:icon的颜色,同css的col…

微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagation属性 一.hover-class属性 hover-class:指定按下去的样式类.当 hover-class="none" 时,没有点击态效果[默认值none] 定义.a的class颜色为红色,定义.d的class为绿色,当鼠标点击时红色区域变成绿色区域,当鼠标离开时,绿色区域又变回…