九宫格布局小程序-模仿微信钱包界面设计-基础入门

代码展示：

使用flex布局模型和wx:for属性仿微信“钱包”页面实现九宫格

项目创建完毕之后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面；

将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号

删除utils文件夹及其内部所有内容。

删除pages文件夹下的logs目录及其内部所有内容

删除index.wxml和index.wxss中的全部代码

删除index.js中的代码 并输入page找到第二个选项按回车键让其自动补全函数

删除app.wxss中的全部代码

 会自动补全以下代码：

---

删除app.js中的全部代码，并且输入关键词app

 按回车键自动补全代码

---

小程序默认导航栏为黑底白字

需在index.json中自定义导航栏标题和背景颜色

{
  "navigationBarTitleText": "钱包",
  "navigationBarBackgroundColor": "#686F79" //灰色
}

页面设计

顶端钱包状态栏

腾讯服务栏

/**index.wxss**/
.container{
height: 100vh;
background-color: silver;
display: flex;
flex-direction: column;
}
.topPanel{
  height: 300rpx;
  background-color: #686F79;
  display: flex;
  flex-direction: row; /*水平布局*/
}
/* 腾讯服务栏 */
.servicePanel{
  min-height: 600rpx;
  background-color: white;
   margin: 20px 0;  /*上下外边距20rpx 左右0*/
}

/* 第一行标题样式 */
.serviceTitle{
  padding: 20rpx; /*四周内边距*/
  border: 1rpx solid silve