项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class="weui-flex tab-bar" style="color: {{color}}; background: {{backgroundColor}}; {{position=='top'? 'top: 0' : 'bottom: 0'}}; {{borderStyle? (posi

我们在h5开发中,很多时候要在html中写到js代码,这个很容易实现.但是在微信小程序开发中,是不能直接在wxml中写js代码的,因此就有了wxs.在wxml中用wxs代码,有以下几种方式(在小程序文档中写的很清楚,我只不过是总结下) 第一种:直接在wxml文件中使用<wxs>标签 <wxs module="dateModule"> var now = getDate(); module.exports = { date: now } </wxs>

原文链接 1.在 utils 目录下 新建`filter.wxs` var filters = { toFix: function (value) { return value.toFixed(2) // 此处2为保留两位小数,保留几位小数,这里写几 }, toStr: function (value) { return value.toString() }, toNum: function (value) { return value.toNumber() }, } module.export

文章为博主原创,纯属个人见解,如有错误欢迎指出. 如需转载,请注明出处. 在js中遍历 for (var index in res.data.infos) { res.data.infos[index].info_file = res.data.infos[index].info_file.split(','); } 在wxml中遍历 <view class="img" wx:for="{{item.info_file}}" wx:for-item="

因为有在 Vue 下开发应用的习惯,希望能够直接在 wxml 中的标签里使用 JS 代码.微信小程序其实也是可以的,在使用 JS 代码的时候需要用{{}}来包裹起来. 以下是在 wxml 中使用 JS 代码的演示: <view class="price text-red text-lg"> {{ Math.floor((data.price * data.discount) * 100) / 100) }} </view> 上面的演示是对于直接使用 JS 内置的

1. view 标签中的属性 style 中的参数 margin-top:10px;  (向上距离) display : flex;  (display : flex 容器声明) flex-direction:    (view中布局的方向) row;    (横向布局 ,从左到右) column;    (垂直布局,布局从上往下) row-reverse; (横向布局 ,从右到左) column-reverse;(垂直布局,布局从下到上) flex-wrap: (当布局一行里面的数据无法全部显

想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. WXS的使用,有两种方式. 一种是直接在WXML中编写. <!--wxml--> <wxs module="foo"> var some_msg = "hello w

小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压

在<swiper-item>中用for循环传入多个成对不同数据时的实现方法. 效果如下: 遍历实现方法:wxss省略: wxml中代码: <!--导航部分轮播图--> <swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}"> <sw

需求    上面两个页面是同一个小程序的不同页面,两个页面中都是用到了label,有相似的地方,但是也有不同之处,这个时候,如果我们想要将这些label做出组件,然后复用,有该怎么做呢? 基础组件 首先在components下面新建tag文件夹,用来存放组件: 然后在tag/index.js里面添加最基本的数据 Component({ properties: { text:String }, data: {}, methods: {} }) tag/index.wxml <view class=

不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组件的页面,所以,先在pages文件夹下面新建classic页面,然后在项目根目录下新建component文件用于存放组件,并在该文件夹下面新建like组件:    这里建议在新建页面的时候,先新建存放页面的文件夹,然后编辑器中鼠标右击该文件夹,然后选择新建page.新建组件的时候,也是先新建存放组件

项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 WXML 模板 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 数据绑定 WXML 中的动态数据均来自对应 Page 的page.js中的 data. 数据绑定使用 Mustache 语法(双大括号)将变量包起来,以下适用 内容绑

  视图层:Pages主要有 wxml页面文件和模板文件.wxs脚本文件.wxss样式文件:component是抽取出来的业务单元,同样拥有wxml页面文件和模板文件.wxs脚本文件.wxss样式文件. WXML(WeiXin Markup language) 用于描述页面的结构. WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. WXSS(WeiXin Style Sheet) 用于描述页面的样式. 组件(Component)是视图的基本组成

[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自己的UI库 5. 微信小程序开发03-这是一个组件 6. 微信小程序开发02-小程序基本介绍 7. 微信小程序开发01-小程序的执行流程是怎么样的? 阅读本文之前,如果大家想对小程序有更深入的了解,或者一些细节的了解可以先阅读上述文章,本文后面点需要对

1.首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 2.在样式页面 wxss 中引入 wxparse 样式文件 @import “../../wxParse/wxParse.wxss”; 3.在逻辑处理页面 js 中引入 wxparse 模块 核心代码片段 … var wxParse = require(‘../../wxParse/wxParse.js’); … wxPar

小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wxml,wxss,js,json,wxs以及图片文件等.每一页面都具有wxml,wxss,js,json文件,但比不是必须的,小程序和网页类似,一种以html+css+js,而小程序则是wxml+wxss+js,如wxml用来描述页面结构,wxss用例描述页面的样式,js用来添加逻辑信息的. wxml

前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!(小程序文档),现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本! 本篇文章就是手把手教你实现小程序中自定义组件,坐稳啦

一.数据绑定 wxml中的动态数据均来自于对应js文件中的Page的data,在js中访问Page的data用this.data, 改变data中某个属性的值用setData()方法. Page({ data: { id: 0, message: "hello", condition:true } }) 简单绑定: 数据绑定使用Mustache语法(双大括号)将变量包起来 <view> {{message}} </view> 作用与组件属性: <view

如果用一句话来表明navigator和API中wx.系列的跳转有什么区别,那就是navigator是在wxml中用标签添加open-type属性来达到和wx.系列一样的效果. navigator的属性值如下图所示图中可以看到经过设置open-type可以达到wx.系列的效果,这次我主要说一下我对wx.系列的小研究 wx.系列跳转主要是通过对demo添加点击事件,再js中完成页面跳转,下图是js中的写法,注意url路径,这里容易出错,报错大致为WAService.js:3 switchTab:fa

本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力演示 提供开发者小程序开发参考 换句话说就是在微信里面通过我们云信的IM SDK再实现一个mini版微信.整个小程序主要功能点总的来说是: 登录注册(为了实现不同端同一账号体系,所以没有采用微信授权登录) 最近会话展示 通讯录 单聊对话 用户名片 废话不多说直接上图: 一期已经上线,不足的地方,恳请

view标签下hover必须为true时,设置hover-class才有效,hover-start-time和hover-stay-time的形式如下:   < view class="v1" hover="true" hover-class="v1_changed" hover-start-time="1000" hover-stay-time="500">1< /view> 关于