支付宝小程序语法笔记

支付宝小程序

一、api语法

1、缓存

分同步异步

  //同步放入
my.setStorageSync({
          key: 'pat',
          data: {
            page: '1'
          }
        });


//同步取出
        var flag=my.getStorageSync({
          key: 'pat'
        }).data;
		if(flag.page == "1")
            
            //同步移除
            my.removeStorageSync({ key: 'pat' });

//异步操作
 my.setStorage({
        key: key,
        data: data})

2、生成二维码（需要企业账户才有权限，个人开发者没有）

my.ix.generateImageFromCode

if (my.canIUse('ix.generateImageFromCode')) {
  my.ix.generateImageFromCode({
    code: 'https://www.alipay.com',
    format: 'QRCODE',
    width: 200,
    correctLevel: 'H',
    success:(r)=>{
      console.log(JSON.stringify(r));
      this.setData({qrcode: r.image});
    }
  });
}

3、条件渲染a:if

<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>

4、rem与rpx单位换算

小程序的单位rpx是根据iphone6的设备宽度定义的。

(1).rpx:不论哪个型号的手机，屏幕宽度都是750rpx
rpx与px的转换，根据设计稿换算
例如：设计稿750px宽度，ps上量出或者标出的宽度是多少，那么就定义多少rpx，也就是，1px = 1rpx
例如：设计稿640px宽度，根据量出的或者标出的尺寸需要转换一下，1px = 750/640rpx
(2).rem:根据设计稿换算
例如：设计稿750px宽度，那么1rem = （750/20）rpx = 37.5px
例如：设计稿640px宽度，那么1rem = （640/20）rpx = 32px

5、生成二维码（需要企业账户才有权限，个人开发者没有）

https://www.cnblogs.com/xyyt/p/11737232.html

https://www.cnblogs.com/angfl/p/10243886.html

6、新建页面步骤

1、复制改名

2、app.json配置页面路径

7、红色星号必填项

1 . 常规写法

<label><span style="color:red;">* </span>用户名 : </label><input type="text" value=""/>

2 . CSS写法(更简洁方便 , 而且便于统一调整样式)

<style>    label.xrequired:before {        content: '* ';        color: red;    }</style><label class="xrequired">用户名 : </label><input type="text" value=""/>

8、发请求

// .js

my.request({
  url: 'https://httpbin.org/post',
  method: 'POST',
  data: {
    from: '支付宝',
    production: 'AlipayJSAPI',
  },
  headers:{
    'content-type':'application/json'  //默认值
  },
  dataType: 'json',
  success: function(res) {
    my.alert({content: 'success'});
  },
  fail: function(res) {
    my.alert({content: 'fail'});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: 'complete'});
  }
});

9、a:for

<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

10、提示my.showToast

        my.showToast({
          content: '错误！',
          duration: 1500,
        });

11、字符串true变成布尔值

支付宝不支持识别字符串布尔值，需要手动转换

JSON.parse(‘true’)

12、点击事件绑定

<view data-idx="{{idx}}" onTap="tap"> </view>

    tap(event)
    {var idx = event.target.dataset.idx;}

13、跳转页面

my.reLaunch({
      url: '/demo/my',
    })
my.redirectTo({ url: './back' });

my.navigateTo({
   url: "/pages/applyCard/applyCard?idCardFront=" + idCardFront + "&idCardContrary=" + idCardContrary
});//注意后面带的参数太长会被截掉，太长的参数使用缓存传递

my.navigateBack()//关闭当前页面返回上一页