一、navigationBar
"backgroundTextStyle":"light", // 下拉背景字体
"navigationBarBackgroundColor": "#fff", //背景可以是任何颜色
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black" //顶部title只能为黑白两色
二、弹性布局
.container {
height: 100vh; //vh为viewheight,即可见内容高度的100%
display: flex;
flex-direction: column; //排列方向:纵向 默认为横向
justify-content: space-around; //space-between暂不支持
align-items: center;
}
三、响应式长度单位: rpx
微信小程序按照iphone6的标准开发
小程序规定:所有设备的屏幕宽高均为750rpx
1px = 2rpx;
四、快速添加新的页面
在app.json中配置路径
"pages": [
"pages/about/about",
"pages/weekly/weekly"
]
五、配置tabBar
"tabBar": {
"list": [
{
"text": "主页", //文字内容
"pagePath": "pages/about/about", //page的路径
"iconPath": "images/icons/home.png", //图标文件
"selectedIconPath": "images/icons/home-selected.png" //点击后的图标文件
},
{
"text": "每周推荐",
"pagePath": "pages/weekly/weekly",
"iconPath": "images/icons/first.png",
"selectedIconPath": "images/icons/first-selected.png"
}
],
"color": "#ccc", //底部文字颜色
"selectedColor": "#000" //底部文字点击后的颜色
}
六、缓存 wx.setStorageSync
wx.clearStorageSync();
//清除缓存
wx.removeStorageSync(‘key');//清除指定缓存
wx.setStorageSync("1", "value") //设置缓存
七、腾讯坐标拾取器map
ongitude:经度
latitude:纬度
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}"></map>
Page({
data: {
latitude:30.537094,
longitude:114.333649,
}
})
网友评论