微信小程序开发学习笔记[2]
目录
一、小程序页面事件处理[下]
1.1、按钮事件
当按钮按下时触发一个函数：
<!--secondpage.mxml-->
<view >这里是第二页</view>
<view>
<!--bindtap后面是要绑定的处理函数的名称-->
<button size='mini'type='primary' bindtap="onTap">点我</button>
</view>//secondpage.js
onTap:function(){
console.log("onTap is called");
}2.2、setData函数
Page.prototype.setData()函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）。
<!--secondpage.wxml-->
<view >这里是第二页</view>
<view>
<!--bindtap后面是要绑定的处理函数的名称-->
<view>当前数字：{{localData}}</view>
<button size='mini'type='primary' bindtap="onTap">点我加一</button>
</view>/**
* secondpage.js
* 页面的初始数据
*/
data: {
localData:0
},
onTap: function () {
console.log("onTap is called");
this.setData({
localData:++this.data.localData
})
}2.3、解决多页面全局数据不同步的问题
问题描述：一个全局数据globalData,在多个页面都可以访问，当在某页面把数据更改时（例如在secondpage更改）切回firstpage时，页面显示的还是原来的数据。
问题根源：当从firstpage切换到secondpage后，firstpage进行了隐藏显示secondpage，此时firstpage在后面隐藏着，切回来时，页面并没有进行刷新。
解决办法：在firstpage.js的onShow()函数里对数据进行刷新，亦即重新赋值一次。
<!--firstpage.wxml-->
<view >这里是第二页</view>
<view>
<!--bindtap后面是要绑定的处理函数的名称-->
<view>局部当前数字：{{localData}}</view>
<button size='mini'type='primary' bindtap="onTap">点我局部加一</button>
</view>
<view>
<!--bindtap后面是要绑定的处理函数的名称-->
<view>全局当前数字：{{globalData}}</view>
<button size='mini'type='primary' bindtap="onGlobalTap">点全局我加一</button>
</view>//pages/secondpage/secondpage.js
var app=getApp();
Page({
/**
* 页面的初始数据
*/
data: {
localData:0,
globalData:app.globalData
},
onTap: function () {
console.log("onTap is called");
this.setData({
localData:++this.data.localData
})
},
onGlobalTap: function () {
console.log("onTap is called");
this.setData({
globalData: ++app.globalData
})
})<!--firstpage/firstpage.wxml-->
<text>hello world</text>
<view>全局变量:{{globalData}}</view>
<!--页面调转-->
<navigator open-type='redirect' url="../log/log">点我调转</navigator>
<navigator open-type='navigate' url='../log/log'>点我跳转2</navigator>//firstpage.js
onShow: function () {
this.setData({
globalData: app.globalData
})
}二、JS代码的模块化
2.1、什么是js代码的模块化
将一些公共的代码抽离成为一个单独的js 文件，作为一个模块，此即js代码的模块化。模块只有通module.exports或者exports才能对外暴露接口。
2.2、例子演示
- 在项目目录下新建utils文件夹
- 在utils文件夹下新建一个单独的js文件，此处我新建一个test.js
//utils/test.js
function sayHello(str){
console.log("hello "+ str);
}
//暴露给外部的接口名字:本文件中接口的名字
module.exports={
say:sayHello
}- 在firstpage中使用接口 需要先使用require导入当前文件
//导入test.js
var test = require("../../utils/test.js");
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
test.say("pig");
}
})
