支付寶小程序體驗—— 業務組件

原創 鎏嫣宫守护 2020-07-07 12:50

開放了好幾次的支付寶小程序，終於在昨天818開啓了公測，今天一早起來下載ide，看了下文檔以及demo，再與微信小程序的開發文檔比較一下，發現好像就是copy的啊，然後在知乎上就看到《給微信小程序工程師的致歉信》，瞬間秒懂了。api接口也就是將wx改成了my，wcss、wxml改成了acss、axml，基礎組件基本一樣，基本上學了一個另一個也就明瞭，不過支付寶小程序多了幾個業務組件，這幾個封裝的就比較實用,大概如下：

一：摺疊面板。

效果圖：

axml:跟官網不同的是又增加了content的列表循環，基本上一看就知道了。

<view class="a-collapse">
    <view a:for={{panels}}>
      <view
        class="a-collapse-title"
        onTap="{{onTitleTap}}"
        data-index={{index}}
      >
        {{item.title}}
        <view class="{{item.expanded ? 'a-collapse-title-arrow a-collapse-title-arrow-up' : 'a-collapse-title-arrow'}}" />
      </view>
      <view class="a-collapse-content" a:if={{item.expanded}}>
      <view class="a-collapse-content" a:for={{item.content}}>
        {{item}}
        </view>
      </view>
    </view>
  </view>
acts: 

.a-collapse {
  border-top: 1px solid #ddd;
  background-color: #fff;
  color: #000;
}

.a-collapse-title,
.a-collapse-content {
  border-bottom: 1px solid #ddd;
}

.a-collapse-title {
  position: relative;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 60rpx 0 30rpx;
  font-size: 34rpx;
}

.a-collapse-title-arrow {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 30rpx;
  height: 30rpx;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='26' viewBox='0 0 16 26' xmlns='http://www.w3.org/2000/svg'><path d='M2 0L0 2l11.5 11L0 24l2 2 14-13z' fill='%23C7C7CC' fill-rule='evenodd'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform: rotate(90deg);
}
.a-collapse-title-arrow-up {
  transform: rotate(270deg);
}

.a-collapse-content {
  padding: 20rpx;
  font-size: 30rpx;
}
js:
Page({
  data: {
    collapseData: {
      onTitleTap: 'handleTitleTap',
      panels: [{
        title: 'Title 1',
        content: ['Content 1','Content 2','Content 3','Content 4','Content 5'],
        expanded: true,
      }, {
        title: 'Title 2',
        content: ['Content 2'],
        expanded: false,
      },{
        title: 'Title 3',
        content: ['Content 3'],
        expanded: false,
      }, {
        title: 'Title 4',
        content: ['Content 4'],
        expanded: false,
      },{
        title: 'Title 5',
        content: ['Content 5'],
        expanded: false,
      }, {
        title: 'Title 6',
        content: ['Content 6'],
        expanded: false,
      },{
        title: 'Title 7',
        content: ['Content 7'],
        expanded: false,
      }, {
        title: 'Title 8',
        content: ['Content 8'],
        expanded: false,
      }],
    },
  },
  handleTitleTap(e) {
    const { index } = e.target.dataset;
    const panels = this.data.collapseData.panels;
    // android does not supprt Array findIndex
    panels[index].expanded = !panels[index].expanded;
    this.setData({
      collapseData: {
        ...this.data.collapseData,
        panels: [...panels],
      },
    });
  },
});
二：下拉菜單：

效果圖：

axml：

<template name="DropdownSelect">
    <view a:if="{{listData}}" class="a-dropdown-wrapper {{active ? 'expand' : ''}}">
        <view id="a-dropdown-nav" class="a-dropdown-nav">
            <block a:for={{listData}}>
                <view
                    class="a-dropdown-nav-item {{ active && selectedNav ===index ? 'active' : ''}}"
                    hover-class="a-dropdown-nav-item-hover"
                    onTap="_onNavItemTap"
                    data-index={{index}}
                >
                    <text>{{item.nav}}</text>
                    <view class="triangle"></view>
                </view>
            </block>
        </view>

        <scroll-view scroll-y="{{true}}" class="a-dropdown-contents">
            <block a:for={{listData}} a:for-item="list" a:for-index="parentIndex">
                <view hidden="{{selectedNav !== parentIndex}}">
                    <view class="a-dropdown-list-items {{active? 'show' : ''}}">
                        <block a:for={{list.data}} >
                            <view
                                class="a-dropdown-list-item {{index !== (list.data.length - 1) ? '': 'last'}} 
                                {{index === list.selectedItem ? 'selected': ''}}"
                                hover-class="a-dropdown-list-item-hover"
                                onTap="{{list.onListItemTap || '_onListItemTap'}}"
                                catchTap="{{list.onListItemTap || '_catchListItemTap'}}"
                                data-index={{index}}
                                data-parentIndex={{parentIndex}}
                                data-title={{item.title}}>
                                <view class="a-dropdown-list-item-line 
                                {{item.textMode ? 'a-dropdown-list-item-line-' + item.textMode : ''}}">
                                    <image a:if={{item.thumb}} class="a-dropdown-list-item-thumb" 
                                    src="{{item.thumb}}" mode="scaleToFill" />
                                    <text class="a-dropdown-list-item-content">{{item.title}}</text>
                                    <view a:if={{item.extra}} class="a-dropdown-list-item-extra" >{{item.extra}}</view>
                                    <view class="a-dropdown-list-item-check"/>
                                    <view class="a-dropdown-list-item-bottom" />
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </block>
        </scroll-view>

        <view class="a-dropdown-placeholder"></view>
        <view class="a-dropdown-bg" onTap="_catchBgTap"></view>
    </view>
</template>
acss：這裏的background-image用的都是阿里巴巴的矢量圖標庫裏的圖標然後轉化爲svg的格式加載的。 

.a-dropdown-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100rpx;
}

.a-dropdown-wrapper.expand {
    position: fixed;
    height: 100%;
    z-index: 99;
}

.a-dropdown-nav {
    display: flex;
    position: relative;
    border-bottom: 1px solid #ddd;
    background: #fff;
    min-height: 100rpx;
    z-index: 99;
}

.a-dropdown-nav-item {
    flex: 1;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
}

.a-dropdown-nav-item-hover {
    background: rgba(0, 0, 0, 0.03);
}

.a-dropdown-nav-item.active {
    color: #f76a24;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    border-top: 10rpx solid #000;
    border-bottom: 0;
    vertical-align: middle;
    display: inline-block;
}

.a-dropdown-nav-item.active .triangle {
    border-bottom: 10rpx solid #f76a24;
    border-top: 0;
}

.a-dropdown-contents {
    max-height: 100%;
    z-index: 2;
}

.a-dropdown-list-items {
    height: 0;
    overflow: hidden;
    background: #fff;
    position: relative;
    z-index: 98;
}

.a-dropdown-list-items.show {
    height: auto;
}

.a-dropdown-list-items .a-dropdown-list-item {
    display: flex;
    font-size: 30rpx;
    line-height: 1.5;
    color: #333333;
    min-height: 88rpx;
    align-items: center;
    padding-left: 30rpx;
    background: #fff;
}

.a-dropdown-list-item.selected {
    color: #f76a24;
}

.a-dropdown-list-item .a-dropdown-list-item-bottom {
    display: block;
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #ddd;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
}

.a-dropdown-list-item .a-dropdown-list-item-thumb {
    width: 44rpx;
    height: 44rpx;
    margin-right: 30rpx;
}

.a-dropdown-list-item .a-dropdown-list-item-line {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    padding-right: 30rpx;
    min-height: 88rpx;
    overflow: hidden;
}

.a-dropdown-list-item .a-dropdown-list-item-content {
    flex: 1;
    font-size: .34rem;
    text-align: left;
    line-height: 1.5;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: .14rem;
    padding-bottom: .14rem;
}

.a-dropdown-list-item.last .a-dropdown-list-item-bottom {
    border-bottom: none;
}

.a-dropdown-list-item .a-dropdown-list-item-line-wrap .a-dropdown-list-item-content {
    white-space: normal;
}

.a-dropdown-list-item.a-dropdown-list-item-hover {
    background-color: #ddd;
}

.a-dropdown-list-item-check {
    display: block;
    width: 35rpx;
    height: 35rpx;
    margin-left: 16rpx;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1500636672907" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1435" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350"><defs><style type="text/css"></style></defs><path d="M824.66816 299.58144 429.54752 694.70208l-190.32064-190.32064c-8.00768-8.00768-20.95104-8.00768-28.95872 0s-8.00768 20.95104 0 28.95872l204.8 204.8c3.9936 3.9936 9.23648 6.00064 14.47936 6.00064s10.48576-2.00704 14.47936-6.00064l409.6-409.6c8.00768-8.00768 8.00768-20.95104 0-28.95872S832.65536 291.57376 824.66816 299.58144z" p-id="1436" fill="#f76a24"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: transform 0.3s;
    visibility: hidden;
}

.a-dropdown-list-item.selected .a-dropdown-list-item-check {
    visibility: visible;
}

.a-dropdown-placeholder {
    min-height: 150rpx;
    z-index: 1;
    flex: 1;
}

.a-dropdown-bg {
    opacity: 0;
    transition: opacity linear 0.1s;
}

.expand .a-dropdown-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    opacity: 0.4;
    z-index: 1;
}

三：通用的錯誤頁：這沒什麼好說的，看圖就知道了。

效果圖：

四：宮格

效果圖：


axml：

    <view class="grid">
        <block a:for="{{list}}">
            <view
            style="width:{{100/(columnNum || 4)}}%;padding-top:{{100/(columnNum || 4)}}%;" 
            class="grid-item" onTap="handleItemTap"
            data-index={{index}}>
                <view class="grid-item-wrapper">
                    <image src="{{item.icon}}" class="grid-icon" mode="aspectFit" />
                    <text class="grid-text">{{item.text}}</text>
                </view>
            </view>
        </block>
    </view>
acss：

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.grid-item {
    text-align: center;
    position: relative;
    background-color: white;
    position: relative;
}

.grid-item-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.grid-icon {
    width: 30%;
    height: 30%;
}

.grid-text {
    color: #000;
    font-size: 28rpx;
    line-height: 1;
    margin-top: 28rpx;
}
j s:
Page({
    data: {
        grid: {
            list: [
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "1"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "2"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "3"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "4"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "5"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "6"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "7"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "8"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "9"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "10"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "11"
                },
                {
                    "icon": "https://zos.alipayobjects.com/rmsportal/HMVRwQoJUDyxZVkTyIqF.png",
                    "text": "12"
                }
            ],
            columnNum: 4
        }
    },
    handleItemTap(e) {
        my.showToast({
          content: `第${e.currentTarget.dataset.index}個Item`,
          success: (res) => {
            
          },
        });
    }
})
五：列表：基本上個人中心啊設置啊這些界面就用這個就夠了。

效果圖：


axml：
    <scroll-view scroll-y>
        <view>
            <view class="a-list">
                <block a:if={{header}}>
                    <view class="a-list-header">{{header}}</view>
                </block>
                <view a:if={{data}} class="a-list-items">
                    <block a:for={{data}}>
                        <view
                            class="a-list-item {{index !== (data.length - 1) ? '': 'last'}} 
                            am-list-item-{{item.align || 'middle'}}"
                            hover-class="a-list-item-hover"
                            onTap="{{onItemTap}}"
                            data-index={{index}}
                        >
                <view class="a-list-item-line {{item.textMode ? 'a-list-item-line-' + item.textMode : ''}}">
                <image a:if={{item.thumb}} class="a-list-item-thumb" src="{{item.thumb}}" mode="scaleToFill" />
                <text class="a-list-item-content">{{item.title}}</text>
                <view a:if={{item.extra}} class="a-list-item-extra" >{{item.extra}}</view>
                <view a:if={{item.arrow}} class="a-list-arrow a-list-arrow-{{item.arrow}}" />
                <view class="a-list-item-bottom" />
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
    </scroll-view>
acss：
.a-list {
    box-sizing: border-box;
}

.a-list .a-list-header {
    padding: 30rpx 30rpx 18rpx;
    font-size: 28rpx;
    color: #888;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.a-list .a-list-items .a-list-item {
    display: flex;
    font-size: 30rpx;
    line-height: 1.5;
    color: #333333;
    min-height: 88rpx;
    align-items: center;
    padding-left: 30rpx;
    background: #fff;
}

.a-list .a-list-item .a-list-item-bottom {
    display: block;
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #ddd;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
}

.a-list .a-list-item .a-list-item-thumb {
    width: 44rpx;
    height: 44rpx;
    margin-right: 30rpx;
}

.a-list .a-list-item .a-list-item-line {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    padding-right: 30rpx;
    min-height: 88rpx;
    overflow: hidden;
}

.a-list .a-list-item.am-list-item-top .a-list-item-line {
    align-items: flex-start;
}

.a-list .a-list-item.am-list-item-middle .a-list-item-line {
    align-items: center;
}

.a-list .a-list-item.am-list-item-bottom .a-list-item-line {
    align-items: flex-end;
}

.a-list .a-list-item .a-list-item-content {
    flex: 1;
    flex: 1;
    color: #000;
    font-size: .34rem;
    text-align: left;
    line-height: 1.5;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: .14rem;
    padding-bottom: .14rem;
}

.a-list .a-list-item.last .a-list-item-bottom{
    border-bottom: none;
}

.a-list .a-list-item .a-list-item-extra {
    flex-basis: 36%;
    color: #888;
    font-size: 32rpx;
    text-align: right;
    line-height: 1.5;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: .14rem;
    padding-bottom: .14rem;
}

.a-list .a-list-item .a-list-item-line-wrap .a-list-item-content, .a-list .a-list-item .a-list-item-line-wrap .a-list-item-extra {
    white-space: normal;
}

.a-list .a-list-item.a-list-item-hover {
    background-color: #ddd;
}

.a-list .a-list-arrow {
    display: block;
    width: 30rpx;
    height: 30rpx;
    margin-left: 16rpx;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="26" viewBox="0 0 16 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="UI-KIT_基礎元件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="9.9基礎元件" transform="translate(-5809.000000, -8482.000000)" fill="#C7C7CC"><polygon id="Disclosure-Indicator" points="5811 8482 5809 8484 5820.5 8495 5809 8506 5811 8508 5825 8495"></polygon></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    visibility: hidden;
    transition: transform 0.3s;
}

.a-list .a-list-arrow.a-list-arrow-horizontal {
    visibility: visible;
}

.a-list .a-list-arrow.a-list-arrow-vertical {
    visibility: visible;
    transform: rotate(90deg);
}

.a-list .a-list-arrow.a-list-arrow-vertical-up {
    visibility: visible;
    transform: rotate(270deg);
}

js：
Page({
  ...list,
  data: {
    listData: {
      onItemTap: 'handleListItemTap',
      header: 'list1',
      data: [
        {
          title: '標題文字',
          extra: '基本使用'
        },
        {
          thumb: 'https://zos.alipayobjects.com/rmsportal/NTuILTPhmSpJdydEVwoO.png',
          title: '標題圖片',
          arrow: 'horizontal',
        },
        {
          title: '標題文字',
          arrow: 'horizontal',
          extra: '帶箭頭'
        },
        {
          thumb: 'https://zos.alipayobjects.com/rmsportal/NTuILTPhmSpJdydEVwoO.png',
          title: '標題文字',
          arrow: 'horizontal',
          extra: '完整使用'
        },
        {
          title: '標題文字不換行很長很長很長很長很長很長很長很長很長很長',
          arrow: 'horizontal',
        },
        {
          title: '標題文字換行很長很長很長很長很長很長很長很長很長很長',
          arrow: 'horizontal',
          textMode: 'wrap'
        },
        {
          title: '標題文字很長很長很長很長很長很長很長很長很長很長很長很長很長很長',
          extra: '沒有箭頭',
          textMode: 'wrap'
        },
        {
          title: '標題文字很長很長很長很長很長很長很長很長很長很長很長很長很長很長',
          extra: '子元素垂直對齊',
          textMode: 'wrap',
          align: 'top'
        },
      ]
    },
  },
  handleListItemTap(e) {
    my.showToast({
      content: `第${e.currentTarget.dataset.index}個Item`,
      success: (res) => {

      },
    });
  }
})
六：標籤：demo裏只有3個標籤，如果加多了的話，就不適用了，這裏只需要將外層的display：flex，改成 flex
效果圖：


axml：
<view class="container">
    <view class="mt-24"><text>事故類別：</text></view>
    <view class="tag-list">
        <block a:for="{{tags}}">
  <view class="a-tag {{props.selected ? 'a-tag-active' : 'a-tag-normal'}}" onTap="{{props.onChange}}" data-selected="{{props.selected}}">
          <text class="tag">{{props.label}}<text>
  </view>  
        </block>
    </view>
    <view class="mt-24">
        <text>您選擇的是: {{selectedLables}}</text>
    </view>
</view>

acss：
.a-tag {
    display: inline-block;
    position: relative;
    font-size: 28rpx;
    text-align: center;
    padding: 0 30rpx;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 6rpx;
    box-sizing: border-box;
    margin: 20rpx;
}

.a-tag-normal {
    background-color: #fff; 
    color: #888;
    border: 1px solid #ddd;
}

.a-tag-active {
    background-color: #fff;
    color: #108ee9;
    border: 1px solid #108ee9;
}
.container {
    padding: 0 20rpx;
}

.mt-24 {
    margin-top: 24rpx;
}

.tag-list {
    //display: flex;   將這裏去掉就好了
    //justify-content: space-between;

    flex-wrap: wrap;
   
    margin-top: 24rpx;
}


j s:







Page({
    data: {
        selectedLables: ',疾病醫療,',
        tags: [
            {
                label: '意外醫療',
                selected: false,
                onChange: 'onTagChange1',
            },
            {
                label: '疾病醫療',
                selected: true,
                onChange: 'onTagChange2',
            },
            {
                label: '疾病住院',
                selected: false,
                onChange: 'onTagChange3',
            },
            {
                label: '疾病住院',
                selected: false,
                onChange: 'onTagChange4',
            },
            {
                label: '疾病住院',
                selected: false,
                onChange: 'onTagChange5',
            },
            {
                label: '疾病住院',
                selected: false,
                onChange: 'onTagChange6',
            },
            {
                label: '疾病住院',
                selected: false,
                onChange: 'onTagChange7',
            }, {
                label: '疾病住院',
                selected: false,
                onChange: 'onTagChange8',
            },

        ]
    },
    onTagChange1(e) {
        this.onTagChange(e.target.dataset.selected, 0);
    },
    onTagChange2(e) {
        this.onTagChange(e.target.dataset.selected, 1);
    },
    onTagChange3(e) {
        this.onTagChange(e.target.dataset.selected, 2);
    },
    onTagChange4(e) {
        this.onTagChange(e.target.dataset.selected, 3);
    },
    onTagChange5(e) {
        this.onTagChange(e.target.dataset.selected, 4);
    },
    onTagChange6(e) {
        this.onTagChange(e.target.dataset.selected, 5);
    },
    onTagChange7(e) {
        this.onTagChange(e.target.dataset.selected, 6);
    },
    onTagChange8(e) {
        this.onTagChange(e.target.dataset.selected, 7);
    },
    onTagChange(selected, index) {
        const tempTag = [].concat(this.data.tags);
        tempTag[index].selected = !selected;
        const labels = tempTag.map((item) => item.selected ? item.label : '').join(',');
        this.setData({
            tags: tempTag,
            selectedLables: labels,
        });
    }
})

以上幾個都是常用到的模板，具體模板在這裏，下載就可以了。
















發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








支付寶小程序掃碼和確認彈框






需求背景
用戶掃碼二維碼，獲得了一串數字，彈框提示是否對這串數字操作
確認，調用2個接口，取消，不做操作
知識點
my.scan調用掃碼功能
res.code是掃碼結果
my.confirm還確認和取消的彈框
result.con






giiiig

2020-06-21 17:39:43









小程序開發過程中問題總結(一)個人查看用，比較潦草






1、頁面路由的註冊
1）跳轉到一個頁面的寫法注意事項
redirectTo(){
my.redirectTo({
url: ‘…/result/index’,
})
}
注意寫相對路徑時候加上…後面的斜槓
2）
註冊一個頁面：
貌






giiiig

2020-06-21 17:39:43









支付寶小程序定義一個變量






組件中定義一個變量及用法






giiiig

2020-06-21 17:39:43









支付寶小程序獲取手機號碼的的詳細流程。（配置開發設置，具體流程）






专业前端小白

2020-05-12 21:22:19









uni-app 開發微信，支付小程序






uni-app，開發過程中，對微信小程序兼容性較好，
支付寶：
獲取經緯度問題：
api：uni.getLocation，需要設置如下，不然獲取不到定位走false
uni.getLocation({
// type: 'gcj02'






cyclv

2020-06-30 03:18:20









國外巨頭蘋果對國內小程序廠商的無情收割——Apple Clips，蘋果主推親兒子蘋果小程序






隨着深夜凌晨1點的蘋果2020WWDC開發者大會的開幕，蘋果公司不斷拋出一個個驚喜。而其中除了早已預測的蘋果要自研芯片的重磅消息外，其中有一項不容國內開發者忽視的重大消息——蘋果推出了自己的小程序。
國內小程序市場
自從微信推






webmote

2020-06-29 04:29:17









每日一記：支付寶小程序通過左右滑動屏幕進行切換頁面






目前很多手機app都支持左右滑動屏幕進行切換頁面，提升了用戶體驗，有其是大屏手機，要點擊左上角的返回按鍵確實有點辛苦！
這裏以支付寶小程序爲例，演示如何在小程序中實現上述效果。
廢話不多說，直接上乾貨：
1、在.axml文件的最外層視圖容






one微博城

2020-06-25 12:42:07









支付寶小程序頁面和組件通信--個人看的文章，比較潦草






頁面和組件之間怎麼通信
例如我要根據1輸入框裏面的信息，更新2裏面組件的內容
1輸入框是在page裏面，2列表是在一個組件裏面，2怎麼拿到1輸入的值
這應該是一個比較簡單的問題，但在網上一直搜不到答案，頁面怎麼和組件通信
微信小






giiiig

2020-06-21 17:39:43









【開源】多多客發佈 3.0.0-alpha.6，Koa+Vue+Taro最佳實踐






多多客（doodooke）是一款基於Koa+Vue+Taro開發，支持微信，百度，支付寶小程序的第三方SaaS平臺。
本次重要更新
優化打賞不顯示打賞人
新增登錄的賬號未綁定微信的情況下提示綁定微信
優化safari下頁面組件樣式問題
優






qingfouyun

2020-06-16 11:24:09









支付寶小程序開發之使用 alipay.fund.trans.uni.transfer接口支付寶打款到銀行卡






使用alipay.fund.trans.uni.transfer接口進行打款必須使用支付寶公鑰證書進行簽名，但是支付寶提供的alipay-sdk並不支持支付寶公鑰證書加密，所以，我們必須自己進行加密。
官方說明文檔參考：
配置公鑰證書 h






ctbinzi_

2020-06-14 09:04:30









微信or支付寶 小程序 與 H5 相互關係






微信小程序與H5的關係
1. 微信小程序內嵌H5
// html
<web-view src="{{url}}"></web-view>
// js
onLoad(options) {
this.setData({






zhooson

2020-06-13 07:56:23









支付寶小程序，驗簽出錯,建議檢查簽名字符串或簽名私鑰與應用公鑰是否匹配






支付寶小程序，簽名方式爲證書時
應用私鑰是這個xx私鑰文件裏的密鑰






想吧

2020-06-07 08:04:51









支付寶小程序擴展組件的安裝及使用






An20133102

2020-06-01 21:53:58









使用VS Code微信小程序如何快速移植到支付寶小程序（Antmove篇）






刺心疯

2020-05-11 00:31:46









使用VS Code工具進行微信小程序移植到支付寶小程序（wx2my篇）






刺心疯

2020-05-11 00:31:46