小程序

一、准备

• 注册账号
  账号类型以及认证都关系到很多使用权限

• 配置后台服务器
  需要合法的域名，并且在绑定时还需要验证，其他链接都需要分别配置域名

• API
  阅读官方的文档基本就可以满足

• 工具
  下载官方开发工具

二、创建简单的项目

2.1 项目设计及结构

• 官方文档有简易教程、框架、组件、API等，开发前建议都浏览一遍
  开发链接
• 官方还制定了设计要求
  设计链接

至于介绍、运营、数据等官方都有介绍

2.2 一个带有自动滚动的标签导航示例

• 当用户点击到边缘的标签时，滑动导航条会自动滚动适当的距离

• 手指滑动下方的tab ，同样会和导航同步

  
  项目结构以及app.json配置

部分源码：
lights.js

//获取应用实例
// var app = getApp();
Page({
  data: {
    scrollLeft: 0, //tab标题的滚动条位置
    winWidth: 0, //窗口宽度
    winHeight: 0, //窗口高度
    currentTab: 0, //// 当前tab
    oldCurrentTab: 0, //// tab 旧值
    tabItemWidth:0, //tab 子元素宽度
    switchStatus: [false, false, true, false, false],
    rooms:[{
      id:0,
      name:"客房"
    }, {
      id:1,
      name: "卧室",
      switches: [{ id: 1, name: "灯1" }, { id: 2, name: "灯2" }, { id: 3, name: "灯3" }]
    }, {
      id:2,
      name: "卫生间"
    }, {
      id:3,
      name: "客厅1"
    }, {
      id:4,
      name: "客厅2"
    }, {
      id:5,
      name: "客厅3"
    }]
  },
  onLoad: function () {
    var that = this;

    //tab 子元素一屏的个数
    var tabItemCount = 3;

    /**
     * 获取系统信息
     */
    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight,
          tabItemWidth: res.windowWidth / tabItemCount //计算tab子元素宽度
        });
      }

    });
  },
  /**
  * 页面隐藏
  */
  onHide: function () {
    this.setData({
      switchStatus: [false, false, false, false, false]
    });
  },
  /**
     * 滑动切换tab
     * current改变触发change
     */
  bindChange: function (e) {

    // var that = this;

    this.setData({ 
      currentTab: e.detail.current 
      });

    //根据新值计算增量
    var increase = this.data.currentTab - this.data.oldCurrentTab;
    
    //重置旧值
    this.setData({
      oldCurrentTab: this.data.currentTab
    });
    
    //检查是否需要滚动
    this.checkCor(increase); 
  },
  /**
   * 点击tab切换
   */
  swichNav: function (e) {

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      this.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function (increase) {

    var marginal = 1; //需要滚动的边缘临界值
    

    if (this.data.currentTab > marginal) {

      //只判断大于0，会导致点击手动滑动切换tab时老旧值相等，增量为0，从而误判
      var scrollValue = increase > 0 ? (this.data.scrollLeft + this.data.tabItemWidth) : (this.data.scrollLeft - this.data.tabItemWidth);
      this.setData({
        scrollLeft: scrollValue
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  /**
   * 点击tab切换
   */
  switchChange: function (e) {
    // console.log(e.detail.value);
    // console.log(e.target.dataset.id);
    // console.log(e);
    // this.data.switchStatus[e.target.dataset.id] = e.detail.value

    //在setData中，"switchStatus[1]"=e.detail.value ,可以设置数组的某项值，但是index不能动态，也就是不可以传参数，唯一的方法就是在外面拼接好所需要的字符串（在setData下拼接同样会报错）
    var statusAddr = "switchStatus[" + e.target.dataset.id+"]"
    this.setData({
      [statusAddr]: e.detail.value
    });
  }
})

lights.wxml

<!--lights.wxml-->
<scroll-view class="swiper-tab" scroll-x="true" scroll-left="{{scrollLeft}}">
    <block wx:for="{{rooms}}" wx:for-item="room" wx:key="*this">
      <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav" style="width:{{tabItemWidth}}px">
      {{room.name}}
      </view>
    </block>
</scroll-view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

    <block wx:for="{{rooms}}"  wx:for-item="room" wx:key='{{room.id}}'>
      <swiper-item>

        <!-- <view>{{item.name_zh}}</view> -->
        <block wx:if="{{room.id == 1}}">
          <block wx:for="{{room.switches}}" wx:for-item="switch" wx:key="{{switch.id}}">
            <view class='switch-list-item'>
              <view class='switch-list-text'>{{switch.name}}</view>
              <switch checked='{{switchStatus[switch.id]}}' class='switch-list-switch' bindchange='switchChange' data-id="{{switch.id}}"></switch>
            </view>
          </block>
        </block>
        <block wx:else>
        <view>{{room.name}}</view>
        </block>
      </swiper-item>
    </block>
</swiper>

lights.wxss

/* lights.wxss */
.swiper-tab{  
    width: 100%;
    border-bottom: 2rpx solid #777777;  
    text-align: center;  
    line-height: 80rpx;
    overflow: hidden;
    display: inline-block;
    /*不换行*/
     white-space: nowrap;  
}  
.swiper-tab-list{
    /* width: 80pt;   */
    font-size: 30rpx;  
    display: inline-block;   
    color: #777777;  
}  
.on{
    color: #da7c0c;  
    border-bottom: 5rpx solid #da7c0c;}  
  
.swiper-box{
    display: block;
    height: 100%; 
    width: 100%; 
    overflow: hidden;
}  
.swiper-box view{  
    text-align: center;  
} 

/*switch  */
.switch-list-item {
  margin: 20rpx 20rpx;
  background-color: #F8F8F8;
  border-radius: 5rpx;
  overflow: hidden;
  height: 120rpx;
  align-items: center; 
  display: flex;
}
.switch-list-text{
  flex: 1;
}
.switch-list-switch {
  flex: 1;
}