在上篇文章组件（一）里已经讲解了如何创建一个项目，现在继续。。。讲解一个页面布局以及各个组件的使用。在学习过程中，发现小程序支持flex布局，这对于学习过react native的人来说太好了，布局方面不用担心了。下面来看tab的创建

在使用微信小程序编译代码的工具时，快捷键的使用必不可少，所有快捷键在这里有讲解：小程序编译器快捷键

1.根据我上篇文章介绍，有讲如何创建一个小程序项目，效果如图所示：

2.之前讲解过app.json里是定义全局的一些东西，包括整体颜色风格，路由等等，详细配置讲解见官网。下面是app.json里的代码，调整了背景颜色以及创建了两个tab模块。

  1. {
  2.   "pages": [
  3.     "pages/component/index/index",
  4.     "pages/component/logs/logs"
  5.   ],
  6.   "window": {
  7.     "navigationBarBackgroundColor": "#F8F8F8",
  8.     "navigationBarTitleText": "wxTestOne",
  9.     "navigationBarTextStyle": "black",
  10.     "backgroundColor": "#F8F8F8"
  11.   },
  12.   "tabBar": {
  13.     "color": "#7A7E83",
  14.     "selectedColor": "#3cc51f",
  15.     "borderStyle": "black",
  16.     "backgroundColor": "#ffffff",
  17.     "list": [
  18.       {
  19.         "pagePath": "pages/component/index/index",
  20.         "iconPath": "images/icon_component.png",
  21.         "selectedIconPath": "images/icon_component_HL.png",
  22.         "text": "组件"
  23.       },
  24.       {
  25.         "pagePath": "pages/component/logs/logs",
  26.         "iconPath": "images/icon_API.png",
  27.         "selectedIconPath": "images/icon_API_HL.png",
  28.         "text": "组件"
  29.       }
  30.     ]
  31.   }
  32. }

注意看红色圈出的部分是新添加的模块，这里只要在app.json添加正确页面路由的代码，左侧边栏项目文件里就会多出相对应的页面文件（.js .json .wxml .wxss），当然也可以鼠标右键来添加想要的文件。效果如图：

3.“组件”这个tab模块对应的是“index”，“接口”tab对应的模块是logs（上图右边tab名字应该是“接口”）。接下来在 组件 页面显示列表，代码如下：

index.wxml代码：

  1. <!--pages/component/index/index.wxml-->
  2. <view class="index">
  3.   <view class="index-hd">
  4.     <image class="index-logo" src="../../resources/kind/logo.png"></image>
  5.     <view class="index-desc">以下将展示小程序官方组件能力，组件样式仅供参考，开发者可根据自身需求自定义组件样式，具体属性参数详见小程序开发文档。</view>
  6.   </view>
  7.   <view class="index-bd">
  8.     <view class="kind-list">
  9.       <block wx:for-items="{{list}}" wx:key="{{item.id}}">
  10.         <view class="kind-list-item">
  11.           <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
  12.             <view class="kind-list-text">{{item.name}}</view>
  13.             <image class="kind-list-img" src="../../resources/kind/{{item.id}}.png"></image>
  14.           </view>
  15.           <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
  16.             <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
  17.               <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
  18.                 <navigator url="pages/{{page}}/{{page}}" class="navigator">
  19.                   <view class="navigator-text">{{page}}</view>
  20.                   <view class="navigator-arrow"></view>
  21.                 </navigator>
  22.               </block>
  23.             </view>
  24.           </view>
  25.         </view>
  26.       </block>
  27.     </view>
  28.   </view>
  29. </view>

　　index.js代码：

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     list: [
  8.       {
  9.         id: 'view',
  10.         name: '视图容器',
  11.         open: false,
  12.         pages: ['view', 'scroll-view', 'swiper']
  13.       }, {
  14.         id: 'content',
  15.         name: '基础内容',
  16.         open: false,
  17.         pages: ['text', 'icon', 'progress']
  18.       }, {
  19.         id: 'form',
  20.         name: '表单组件',
  21.         open: false,
  22.         pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
  23.       }, {
  24.         id: 'nav',
  25.         name: '导航',
  26.         open: false,
  27.         pages: ['navigator']
  28.       }, {
  29.         id: 'media',
  30.         name: '媒体组件',
  31.         open: false,
  32.         pages: ['image', 'audio', 'video']
  33.       }, {
  34.         id: 'map',
  35.         name: '地图',
  36.         pages: ['map']
  37.       }, {
  38.         id: 'canvas',
  39.         name: '画布',
  40.         pages: ['canvas']
  41.       }
  42.     ]
  43. },
  44.  
  45.   kindToggle: function (e) {
  46.     var id = e.currentTarget.id, list = this.data.list;
  47.     for (var i = 0, len = list.length; i < len; ++i) {
  48.       if (list[i].id == id) {
  49.         list[i].open = !list[i].open
  50.       } else {
  51.         list[i].open = false
  52.       }
  53.     }
  54.     this.setData({
  55.       list: list
  56.     });
  57.   },
  58.  
  59.   /**
  60.    * 生命周期函数--监听页面加载
  61.    */
  62.   onLoad: function (options) {
  63.  
  64.   },
  65.  
  66.   /**
  67.    * 生命周期函数--监听页面初次渲染完成
  68.    */
  69.   onReady: function () {
  70.  
  71.   },
  72.  
  73.   /**
  74.    * 生命周期函数--监听页面显示
  75.    */
  76.   onShow: function () {
  77.  
  78.   },
  79.  
  80.   /**
  81.    * 生命周期函数--监听页面隐藏
  82.    */
  83.   onHide: function () {
  84.  
  85.   },
  86.  
  87.   /**
  88.    * 生命周期函数--监听页面卸载
  89.    */
  90.   onUnload: function () {
  91.  
  92.   },
  93.  
  94.   /**
  95.    * 页面相关事件处理函数--监听用户下拉动作
  96.    */
  97.   onPullDownRefresh: function () {
  98.  
  99.   },
  100.  
  101.   /**
  102.    * 页面上拉触底事件的处理函数
  103.    */
  104.   onReachBottom: function () {
  105.  
  106.   },
  107.  
  108.   /**
  109.    * 用户点击右上角分享
  110.    */
  111.   onShareAppMessage: function () {
  112.  
  113.   }
  114. })

　　index.wxss代码：

  1. .index-hd {
  2.   padding: 80rpx;
  3.   text-align: center;
  4. }
  5.  
  6. .index-bd {
  7.   padding: 0 30rpx 40rpx;
  8. }
  9.  
  10. .index-ft {
  11.   padding-bottom: 20rpx;
  12.   text-align: center;
  13. }
  14.  
  15. .index-logo {
  16.   width: 86rpx;
  17.   height: 86rpx;
  18. }
  19.  
  20. .index-desc {
  21.   margin-top: 20rpx;
  22.   color: #888;
  23.   font-size: 28rpx;
  24. }
  25.  
  26. .navigator-box {
  27.   opacity: 0;
  28.   position: relative;
  29.   background-color: #fff;
  30.   line-height: 1.41176471;
  31.   font-size: 34rpx;
  32.   transform: translateY(-50%);
  33.   transition: 0.3s;
  34. }
  35.  
  36. .navigator-box-show {
  37.   opacity: 1;
  38.   transform: translateY(0);
  39. }
  40.  
  41. .navigator {
  42.   padding: 20rpx 30rpx;
  43.   position: relative;
  44.   display: flex;
  45.   align-items: center;
  46. }
  47.  
  48. .navigator:before {
  49.   content: " ";
  50.   position: absolute;
  51.   left: 30rpx;
  52.   top: 0;
  53.   right: 30rpx;
  54.   height: 1px;
  55.   border-top: 1rpx solid #d8d8d8;
  56.   color: #d8d8d8;
  57. }
  58.  
  59. .navigator:first-child:before {
  60.   display: none;
  61. }
  62.  
  63. .navigator-text {
  64.   flex: 1;
  65. }
  66.  
  67. .navigator-arrow {
  68.   padding-right: 26rpx;
  69.   position: relative;
  70. }
  71.  
  72. .navigator-arrow:after {
  73.   content: " ";
  74.   display: inline-block;
  75.   height: 18rpx;
  76.   width: 18rpx;
  77.   border-width: 2rpx 2rpx 0 0;
  78.   border-color: #888;
  79.   border-style: solid;
  80.   transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  81.   position: absolute;
  82.   top: 50%;
  83.   margin-top: -8rpx;
  84.   right: 28rpx;
  85. }
  86.  
  87. .kind-list-item {
  88.   margin: 20rpx 0;
  89.   background-color: #fff;
  90.   border-radius: 4rpx;
  91.   overflow: hidden;
  92. }
  93.  
  94. .kind-list-item:first-child {
  95.   margin-top: 0;
  96. }
  97.  
  98. .kind-list-text {
  99.   flex: 1;
  100. }
  101.  
  102. .kind-list-img {
  103.   width: 60rpx;
  104.   height: 60rpx;
  105. }
  106.  
  107. .kind-list-item-hd {
  108.   padding: 30rpx;
  109.   display: flex;
  110.   align-items: center;
  111.   transition: opacity 0.3s;
  112. }
  113.  
  114. .kind-list-item-hd-show {
  115.   opacity: 0.2;
  116. }
  117.  
  118. .kind-list-item-bd {
  119.   height: 0;
  120.   overflow: hidden;
  121. }
  122.  
  123. .kind-list-item-bd-show {
  124.   height: auto;
  125. }

　　app.wxss代码：

  1. /**app.wxss**/
  2. /* reset */
  3. page {
  4.   background-color: #F8F8F8;
  5.   height: 100%;
  6.   font-size: 32rpx;
  7.   line-height: 1.6;
  8. }
  9. checkbox, radio{
  10.   margin-right: 10rpx;
  11. }
  12. button{
  13.   margin-top: 20rpx;
  14.   margin-bottom: 20rpx;
  15. }
  16. form{
  17.   width: 100%;
  18. }
  19.  
  20. /* lib */
  21. .strong{
  22.   font-weight: bold;
  23. }
  24. .tc{
  25.   text-align: center;
  26. }
  27.  
  28. /* page */
  29. .container {
  30.   display: flex;
  31.   flex-direction: column;
  32.   min-height: 100%;
  33.   justify-content: space-between;
  34.   font-size: 32rpx;
  35.   font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  36. }
  37. .page-head{
  38.   padding: 60rpx 50rpx 80rpx;
  39.   text-align: center;
  40. }
  41. .page-head-title{
  42.   display: inline-block;
  43.   padding: 0 40rpx 20rpx 40rpx;
  44.   font-size: 32rpx;
  45.   color: #BEBEBE;
  46. }
  47. .page-head-line{
  48.   margin: 0 auto;
  49.   width: 150rpx;
  50.   height: 2rpx;
  51.   background-color: #D8D8D8;
  52. }
  53. .page-head-desc{
  54.   padding-top: 20rpx;
  55.   color: #9B9B9B;
  56.   font-size: 32rpx;
  57. }
  58.  
  59. .page-body {
  60.   width: 100%;
  61.   flex-grow: 1;
  62.   overflow-x: hidden;
  63. }
  64. .page-body-wrapper {
  65.   display: flex;
  66.   flex-direction: column;
  67.   align-items: center;
  68.   width: 100%;
  69. }
  70. .page-body-wording {
  71.   text-align: center;
  72.   padding: 200rpx 100rpx;
  73. }
  74. .page-body-info {
  75.   display: flex;
  76.   flex-direction: column;
  77.   align-items: center;
  78.   background-color: #fff;
  79.   width: 100%;
  80.   padding: 50rpx 0 150rpx 0;
  81. }
  82. .page-body-title {
  83.   margin-bottom: 100rpx;
  84.   font-size: 32rpx;
  85. }
  86. .page-body-text {
  87.   font-size: 30rpx;
  88.   line-height: 26px;
  89.   color: #ccc;
  90. }
  91. .page-body-text-small {
  92.   font-size: 24rpx;
  93.   color: #000;
  94.   margin-bottom: 100rpx;
  95. }
  96.  
  97. .page-foot{
  98.   margin: 100rpx 0 30rpx 0;
  99.   text-align: center;
  100.   color: #1aad19;
  101.   font-size: 0;
  102. }
  103. .icon-foot{
  104.   width: 152rpx;
  105.   height: 23rpx;
  106. }
  107.  
  108. .page-section{
  109.   width: 100%;
  110.   margin-bottom: 60rpx;
  111. }
  112. .page-section_center{
  113.   display: flex;
  114.   flex-direction: column;
  115.   align-items: center;
  116. }
  117. .page-section:last-child{
  118.   margin-bottom: 0;
  119. }
  120. .page-section-gap{
  121.   box-sizing: border-box;
  122.   padding: 0 30rpx;
  123. }
  124. .page-section-spacing{
  125.   box-sizing: border-box;
  126.   padding: 0 80rpx;
  127. }
  128. .page-section-title{
  129.   font-size: 28rpx;
  130.   color: #999999;
  131.   margin-bottom: 10rpx;
  132.   padding-left: 30rpx;
  133.   padding-right: 30rpx;
  134. }
  135. .page-section-gap .page-section-title{
  136.   padding-left: 0;
  137.   padding-right: 0;
  138. }
  139. .page-section-ctn{
  140.  
  141. }
  142.  
  143. /* widget */
  144. .btn-area{
  145.   margin-top: 60rpx;
  146.   box-sizing: border-box;
  147.   width: 100%;
  148.   padding: 0 30rpx;
  149. }
  150.  
  151. .image-plus {
  152.   width: 150rpx;
  153.   height: 150rpx;
  154.   border: 2rpx solid #D9D9D9;
  155.   position: relative;
  156. }
  157. .image-plus-nb{
  158.   border: 0;
  159. }
  160. .image-plus-text{
  161.   color: #888888;
  162.   font-size: 28rpx;
  163. }
  164. .image-plus-horizontal {
  165.   position: absolute;
  166.   top: 50%;
  167.   left: 50%;
  168.   background-color: #d9d9d9;
  169.   width: 4rpx;
  170.   height: 80rpx;
  171.   transform: translate(-50%, -50%);
  172. }
  173. .image-plus-vertical {
  174.   position: absolute;
  175.   top: 50%;
  176.   left: 50%;
  177.   background-color: #d9d9d9;
  178.   width: 80rpx;
  179.   height: 4rpx;
  180.   transform: translate(-50%, -50%);
  181. }
  182.  
  183. .demo-text-1{
  184.   position: relative;
  185.   align-items: center;
  186.   justify-content: center;
  187.   background-color: #1AAD19;
  188.   color: #FFFFFF;
  189.   font-size: 36rpx;
  190. }
  191. .demo-text-1:before{
  192.   content: 'A';
  193.   position: absolute;
  194.   top: 50%;
  195.   left: 50%;
  196.   transform: translate(-50%, -50%);
  197. }
  198. .demo-text-2{
  199.   position: relative;
  200.   align-items: center;
  201.   justify-content: center;
  202.   background-color: #2782D7;
  203.   color: #FFFFFF;
  204.   font-size: 36rpx;
  205. }
  206. .demo-text-2:before{
  207.   content: 'B';
  208.   position: absolute;
  209.   top: 50%;
  210.   left: 50%;
  211.   transform: translate(-50%, -50%);
  212. }
  213. .demo-text-3{
  214.   position: relative;
  215.   align-items: center;
  216.   justify-content: center;
  217.   background-color: #F1F1F1;
  218.   color: #353535;
  219.   font-size: 36rpx;
  220. }
  221. .demo-text-3:before{
  222.   content: 'C';
  223.   position: absolute;
  224.   top: 50%;
  225.   left: 50%;
  226.   transform: translate(-50%, -50%);
  227. }

　　效果如图：

  

　　

微信小程序——组件（二）的更多相关文章

  1. 微信小程序配置二

    tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedC ...

  2. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  3. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  4. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  5. 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  6. 微信小程序组件——详解wx:if elif else的用法

    背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...

  7. 微信小程序组件构建UI界面小练手 —— 表单登录注册微信小程序

    通过微信小程序中丰富的表单组件来完成登录界面.手机快速注册界面.企业用户注册界面的微信小程序设计. 将会用到view视图容器组件.button按钮组件.image图片组件.input输入框组件.che ...

  8. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  9. 微信小程序(组件demo)以及预览方法：（小程序交流群：604788754）

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

随机推荐

  1. springboot整合spring data jpa 动态查询

    Spring Data JPA虽然大大的简化了持久层的开发,但是在实际开发中,很多地方都需要高级动态查询,在实现动态查询时我们需要用到Criteria API,主要是以下三个: 1.Criteria ...

  2. java中Map转化为bean

    Map 集合类用于存储元素对(称作“键”和“值”),其中每个键映射到一个值,在java编程中会经常用到.但是当我们进行业务逻辑的处理或着操作数据库时,往往应用的是我们自己定义的的Bean或VO来传递和 ...

  3. <a>标签里面嵌图片<img>下面出现一小段空白的原因

    今天做项目的时候,发现在a标签,里面嵌入<img>会出现空白 css 内容: a{ border:1px solid black; } img{ width:200px; } html内容 ...

  4. es6之 async await 使用小计

    var sleep = (time)=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('ok') ...

  5. Java入门系列-21-多线程

    什么是线程 在操作系统中,一个应用程序的执行实例就是进程,进程有独立的内存空间和系统资源,在任务管理器中可以看到进程. 线程是CPU调度和分派的基本单位,也是进程中执行运算的最小单位,可完成一个独立的 ...

  6. C#操作Redis String字符串

    /// <summary> /// Redis String 操作 /// </summary> public static void Redis_String() { Red ...

  7. YII2应用结构

    应用中最重要的目录和文件(假设应用根目录是 basic): 一般来说,应用中的文件可被分为两类:在 basic/web 下的和在其它目录下的.前者可以直接通过 HTTP 访问(例如浏览器),后者不能也 ...

  8. js confirm实现换行

    js中confirm或者alert不识别标签,所以要换行的话可以采用下面方式 \u000d 或者 \r: <script> var res=confirm(\"这是测试工作: \ ...

  9. C#语言-08.序列化与反序列化

    a. 序列化:是将对象的状态存储到特定存储介质中的过程 i. 语法:public void Serialize(序列化过程的文件流,保存的对象) b. 返序列化:是从特定存储介质中将数据重新构建对象的 ...

  10. 关于webApi使用session

    1.关于webApi使用session 在Global.asax中注册session添加以下代码 public override void Init() { //开启session this.Post ...