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
      • 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')