03开发一个第一个静态页面

type

status

date

slug

summary

一、初始化项目

删除多余的文件，如图

如果需要新建一个页面，如index，在/miniprogram/pages新建一个index文件夹，然后右键点击该文件夹选择“新建page”。创建完成后可以在app.json的pages字段中看到刚才创建页面的路径。

二、修改页面内容

1、修改标题栏内容

在app.json中window字段内修改，如图

3、修改页面内容

打开刚才新建的page文件夹，wxml控制页面页面内容，所以在index.wxss文件中修改，这时需要用到view组建，参考文档

view | 微信开放文档

微信开发者平台文档

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

4、页面布局，以flex布局为例

Flex 布局教程：语法篇

Flex 布局教程：语法篇 - 阮一峰的网络日志

分类：

https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局教程：实例篇

Flex 布局教程：实例篇 - 阮一峰的网络日志

分类：

https://ruanyifeng.com/blog/2015/07/flex-examples.html

Flexbox 布局的最简单表单

Flexbox 布局的最简单表单 - 阮一峰的网络日志

分类：

https://www.ruanyifeng.com/blog/2018/10/flexbox-form.html

三、自定义导航栏

开发工具中原生的导航栏标题在iOS和安卓分别居中和居左显示，而且不能插入图片，在实际开发中往往需要自定义导航栏。

首先在app.json的window字段中添加"navigationStyle": "custom"然后在每个页面中修改

js文件：

wxss文件

wxml文件

当然，以下是一些具体的步骤来帮助您自定义微信小程序的导航栏：

隐藏原生的navigationBar：在app.json或者页面配置中设置"navigationStyle": "custom"来隐藏原生的navigationBar。例如：

步骤讲解

1.获取胶囊按钮、状态栏相关数据：在onLoad或者onShow方法中，使用wx.getMenuButtonBoundingClientRect()和wx.getSystemInfoSync()来获取这些数据。例如：

2.计算导航栏高度：在WXML中，使用上一步获取的数据来计算导航栏的高度。例如：

3.编写新的导航栏：在WXML中，使用微信小程序提供的各种组件来设计自己的导航栏。例如：

4.引用到页面：在需要自定义导航栏的页面中引用自定义的导航栏组件。例如，在index.json中添加：

然后，在index.wxml中使用：