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

来源:互联网 发布:galgame游戏删除数据 编辑:程序博客网 时间:2024/06/05 09:09

初步学习微信小程序,开发过程中发现许多常用的代码块,特此记之,方便以后调用。
一、 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">切换到首页Tab</navigator>

方法二:

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-item的作用,但是把它们都删掉以后功能却无法实现,只好保留将其样式设为隐藏--><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px; display:none;" bindchange="bindChange">  <swiper-item>      <!--<view>热门</view>  -->  </swiper-item>    <swiper-item>      <!--<view>关注</view>  -->  </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.limitvar url = app.globalData.urlvar i = 0Page({    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")); }
原创粉丝点击