支付宝小程序|支付宝小程序-基础入门技能汇总前端|javascript|小程序

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

开发前必知
页面级常用配置
常用
- 列表渲染
- 空标签
事件
图片引入
- css背景图
自定义组件
开发工具
- vscode 工具
底部导航

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

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

常用列表渲染

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

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

xxxxx

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

// 1.点击事件-传参，修改参数我是首页--{{msg}}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" } }

【支付宝小程序|支付宝小程序-基础入门技能汇总】使用

开发工具 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" } ] } }