我爱编程

学习微信小程序

2018-04-09  本文已影响0人  前端一枝草

tabBar:

小程序下面的选项卡  屏幕下方 和QQ中联系人 消息  动态 基本上一样

要想使用tabBar 必须在app.json中配置一下tabBar 

要想跳转到一个有tabBar的页面 必须要navigate 跳转 122100版本中 要用wx.switchTab

要用wx.switchTab

除了有list  还有 color  tab上文字的颜色  selectedColor 选中时文字的颜色  backgroundColor  背景颜色 

borderStyle tabbar上边框的颜色 只支持黑白

position  位置  只支持上下

"pages":[

],

"window":{

}

"tabBar":{

"borderStyle": "white",

    "position":"bottom",

  "list":[              选项卡跳转的页面        同时需要注意的是 要想在哪个页面显示tab  就在list中配置哪个页面

  {                                       

    "pagePath":"pages/movies/movies",      跳转大那个页面  哪个在第一个 哪个就在最左边 

    "text":"电影",                          在页面中显示的名字

      "iconPath": "images/tab/dianying.png",    未选中时的图片

        "selectedIconPath": "images/tab/dianying_hl.png" 选中时的图片

    },

  {

    },

]

}

从服务器中获取数据

  restful api  大多是json数据

soap  xml

接口好坏判断依据为粒度  越细越好

onLoad: function (options) {

    wx.request({

      url: "https://douban.uieee.com/v2/book/1220562",  豆瓣为例  网上豆瓣已经不让使用了 但是可以用nginx 然后这里

      data:{},        需要上传的数据                                            我直接使用了一个已经配置好的服务器

      method:"get",  方法OPTIONS, GET PUT..                                      https://douban.uieee.com/

      header:{

        "Content-Type":"application/xml"  有的版本json 和空字符串都不可以

      },

      success:function(res){                  接口调用成功以后 会返回一个参数 res

        console.log(res)                 

      },

      fail:function(){                            接口调用失败 比如断网了

      },

      complete:function(){

      }

    })

  },

  let inTheatersUrl = Gdata.globalData.doubanBase +'v2/movie/in_theaters'+'?start=0&count=3';  API传参

顶上的导航在json中配置

上一篇下一篇

猜你喜欢

热点阅读