【微信小程序】DAY2

{{...item}}”中“...”是对象的扩展运算符,是显示对象中的值的作用。

 

模板

<template name="odd">
<view> odd </view>
</template>

<template name="even">
<view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

<!-- 输出
odd
even
odd
even
odd
-->
// index.js

// 变量声明
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2018-04-15'
}
}
})
<!--index.wxml-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

<!--is:指定模板,data:传入数据-->
<template is="msgItem" data="{{...item}}"/>

<!-- 输出
0: this is a template Time: 2018-04-15
-->

引用

<!-- item.wxml -->

<template name="item">

<text>{{text}}</text>

</template>

<!--index.wxml-->
<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>

include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置

<!-- index.wxml -->

<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

WXSS 样式

WXSSWeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。

WXSSWeb开发中的CSS类似。为了更适合小程序开发,WXSSCSS做了一些补充以及修改。

 

项目公共样式:根目录中的app.wxss为项目公共样式,它会被注入到小程序的每个页面。

页面样式:与app.json注册过的页面同名且位置同级的WXSS文件。如app.json注册了pages/rpx/index页面,那pages/rpx/index.wxss为页面pages/rpx/index.wxml的样式。

注册:

// app.json
...
"pages":[
"pages/wxml/index",
"pages/index/index",
"pages/logs/logs"
],
...

rpx

根据机型尺寸自动更改的尺寸单位,换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px

样式引用是这样写:

@import  './test_0.wxss'

内联样式

// index.js

// 变量声明
Page({
data: {
eleColor: 'red',
eleFontsize: '48rpx'
}
})
<!--index.wxml-->

<!--可动态变化的内联样式-->

<view style="color: {{eleColor}}; font-size: {{eleFontsize}}">123</view>

模块化

浏览器中,所有 JavaScript 是在运行在同一个作用域下的,定义的参数或者方法可以被后续加载的脚本访问或者改写。同浏览器不同,小程序中可以将任何一个JavaScript 文件作为一个模块,通过module.exports 或者 exports 对外暴露接口。

// moduleA.js

module.exports = function( value ){
  return value * 2;
}

// B.js
// 在B.js中引用模块A

var multiplyBy2 = require('./moduleA')
var result = multiplyBy2(4)

WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

// index.js

// 变量声明
Page({
onLoad: function () {
this.setData({ msg: 'Hello World' }) // 使用 this.setData 方法把 msg 字段设置成 “Hello World”
}
})
<!--index.wxml-->

<view>{{ msg }}</view>

1.渲染层和数据相关。

2.逻辑层负责产生、处理数据。

3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

 

小程序的逻辑层和渲染层是分开的两个进程。在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面。

 

宿主环境提供了 App() 构造器用来注册一个程序App,需要留意的是App() 构造器必须写在项目根目录的app.js里,App实例是单例对象,在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

//app.js

App({
globalData: "I am global data" // 全局共享数据
})

// index.js

var appInstance = getApp()
console.log(appInstance.globalData) // 在console输出: I am global data

宿主环境提供了 Page() 构造器用来注册一个小程序页面,Page()在页面脚本page.js中调用

阅读更多
个人分类: 微信小程序
想对作者说点什么? 我来说一句

微信小程序开发说明相关文档

2018年02月07日 463KB 下载

微信小程序指南

2017年12月13日 6.6MB 下载

微信小程序

2017年11月06日 529KB 下载

微信小程序商城

2018年04月13日 592KB 下载

没有更多推荐了,返回首页

不良信息举报

【微信小程序】DAY2

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭