huahuadavids
huahuadavids

支付宝小程序开发笔记

开始

对于一个使用过Vue.js的前端来说，小程序和vue的语法很像，难道不大，增加了一些基于支付宝的内置功能，简单来说，支付宝就是一个浏览器，小程序是支付宝的Html而已.。

Tips, 开发工具编译经常不及时，故意写错代码，比如写错标签不闭合，或者乱写，就马上有效果 ！！！

小程序的使用

小程序无需安装，用户第一次使用小程序时，支付宝 App 会从服务器下载小程序的资源，下载后的小程序资源会缓存在支付宝的客户端一段时间。

当用户再次打开已经缓存资源的小程序时，会跳过下载过程，能够更快地打开小程序

当用户首次打开小程序时候，小程序会处于前台运行状态。

用户点击右上角关闭按钮关闭小程序，或者按下设备 Home 键离开支付宝 App 时，小程序并不会直接销毁，而是进入后台运行状态。

从后台运行切换为前台运行： 当未被系统销毁的小程序再度被打开或者激活时，会从后台运行切换为前台运行

用户点击右上角关闭按钮关闭小程序时，小程序仅是进入后台运行，不会被销毁。只有当小程序进入后台运行状态一定时间，或者占用系统资源过高时，才会被真正销毁

核心的业务能力

支付收单、营销服务、会员管理 、芝麻信用、位置服务、供应链 、资金管理、金融服务，如蚂蚁借呗


小程序启动和入口


小程序启动方式

冷启动： 当用户打开未启动过，或者是已经销毁的小程序时，称为冷启动。此时小程序会执行初始化，初始化完成后，会触发 onLaunch 回调函数。

热启动： 当用户打开已经关闭但仍处于后台运行的小程序时，称为热启动。在这种情况下，小程序并不会被销毁后重启，而仅是从后台切换到前台，此时，onShow 函数会触发，onLaunch 回调函数不会被触发。

小程序的入口

  1. 扫一扫
  2. 搜索
  3. 朋友tab页
  4. 支付成功页
  5. 小程序收藏
  6. 生活号关联
  7. 卡包

小程序入口的场景值

在相关生命周期里，可以获取到时怎么进入小程序的，详细的数据

App({
  onLaunch(options) {
    console.log('App onLaunch Scene:', options.scene);//options.scene 是 String 类型的 
  },
  onShow(options) {
    console.log('App onShow Scene:', options.scene);
  },
})

代码层面

可以使用npm包，app.acss 作为全局样式，作用于当前小程序的所有页面

// 背景色渐变
background-image: linear-gradient(90deg, rgb(5, 131, 68) 0%, #3264C5 99%);

// getApp方法获取顶层app实例
var app = getApp();
console.log(app.globalData); // 获取 globalData

app.js

App() 代表顶层应用，管理所有页面和全局数据，以及提供生命周期回调等


App({
// 比如 alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2Fz 打开小程序 
  onLaunch(options) {
    // 第一次打开
    console.log(options.query);
    // {number:1}
    console.log(options.path);
    // x/y/z
  },
  onShow(options) {
    // 小程序启动，或从后台被重新打开
  },
  onHide() {
    // 小程序从前台进入后台
  },
  onError(msg) {
    // 小程序发生脚本错误或 API 调用出现报错
    console.log(msg);
  },
  globalData: {
  // 全局数据
    name: 'alipay',
  },
});

app.json

整个应用的配置

{
  // 配置页面
  "pages": [
    "pages/index/index"
  ],
   // 配置插件
  "plugins": {
    "myPlugin": {
      "version": "*",
      "provider": "2019120769656826"
    }
  },
  "window": {
    "transparentTitle": "always", // 导航栏透明设置 默认 none，支持 always 一直透明 / auto 滑动自适应 / none 不透明。 
    "titlePenetrate": true,
    "backgroundImageColor": "#3264C5",
    "defaultTitle": "defaultTitle", // 默认标题
    "allowsBounceVertical":"NO", // 允许下拉。默认"yes"
    "pullRefresh" : true, // 支持下拉刷新吗，默认 true，需要允许下拉才可以
    "titlePenetrate": "YES" // 是否允许导航栏点击穿透。默认 NO，支持 YES / NO 
    "titleImage":  // 导航栏图片地址 ,
    "titleBarColor": "rgba(0,0,0,0.1)"  // 导航栏背景色
  },
  // 配置底部导航tabs
  "tabBar": {
    "textColor": "#111",
    "selectedColor": "blue",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"，
        "icon" : "", // 小图标
        "activeIcon" : "",
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"
      }
    ]
  }
}

page.json

在 /pages 目录中的 .json 文件用于配置当前页面的窗口表现。页面配置比 app.json 全局配置简单得多，只能设置 window 相关配置项，但无需写 window 这个键

// css 
// page页面 page元素声明整个页面的样式
page {
  background-color: #fff;
}

// json 
// 配置 optionMenu  点击后触发 onOptionMenuClick 
{
  "optionMenu": {
    "icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
  },
  "titlePenetrate": "YES",
  "barButtonTheme": "light"
}

page.js

page.js是每个页面的逻辑

// pages/index/index.js
Page({
  // 和 vue一样，是对象时，所有页面公用，用函数保证每个页面数据独立
  // this.data无法修改数据，this.setData修改
  data: (){
      return {
        title: "Alipay",
      },
   }
  
  // 页面初始化时触发。一个页面只会调用一次。
  // query 为 my.navigateTo 和 my.redirectTo 中传递的 query 对象。
  // query 内容格式为：“参数名=参数值&参数名=参数值…”。
  onLoad(query) {
    // 页面加载
  },
  onShow() {
    // 页面显示
  },
 
  // onReady === didMount 
  onReady() {
    // 页面加载完成
  },
  onHide() {
    // 页面隐藏
    // 页面隐藏/切入后台时触发。 如 my.navigateTo 到其他页面或底部 tab 切换等。 
  },
  onUnload() {
    // 页面被关闭
    // 页面卸载时触发。 如 my.redirectTo 或 my.navigateBack 到其他页面等。 
  },
  onTitleClick() {
    // 标题被点击
  },
  onPullDownRefresh() {
    // 页面被下拉
  },
  onTabItemTap(){
   // 点击tabItem时触发
  }
  onPageScroll({scrollTop}){
  },
  onReachBottom() {
    // 页面被拉到底部
  },
  onShareAppMessage() {
   // 返回自定义分享信息
  },
  // 事件处理函数对象
  events: {
    onBack() {
      console.log('onBack');
    },
  },
  // 自定义事件处理函数
  viewTap() {
    this.setData({
      text: 'Set data for update.',
    });
  },
  // 自定义事件处理函数
  go() {
    // 带参数的跳转，从 page/ui/index 的 onLoad 函数的 query 中读取 type
    my.navigateTo({url:'/page/ui/index?type=mini'});
  },
  // 自定义数据对象
  customData: {
    name: 'alipay',
  },
});

page.axml

使用include 直接引入页面


// html 条件渲染 
 1 
 2 
 3 



 body 



 header 

 footer

使用import引入模板