一.前言我们的目标是做出以下效果。在实现上图效果之前,首先要掌握一些基本知识。view组件支持使用style、class属性来设置组件的样式。class引用的样式类可以在index.wxss以及app.wxss中定义。在前者中定义的样式,一般只能在该页面内使用;而在后者当中定义的样式是全局样式,可在项目... ...
1- 前言在本文中你将收获小程序如何使用自定义组件自定义组件之间的传值自定义组件中插槽的使用2- 组件文件新建2.1 定义组件在根目录新建components文件夹,建立cell 文件夹,右击创建cell的Component组件cell.jscell.wxmlcell.jsoncell.wxss2.2 ... ...
我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示:在宝贝详情页里:在购物车里:现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图:wxml:<!-- 主容器 --> <view class="stepper"> ... ...
具体内容如下设置标题栏标题栏window在app.json文件里面,通过window对象里面的属性进行设置示例:app.json:运行:设置导航栏导航栏TabBar如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 ta... ...
例如在web的开发中,新建一个页面只需要新建一个html文件即可。但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习新建一个页面的步骤:1> 必须要创建一个wxml文件和一个js文件,并且文件名要同名(例:test.wxml 和 test.... ...
在商场项目中,一般都会有分类页面。分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图布局分析:<主盒子><左盒子></左盒子><右盒子></右盒子></主盒子>左盒子使用标准流右盒子使用绝对定位(top、right)w... ...
上拉加载(分页加载)当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来。业务需求:列表滚动到底... ...
业务需求:5个图片轮番播放,可以左右滑动,点击指示点可以切换图片重点说明:由于微信小程序,整个项目编译后的大小不能超过1M查看做轮播图功能的一张图片大小都已经有100+k了那么我们可以把图片放在服务器上,发送请求来获取。index.wxml:这里使用小程序提供的<swiper>组件autop... ...
页面分析:使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项。这样满5个item后,自动排在下一行wxml:<viewclass="menu-wrp"><!--设定一个item项后,遍历输出--><vi... ...
关于页面的跳转,微信小程序提供了3种方法:方法一:使用API wx.navigateTo()函数示例:首先先新建一个test页面如何新建页面?请到先阅读下面教程微信小程序的新建页面 —— 微信小程序教程系列(4)index.wxml:在index.wxml新建一个button组... ...
接入插件接入Fundebug的错误监控插件非常简单,只需要下载fundebug.0.5.0.min.js,在app.js中引入并配置apikey:varfundebug=require('./libs/fundebug.0.5.0.min.js')fundebug.apikey=&qu... ...
平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低。小程序开发完成之后,我们需要在真机上进行测试,真机调试方面小程序开发者工具有预览、远程调试和设置体验版本三大部分功能。除了这三种方式之外,我们还可以使用真机远程... ...
什么是事件?指点击,触摸,按下,滑动,松开,等一系列对手机屏幕操作。下面代码所要呈现的效果就是给两个按钮一人一个ID然后点击谁,在上面显示信息那就显示 点击了谁,点击了多少次,这多少次没有分开啊,次数是点击他两的总和。下面另一代码是分开的,各计各的。1. 在index.wxml 中设置点击事件(测试时需... ...
wxml代码:<scroll-viewscroll-yscroll-top="50"enable-back-to-top="true"scroll-top="{{scrollTop.scroll_top}}"bindscroll=&quo... ...
一、微信数据缓存是什么?在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦。数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程中,可以直接通过缓... ...
前言在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时currentTarget和target都是组件的一些属性值集合,由“data-属性名”定义的一些属性值currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组... ...
微信小程序使用前置摄像头拍照的具体代码,供大家参考,具体内容如下1、拍照页面:<template> <view title="拍照"> <camera v-if="openCamera" device-position="... ...
介绍:普通选择器:mode = selector属性名类型默认值说明rangeArray / Object Array[]mode为 selector 或 multiSelector 时,range 有效range-keyString当 range 是一个 Object Array 时,通过 range... ...
微信小程序 TLS 版本必须大于等于1.2问题解决此问题最近在微信小程序开发中,比较常见。在解决这个问题之前,我们需要了解一下,当前的系统环境是否支持TLS1.2以上,可以参考一下表格:来源:微软官方确认系统支持以后,进行一下操作:Windows Registry Editor Vers... ...
微信小程序 解析网页内容详解最近在写一个爬虫,需要将网页进行解析供微信小程序使用。文字和图片解析都好说,小程序也有对应的text和image标签可以呈现。而更复杂的,比如表格,则比较棘手,不管是服务端解析还是小程序呈现都很费劲,也很难覆盖所有情况。于是我想,将表格对应的HTML代码转成图片,不失为一种变... ...