小程序-续2

小程序2

响应事件

事件都是bind开头

• bindtap 点击事件
• bindinput 表单的值发生变化
• bindchange

事件触发

监听事件

• bindtap="事件名字"

<view bindtap="showMSG">事件响应1view>

在js文件中定义事件响应函数

• 与生命周期同级，逗号分开

  // 事件响应
  showMSG() {
    console.log("HI 小程序");
  },

事件传参

• 事件参数3
• 使用：e.target.dataset.参数名 获取事件参数

<view bindtap="showCan" data-msg="我欣赏你">事件参数3view>

// 自定义参数
  showCan(e) {
    wx.showToast({
      title : e.target.dataset.msg
    })
  },

双向绑定原理

监听

• value 表单的值
• bindinput 当input的值改变的时候触发事件

<view class="title">双向绑定原理view>		
<input bindinput="inputHD" value="{{msg}}">input>
<view>{{msg}}view>

响应事件

• this.setDate 设置data的值
• e.detail.value 获取表单的值

 // 双向绑定
  inputHD(e) {
    this.setData({msg : e.detail.value})
  },

图片组件

• image 图片标签
• src 图片地址属性
• mode 图片设置的模式，具体参考官方文档
• image官方文档

<image src="./img/icon1.png">image>

常用API

设置标题

• wx.setNavigationBarTitle 设置对应页面的标题

// 设置标题
    wx.setNavigationBarTitle({
      title: '笑话百科',
    });

设置本地储存数据

• wx.setStorageSync('储存数据的名字', 数据);

// 储存数据到storage中，
 wx.setStorageSync('list', list);

获取本地存储数据

• wx.getStorageSync('获取数据的名字');

 wx.getStorageSync('list');

消息提示

• wx.showToast({title : "消息提示信息"});

wx.showToast({title : "hello world"});

网络请求

• wx.request(....);

详情见下

停止下拉刷新

• wx.stopPullDownRefresh();
• 用于下拉刷新完毕时

网络请求

wx.request 网络请求数据

• wx.request({url : "请求数据的地址",method : "请求方式",success : ()=>{成功的回调},fail : ()=>{失败的回调}});

获取数据

  // 获取笑话数据
  getJoksData() {
    wx.request({
      // 请求数据地址
      url: 'http://www.520mg.com/mi/list.php',
      // 成功的回调
      success : (res) => {
        this.setData({
          list : res.data.result
        })
        console.log(res,"请求成功");
      },
      // 失败的回调
      fail : (err) => {
        console.log(err,"请求失败");
      },
    })
  },

调用

• 在生命周期onload中调用获取数据的事件

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 执行获取数据
    this.getJoksData();
  },

下拉刷新

• 必须在.json 文件中配置"enablePullDownRefresh": true才能下拉刷新

• 在对应页面的下拉刷新事件中，进行逻辑实现

• 当下拉刷新完毕之后，必须停止wx.stopPullDownRefresh();

• 设置颜色 "backgroundTextStyle": "dark" 值只有，light，dark两种

tabbar

默认的tabbar

在app.json文件中设置tabBar

• 具体参考官方文档
• tabBar文档

// 一下是json文件，不能注释，最后一项不能有逗号
// tabBar 属性对象
  "tabBar": {
	  // 字体颜色
    "color":"#484848",
	// 选中时字体颜色
    "selectedColor": "#4395ff",
	// 上边框颜色
	"borderStyle" : "#000",
	// tabBar的列表，最少两个
    "list": [{
		// 对应tabbar的跳转路径
      "pagePath": "pages/index/index",
	  // 对应标题
      "text": "首页",
	  // 未选中的图片，或者icon地址
      "iconPath": "images/home.png",
	  // 选中时的图片，icon地址
      "selectedIconPath": "images/home-h.png"
    },
    {
      "pagePath": "pages/todo/todo",
      "text": "清单",
      "iconPath": "images/study.png",
      "selectedIconPath": "images/study-h.png"
    },
  ]
  },

自定义tabBar

在app.json 中设置 "custom": true, 启动自定义tabBar组件

• 具体参考官方文档
• 自定义tabBar文档

导航

navigator 标签

 <navigator url="地址">笑话navigator>

url 属性

• 用来设置跳转的地址

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

open-type 属性

• navigate 默认跳转

• navigate 切换小程序

<navigator target="miniProgram" open-type="navigate" app-id="小程序ID">题目navigator>

• switchTab 切换底部栏

<navigator url="/pages/jok/jok" open-type="switchTab" ">切换tabbarnavigator>

• redirect 重定向

<navigator url="/pages/jok/jok" open-type="redirect" ">重定向navigator>

• relunch 重启

<navigator url="/pages/jok/jok" open-type="relunch" ">重启navigator>

• navigateBack 返回

<navigator url="/pages/jok/jok" open-type="navigateBack" ">返回navigator>

• exit 退出

<navigator url="/pages/jok/jok" open-type="exit" ">退出小程序navigator>

js 切换页面

js切换

• wx.navigateTo({rul : "地址"}); 跳转

// 页面跳转
wx.navigateTo({
	url: '/pages/logs/logs',
})

• wx.navigateBack() 返回

• wx.redirectTo({url : "地址"}); 重定向

bindViewTap: function() {
    wx.redirect({
      url: '../jok/jok'
    })
  },

• wx.switchTab({ url : "地址"}); 切换底部栏

openToDo() {
	wx.switchTab({
		url: '/pages/todo/todo',
	})
},

导航传参

url 传参

在url中定义参数

• url="/pages/logs/logs?name=momo&age=18" 路由加参数
• name=momo&age=18 定义的参数 ？后面的都是

<navigator url="/pages/logs/logs?name=momo&age=18">传递momo参数navigator>

在生命周期onLoad中的options中含有对应的传递过来的参数

• 为了跟vue相像，所以可以设置this.setData({query : options});

• 在页面中使用 {{query.参数名}} 获取数据值

js 传参

在使用js跳转时给路由地址传参

• 在需要跳转的js，url中传入参数

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

• 在接收的页面，生命周期onLoad中的参数options中含有对应的传递过来的参数

• 为了跟vue相像，所以可以设置this.setData({query : options});

• 在页面中使用 {{query.参数名}} 获取数据值

 onLoad: function (option) {
    console.log(option);
    this.setData({
		query : option
    })
  }

注意 wx.switchTab({url : "地址"}) 不能夸页面传参

• 此情况推荐全局

页面栈

• 页面栈大小为5
• wx.navigateTo会增加页面栈大小，直到页面栈大小为5
• wx.redirectTo不会增加页面栈大小
• wx.navigateBack会减少页面栈大小，直到页面栈大小为1

生命周期

app.js 中的生命周期(即：小程序本身的生命周期

)

• onLaunch 用户首次打开小程序，触发 （全局只触发一次）。
• onShow 小程序初始化完成后，触发，监听小程序显示。
• onHide 小程序从前台进入后台，触发 。
• onShow 小程序从后台进入前台显示，触发 。
• 小程序后台运行一定时间，或系统资源占用过高，会被销毁。
• onError小程序出错，触发

//app.js
App({
  onLaunch: function() {
      //小程序初始化(全局只触发一次)
  },
  onShow: function() {
      //小程序显示--前台
  },
  onHide: function() {
      //小程序隐藏--后台
  },
  onError: function(msg) {
      //小程序错误
  },
})
//其他 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

pages 中的生命周期

• onLoad 小程序注册完成后，加载页面，触发。
• onShow 页面载入后触发方法，显示页面。
• onReady 首次显示页面，触发，渲染页面元素和样式，一个页面只会调用一次。
• onHide 当小程序后台运行或跳转到其他页面时，触发。
  • 当navigateTo或底部tab切换时调用
• onShow 当小程序有后台进入到前台运行或重新进入页面时，触发。
• onUnload 页面卸载
  • 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发

//index.js
Page({
  onLoad: function(options) {
    //页面加载-----(一个页面只会调用一次)
  },
  onReady: function() {
    //页面渲染-----(一个页面只会调用一次)
  },
  onShow: function() {
    //页面显示-----(每次打开页面都会调用一次)
  },
  onHide: function() {
    //页面隐藏-----(当navigateTo或底部tab切换时调用)
  },
  onUnload: function() {
    //页面卸载-----(当redirectTo或navigateBack的时候调用)
  },
})
//其他 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

小程序的限制

程序限制

• 脚本内不能使用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

全局数据的状态管理

在app.js 中的 globalData({}) 中定义全局数据

• 在globalData({})中设置数据

 globalData: {
    num : 1
  }

在需要使用全局数据的页面进行调用

导入全局的getApp()

• const 名字 = getApp(); 导入全局app.js中的数据或方法；
• 名字 : 自定义的名字，用来代表app.js中的数据的

调用全局的数据

• 使用对应的数据或方法
• 名字.globalData.数据名字

this.setData({
	num : app.globalData.num
})

续