codecamp

支付宝小程序框架 页面·介绍

Page 代表应用的一个页面,负责页面展示和交互。每个页面对应一个子目录,一般有多少个页面,就有多少个子目录。它也是一个构造函数,用来生成页面实例。

每个小程序页面一般包含四个文件。

  • [pageName].js:页面逻辑
  • [pageName].axml:页面结构
  • [pageName].acss:页面样式(可选)
  • [pageName].json:页面配置(可选)

页面初始化时,提供数据。

Page({
  data: {
    title: 'Alipay',
    array: [{user: 'li'}, {user: 'zhao'}],
  },
});

根据以上提供的数据,渲染页面内容。

<view>{{title}}</view>
<view>{{array[0].user}}</view>

定义交互行为时,需要指定响应函数。

<view onTap="handleTap">click me</view>

以上代码指定用户触摸按钮时,调用 handleTap 方法。

Page({
  handleTap() {
    console.log('yo! view tap!');
  },
});

页面重新渲染,需要在页面脚本里面调用 this.setData 方法。

<view>{{text}}</view>
<button onTap="changeText"> Change normal data </button>

以上代码指定用户触摸按钮时,调用 changeText 方法。

Page({
  data: {
    text: 'init data',
  },
  changeText() {
    this.setData({
      text: 'changed data',
    });
  },
});

上面代码中,changeText 方法里面调用 this.setData 方法,会导致页面重新渲染。

支付宝小程序框架 多语言配置
支付宝小程序框架 页面·配置
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }