开始

对于使用Vue.js的前端，小程序的语法与vue的语法非常相似。不是很大，已经添加了一些基于支付宝的内置功能，简单来说，支付宝是一种浏览器，小程序是支付宝的HTML ..

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

使用小程序

小程序不需要安装。当用户首次使用小程序时，支付宝应用将从服务器下载小程序的资源，并且所下载的小程序资源将在支付宝客户端上缓存一段时间。

当用户再次打开缓存的资源小程序时，将跳过下载过程，并且可以更快地打开小程序

当用户第一次打开小程序时，小程序将在前台运行。

当用户单击右上角的关闭按钮以关闭小程序或按下设备的主页按钮以退出支付宝应用程序时，小程序不会直接销毁，但会进入后台操作状态。

从后台运行切换到前台运行：未打开或再次激活尚未被系统破坏的小程序时，它将从后台运行切换到前台运行

当用户单击右上角的关闭按钮以关闭小程序时，小程序仅在后台运行，并且不会被破坏。仅当小程序进入后台运行状态一定时间或占用过多系统资源时，它才会真正被破坏

核心业务功能

付款和收购，营销服务，会员管理，Zhima Credit，位置服务，供应链，资本管理，金融服务（例如蚂蚁借贷）

小程序启动和入门

小程序启动方法

冷启动：当用户尚未启动或被破坏小程序时，称为冷启动。此时，小程序将执行初始化，并且在初始化之后，将触发onLaunch回调函数。

热启动：当用户打开已关闭但仍在后台运行的小程序时，称为热启动。在这种情况下，小程序将不会被破坏并重新启动，而只会从背景切换到前景。此时，将触发onShow函数，并且不会触发onLaunch回调函数。

小程序扫描和搜索朋友选项卡页面，付款成功页面的入口小程序与生活号码相关的卡包的收集小程序入口场景值

在相关的生命周期中，您可以获得有关如何输入小程序（如果可用）的详细数据

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() { // 小程序从前台进入后台 }, ｏｎｅｒｒｏｒ(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全局配置简单得多。只能设置与窗口相关的配置项，而无需编写窗口键

// 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.jsPage({ // 和 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 ｕｐｄａｔｅ.', }); }, // 自定义事件处理函数 go() { // 带参数的跳转，从 page/ui/index 的 onLoad 函数的 query 中读取 type my.navigateTo({url:'/page/ui/index?type=mini'}); }, // 自定义数据对象 customData: { name: 'alipay', },});

page.axml

使用include直接介绍页面

// html 条件渲染 length > 5}}"> 1 2 3 body footer.axml"/> header footer

使用导入导入模板

emplate name="item"> {{text}}