摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wexinapp</title> </head> <body> <!-- 小程序小结 --> <p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wexinapp</title>
</head>
<body>
<!-- 小程序小结 -->
<p>视图容器【.wxml文件】组件</p>
<p>滑块视图容器。轮播图容器小例子</p>
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500" indicator-color="#A33" indicator-active-color="#FFF">
<swiper-item>
<image src="http://www.wx1.cn/pic/3.jpg"></image>
</swiper-item>
<swiper-item>
<image src="http://www.wx1.cn/pic/4.jpg"></image>
</swiper-item>
.........
</swiper>
<div class="">
<h4>swiper组建属性</h4>
<!-- 轮播图上是否显示指示点只有indicator-dots=""，引号内为空时才不会显示 -->
<h5>indicator-dots="" </h5>
<!-- 是否自动切换 -->
<h5>autoplay="true" </h5>
自动切换时间间隔
<h5>interval="1000"</h5>
<!-- 滑动动画时长 -->
<h5>duration="500"</h5>
<!-- 指示点颜色 -->
<h5>indicator-color="#A33"</h5>
<!-- 指示点选中时的颜色 -->
<h5>indicator-active-color="#FFF"</h5>
<!-- swiper 组建支持自定义样式 -->
<h5>class="m-b-2"</h5>
<hr>
</div>
<div>
<h3>Navigator链接组件小案例</h3>
<navigator url="www.php.cn" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="http://www.php.cn">
<image src='http://www.wx1.cn/pic/8.jpg'></image>
<view>
<view class="size0-9rem hide_size">这里是标题</view>
<view>这里是描述这里是描述这里是描述这里是描述</view>
</view>
</navigator>
<!-- <b>url-----当前小程序内的跳转链接</b> -->
<navigator url="xxx">++++++++</navigator>
</div>
<div>
<b>app.json 全局配置</b>
<script>
"pages":[
"pages/index/index",
"pages/index/about",
"pages/shop/list",
"pages/shop/details",
"pages/news/list",
"pages/news/details"
]
</script>
<h5>pages： 页面路径列表, 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。位于第一个的在首屏展示</h5>
</div>
<script>
"tabBar": {
"color": "#353535",
"selectedColor": "#3cc51f",
"borderStyle": "white",
"backgroundColor": "#eaf4fc",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/img/index.png",
"selectedIconPath": "/img/indexs.png"
},
{
"pagePath": "pages/shop/list",
"text": "产品",
"iconPath": "/img/shop.png",
"selectedIconPath": "/img/shops.png"
},
++++......
]
}
</script>
<p>tabBar:底部导航按钮</p>
<ol>
<li>color --tab上文子的颜色</li>
<li>selectedColor --tab 上的文字选中时的颜色</li>
<li>borderStyle --tabbar上边框的颜色， 仅支持 black / white，黑白两种</li>
<li>backgroundColor --tab 的背景色</li>
</ol>
<script>
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eaf4fc",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
</script>
<b>window:-- 全局的默认窗口[头部窗口]表现</b>
<ol>
<li>backgroundTextStyle-- 下拉 loading 的样式，仅支持 dark / light</li>
<li>navigationBarBackgroundColor-- 导航栏背景颜色，</li>
<li>navigationBarTitleText-- 导航栏标题文字内容 </li>
<li>navigationBarTextStyle-- 导航栏标题颜色，仅支持 black / white </li>
</ol>
</body>
</html>微信小程序前面讲到的组件应用及相关文件配置
批改老师：天蓬老师批改时间：2018-11-18 09:28:27
老师总结：作业合格，在实际开发中，一般会把样式文件和js文件拆分出去
