编写第一个微信小程序界面
编写第一个微信小程序界面
不忘初心,方得始终;初心易得,始终难守。
传统的 web 结构
小程序文件目录结构
小程序页面层级结构
编写第一个小程序
1. 创建小程序目录结构
2. 编写代码
welcome.wxml
<!-- wxml 是编写小程序骨架的文件 --> <!-- <div>一样的效果 --> <view class='container'> <image class='user-avatar' src='/images/1.jpg'></image> <text class='user-name'>Hello , 王佳伟</text> <view class='moto-container'> <text class='moto'>开启小程序之旅</text> </view> </view>
welcome.wvss
.container{ /* 布局修改 */ display: flex; /* 纵向排列 */ flex-direction: column; /* 内容居中 */ align-items: center; } .user-avatar{ width: 200rpx; height: 200rpx; margin-top: 160rpx; } .user-name{ margin-top: 100rpx; font-size: 32rpx; font-weight: bold; } .moto{ font-size: 22rpx; font-weight: bold; line-height: 80rpx; color: #405f80; } .moto-container{ margin-top: 200rpx; border: 1px solid #405f80; width: 200rpx; height: 80rpx; border-radius: 5px; text-align: center; } page{ height: 100%; background-color: #b3d4db; }
app.json
{ "pages": [ "pages/welcome/welcome" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#b3d4db", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" } }
app.wxss
text{ /* 设置字体 */ font-family: MicroSoft Yahei; }
移动设备的分辨率与 rpx
为什么模拟器下ip6的分辨率为375而设计图一般给750?
pt :逻辑分辨率,和屏幕物理尺寸有关,可以简单的理解为长度和视觉单位。
px :物理分辨率,与屏幕尺寸无关,简单理解为像素点,因为点不能描述大小,只能描述个数,所有不是长度单位。
关系:1个 pt 可以有一个 px 构成,也可以有两个,还可以有3个甚至更多组成。
ip6 下2个 px 构成一个 pt。
PPI:每一寸包含多少物理像素点。
因为小程序模拟器给出的ip6的375分辨率是逻辑分辨率,设计师给的设计图750分辨率是物理分辨率,存在两倍关系。
如何做不同分辨率设备的自适应?
以 ip6 的物理像素750X1334为视觉稿进行设计,而在小程序中使用 rpx 为单位。
ip6 下 1px = 1rpx = 0.5pt 。
使用 rpx 小程序会自动在不同分辨率下进行转换,而使用 px 为单位不会。
为什么要用 iphone6 的物理分辨率来做设计图?
ip6 下 1px = 1 rpx
ip6 plus 下 1px = 0.6 rpx
官方API也是建议使用ip6进行设计换算
注意:不是所有的单位都适合用 rpx,例如字体,字体自适应的话,小机型就会造成字体过小,用户看不清,应该用px 。
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署