模板引用
index.wxml
<template name="tempItem">
<view>
<view>收件人:{{name}}</view>
<view>手机号:{{phone}}</view>
<view>地址:{{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></template>
index.js
Page({
data:{
item:{
name:'derek',
phone:'110',
'address':'美国'
}
}
})
结果
----------
import文件引用
index.wxml
<import src="a.wxml"></import>
<template is="a"></template>
a.wxml
<view>这里不会显示</view>
<template name='a'> hello world </template>
结果:只能引用文件的模板
概念
WXSS(WeiXin Style Sheets)是一套样式语言,用于WXML的组件样式
rpx的几个要素
外联样式引入
index.wxml
<view class='container'>hello world</view>
index.wxss
@import 'assets.wxss';
.container{
color: red;
}
assets.wxss
.container{
border: 1px solid #000;
}
结果
内联样式
index.html
<view style="width:500px;height:30px;background-color:{{colorValue}}">
hello world
</view>
index.js
Page({
data:{
colorValue:'red'
}
})
选择器
优先级
概念 javascript是一种轻量级、解释型的、面向对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言,支持面向对象、命令行和函数式的编程风格。
组成
ECMAScript
不同平台
wxs模块
实例一:外部访问
index.wxml
<wxs module="m1">
module.exports = {
message:'hello world'
}
</wxs>
<view>{{m1.message}}</view>
实例二:文件引用
index.wxml
<wxs src='m2.wxs' module='m2'></wxs>
<view>{{m2.message}}</view>
m2.wxs
module.exports = require('m1.wxs')
m1.wxs
module.exports = {
message:'good night'
}
wxs注释
wxs基础类库