微信小程序学习总结(二)
2018-01-02 15:35
344 查看
小程序尺寸单位
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>
控制属性
<text wx:if="{{result}}">哈哈哈</text> 默认是false,所以不显示,在js文件中来给result赋值
算术运算
<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>
这个地方的item估计有些人不明白,我的理解是就像PHP用foreach遍历二维数组时候的$v。
默认是这个样子的,可以根据自己喜好,自己改吧
<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>
相关文章推荐
- 微信小程序学习总结
- 微信小程序——转跳导航方式学习总结
- 微信小程序-学习总结
- 微信小程序学习总结(三)
- 微信小程序学习总结(一)
- 微信小程序学习总结(四)
- 微信小程序学习总结(五)
- 微信小程序学习(一)
- 微信小程序学习1
- 微信小程序开发总结
- 微信小程序学习笔记(7)--------布局基础
- 微信小程序------小程序初步学习
- Linux内核设计第二周学习总结 完成一个简单的时间片轮转多道程序内核代码
- 微信小程序学习笔记
- 微信小程序 传值取值的几种方法总结
- [微信小程序]入门学习知识点_UI布局
- 微信小程序 跳转方式总结
- 微信小程序学习笔记(二)- 小程序中的canvas
- 学习struts2建bbs总结六:hibernate分页查询的问题--分页后程序定时无响应
- 微信小程序入门——Mustache语法学习