JS交互逻辑——获取页面数据{{}}和全局数据const app = getApp()
程序员文章站
2023-12-27 07:58:51
...
JS交互逻辑
在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作
- app.js中最外层需要App({}) ,该函数是微信平台提供的api
App({
// 全局数据,可以在所有的子页面中使用
mydata: {
n: 100
}
})
// 页面获取全局数据的方式,app表示小程序的实例对象
const app = getApp()
- page.js中最外层需要Page({}),该函数是微信平台提供的api
Page({
// 页面数据,用于提供给页面的模板
data: {
msg: 'hello'
}
})
// 页面获取data中的数据
<view>{{msg}}</view>
实例如下:
1、获取页面数据
第一步:在pages文件夹下新建demo文件夹,其下新建pages文件index,
index.js初始化文件结构
// pages/leyuan/index.js
Page({
/**
* 页面的初始数据
*/
data: {
msg: 'nihao',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
第二步:在index.js中的data里面,写入数据msg: 'nihao',
第三步:在index.wxml中进行渲染,代码如下
<!-- 数据绑定 -->
<view>{{msg}}</view>
显示如下:
2、获取全局数据
第一步:在utils文件夹下的app.js初始化文件
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
},
testData: {
info: 'hello'
}
})
第二步:在utils文件夹下的app.js中App({})
方法里定义全局数据,写入数据
testData: {
info: 'hello'
}
第三步:在index.js中调用数据
// app表示小程序实例对象,内置的方法
const app = getApp()
data: {
msg: 'nihao',
info: app.testData.info,
}
第四步:在index.wxml中进行渲染,代码如下
<view>{{info}}</view>
显示如下:
js交互基础
-
做小程序页面
-
模板 .wxml(HTML)
- 标签名称不同,标签的属性也不同
-
样式 .wxsss(CSS)
- 选择器支持有限
- 引入了一个新的尺寸单位rpx
-
js交互逻辑
- 全局入口js文件app.js
-
App函数名称是固定的,属于小程序API的一部分
- 如果在页面中获取全局数据?
- 通过getApp()得到小程序实例对象,进而获取全局数据
- const app = getApp()
App({ // 全局生命周期函数 // 全局数据 })
- 页面js文件 page.js
- Page函数名称也是固定的,属于小程序API的一部分
- 页面模板数据需要data属性进行提供
Page({ // 页面生命周期函数 // 页面需要的数据 // 事件处理函数 })
- js工具函数单独放到js模块中
- utils
- JS模块化
- CommonJS
page.js
- CommonJS
- JS模块化
- Page函数名称也是固定的,属于小程序API的一部分
- 页面模板数据需要data属性进行提供
- utils
Page({ // 页面生命周期函数 // 页面需要的数据 // 事件处理函数 })
- js工具函数单独放到js模块中
- utils
- JS模块化
- CommonJS
- ES6的模块化
- JS模块化
- utils
- 如果在页面中获取全局数据?
-