开发前必知

● css单位用rpx
● 需要安装ui
● 支付宝审核超级严，有按钮没有相应的点击事件就会被驳回。开发时要拉分支开发完一个模块后再合并到主分支。
● 静态资源全部放置再ali-oss中，减小包的大小；使用方法看下面

页面级常用配置

设置页面的title

// xxxpage.json
{ "defaultTitle":"商品"}

常用

列表渲染

// 多维数组循环时指定for-item的名称
data: [ {name: 'a', datas: [1,2,3]}, {name: 'b', datas: [4,5,6]}]<view a:for="{{data}}" a:for-index="xi" a:for-item="xitem">{{xi}}:{{xitem.name}}<view a:for="{{xitem.datas}}" a:for-index="yi" a:for-item="yitem">--{{yi}}:{{yitem}}</view>
</view>

空标签

不会在页面中显示这个标签，常配合if,for使用

<block>xxxxx</block>

事件

设置数据，点击事件，事件传参，修改数据

// 1.点击事件-传参，修改参数
<button onTap="clickfn" data-msg='222222'>点击事件</button>
<view>我是首页--{{msg}}</view>Page({data: {// 数据msg: '1111',},clickfn(e){// 测试点击事件和传参console.log('clickfn: ', e, e.target.dataset);this.setData({msg: e.target.dataset.msg})},
});

图片引入

css背景图

ACSS 文件里的本地资源引用请使用绝对路径的方式，不支持相对路径引用，例如下方示例

/* 支持 */
background-image: url('/images/ant.png');
/* 不支持 */
background-image: url('./images/ant.png');

自定义组件

右键创建组件

页面中使用组件
在页面的json中引入

// xxxpage/xx.json
{"usingComponents": {"my-header":"/components/header/header"}
}

使用

  <my-header></my-header>

开发工具

vscode 工具

1.插件
支付宝小程序开发助手：可快速创建页面

底部导航

官网：https://opendocs.alipay.com/mini/framework/app-json
演示：配置小程序名称，配置tabbar（本地图片），修改文字颜色等请看文档

{"pages": ["pages/index/index","pages/goods/goods","pages/user/user"],"window": {"defaultTitle": "玄空小程序"},"tabBar": {"textColor": "#dddddd","selectedColor": "#49a9ee","backgroundColor": "#ffffff","items": [{"pagePath": "pages/index/index","name": "首页","icon":"assets/imgs/tabnav/icon1.png", "activeIcon":"assets/imgs/tabnav/icon1-act.png"},{"pagePath": "pages/goods/goods","name": "商品","icon":"assets/imgs/tabnav/icon2.png", "activeIcon":"assets/imgs/tabnav/icon2-act.png"},{"pagePath": "pages/user/user","name": "我的","icon":"assets/imgs/tabnav/icon3.png", "activeIcon":"assets/imgs/tabnav/icon3-act.png"}]}
}

支付宝小程序-基础入门技能汇总相关推荐

微信小程序基础入门---登陆实现
1.搭建登陆静态页面 2.登录鉴权在用户填写完信息之后,点击登录按钮,调用登录接口,根据后台返回内容判断是否登录成功. 在这里,当我们输入正确的账号和密码之后,后台提示我们登录成功,但是当我们在登录 ...
微信小程序基础入门（一）：小程序界面介绍创造自己的第一个小程序
承接小程序配置之后 ,先对小程序开发软件的界面进行介绍: 然后进入第一个小程序的构造:获取用户登陆信息通过左上角的 "+"添加页面然后创建第一个功能页面然后页面构造完成:各部 ...
小程序基础入门(黑马学习笔记)
一.宿主环境--组件 1.scroll-view(滚动效果) scroll-y 属性:允许纵向滚动 scroll-x 属性:允许横向滚动注意:使用竖向滚动时,必须给scroll-view 一个固定高 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
视频教程-微信小程序从入门基础(第一季)-PHP
微信小程序从入门基础(第一季) 多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅扫码下载「CSDN程 ...
视频教程-30小时微信小程序从入门到精通课程-基础篇-微信开发
30小时微信小程序从入门到精通课程-基础篇 8年IT开发经验,6年IT教育经验,喜欢把复杂逻辑用简单的表述传达给学生,传授编程知识,讲述生活故事曹圣捷 ¥12.00 立即订阅扫码下载「CSDN程序 ...
小程序开发入门基础篇-张代浩-专题视频课程
小程序开发入门基础篇-1995人已学习课程介绍采用小程序wepy框架,初级讲解如何搭建小程序的开发环境,创建工程,语法介绍.开发调试等,课程采用实战代码案例作为教材,通俗易懂,简单 ...
支付宝、微信小程序高频知识（汇总VS对比）
汇聚支付宝.微信小程序多年开发经验,包括css样式隔离.小程序modal弹窗滚动穿透等,解决了很多这种大家都没解决的问题,以及对这两种常开发的小程序做了一些对比. 1.标签语法替换关于点击事件,在微 ...
揭秘：支付宝小程序 V8 Worker 技术演进
简介: 本文分享支付宝小程序 V8 Worker 相关工作沉淀和总结,包括技术演进.基础架构.基础功能.以及 JS 引擎能力输出,以及一些优化方案等.欢迎同学们共同探讨,指正.(文末福利:<小程 ...

支付宝小程序-基础入门技能汇总