1.在app.json中修改启动页面
`"entryPagePath": "pages/index/index"`
2.在app.json中修改页面属性
"window":{
"backgroundTextStyle":"light",//导航栏字体样式
"navigationBarBackgroundColor": "#fff",//导航栏背景颜色
"navigationBarTitleText": "Weixin",//导航栏字体内容
"navigationBarTextStyle":"black"//导航栏字体颜色
},
3.底部菜单配置
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/img/shouye.png",
"selectedIconPath": "/img/shouye2.png"
},{
"pagePath": "pages/xinping/xinping",
"text": "分类",
"iconPath": "/img/xinping.png",
"selectedIconPath": "/img/xinping2.png"
},{
"pagePath": "pages/guang/guang",
"text": "逛",
"iconPath": "/img/guang.png",
"selectedIconPath": "/img/guang2.png"
},{
"pagePath": "pages/gouwuche/gouwuche",
"text": "购物车",
"iconPath": "/img/gouwuche2.png",
"selectedIconPath": "/img/gouwuche.png"
},{
"pagePath": "pages/wode/wode",
"text": "我的",
"iconPath": "/img/wode2.png",
"selectedIconPath": "/img/wode.png"
}]
}
4.轮播图:
<swiper indicator-dots indicator-color="#000" indicator-active-color="red" interval="1000" autoplay circular >
<swiper-item>
<image src="../../images/001.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/001.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/001.png"></image>
</swiper-item>
<swiper-item>
<image src="../../images/001.png"></image>
</swiper-item>
</swiper>
5.九宫格轮播图:
html
<view class="v5">
<swiper indicator-dots='true'>
<swiper-item>
<view class="v51">
<block wx:for="{{lbt1}}">
<view>
<image src="{{item.src}}"></image>
<text>\n {{item.ch}}</text>
</view>
</block>
</view>
</swiper-item>
<swiper-item>
<view class="v51">
<block wx:for="{{lbt2}}">
<view>
<image src="{{item.src}}"></image>
<text>\n {{item.ch}}</text>
</view>
</block>
</view>
</swiper-item>
</swiper>
</view>
js
lbt1:[
{src:'../../img/01.png',ch:'西瓜'},
{src:'../../img/02.png',ch:'冰棒'},
{src:'../../img/03.png',ch:'对虾'},
{src:'../../img/03.png',ch:'汉堡'},
{src:'../../img/03.png',ch:'面包'},
{src:'../../img/06.png',ch:'樱桃'},
{src:'../../img/07.png',ch:'饮料'},
{src:'../../img/08.png',ch:'口红'},
{src:'../../img/09.png',ch:'蜂蜜'},
{src:'../../img/10.png',ch:'水杯'},
],
lbt2:[
{src:'../../img/11.png',ch:'666'},
{src:'../../img/12.png',ch:'冰棒'},
{src:'../../img/13.png',ch:'对虾'},
{src:'../../img/14.png',ch:'汉堡'},
{src:'../../img/15.png',ch:'面包'},
{src:'../../img/16.png',ch:'樱桃'},
{src:'../../img/17.png',ch:'饮料'},
{src:'../../img/18.png',ch:'口红'},
{src:'../../img/19.png',ch:'蜂蜜'},
{src:'../../img/20.png',ch:'水杯'},
]
css:
.v5{
width: 90%;
margin: 10px auto;
height: 100px;
}
.v5 .v51{
display: flex;
flex-wrap: wrap;
}
.v5 .v51 view{
width: 20%;
height: 50px;
text-align: center;
font-size: 12px;
}
.v5 .v51 view image{
width: 70%;
height: 50%;
}
6.模板的使用:
https://blog.csdn.net/ziyue13/article/details/121449381
7.请求网络数据:
wx.request({
url: 'http://10.10.198.12:8088/news/getproducts.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
var code=res.data.code;
if(code=="200"){
//把商品数据赋值给一个变量
that.setData({
productlist:res.data.data
});
}
else{
console.log("数据访问错误");
}
}
})
},
8.map地图的使用:
HTML:
<view>
<map class="map" scale="19" latitude="33.636563" longitude="114.684444"
markers="{{markers}}"
></map>
</view>
js:
data: {
markers:[{
iconPath: "../../images/my3.png",
id: 0,
latitude: 33.636563,
longitude: 114.684444 ,
width: 50,
height: 50
}
]
},
9.点击事件:
<button bindtap="go">到这里来</button>
go:function(e){
//获取绑定事件的元素
console.log(e.target);
}
10.页面传递数据的方法:
(1):使用缓存:
var k = this.data.shuju;
//设置某个缓存
wx.setStorage({
key: 'key',
data: k
})
//获取缓存
wx.getStorage({
key: 'key',
success(res) {
console.log(res.data)
}
})
(2):使用reLaunch跳转页面时获取
<button bindtap="test">66</button>
test:function(){
wx.reLaunch({
url: '/pages/wode/wode?id=2&name=666',
})
},
在/pages/wode/wode获取数据:
onLoad:function(e) {
console.log(e);
}
(3):全局变量
index js:
App({
globalData: {
title: 'tomatocc'
}
})
wode.js
var name = getApp().globalData.title;
console.log(name);