微信小程序--基本操作

ps:了解小程序的相关组件，搭建简单的小程序。
具体配置地址
https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/file.html#JSON-%E9%85%8D%E7%BD%AE（转自微信）

- app.json中配置内容

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
我们简单说一下这个配置各个项的含义:

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

- project.config.json配置

都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/edit.html#%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6

- page.json页面配置

页面个性化设置，颜色、是否可下拉。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

- 开始开发

新建一个目录，包含.wxml、.wxss 、.js 文件。

app.json中进行配置page
"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/user/user"
  ]

保存代码出现如下提示：
VM1572:1 pages/user/user.js 出现脚本错误或者未正确调用 Page()
：

在user.js文件中添加   page({});

底部选项卡tabBar的设置：

 "tabBar":{
    "color": "#707070",
    "selectedColor": "#4183c4",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "image/nav_homed_icon.png",
        "iconPath": "image/nav_home_icon.png",//默认icon
        "pagePath": "pages/index/index",//切换页面
        "text": "首页"
      },
      {
        "selectedIconPath": "image/nav_ordered_icon.png",
        "iconPath": "image/nav_order_icon.png",
        "pagePath":"pages/order/order",
        "text": "订单"
      },
      {
        "selectedIconPath": "image/nav_usered_icon.png",
        "iconPath": "image/nav_user_icon.png",
        "pagePath":"pages/user/user",
        "text": "我的"
      }
    ]
  }

动态改变标题栏颜色

在对应的js文件中 onLoad function()中设置：
  wx.setNavigationBarColor({
      /**
      *前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
      */
      frontColor: '#ffffff',
      /**
      *背景颜色值，有效值为十六进制颜色
      */
      backgroundColor: '#ff0000',
      /**
      *动画效果参考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/setNavigationBarColor.html
      */
      animation: {
        duration: 400,
        timingFunc: 'easeOut'
      }
    })

修改背景颜色:

在相对应的.wxss文件中添加样式
page{
  min-height: 100%;
  background-color:  #fofofo;
}

不要设置多余的class

container没有设置属性时，可能会导致下图的情况的产生.

所以在不需要对外层的view设置属性的时候删除掉class="container"这个类选择器

文本竖直居中的问题

<view>哈哈</view> 文字竖直方向的居中
line-height:/**例 50px(不要用100%，与父节点的高度设置保持一致)*/;

顶部选项卡的实现

1. 采用swiper实现（可滑动）

wxml

<view class='order_container'>
  <view class='swiper-tab'>
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichTab">全部
    </view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ' '}}" data-current="1" bindtap="swichTab">有效单</view>
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ' '}}" data-current="2" bindtap="swichTab">待支付</view>
    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ' '}}" data-current="3" bindtap="swichTab">退款单</view>
  </view>
  <swiper current="{{currentTab}}" class="swiper-option" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

    <swiper-item>
      <view>全部订单</view>
    </swiper-item>

    <swiper-item>
      <view>有效订单</view>
    </swiper-item>

    <swiper-item>
      <view>待支付</view>
    </swiper-item>

    <swiper-item>
      <view>退款单</view>
    </swiper-item>
  </swiper>
</view>

wxss

page{
  min-height: 100%;
  display: block;
  background-color:#edebee;
}
.swiper-tab{
  width: 100%;
  line-height: 110rpx;
  text-align: center;
  vertical-align: middle;
  background-color: white;
}
.swiper-tab-list{
   width: 25%;
   height: 100%;
   font-size: 15px;
   font-weight:500;
   display: inline-block;
}
.on{
   color: #00bcd4;
   border-bottom: 5rpx solid #00bcd4;
}
.swiper-option{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swiper-option view{
  text-align: center;
}

js

//获取应用实例  
var app=getApp()
Page({

  /**
 1. 页面的初始数据
   */
  data: {
    /** 
     * 页面配置 
     */
    winWidth: 0,
    winHeight: 0,
    // tab切换  
    currentTab: 0,  
  },

  /**
 2. 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

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

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });  
  },
  /** 
    * 滑动切换tab 
    */
  bindChange: function (e) {

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

  },  

  /** 
 3. 点击tab切换 
  */
  swichTab: function (e) {

    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },  

  /**
 4. 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
 5. 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
 6. 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
 7. 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
 8. 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
 9. 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
 10. 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

2. 可滑动选项卡

 <scroll-view class='index-container' scroll-x='true'>
      <view class="index-nav-item">首页</view>
      <view class="index-nav-item">服饰</view>
      <view class="index-nav-item">百货</view>
      <view class="index-nav-item">鞋包</view>
      <view class="index-nav-item">母婴</view>
      <view class="index-nav-item">食品</view>
      <view class="index-nav-item">电器</view>
      <view class="index-nav-item">手机</view>
      <view class="index-nav-item">体育</view>
    </scroll-view>

在scroll-view的样式设置添加：

 white-space: nowrap;//强制一行显示,否则超过容器范围会出现换行的情况！

对应切换事件暂未添加……！