微信小程序学习总结(二)样式、属性、模板操作分析


Posted in Javascript onJune 04, 2020

本文实例讲述了微信小程序样式、属性、模板操作。分享给大家供大家参考,具体如下:

小程序尺寸单位

rpx是小程序常见的尺寸单位,那么他和px有啥不同一样呢。rpx可以根据屏幕宽度进行自适应。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

小程序的样式

你可以这么写
内联方式:<text style='color:red'> hello world</text>
你也可以这么写,直接在wxss中写也阔以

小程序的全局样式与局部样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

初始化数据

第一种方式

/**
 * 页面的初始数据
 */
 data: {
 text:'hello world',
 array:['啊哦','haha'],
 }

页面中渲染

<text style='color:red'>{{text}}</text>
<text>{{array[0]}}:{{array[1]}}</text>

效果
微信小程序学习总结(二)样式、属性、模板操作分析
第二种方式

/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
  var content = {test:
  1,test1:2}
  this.setData(content);
 }

模板中调用
<text>{{test1}}</text>

控制属性

默认是false,所以不显示,在js文件中来给result赋值

<text wx:if="{{result}}">哈哈哈</text>

微信小程序学习总结(二)样式、属性、模板操作分析
微信小程序学习总结(二)样式、属性、模板操作分析

算术运算

<view> {{a + b}}</view>

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串链接

<view>{{"hello" + 'world'}}</view>

遍历

花括号和引号之间如果有空格,将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
 {{item}}
</view>

微信小程序学习总结(二)样式、属性、模板操作分析

绑定数据

content:[{
  name:'haungyuxin',
  age:18
 },{
  name:'zhangfei',
  age:19
 }]
<view wx:for="{{content}}">
 {{item.name}}
</view>

微信小程序学习总结(二)样式、属性、模板操作分析

默认是这个样子的,可以根据自己喜好,自己改吧

<view wx:for="{{content}}" wx:for-item='item'>
 {{item.name}}
</view>

同样的也可以看当前的下标

<view wx:for="{{content}}" wx:for-item='item' wx:for-index='key'>
 {{item.name}}:{{key}}
</view>

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
IE8 浏览器Cookie的处理
Jan 31 Javascript
javascript 节点排序 2
Jan 31 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 #Javascript
vue基础知识--axios合并请求和slot
Jun 04 #Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 #Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 #Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
You might like
杏林同学录(二)
2006/10/09 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
php文件上传的简单实例
2013/10/19 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
React组件的三种写法总结
2017/01/12 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Python接口开发实现步骤详解
2020/04/26 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
暑期实习鉴定
2013/12/16 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
会计简历自我评价
2015/03/10 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python