尺寸单位: rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素.所以用rpx可解决适配问题 样式导入: /** app.wxss **/ @import "common.wxss"; 内联样式: 框架组件上支持使用 style.class 属性来控制组件的样式. style:静

起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class='second-code'> <view class="img-box"> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}&quo

开发必备:熟悉微信小程序组件开发 开发思路:如果只有一条数据,直接用css3关键帧动画:如果有多条数据,则在当前动画运动到一定时间的时候,将其数据替换掉,使之在视觉效果上有一个从下到上播放的状态.数组循环播放的状态是通过将当前播放元素置换到末尾实现,即通过数组元素删除插入方法将整个数组元素串成一个闭环. 本例是将跑马灯作为一个公共组件开发的,故代码展示为组件形式 目标UI: wxml文件代码: <view wx:if="{{lampData && lampData.leng

1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:func

微信小程序是可以动态修改页面标题的. 首先我们来看看静态是怎么实现的 在对应页面的json文件里面加入下面代码就可以实现了 { "navigationBarTitleText": "素材图库" } 效果图如下: 其他动态的也是十分简单,毕竟是提供好了的接口,我们调用一下就行了.接口嘛,那就要操作对应的js文件咯.参考地址 quwei: function () { wx.setNavigationBarTitle({ title: '趣味表情' }) } 点击的时候触

微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面相同title不同的场景就不够用了这个时候就需要动态配置title 微信小程序的setNavigationBarTitle方法可以实现title的动态配置 wx.setNavigationBarTitle({ title: "title名称" }) 这个方法可以写在oLoad里面或者onS

一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义.当然了,来的最快的其实是用图片代替.二.微信小程序中评分功能实现 1.css文件中引入字体文件.也可以点此下载字体文件   @font-face { font-family: 'FontAwesome'; src: url('https://netdna.boot

在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法 1.先在元素的class中 class=’{{show?’true’:’hidden’}}’ 2.再在相对应的js中配置show的值,例 data: {show:1,} 3.最后在相对应的css中定义 .hidden{display:none;} 简单办法 直接在元素中加入wx:if=”{{is_open !=”}}”代码,后台传到前端的is_open为1时,元素就

介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放template相关的文件.注意这里只是单独的创建各个文件,并不是创建Page或者Component. 创建好之后的文件目录如图: 这里演示一个用template当列表的item,然后可以点击并获取到值. 然后开始写templates.wxml文件,这里面可以有多个template代码块,如代码所示:

根据小程序的设定,swiper组件默认高度为150px,无法根据内容来撑高.如果里面的内容固定还好说,直接设置一个高度就可以了.要是里面内容是动态变化的,这个特性使得我们使用这个组件的时候感到诸多不便. 举个例子: 如下这种情况,如果我们不给它设置一个高度,那么它只会在那个150px局部进行滚动了. 那么我们如何动态改变它的高度呢? 情况1:数据每条高度都是一样 原理:获取1条数据的高度*数据的条数. js代码如下: const query = wx.createSelectorQuery()

1.动态添加class <view class="step2 {{indication == 2 ?'on':''}}"> <view class='tc left'> <view>喷洒泡沫</view> <view>(min)</view> </view> <view class='right'>{{foam}}</view> </view> 2.传递多个参数 第一

获取列表长度(动态渲染),当长度>x时添加内联样式并绑定数据{{}},通过js动态更改{{}}

在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有几百个接口,如果发请求之前都要手动写一次,请求成功了又要手动关闭一次,太繁琐了,如果后期不想要这个效果,则要全部删除. 既然每次发送请求时都要调用,每次请求成功之后都要关闭,而每次发送请求都要借助request方法的帮助,我们可以把正在加载中图标效果的代码封装到request方法中, 不管是成功还是

  1.动态渲染页面.改变css.样式必须setData渲染过去   this.setData({ userInfo: app.globalData.userInfo, token: app.globalData.token, url: app.globalData.url, css:'hidden' });   2.路径传参, 在页面的 onLoad获取 onLoad: function (options) { console.log("参数",options.imei); }  

查看API: wx.setNavigationBarColor(OBJECT) 代码: wx.setNavigationBarColor({ frontColor: '#ffffff', // 必写项 backgroundColor: '#1BC3B8', // 必写项 animation: { // 可选项 duration: 400, timingFunc: 'easeIn' } })

很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)

<view class=' {{topid==1?"top": "untop"}}' >

这里对 input 使用的是 bindinput 方法: <input type="text" bindinput="input"> <button bindtap="btnclick">{{text}}</button> page.js文件: //获取应用实例 const app = getApp() Page({ data: { text: "点击", inputVal: null },

第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件复制到项目中,更改后缀为wxss 第二步 在wxss中引入刚才更改后缀名css文件 @import "../../../css/test.wxss"; 第三步 在wxml使用 <text class='iconfont icon-home' style='color:#7F8389;font-size:60rpx;'&

一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元素位置问题: 微信小程序是基于数据的,不支持DOM和BOM,所以没有提供获取元素位置的方法. 虽然有提供滚动事件.触摸事件,也只能获取触摸点相关的位置,并不能直接获取元素的位置,暂时还没摸索到合适替代方案. 3. 单击事件传值: 在小程序中,你无法再像h5那种直接在单击事件方法中传参了,它只提供了b