微信小程序之组件的集合(五)】的更多相关文章

这个主要是来开发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…
看看音乐播放组件是如何实现完成的音乐的播放的!!! 一.音乐music组件的开发 1.页面以及页面样式的开发 // music组件页面开发 <view hidden="{{hidden}}" class="container"> <image class="classic-img {{playing?'rotation':''}}" src='{{img}}'/> <image class="player-…
继续微信小程序开发的学习,继续跟着老师的讲课思路来学习,继续开发项目中所用到的组件 一.导航栏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…
原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <button type="primary" bindtap="listenerButton">显示loading</button> <!--默认隐藏--> <loading hidden="{{hiddenLoading}}&quo…
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath文档写的有点问题. 主要属性: wx.chooseVideo(object) 成功之后返回参数 wxml <button type="primary" bindtap="listenerBtnOpenVideo">打开视频</butt…
微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary <view > <!-- 手指按下后1s样式由a改变为d,手指松开后2s样式由d改变回a --> <view class='a size'>a</view> <view class='b size'>b</view> <view clas…
官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址.html和js中使用onerror事件就可以了 <img src="image.gif" onerror="this.src='https:w.chesu…