app.json文件
{
建文件
"pages":[
第一个是模拟器显示的文件
"pages/demo01/demo01",
"pages/home/home",
"pages/category/category",
"pages/find/find",
"pages/cart/cart",
"pages/mine/mine",
"pages/index/index",
"pages/logs/logs"
],
"window":{
下拉刷新显示的颜色
"backgroundTextStyle":"dark",
最上边导航背景色
"navigationBarBackgroundColor": "#f55",
标题
"navigationBarTitleText": "你好",
字体颜色
"navigationBarTextStyle":"white"
},
tab切换
"tabBar":{
字体没点击之前颜色
"color": "#666666",
点击后颜色
"selectedColor":"#ff0000",
"list":[{
页面2-5个
"pagePath":"pages/home/home",
激活前图片
"iconPath":"assets/images/101.png",
激活后图片
"selectedIconPath":"assets/images/102.png",
图片下文本
"text":"首页"
},{
"pagePath":"pages/category/category",
"iconPath":"assets/images/201.png",
"selectedIconPath":"assets/images/202.png",
"text":"分类"
},{
"pagePath":"pages/find/find",
"iconPath":"assets/images/301.png",
"selectedIconPath":"assets/images/302.png",
"text":"发现"
},{
"pagePath":"pages/cart/cart",
"iconPath":"assets/images/401.png",
"selectedIconPath":"assets/images/402.png",
"text":"购物车"
},{
"pagePath":"pages/mine/mine",
"iconPath":"assets/images/501.png",
"selectedIconPath":"assets/images/502.png",
"text":"我的"
}]
},
指定使用升级后的 weui 样式
"style": "v2",
指明 sitemap.json 的位置
"sitemapLocation": "sitemap.json"
}
详情查阅全局配置文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html标签和样式
微信中
1px=2rpx
文档-组件
https://developers.weixin.qq.com/miniprogram/dev/component/view属性hover点击一下
<!-- hover-class点击出现样式 -->
<!-- hover-start-time点击后延时多少毫秒出现样式 -->
<!-- hover-stay-time离开后多少毫秒样式消失 -->
<view class="box"
hover-class="hoverbox"
hover-start-time="2000"
hover-stay-time="3000"
>hover</view>注意
hover-stop-propagation="{{true}}"
""号内判断的是字符串，写成模板字符串的形式才能判断true和false<!-- hover-stop-propagation阻止点击事件从子盒子传递给父盒子 -->
<view class="outer" hover-class="hov">
<view class="inner" hover-class="hov" hover-stop-propagation="{{true}}"></view>
</view>定义数据js
普通数据
Page({
/**
* 页面的初始数据
*/
data: {
msg:"辛弃疾"
},
})使用数据
<view>{{msg}}</view>
<view>{{1+1}}</view>
<!-- 结果为2 -->
<!-- 模板字符串支持数据，计算，三目运算 -->数组遍历
Page({
/**
* 页面的初始数据
*/
data: {
msg:"辛弃疾",
arr:['李白','杜甫','李清照','户主']
},
})<view wx:for="{{arr}}" wx:key="index">
{{item}}--{{index}}
</view>
<!-- wx:for 循环默认
index为0，1，2，3
元素为item
必须要绑定key唯一标识-->
<!-- 可以更改默认的index和item -->
<!-- 结果与上边一样 -->
<view wx:for="{{arr}}" wx:for-item='value' wx:for-index="kk"
wx:key="kk">
{{value}}--{{kk}}
</view>数组对象
// pages/demo01/demo01.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"辛弃疾",
arr:['李白','杜甫','李清照','户主'],
lists:[{
id:1,
title:"标题1"
},{
id:2,
title:"标题2"
},{
id:3,
title:"标题3"
},{
id:4,
title:"标题4"
}]
},
})<!-- 数组对象 key可以绑定id-->
<view wx:for="{{lists}}" wx:key="id">{{item.title}}
</view>嵌套数组
listDatas:[{
id:1,
title:"家用电器",
children:[{
id:1001,
title:"大家电"
},{
id:1002,
title:"厨房电器"
}]
},{
id:2,
title:"男装女装",
children:[{
id:2001,
title:"男装"
},{
id:2002,
title:"女装"
}]
}]<!-- 嵌套数组 -->
<view wx:for="{{listDatas}}" wx:key="id">
{{item.title}}
<view wx:for="{{item.children}}" wx:key="id">
{{item.title}}</view>
</view>对象数据
obj:{
username:"好谷"
},<!-- 数据是对象 -->
<view>{{obj.username}}</view>修改数据
data: {
msg:"haogu",
},
// 自定义事件和其他事件同级就行
changemsg(){
console.log(this.data.msg);
// haogu
// 使用this.setData修改数据
this.setData({
msg:"xiugaihou"
})
},<button bindtap="changemsg">修改msg</button>
//使用bindtap绑定事件阻止事件冒泡
<!-- 事件冒泡 -->
<view class="outer" bindtap="fn2">
<view class="inner" bindtap="fn"></view>
</view>
<!-- 阻止事件冒泡 -->
<view class="outer" bindtap="fn2">
<view class="inner" catchtap="fn"></view>
</view>
<!-- bindtap和catchtap也可以写成bind:tap和catch:tap的形式 -->
<!-- bindtap和catchtap的区别
1、都会执行事件
2、bindtap会有冒泡行为，catchtap会阻止事件冒泡
-->轮播图
data: {
showData:"true",
},<!-- autoplay开启自动轮播，interval自动轮播时间， -->
<!-- duration="1000" 滑动动画的时间默认500 -->
<!-- indicator-dots开启指示点，indicator-color指示点颜色 indicator-active-color选中指示点的颜色-->
<!-- circular是否采用衔接滑动 -->
<!-- current 当前所在滑块的 index 从0开始-->
<!-- previous-margin="20" 左外边距20 next-margin="20" 右外边距20 -->
<!-- true可以写成数据showData -->
<!-- vertical滑动方向是否为纵向 -->
<swiper class="swiper" autoplay="{{true}}" interval="1000" duration="1000" indicator-dots="{{showData}}" indicator-active-color="#ff5555" indicator-color="#000000" circular="{{true}}" current="2" previous-margin="20" next-margin="20 " vertical="true">
<swiper-item>
<image src="../../assets/images/01.jpg"> </image>
</swiper-item>
<swiper-item>
<image src="../../assets/images/02.jpg"> </image>
</swiper-item>
<swiper-item>
<image src="../../assets/images/03.jpg"> </image>
</swiper-item>
</swiper>
tab切换和轮播图
<!-- scroll-x横向滚动 -->
<!-- scroll-left向左滚动的距离 -->
<!-- scroll-with-animation开启动画 -->
<scroll-view class="tabs-wrap"
scroll-x="{{true}}"
scroll-left="{{oLeft}}"
scroll-with-animation="{{true}}">
<view class="tabs" >
<!-- active选中的标题样式 -->
<!-- bindtap绑定事件 -->
<!-- 事件不能直接传参，通过属性传参 -->
<!-- data-abc定义属性abc传参 data-index定义属性index传参-->
<view class="tabs-item {{activeIndex==index?'active':''}}"
wx:for="{{lists}}"
wx:for-item="list"
wx:key="id"
bindtap="changeTabs"
data-abc="123"
data-index="{{index}}"
>{{list.title}}</view>
</view>
</scroll-view>
<!-- bindchange轮播改变事件 -->
<!-- current当前显示的轮播图索引 -->
<swiper current="{{activeIndex}}"
bindchange="changeSwiper">
<swiper-item wx:for="{{lists}}"
wx:key="id">
<view>{{item.title}}</view>
</swiper-item>
</swiper>Page({
/**
* 页面的初始数据
*/
data: {
oLeft:"0",
activeIndex:"0",
lists:[{
id:1,
title:"标题01"
},{
id:2,
title:"标题02"
},{
id:3,
title:"标题03"
},{
id:4,
title:"标题04"
},{
id:5,
title:"标题05"
},{
id:6,
title:"标题06"
},{
id:7,
title:"标题07"
},{
id:8,
title:"标题08"
},{
id:9,
title:"标题09"
},{
id:10,
title:"标题010"
},{
id:11,
title:"标题011"
}]
},
changeTabs(e){
// 通过e.currentTarget.dataset找到传递参数
console.log(e.currentTarget.dataset);
let index=e.currentTarget.dataset.index
if(index>2){
this.setData({
oLeft:(index-2)*75
})
}else{
this.setData({
oLeft:0
})
}
this.setData({
activeIndex:index
})
},
changeSwiper(e){
console.log(e);
// e.detail.current轮播图的索引,从0开始
this.setData({
activeIndex:e.detail.current
})
let current=e.detail.current
if(current>2){
this.setData({
oLeft:(current-2)*75
})
}else{
this.setData({
oLeft:0
})
}
},
})
2469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
