慕课网：支付宝开发小程序

一、 支付宝小程序的官方网址：https://mini.open.alipay.com/channel/miniIndex.htm

          开发文档：https://docs.alipay.com/mini/developer/getting-started

 

二、 蚂蚁开发者工具下载地址：https://docs.alipay.com/mini/ide/download

官方SDK实例：https://docs.open.alipay.com/54/103419/

https://open.alipay.com/platform/manageHome.htm

 

 

 #ffbfc7          #f2f5f8          #ff6699          #868585         #ffe817         

【总结】

===================

app的三种文件类型

 　　app.js(必)　　->　　全局脚本、全局常量

　　 app.acss(选)　　->　　全局样式

　　 app.json(必)　　->　　项目配置

---------------------------

对象结构

app.json:{

　　pages:[

　　　　"页面1"，

　　　　”页面2“

　　]

}

-----------------------

app的生命周期函数

onLaunch　　-> 项目初始化完成时触发，只触发一次

onShow　　->　　页面展示的时候触发

onLoad　　->　　页面加载时执行，每个页面只执行一次

onReady　　->　　页面初次渲染完成，每个页面只执行一次

onShow　　-> 页面显示后执行一次，可执行多次

onHide　　->　　页面每次隐藏时执行一次

onUnload　　->　　页面卸载执行一次（一次放水）

 

 ====================================

全局对象与全局样式

getApp()　　->　　app对象

　　　　　　外部脚本 操作app中的对象，方法，常量

app.acss　　->　　自定义样式

　　　　　　page.acss自动引入（可以被重写）

　　　　　　

 ---------------

导航栏-配置属性名称：tabBar

textColor　　->　　文字颜色

selectedColor　　->　　文字选中后颜色

backgroudColor　　->　　背景颜色

 itmes　　->　　每个单独tab项（数组）复数

pagePath　　　　->　　页面路径

name　　　　　　->　　文字

icon　　　　　　->　　未选中的图标

activeIcon　　　　->　　选中后的图标

 ----------------------

导航组件

open-type:navigate　　　　[保留当前页面，跳转new页面]

　　　　:redirect　　　　[销毁当前页面，跳转new页面]

 　　　　:navigateBack　　[返回上一级页面]

　　　　：switchTab　　跳转到tabBar页面

my.navigateTo({　　　　//　　跳转详细页+有返回

　　url: "/pages/mine/info/info"

});

---------------------------------------------------

 

 if else

 1.通过传入true或者false

<view a:if="{{flag}}"></view>

 

 2.for循环

<view a:for="{{users}}"

　　   a:for-item="hehe"

　　   a:for-index="i">

　　　　　　id为{{hehe.id}}

　　　　　　name为{{i}}

</view>

<bolck>　[不会显示view，精简代码，]　</block>

 ------------------

6种事件类型

onTap　　　　（tap：触摸）

　　　

<view class="demo-words" catchTouchMove="touchMoves">

触摸移动 </view>

1.tap:点击事件　　　　longTap:长按点击事件

2.touchStart　开始触摸　　touchMove    触摸移动

3.touchEnd　触摸结束（人为结束，手指放开）　　　　　　　touchCancel　　（非正常，打电话时）

 -------------------------

dataset

<view onTap="demo" class="demo-words"

data-name="imooc"

data-user_nickname="1001"

data-id="1001">

数据采集 </view>

 ------------------------------------

图片组件

 https://docs.alipay.com/mini/component/swiper