支付宝小程序开发说明

简介: 支付宝小程序开发说明

全局配置


1.app.json 全局配置




{

"pages": [

"pages/index/index",

"pages/logs/index"

],

"window": {

 "defaultTitle": "支付宝接口功能演示",

 "backgroundColor": "#F5F5F9",

 "pullRefresh": false,

 "allowsBounceVertical": "YES",

 "titleBarColor": "#fff"

},

"tabBar": {

 "textColor": "#404040",

 "selectedColor": "#108ee9",

 "backgroundColor": "#F5F5F9",

 "items": [

  {

   "pagePath": "page/tabBar/component/index",

   "icon": "image/icon_component.png",

   "activeIcon": "image/icon_component_HL.png",

   "name": "组件"

  },

  {

   "pagePath": "page/tabBar/API/index",

   "icon": "image/icon_API.png",

   "activeIcon": "image/icon_API_HL.png",

   "name": "API"

  }

 ]

}

}

2.app.js 注册小程序




①.onLaunch




②.onShareAppMessage(object: Object)


全局分享配置。当页面未设置 page.onShareAppMessage 时,调用分享会执行全局的分享设置


③.globalData 全局数据


App() 中可以设置全局数据 globalData


小程序提供了全局的 getApp() 方法。


var app = getApp();

console.log(app.globalData); // 获取 globalData

console.log(app.globalData.hasLogin)

④.注意


A.不要在 onShow 中进行 redirectTo 或navigateTo 等操作页面栈的行为。


B.不要在 onLaunch 里调用 getCurrentPages(),因为此时 page 还未生成。


App({

onLaunch(options) {

 console.log('App Launch', options);

 console.log('getSystemInfoSync', my.getSystemInfoSync());

 console.log('SDKVersion', my.SDKVersion);

},

onShow() {

 console.log('App Show');

},

onHide() {

 console.log('App Hide');

},

globalData: {//全局数据

 hasLogin: false,

},

});

⑤getCurrentPages  


getCurrentPages() 方法用于获取当前页面栈的实例,返回页面数组栈。


3.ACSS 语法参考


ACSS 是一套样式语言,用于描述 AXML 的组件样式,决定 AXML 的组件的显示效果。

为适应广大前端开发者,ACSS 和 CSS 规则完全一致,100% 可以用。同时为更适合开发小程序,对 CSS 进行了扩充。

ACSS 支持 px,rpx,vh,vw 等单位。


注意:


1.ACSS 文件里的本地资源引用请使用绝对路径的方式,不支持相对路径引用。例如:


/* 支持 */

background-image: url('/images/ant.png');

/* 不支持 */

background-image: url('./images/ant.png');

2.给页面设高度100%为什么没用?

添加一个绝对定位就可以了,不添加的话,会根据您的页面的内容去自适应的。


三.Axml介绍


AXML 是小程序框架设计的一套标签语言,用于描述小程序页面的结构。 AXML 语法可分为五个部分:数据绑定、条件渲染、列表渲染、模板、引用。


1.数据绑定:

简单:<view> {{ message }} </view>

属性绑定:<view id="item-{{id}}"> </view>

关键字:需使用双引号封装("")

 <checkbox checked="{{false}}"> </checkbox>

 注意: 不要直接写 checked="false",计算结果是一个字符串,转成布尔值类型后代表真值。

运算:<view hidden="{{flag ? true : false}}"> Hidden </view>


2.条件渲染

<view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>

<view a:elif="{{view == 'APP'}}"> APP </view>

<view a:else> alipay </view>

3.列表渲染

array: [{

   message: 'foo',

 }, {

   message: 'bar',

 }],

<view a:for="{{array}}"  key="{{index}}">

  {{index}}: {{item.message}}

</view>


使用 a:for-item 可以指定数组当前元素的变量名。使用 a:for-index 可以指定数组当前下标的变量名。

<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">

  {{idx}}: {{itemName.message}}

</view>


4.模板

A.定义模板

 使用 name 属性申明模板名,然后在 <template/> 内定义代码片段。

 <template name="msgItem">

   <view>

  <text> {{index}}: {{msg}} </text>

  <text> Time: {{time}} </text>

   </view>

 </template>

B.使用模板

使用 is 属性,声明需要的模板,然后将需要的 data 传入,比如:

<template is="msgItem" data="{{...item}}"/>

item: {

     index: 0,

     msg: 'this is a template',

     time: '2019-04-19',

   },

5.引用

axml 提供两种文件引用方式 import 和 include。

A.import

在 item.axml 中定义了一个叫 item 的 template。

 <!-- item.axml -->

<template name="item">

  <text>{{text}}</text>

</template>

在 index.axml 中引用 item.axml,就可以使用 item 模板。

<import src="./item.axml"/>

<template is="item" data="{{text: 'forbar'}}"/>


B.include

include 可以将目标文件除 <template/> 外整个代码引入,相当于是拷贝到 include 位置。


<!-- index.axml -->

<include src="./header.axml"/>

<view> body </view>

<include src="./footer.axml"/>


<!-- header.axml -->

<view> header </view>


<!-- footer.axml -->

<view> footer </view>

注意:

模板引入路径支持相对路径、绝对路径,也支持从 node_modules 目录载入第三方模块。

<import src="./a.axml"/> <!-- 相对路径 -->

<import src="/a.axml"/> <!-- 项目绝对路径 -->

<import src="third-party/x.axml"/> <!-- 第三方 npm 包路径 -->

四.事件


事件对象可以携带额外信息,如 id、dataset、touches。


使用:


<view onTap="add"> {{count}} </view>

Page({

  add(event) {

 console.log(event);

  },

});

A.事件类型




<view id="outter" onTap="handleTap1">

 view1

 <view id="middle" catchTap="handleTap2">

   view2

   <view id="inner" onTap="handleTap3">

     view3

   </view>

 </view>

</view>

上面代码中,点击 view3 会先后触发 handleTap3 和 handleTap2(因为 tap 事件会冒泡到 view2,而 view2 阻止了 tap 事件冒泡,不再向父节点传递),点击 view2 会触发 handleTap2,点击 view1 会触发 handleTap1。


B.事件对象


①target


dataset 在组件中可以定义数据,这些数据将会通过事件传递给逻辑层。 以 data- 开头,由连字符 - 连接多个单词,所有字母必须小写(大写字母自动转成小写字母),如 data-element-type,最终会在 event.target.dataset中会将连字符转成驼峰 elementType。


示例代码:

<view data-alpha-beta="1" data-alphaBeta="2" onTap="bindViewTap"> DataSet Test </view>

Page({

 bindViewTap:function(event) {

   event.target.dataset.alphaBeta === 1; // - 会转为驼峰写法

   event.target.dataset.alphabeta === 2; // 大写字母会转为小写字母

 },

});

五.小程序运行机制




B.缓存


C. 问题:


Q:小程序是否支持 cookie 和 session? A:小程序不建议使用 cookie,不支持 session。推荐使用小程序缓存。


Q:使用了缓存 API 后,小程序的缓存什么时候会被清掉? A:使用了缓存 API 必须使用清除 API,否则缓存不会被清除掉。


D.兼容


my.canIUse(String) 实现兼容性判断,详见 接口说明 。


六.UI界面及开发API


组件及api


七.自定义组件


在components文件夹里


创建自定义组件index :

// /components/index/index.json

 {

   "component": true

 }

// /components/index/index.js

 Component({

  mixins: [], // minxin 方便复用代码

  data: { x: 1 }, // 组件内部数据

  props: { y: 1 }, // 可给外部传入的属性添加默认值

  didMount(){}, // 生命周期函数

  didUpdate(){},

  didUnmount(){},

  methods: {   // 自定义方法

  handleTap() {

   this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性

  },

  },

 })

<!-- /components/index/index.axml -->

 <view>

   HI, My Component

 </view>

 

使用:

pages/index/index.json

json:

{

 "usingComponents": {

   "my-component":"/components/index/index"

 }

}

pages/index/index.axml

<my-component />

八.请求接口


my.request




九.页面常见问题


1.官网提供


2.跳转页面时,怎么清除 data 数据中的数据?


无法清除,可以在跳转时覆盖之前的 data 值


3.my.ix.generateImageFromCode 生成二维码 这个码没有时效性,永久可以用


4.小程序有退出监听吗?


无法监听退出


5.如何获取支付宝小程序 appid


onLaunch(options) {

// 第一次打开

console.log(options);

this.globalData.appId= options.referrerInfo.appId;

console.log(this.globalData)

}


dustbin
+关注
目录
打赏
0
0
0
0
0
分享
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
165 18
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
5 0
|
3天前
|
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
25 0
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。

热门文章

最新文章