小程序2

API

本地存储

wx.getStorageSync(k)获取本地存储
wx.setStorageSync(k,v)设置本地存储

设置顶部标题

wx.setNavigationBarTitle

onLoad: function (options) {
      wx.setNavigationBarTitle({
        title: '爱笑话',
      })
      this.getJock()
  },

请求

wx.request

getJock(){
  let that=this
  wx.request({
    url: 'http://www.xxx.com/xx/list.php',
    success(res){
      console.log(res)
      that.setData({result:res.data.result})
    }
  })
},
//在生命周期onLoad 调用

事件函数

onReachBottom 触底
onPullDownRefresh下拉刷新

无限下拉

getJock(){
  let that=this
  wx.request({
    url: 'http://www.520mg.com/mi/list.php?page='+that.data.page,
    success(res){
      console.log(res)
      let result=that.data.result//获取现有result
      result=result.concat(res.data.result)//现有result结合新的result赋值给result
      that.setData({result:result,page:that.data.page+1})//更新
    }
  })
},

使用：

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

上拉刷新

getJock(type){
  let that=this
  wx.request({
    url: 'http://www.520mg.com/mi/list.php?page='+that.data.page,
    success(res){
      console.log(res)
      let result=that.data.result//获取现有result
      if(type==1){
        result=res.data.result.concat(result)//数据添加在前面
        wx.showToast({
          title: '新加载了'+res.data.result.length+'笑话',
        })
      }
      else{
        result=result.concat(res.data.result)//现有result结合新的result赋值给result
      }
      
      that.setData({result:result,page:that.data.page+1})//更新
      wx.stopPullDownRefresh()//停止下拉刷新
    }
  })
},

json中添加

{
  "usingComponents": {
   
  },
  "navigationBarTitleText": "爱笑话",
  "enablePullDownRefresh":true,//允许下拉刷新
  "backgroundTextStyle":"dark"//背景文字样式dark|linght
}

生命周期中

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

wx.stopPullDownRefresh()//停止下拉刷新

导航

带返回：

<navigator url="/pages/jock/jock">笑话</navigator>

不带返回：

<navigator url="/pages/jock/jock" open-type="redirect">不返回</navigator>

open-type值

• navigate默认跳转
• switchTab 切换底部栏
• reLunch重启
• exit退出
• wx.redirectTo(Object object)
  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
• wx.navigateTo(Object object)
  保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。。
  更多：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

tabBar

页面的切换只能用navigator 中的 switchTab

"tabBar": {
    "color": "#0f0f0f", //文字颜色
    "selectedColor": "#4395ff",//选中文字颜色
    "list":[//list列表
      {
      "pagePath": "pages/index/index",//页面地址
      "text": "首页",
      "iconPath": "pages/images/home.png",//图片地址
      "selectedIconPath": "pages/images/home-h.png"//选中图片地址
    },
    {
      "pagePath": "pages/ToDo/todo",
      "text": "清单",
      "iconPath": "pages/images/study.png",
      "selectedIconPath": "pages/images/study-h.png"
    }
  ]
  },

js页面跳转传参

• wx.switchTab 切换底部栏
• wx.navigateTo 跳转
• wx.redirectTo 重定向

<view class="title">
 <view bindtap="openA">切换到清单</view>
 <view bindtap="openB">切换到jock</view>
 <view bindtap="openC">切换到logs</view>
</view>

 openA(){
    wx.switchTab({
      url: '/pages/ToDo/todo',
    })
  },
  openB(){
    wx.redirectTo({
      url: '/pages/jock/jock',
    })
  },
  openC(){
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },

传参

1. 通过url传参
   <navigator url="/pages/jock/jock?name=hh&age=18" >笑话-传 参</navigator>
   取

onLoad: function (options) {
    console.log(options)
  },

2. 通过js传参

openC(){
    wx.navigateTo({
      url: '/pages/logs/logs?name=hua&age=19',
    })
  },

取 同上

全局数据状态管理

globalData
在app.js中

globalData: {
    userInfo: null,
    num:5
  }

获取数据并实现加1
获取const app=getApp()

setnum(){
    let num=this.data.num+1
    app.globalData.num=num
    this.setData({num})
  },
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({num:app.globalData.num})
  },

在页面使用

<view  bindtap="setnum">{{num}}</view>

在别的页面使用

data:{
	 num:''
},
onLoad: function (options) {
    this.setData({num:app.globalData.num})
  },

在页面使用

<view >{{num}}</view>//结果为上一个页面增加的数

小程序生命周期

• onLaunch 程序启动
• onShow 程序切换到前台
• onHide程序切换到后台
• onError程序发送错误

页面生命周期

• onLoad 页面加载
• onReady 渲染完毕
• onShow显示
• onHide隐藏
• onUnload卸载 redirect navigateBack

小程序限制

程序限制

• 脚本内不能使用window等对象
• zepto/jquery 会使用到window对象和document对象，所以无法使用。
• 样式表不支持级联选择器
• 本地资源无法通过 css 获取 background-image可以使用网络图片，或base64，或者使用标签
• 不支持 A 标签，无法打开普通网页

数量限制

• 底部或顶部可以添加tab按钮区域 tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab按数组的顺序排序。
• 一个应用同时只能打开5个页面
• 小程序的wx.request请求最开始最大并发数是5个，后来，估计随着用小程序的越来越多，总之，就是增加到了10个

大小限制

• tabBar 上面的按钮 iconPath 图片路径，icon大小限制为40kb
• tabBar 上面的按钮 selectedIconPath选中时的图片路径，icon 大小限制为40kb
• setData 页面传递数据单次设置的数据不能超过1024kB
• setStorage 本地缓存最大为10MB
• 小程序源码打包后的大小限制为1M