微信网页单页面设计 第1篇
调试基础库>=
微信客户端版本>=
自定义的页面.json：
两者的区别就是，全局配置放在文件里，单页面配置放在自定义页面配置文件里。
以下说下几个要点：
1、自定义导航栏文本，是否显示返回，是否显示返回首页，导航栏高度。
2、 statusBarHeight，用来获取手机状态栏的高度，这个需要在全局中的 onLaunch，调用 获取， navigationBarHeight + 默认的高度，这个是设定整个导航栏的高度。
3、还有注意的，在写样式距离和大小时建议都用px，因小程序右边的胶囊也是用的px，不是rpx。
4、因为自定义导航栏每个页面都要写，所以把导航栏封装了公共组件，这样只需要在每个页面引入即可。
如下是封装的导航栏组件：
微信网页单页面设计 第2篇
在layout文件中新建一个.xml文件，命名为，布局（RootTag）设置为LinearLayout，创建完成后拖入一个TextView空间至LinearLayout下 在code界面设置字体大小、颜色及背景颜色等
代码解析
设置完成后效果图如下
imageView选择如下 在code页面设置字体和相对布局等
代码解析
设置完成后效果图如下
主题界面布局仍为LinearLayout，但布局组件排列方式为vertical（垂直） 在控件搜索栏中搜索include，拖两个进入LinearLayout中，并分别选择top，bottom界面引入，之后向LinearLayout中拖入FragmentContainerView用于页面内容显示 在code页面代码设置如下
代码解析
在layout中新建四个.xml文件命名分别为fragment_first到fragment_forth，布局Root Tag均为LinearLayout
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
在linearlayout中拖入一个TextView作为展示内容 代码配置
代码解析
完成后效果图展示
微信网页单页面设计 第3篇
1.制作底部导航栏
bottom平均分成四块，每块由一个图片和一个文字构成。可以用水平的LinearLayout中再包裹一个竖直的LinearLayout，被包裹的每个LinearLayout里包含一个ImageButton和TextView控件。
准备两组八张图标存放在res-drawable。
添加配置代码：
代码解析：
外部LinearLayout：android:orientation=“horizontal”，布局中组件的排列方式，有horizontal（水平）和vertical（垂直）两种方式。
内部ImageView：tools:srcCompat=_@drawable/tab_weixin_normal_，vector绘制图片的地址。
功能说明（布局展示）：
2.制作顶部的,在res-layout新建一个xml文件：
的配置代码：
代码解析：
android:id=_@+id/textView2_，为组件设置一个资源id，在java文件中可以通过findViewById(id)找到该组件。
android:layout_width=“wrap_content”，布局的宽度，通常不直接写数字，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器。
android:layout_height=“wrap_content”，布局的高度，参数同上。
android:layout_weight=“1”，用来等比例地划分区域。
android:background=_@color/purple_200_，为组件设置一个背景图片，或者直接用颜色覆盖。
android:gravity=“center”,表示textView中的文字相对于TextView的对齐方式。
android:text=“微信”,要显示的文字。
android:textColor=_@color/black_，设置文字的颜色。
android:textSize=“30sp” />，设置文字的大小。
功能说明（布局展示）：
的配置
添加代码：
代码解析：
相关的属性作用和以及类似。
功能说明（布局展示）：
对主页面显示的内容布局。整个主页面使用竖直的LinerLayout，将和导入，以及中间内容content（对应Fragment）。
4.创建Fragment
在java目录下创建四个fragment类，WeChatBlankFragment(微信)、FriBlankFragment(朋友)、FoundBlankFragment(发现)、MeBlankFragment(我)，系统会自动在res-layout目录下生成四个对应的xml文件（可自主命名），对应bottom的四个按钮。
以FriBlankFragment(朋友)为例，配置相关代码
配置FriBlankFragment对应的xml文件代码
5.配置MainActivity
声明所需要的变量
代码解析：
Fragment变量：对应创建的Fragment ，FragmentManager变量：管理Fragment的类 ImageView变量：对应之前创建的ImageView，LinearLayout变量：对应之前创建的LinearLayout
利用FragmentManager对Fragment进行管理，实现页面切换
将所有的Fragment添加进去：
页面的切换（功能）：
为了使所有Fragment不会发生重叠，将所有Fragment都隐藏（功能）：
完成事件的触发
事件触发代码：