!--pages/mypage/mypage.wxml-->
<!-- 行内标签 text标签 类似于span -->
<!-- 小程序推荐使用class -->
<view class="main">
<text>pages/mypage/mypage.wxml</text>
<text>pages/mypage/mypage.wxml</text>
<!-- 块级标签 view -->
<!-- app.wxss的样式是 全局的 所有页面都能用 -->
<view class="red">我是块级标签view 类似于div</view>
<view>我是块级标签view 类似于div</view>
<!-- 不会存在于dom的标签 block 起着包裹者的作用 -->
<block>
<!-- 小程序的插值语法 可以获取js里面data的值 -->
<!-- 使用bindtap实现点击操作 -->
<view bindtap="handle" data-msg="hi">{{username}}</view>
</block>
<!-- bindtap 会出现冒泡
而catchtap 会阻止冒泡 -->
<view class="div1" catchtap="fn1">
<view class="div2" catchtap="fn2">
</view>
</view>
<button bindtap="dian">点我</button>
</view>
/* 小程序自带单位rpx 把屏幕的宽度 等比例分成750份 */
/* 占满宽度直接写750rpx即可 */
/* rpx总体上的大小 比 px要小 */
Page({
/**
* 页面的初始数据
*/
data: {
username:"张三"
},
fn1:function(){
console.log('fn1')
},
fn2:function(){
console.log('fn2')
},
handle:function(e){
/* 解构赋值 */
let {currentTarget:{dataset:{msg}}} = e;
// console.log(msg)
/* 想要设置值 视图和数据双向绑定显示 要使用this.setDate */
this.setData({
username:"李四"
})
/* 获取小程序里面的值要使用this.data.的方式 */
console.log(this.data.username)
},
dian:function (){
/* 使用getApp获取全局数据 */
const {globalData:{name}} = getApp()
console.log(name)
},
生命周期函数
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('监听页面初次渲染完成')
},
/**
* 生命周期函数--监听页面显示
*/
/* onShow的执行顺序大于onReady */
onShow: function () {
console.log('mypage 监听页面显示')
},
/**
* 生命周期函数--监听页面隐藏
*/
/* 切换到聊天主页面 退出小程序的时候执行 */
onHide: function () {
console.log('mypage 监听页面隐藏')
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('监听页面卸载')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
/* 需要在对应的json中加入enablePullDownRefresh:true */
onPullDownRefresh: function () {
console.log('下拉刷新')
},
/**
* 页面上拉触底事件的处理函数
*/
/* 需要在对应的json中配置onReachBottomDistance:0
主页面y轴出现滚动条
onReachBottomDistance表示滚动条距离底部多少的时候触发*/
onReachBottom: function () {
console.log('上拉加载更多')
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log('用户点击右上角分享')
}
})
<!--pages/fenglei/fenglei.wxml-->
<button bindtap="goBack">返回上一级</button>
<!-- wx:if 和 wx:elif 以及wx:else之间不可以被其他的标签打断 -->
<block>
<view wx:if="{{msg=='zhangsan'}}" class="t">欢迎回来主人</view>
<view wx:elif="{{msg=='lisi'}}" class="t">家里水龙头没有坏不要过来</view>
<view wx:elif="{{msg=='24'}}" class="t">您好欢迎为您服务</view>
<view wx:else class="t">显示家里没人</view>
</block>
// pages/forpage/forpage.js
const util2 = require('../../utils/util2')
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log( util2.pingjie('hello','小瘦子') )
// let b = util2.isFlag(this.data.list,'styFlag')
// console.log(b)
/* Date.now() 产生一个当前的时间戳 */
let time = util2.isTime( Date.now() )
console.log(time)
},
go1:function(){
/* 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 */
wx.navigateTo({
url: '/pages/logs/logs?name=zhangsan',
})
},
go2:function(){
/* 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 */
wx.switchTab({
url: '/pages/index/index?name=lisi',
})
},
go3:function(){
/* 关闭所有页面，打开到应用内的某个页面 */
wx.reLaunch({
url: '/pages/fenglei/fenglei?name=24',
})
},
go4:function(){
/* 使用redirectTo是无法使用navigateBack返回的*/
/* 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 */
wx.redirectTo({
url: '/pages/fenglei/fenglei',
})
},
/**
* 页面的初始数据
*/
data: {
flag:1,
list:['冰墩墩','雪融融','小泡菜'],
list:[{
name:'冰墩墩',
styFlag:true
},{
name:'雪融融',
styFlag:false
},{
name:'小泡菜',
styFlag:false
}]
},
choose:function(e){
let { currentTarget:{ dataset:{i} } } = e;
/* 第一步获取点击的当前的内容的索引 */
console.log(i)
/* 排他 把所有的先置空 */
this.data.list.forEach(r=>{
r.styFlag = false
})
this.data.list[i].styFlag = true;
/* 数据变了 视图没变 必须要使用setData实现数据和视图的双向数据绑定 */
this.setData({
list:this.data.list
})
},
a:function(e){
console.log(e)
},
qie:function(){
this.setData({
flag:3
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
<!--pages/forpage/forpage.wxml-->
<!-- <view class="t" wx:if="{{flag==1}}">我是可爱的小墩墩</view>
<view class="t" wx:elif="{{flag==2}}">我是冰墩墩</view>
<view class="t" wx:elif="{{flag==3}}">我是雪融融</view>
<view class="t" wx:else>我是可恶的小泡菜</view>
<button bindtap="qie">切换</button> -->
<!-- data-传动态的值 需要加{{}}绑定 -->
<view bindtap="a" data-f="{{flag}}">123</view>
<!-- wx:for="{{数组}}" 循环需要绑定key wx:key="index"-->
<!-- 自带定义 item 表示数组的每一项 index 表示数组的索引 -->
<!-- 使用wx:for-item修改每一项值的key -->
<!-- 使用wx:for-index修改每一项值的index -->
<view wx:for="{{list}}" class="t" wx:key="i"
wx:for-item="r" wx:for-index="i"
style="color:{{r.styFlag?'red':''}};"
data-i="{{i}}"
bindtap="choose"
>
{{r.name}}--{{i}}
</view>
<button bindtap="go1" style="margin: 3px;">张三</button>
<button bindtap="go2" style="margin: 3px;">李四</button>
<button bindtap="go3" style="margin: 3px;">24号</button>
<button bindtap="go4" style="margin: 3px;">不带参数</button>
<!--index.wxml-->
<view class="container">
<button bindtap="goBack">返回跳转之前的页面</button>
<view class="userinfo">
<block wx:if="{{canIUseOpenData}}">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>
</view>
<open-data type="userNickName"></open-data>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
