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

开发前必知

● 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"
      }
    ]
  }
}