底部菜单
窗体,菜单,网络,设置
在app.json文件中添加以下配置信息。
,
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "page/API/index",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "接口"
}]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": false
JS 交互逻辑(修改视图数据模型,视图自动更新)
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS
脚本文件来处理用户的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
点击 button
按钮的时候,我们希望把界面上 msg
显示成 "Hello World"
,于是我们在 button
上声明一个属性: bindtap
,在 JS 文件里边声明了 clickMe
方法来响应这次点击操作:
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
数据绑定:
绑定文本:
//数据
data: {
text:"Hello World"
},
//绑定视图
<view>{{ text }}</view>
绑定组件属性值:
//数据
data: {
id:0 //数字
},
//视图
<view id="item-{{id}}"> </view>
布尔类型的属性值绑定:
<checkbox checked="{{false}}"></checkbox> //正确方法
<checkbox checked="false"></checkbox> //错误方法
三元运算绑定:
//数据
data: {
greet:true
},
//视图
<view>{{greet?'Hello':'Byebye'}}</view>
算术运算:
//数据
data: {
x:3,
y:5,
result:15
},
//视图
<view>{{ x * y }}={{result}}</view>
字符串拼接:
//数据
data: {
name:"isco"
},
//视图
<view>{{ "Hello "+name }}</view>
对象和数组绑定:
//数据
data: {
userInfo:{nickname:"isco"},
people:["Li Lei","Han Meime"]
},
//视图
<!--对象-->
<view>{{ userInfo.nickname }}</view>
<!--数组-->
<view>{{ people[0] }},{{people[1]}}</view>
组合绑定:
WXML条件控制和循环
wx:if,wx:for 属性必须放在组属性的开始位置。
<view wx:if="{{true}}">
</view>
<view wx:elif="{{false}}"></view>
<view wx:else>
</view>
<view wx:for="{{arrar}}" wx:for-index="index"
wx:for-item="item"
wx:key="unique">
{{ index }}:{{ item }}
</view>
注意:wx:for中的key属性,可以保证条目的新增删除修改条目后不会重新创建。状态和结构不会被重置。
包装元素:不会产生任务多余和视图输出,无需渲染,效率比View组件快
<block wx:for="{{array}}">
<block wx:if="{{condition1}}">
<block wx:if="{{ condition2 }}">
<text>Hello</text>
</block>
</block>
</block>
事件对象
target:被点击的组件
currentTarget:通过事件流冒泡或捕获到的事件所响应的组件。
事件使用组件的自定义属性值:
事件冒泡与捕获的实现:
WXML动态模板文件
模板脚本语言WXS
即JS脚本,主要用于数据的格式化处理,例如:对时间戳的格式化
WXS属于JaveScript的子集
注意:WXS是单例模式,我们应该使用闭包调用函数,被免互不干扰。
WXS例子:
format.wxs定义文件:
module.exports = {
comma: function(text) {
return text.toString().replace(getRegExp(',', 'g'), ',');
}
};
frame.wxml模板中调用WXS:
<wxs src="format.wxs" module="format"></wxs>
<template name="frame">
<view class="frame" data-index="{{index}}" bind:tap="edit">
<image class="image" mode="aspectFit" src="{{src}}" data-tag="image"></image>
<text class="text" hidden="{{!aside}}" data-tag="text">{{format.comma(text)}}</text>
</view>
</template>
WXMS中引用模板:
<import src="frame.wxml"></import>
<view class="wrap">
<block wx:for="{{images}}" wx:for-index="i" wx:for-item="image" wx:key="unique">
<template is="frame" data="{{...image, index: i}}"></template>
</block>
</view>