一,rpx
rpx(responsive pixel)是微信小程序独有的,用来解 决 屏 适 配 的 尺 寸 单 位 。
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有
设备的屏幕,在宽 度 上 等 分 为 750份 (即:当 前 屏 幕 的 总 宽 度 为750rpx
)。
在 iPhone6 上,屏幕宽度为375px,共有750个 物 理 像 素,等分为750。则:
750rpx=375px=750物 理 像 素
1rpx=0.5px=1物 理 像 素
| 设备 | rpx换算px(屏幕宽度/750) | px换算成rpx(750/屏幕宽度) |
|---|---|---|
| iphone5 | 1rpx=0.42px | 1px=2.34rpx |
| iphone6 | 1rpx=0.5px | 1px=2rpx |
| iphone6P | 1rpx=0.552px | 1px=1.81rpx |
二,样式导入
比如1.wxss的样式又想用2.wxss的样式那么就要在1.wxss文件中写入@import"2.wxss";
小程序根目录下的app.json文件是小程序的全 局 配 置 文 件 。常用的配置项如下:
pages 记录当前小程序所有页面的存放路径
window全局设置小程序窗口的外观
tabbar设置小程序底部的tabbar效果
style 是否启用新版的组件样式
2.1windows 节点常用配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| navigationBarTitleText | String | 字符串 | 导航栏标题文字 |
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | String | white | 导航栏标题风格,仅支持black/white |
| backgroundTextStyle | String | dark | 下拉 loading 样式,仅支持dark/light |
| backgroundColor | HexColor | #ffffff | 窗口背景色 |
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉事件 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部的距离,单位px |
2.2tabBar
- tabBar 最少配置两项, 最多五项
- 当渲染顶部tabBar,不显示icon,只显示文本
如下面首页 ,我的信息,分类等等
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "分类"
}
]
},
列
三,网络请求
url:' ',
method:'GET',
data"{
name:'hx'
}",
sucess:(res)=>{
}
})```










网友评论