微信小程序 首页制作简单实例
实现效果图：
首先从大的方面来讲，就是设置了window的属性
"navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色"navigationBarTextStyle": "white",//bar字体颜色"backgroundColor": "white",//背景颜色"enablePullDownRefresh": "true"//下拉是否刷新
tabBar属性
完整代码如下（wxml）
1 广从1号线 市汽车客运站-从化汽车站 2 广从2号线 芳村汽车客运站-从化汽车站 3 广从3号线 罗冲围汽车客运站-从化汽车站 > 4 广从4快号线 天河客运站 -从化汽车站 4 广从4线 天河客运站 -从化汽车站 5 广从5号线 东站汽车客运站-从化汽车站 6 广从6号线 东圃客运站-从化汽车站 > 7 广从7号线 黄埔客运站-从化汽车站 > 8 广从8号线 广园汽车客运站-从化汽车站 > 8 广从8快线 广园汽车客运站-从化汽车站 > 9 广从9号线 滘口汽车客运站-从化汽车站 > 10 广从10号线 越秀南客运站-从化汽车站 > 10 广从10快线 越秀南客运站-从化汽车站 > 11 广从11号线 海珠汽车客运站-从化汽车站
wxss
.waylist{display: flex;border-bottom: 1px solid gray;font-size: 13px;}.waylist view{height:40px;line-height: 40px;}.waylist .im{width: 25px;height: 25px;line-height: 25px;text-align: center;color:white;margin-top: 7.5px;margin-right: 5px;border-radius: 50px;margin-left: 5px;}.ste{color:gray;text-align: left;font-size: 12px;width: 60%;}.way{width: 30%;}.jian{text-align: right;font-size: 20px;color:gray;}.hidden{visibility: hidden;}image{margin-top:5px;}.im1{}.im2{}.im3{}.im4{}.im5{}.im6{}.im7{}.im8{}.im9{}.im10{}.im11{}json文件
{"navigationBarTitleText": "所有广从线"//bar内容}js文件
Page({data:{},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭},})以上就是微信开发之首页制作代码示例的详细内容，更多请关注php中文网其它相关文章！
