JS交互逻辑获取页面数据{{}}和全局数据const app = getApp()

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.jsPage({/**
   * 页面的初始数据
   */
  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.jsApp({
  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 发送给后台解码出 unionIdthis.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
      • Page函数名称也是固定的，属于小程序API的一部分
      • 页面模板数据需要data属性进行提供

    Page({
       // 页面生命周期函数
       // 页面需要的数据
       // 事件处理函数
    })

    • js工具函数单独放到js模块中
      • utils
        • JS模块化
          • CommonJS
          • ES6的模块化

实例：

在utils文件夹下的util.js文件里面，

定义方法函数const=formatTime，在下方进行导出

// CommonJS模块化导出
module.exports={
  formatTime: formatTime}

在所需页面logs对应的js文件logs.js里面进行模块化导入

//logs.js// CommonJS模块化导入const util=require('../../utils/util.js')