微信小程序一些常用代码（1）——tabar、页面跳转、分享、选项卡、radio

初步学习微信小程序，开发过程中发现许多常用的代码块，特此记之，方便以后调用。
一、 tabar

"tabBar": {
      "list": [
        {
          "iconPath": "images/index.png",
          "selectedIconPath": "images/index.png",
          "pagePath": "pages/index/index",
          "text": "搜索"
        },
        {
          "pagePath": "pages/dreams/dreams",
          "text": "首页"
        },
        {
          "pagePath": "pages/myDream/myDream",
          "text": "我"
        }
      ]
    }

二、 页面跳转

方法一：

<navigator url="../index/index">跳转到新页面navigator>
<navigator url="../index/index"open-type="redirect">在当前页打开navigator>
<navigator url="../index/index"open-type="switchTab">切换到首页Tabnavigator>

方法二：

bindTp:function(){
    //保留当前页面，跳转到应用内的某个页面
    wx.navigateTo({
      url:''
    })
    //关闭当前页面，跳转到应用内的某个页面
    wx.redirectTo({
      url: '',
    })
    //跳转到tabBar页面，并关闭其他所有的tabBar页面
    wx.switchTab({
      url: '',
    })
    //返回上一页面或多级页面
    wx.navigateBack({
      data:1
    })
  },

三、设置页面分享

onShareAppMessage: function () {
    return {
      title: '周公解梦', 
      path: '/pages/index/index', 
      success: function (res) {
            console.log(res)
      }
    }
  }

带参数页面分享

onShareAppMessage: function () {
    return {
      title: '周公解梦', 
      path: '/pages/index/index?id=3', 
      success: function (res) {
            console.log(res)
      }
    }
  }

获取传递过来的参数

onLoad: function (options) {
    if (options.uid != undefined){
      wx.showToast({
        title: '来自用户：' + options.uid +"的分享",
        icon:'success',
        duration:2000
      })
    }
}

四、微信小程序之选项卡
在发现选项卡之前，要想实现这个功能我只能想到写多个xml文件实现转换，或者在wxml界面进行判断，今天又get到一个新技能！可参考以下网址：http://www.wxapp-union.com/article-2350-1.html

wxml文件：

<view class="swiper-tab">  
    <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">最新view>  
    <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">热门view>   
view>  

<view class="mjlist" wx:for="{{dreams}}">
<view class="nrzt" bindtap="dream" data-dreamCode="{{item.dreamCode}}">
<view class="nrztz">
<view class="tx"><image src="{{item.memberAvatar}}" style="width: 40px; height: 40px;">image>view>
<view class="nr">
<view class="mc">{{item.memberName}}view>
<view class="mj">{{item.dreamDetail}}view>
<view class="ms"><image src="../../images/timeIcon.png" style="width: 15px; height: 15px; position: relative; top:3px;">image>{{item.dateAdd}} <image src="../../images/message.png" style="width: 15px; height: 15px; position: relative; top:3px;">image>已有{{item.dreamOneiromancy}}人解梦view>
view>
<view class="yj"><image src="../../images/zjt.png" style="width: 40px; height: 40px;">image>view>
view>
view>
view>

<view class="ckgd" bindtap="more" data-property="{{property}}">+ 查看更多 +view>


<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px; display:none;" bindchange="bindChange"> 
 <swiper-item>  
    
  swiper-item>  
  <swiper-item>  
    
  swiper-item>  
swiper>

wcss文件

.nav{ width: 100%; height: 50px; margin: 0 auto; background: #fff; border-bottom: 1px solid #e8e3dd;}
.nav .navz{ width: 50%; height: 50px; float:left; background:#f9f9f9; border-right: 1px solid #e8e3dd; text-align: center; line-height: 50px; color:#7e7e7e; font-size: 18px;}
.nav .navy{ width: 49%; height: 50px; float: right; background: #fff; line-height: 50px; color:#bcbcbc; font-size: 18px;  text-align: center;}

/*梦境列表*/
.mjlist{ width: 100%; height: auto; margin: 0 auto;  background: #fff; border-bottom:1px solid #e8e3dd; padding-top: 10px; padding-bottom: 10px; overflow: hidden;}
.mjlist .nrzt{ width: 90%; height: auto; margin: 0 auto;}
.mjlist .nrztz{ width: 100%; height:auto; margin: 0 auto;}
.mjlist .nrztz .tx{ width: 17%; height: auto; float: left;}
.mjlist .nrztz .nr{ width: 65%; height: auto; float:left;}
.mjlist .nrztz .nr .mc{ width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #b2b2b2;}
.mjlist .nrztz .nr .mj{ width: 100%; line-height: 20px;  font-size: 14px; color: #666;}
.mjlist .nrztz .nr .ms{ width: 100%; height: 24px; line-height: 24px; font-size: 13px; color: #b2b2b2;}
.mjlist .nrztz .yj{ width: 15%; height: auto; float: right; }
 .ckgd { width: 100%; height: 45px; margin: 0 auto; background: #fff;  line-height: 45px; text-align: center; color: #b7b7b7; font-size: 14px; }

 .swiper-tab{  
    width: 100%;  height: 50px; 
    border-bottom: 2rpx solid #eeeeee;  
    text-align: center;  
    line-height: 50px; background: #fff;}  
.swiper-tab-item{  font-size: 18px;  
    display: inline-block;  
    width: 50%;  
    color: #666666;  
}  
.on{ color: #666;  
     background:#f9f9f9;}  
.swiper-box{ display: block; height: auto; width: 100%; overflow: hidden; }  
.swiper-box view{  
    text-align: center;  
}  

js文件

var app = getApp()
var limit = app.globalData.limit
var url = app.globalData.url
var i = 0
Page({
    data: {
        winWidth: 0,
        winHeight: 0,
        // tab切换  
        currentTab: 0,

      },
    bindChange: function (e) {
        var that = this;
        that.setData({ currentTab: e.detail.current });
        console.log("bindChange");
        if (e.detail.current=='0' ){
          console.log("这是0");
          that.newlist();
        }else{
          console.log("这是1");
          that.hot();
        }
      },
      swichNav: function (e) {
        console.log("swichNav");
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          console.log('false');
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })

        }
      },
    onLoad: function (options) {
        var that= this
        wx.getSystemInfo({
          success: function (res) {
            that.setData({
              winWidth: res.windowWidth,
              winHeight: res.windowHeight
            });
          }
        });
        this.newlist();
      },
 })

五、小程序分页之点击加载更多
若想实现点击加载更多功能，主要是使用了concat函数，具体使用可以参考
http://www.jb51.net/article/98558.htm

 onLoad: function (options) {
    var s="123"
    console.log(s)
    console.log(s.concat("aass"));
 }

六、radio样式的修改
在实际开发中经常需要对原生的radio样式进行大小和选中样式的修改，具体代码如下：

radio .wx-radio-input {
  width: 48rpx;
  height: 48rpx;
}
radio .wx-radio-input.wx-radio-input-checked {
  background-color: #15b2e2 !important;
  border-color: #15b2e2 !important;
}