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 发送给后台解码出 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')