基础
下面用到的数据定义在js文件的data内
基础标签
<view></view>
块级元素<text></text>
行内元素
文本渲染
<view class="p">{{msg}}</view>
<view class="p">2+1={{2+1}}</view>
<view class="p">msg长度:{{msg.length}}</view>
条件渲染
<view class="h1">条件渲染</view>
<view class="p" wx:if="{{isLog}}">欢迎回来,我的主人</view>
<view class="p" wx:else>游客·请登录</view>
<view class="p" wx:if="{{num>10}}"> A大于10 </view>
<view class="p" wx:elif="{{num>2}}"> B大于4 </view>
<view class="p" wx:else> 小于4 </view>
列表渲染
<view class="h1">列表渲染</view>
<view class="p" wx:for="{{list}}" wx:key="{{index}}">
{{index+1}}-{{item}}
</view>
<view class="h1">列表渲染--自定义item</view>
<view class="p"
wx:for="{{list}}"
wx:for-item="myitem"
wx:for-index="myindex"
>
{{myindex+1}}--{{myitem}}
</view>
template模板
<view class="h1">template模板</view>
<import src="../template/template.wxml"></import>
<block wx:for="{{users}}">
<template is="userItem" data="{{...item}}" />
</block>
<!-- <template is="userItem" data="{{...users[1]}}"></template> -->
引入文件
wxml文件
<include src="../include/include.wxml"></include>
include.xml文件
<view>@2020 漂流在人海 版权所有</view>
<view>作者:想喝橙汁儿</view>
事件
wxml文件
<view class="h1">事件</view>
<view bindtap="tapHd" data-source="love">事件响应</view>
js文件
data: {
msg:"醉卧沙场君莫笑,古来征战几人回。"
},
inputHd(e){
console.log(e);
this.setData({msg:e.datail.value})
},
tapHd(e){
console.log(e);
wx.showToast({
// title: '点击事件响应',
title: e.target.dataset.source,
icon:'none',
})
},
表单
wxml文件
<view class="h1">表单</view>
<view>
<input type="text"
value="{{msg}}"
class="inp"
placeholder="请输入(可修改,不能保存)"
bindinput="inputHd"/>
</view>
<view class="p">{{msg}} --2 </view>
js文件
data: {
msg:"醉卧沙场君莫笑,古来征战几人回。"
},
inputHd(e){
console.log(e);
this.setData({msg:e.datail.value})
},
页面内跳转(超链接)navigator
<view class="h1">界面内连接</view>
<view class="p">
<navigator url="/pages/logs/logs">日志</navigator>
<navigator url="../logs/logs">日志-相对路径</navigator>
<navigator url="../logs/logs" open-type="redirect">日志---不返回
<navigator open-type="reLaunch">重启</navigator>
<navigator open-type="exit">退出</navigator></navigator>
</view>
路由 – 底部导航栏(tabBar)
color : 颜色
selectColor :选中颜色
- app.json文件内:
pagePath :页面地址
text :底部栏文本
iconPath :图片地址(只能是本地图片,建议81px)
selectedIconPath : 选中的图片地址
"tabBar": {
"selectedColor":"#1e90ff",
"list": [
{
"pagePath": "pages/jok/jok",
"text": "爱笑话",
"iconPath": "./images/t1.png",
"selectedIconPath": "./images/t1-h.png"
},
{
"pagePath": "pages/base/base",
"text": "base",
"iconPath": "./images/t4.png",
"selectedIconPath": "./images/t4-h.png"
}
]
},
知识点
图片
- 防止图片变形
<image src="" mode="widthFix"></image>
- mode属性:
事件相关操作
- 获取事件下标
e.target.dataset.index: 指的是该对象里的子对象,也是触发这个事件的对象
e.currentTarget.dataset.index: 指的是注册了事件监听器的对象
- 监听页面滚动距离
onPageScroll: function (e) {
// console.log(e.scrollTop)
},
- 获取元素的宽高
wx.createSelectorQuery().select('#jks').boundingClientRect(function (res) {
//rect.id // 节点的ID
//rect.dataset // 节点的dataset
// rect.left // 节点的左边界坐标
// rect.right // 节点的右边界坐标
// rect.top // 节点的上边界坐标
// rect.bottom // 节点的下边界坐标
// rect.width // 节点的宽度
// rect.height // 节点的高度
console.log(res);
}).exec()
- 页面下拉不回弹
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
wx.stopPullDownRefresh();
},
公众号
- 关注博主微信公众号