文章目录
一.json配置页面二、WXML模板1.三目运算2.插值运算
三.wx:for与wx:key列表渲染四.条件渲染wx:if与hidden属性1.wx:if与hidden的使用2.wx:if与hidden的区别
五.template模板1.定义模板 name='listItem'2.使用模板
六.tabBar底部导航七.wxs的使用相当于js1.逻辑层2.视图引用wxs层
八.组件（以轮播图为例）九.事件1.事件参数e2.组织冒泡事件catchtap
十. api1.视图页面2.逻辑页面
一.json配置页面
page页面配置的优先级高于app应用的配置
二、WXML模板
1.三目运算
注意：参与逻辑运算的部分包含在{{}}内部
<image src="{{isActive?'/pages/image/star1.png':'/pages/image/star2.jpg'}}"></image>
2.插值运算
<!-- 1. --><text>{{10+100}}</text>
# 二
2.复杂数据引用
<view> {{student.friend[0].name}}</view>
三.wx:for与wx:key列表渲染
注意： {{ {} }}之间要有空格
<view>{{ {username: "王"} }}</view>
<view wx:for="{{ {username: '王晴'} }}" wx:key="item">
{{item}}
</view>
2.wx:for-iten与wx:for-index
<view wx:for="{{students}}" wx:key='item' wx:for-item="students">
<text>{{index}}--{{students.username}}</text>
</view>
四.条件渲染wx:if与hidden属性
1.wx:if与hidden的使用
wx:if的使用
<!-- 2.显示用户是几级用户 -->
<view wx:if="{{level==1}}">该用户为1级用户</view>
<view wx:elif="{{level==2}}">该用户为2级用户</view>
<view wx:else="{{level==3}}">该用户为高级用户</view>
hidden的使用
<!-- 3.hidden是否显示隐藏内容 -->
<view hidden="{{isVip}}">用户是Vip</view>
2.wx:if与hidden的区别
wx:if为真时渲染在页面中；为假时，不在页面中渲染 hidden无论为真为假都在页面中渲染 因此：如果要频繁切换内容显示时，应使用hidden
五.template模板
1.定义模板 name=‘listItem’
<template name='listItem'>
<view>
<image src="{{url}}"></image>
<text>{{username}}</text>
</view>
</template>
2.使用模板
data为引用的数据
data: {
user: {
username: '王晴',
url: '/pages/image/star1.png'
}
}
<template is="listItem" data="{{...user}}">{{item}}</template>
六.tabBar底部导航
在app.json页面的对象下设置“tabBar”属性
"tabBar": {
"color": "#f00", //默认的导航文字颜色
"selectedColor": "#f00", //选中时导航的文字颜色
"borderStyle": "black",
"list": [
{"selectedIconPath": "/pages/image/icon-test.png", //选中导航图标时的图像
"iconPath": "/pages/image/star1.png",
//未选中导航图标时的图像 "pagePath": "pages/02wxml/wxml",
//选中导航时的跳转页面
"text": "首页"
//底部导航文字
},
{ "selectedIconPath": "/pages/image/yiliao.png",
"iconPath": "/pages/image/star2.jpg", "pagePath": "pages/04list/list",
"text": "日志"}
] },
七.wxs的使用相当于js
每一个wxs都相当于一个module 注意：必须完整写为setPrice: setPrice，不可只写setPrice,且结尾不可有分号
1.逻辑层
<wxs module="obj">
var setPrice = function(price){
return price+'￥';
}
module.exports = {
setPrice: setPrice
}
</wxs>
2.视图引用wxs层
<view>{{obj.setPrice(price)}}</view> //obj对应wxs的模板名称name
八.组件（以轮播图为例）
九.事件
1.事件参数e
事件函数在页面.json中与data同级 参数e包含了各种数据（从哪个对象触发的、是么时间、什么位置、打开页面花费的事件timStamp）
tagEvent(e){
console.log(e)
},
2.组织冒泡事件catchtap
<view id="outer" catchtap="handleTap1"> outer view
<view id="middle" catchtap="handleTap2"> middle view
<view id="inner" bindtap="handleTap3">
<button>inner view</button>
</view>
</view>
</view>
十. api
1.视图页面
<form bindsubmit="searchWeather">
//name="city"的名称通过事件参数e传递
<input name="city" type="text" placeholder="请输入"></input>
<button form-type="submit">搜索</button>
</form>
<view> 当前温度：{{tmp}}</view>
2.逻辑页面
data: {
tmp: null
},
searchWeather(e){
console.log(e);
let city = e.detail.value.city;
console.log(city);
//将this转储在that中
let that = this;
wx.request({
url: 'https://free-api.heweather.net/s6/weather/now',
data: {
location: city,
key: "3c497450d8e44c5280421ceaba1db581"
},
success(res){
console.log(res);
that.setData({
tmp: res.data.HeWeather6[0].now.tmp }) }
})
}
