支付宝小程序开发网站

我们先说说支付宝小程序它是什么？

顾名思义，支付宝小程序它就是手机应用嵌入支付宝客户端的一种方法，有以下特点：
1.基于 Web 技术，学习成本低
2.一套代码，同时支持 iOS 和 Android，接近原生体验
3.提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)

其实在写支付宝小程序时会发现它和微信小程序极其相似，但却有自己原有的组件和写法，下面我们来仔细说说。

1.支付宝小程序页面的四种类型的文件

每个支付宝小程序页面都由这四个文件构成：
axml--------类似于html，wxml文件
acss--------类似于css，wxss文件
js -----------JavaScript文件
json---------项目配置文件

接下来我们来看看项目生成后自带的app文件：
App代表顶层应用，管理所有页面和全局数据，以及提供生命周期方法。它也是一个构造方法，生成App实例。一个小程序就是一个App实例。
每个小程序的顶层一般包含三个文件。
app.js：应用逻辑
app.acss：应用样式（可选）
app.json：应用配置

"color:{{color}}">view>

class属性：用于指定样式规则，属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，之间用空格分隔。一般情况下静态的样式统一写到class中。

class="bg">view>

（3）全局样式与局部样式
全局样式定义在app.acss中的样式，作用于每一个页面。
局部样式在 Page 的acss文件中定义的样式，只作用在对应的页面，并会覆盖app.acss中相同的选择器。

3.事件

什么是事件？

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件函数。
事件对象可以携带额外信息，如 id, dataset, touches。

事件绑定的写法同组件的属性，以 key、value 的形式。
key 以on或catch开头，然后跟上事件的类型，onTap, catchTap
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
注意：微信小程序中以bind开头，on事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡。

（1）在组件中绑定一个事件处理函数。
如onTap，当用户点击该组件的时候会在该页面对应的Page中找到对应的事件处理函数。

 <view class="zuLin" onTap="show">
     <text>立即租赁text>
 view>

onTap

（2）在相应的Page定义中写上相应的事件处理函数,这里我没有传入参数。

Page({
   show: function(){
      this.setData({flag: false})
   },
 )}

在这个栗子中，给立即租赁绑定一个点击事件，点击它就会出现下单浮层，也就是一个遮罩页面。给大家展示一下遮罩页面

一、用户授权 & 获取用户信息

注意：在获取用户信息 调试 时（如显示用户头像时），一定要使用真机预览。因为有时候在 蚂蚁开发者工具 上没有问题，用户信息都能获取到，而在真机上就是undefined。

通过 用户授权 接口可以获取授权码，可以选择 auth_user（主动授权） / auth_base（静默授权）/ auth_zhima（芝麻信用），都可以获取到授权码。 

*但是，使用后两种是无法获取到用户信息的。即上面提到的情况，工具上正常，真机上获取不到。 

所以一定记住：使用主动授权方式且授权成功之后才可以获取到用户信息。

在和服务器交互的时候，是必须要用到authCode授权码的，而用户信息往往只是展示效果不是必须的。我认为比较可行的做法是：在app.js中使用静默授权的方式获取到authCode（传给服务器），在需要显示用户信息的地方再使用主动授权获取用户信息（这样如果用户拒绝了授权也不会影响程序的继续执行），然后将用户信息存储起来（可以存储为全局数据，也可以存储在本地缓存中）。

二、地图接口注意

使用支付宝小程序的地图接口，在创建并使用返回的 map 上下文对象，来加载地图，显示地图控件（controls）和地图标记（marker）的时候。地图控件和地图标记所用的图标的地址必须要用绝对路径，否则在真机上是不显示的（在IDE模拟上可以显示）。

三、上传图片

先来两张demo图片瞧一瞧： 

实现代码如下：（分别为 .acss / .axml / .js 中的代码片）

.h1 { margin: 0.2rem 0.25rem 0; font-size: 16px }

.uploadImgBtn { width: 4rem; border: none; background-color: #0c9; color: #fff; margin: 0.4rem auto 0; border-radius: 1rem }

.allImgBox { width: 740rpx; margin-top: 30rpx }

.imgBox, .addImgBox { display: inline-block; width: 140rpx; height: 140rpx; position: relative; margin: 0 22rpx 35rpx; vertical-align: middle }

.imgBox image,

.addImgBox text { width: 140rpx; height: 140rpx; border: 2rpx dotted #aaa }

.imgBox .delImg { position: absolute; top: -20rpx; right: -20rpx; height: 18px; overflow: visible }

.addImgBox text { display: inline-block; line-height: 140rpx; text-align: center; font-size: 24rpx; color: #aaa }

.photo-attention { color: #333333; font-size: 0.3rem; line-height: 0.5rem; padding: 0 25rpx }

上传图片

    {{addImgText}}

    照片要求:

    1. 最多六张

    2. XXXXXXXXXXX XXXXXXXXXXX

< button type="default" > 提交 < /button>

Page({

    data: {

        imgUrls: [],

        addImgText: "拍照/相册",

        canAddImg: true,

        maxAddImgNum: 6,

        i: 0,

        imgArr: []

    },

    addImg: function () {    // 上传照片

        var that = this;

        my.chooseImage({

            count: that.data.maxAddImgNum,

            success: (res) => {

                that.setData({i: 0, imgArr: res.apFilePaths});

                that.uploadImg();

            },

        });

    },

    toUploadImg: function(){},

    uploadImg: function() {

        var that = this;

        var ii = that.data.i;

        if(ii < that.data.imgArr.length){

            // my.uploadFile({

            //     url: "",    //自己服务器接口地址

            //     fileType: 'image',

            //     fileName: 'file',

            //     filePath: that.data.imgArr[that.data.i],

            //     formData: {   //这里写自己服务器接口需要的额外参数

            //         session: my.getStorageSync({key:'session'}).data

            //     },

            //     success: (res) => {

                    var res = {data:'{"data":{"image_url":'+JSON.stringify(that.data.imgArr[that.data.i])+'},"code":0,"msg":"u6210u529f"}', errMsg:"uploadFile:ok", statusCode:200};

                    //res是自己服务器接口返回的数据（image_url的值为服务器上的图片链接），这里用假数据模拟

                    var _imgUrls = that.data.imgUrls;

                    _imgUrls.push(JSON.parse(res.data).data.image_url);   //取到包含所有图片的数组

                    that.setData({imgUrls: _imgUrls});

                    _imgUrls.length == 0 && that.set_data(that,_imgUrls,"拍照/相册",true);

                    (_imgUrls.length > 0 && _imgUrls.length < that.data.maxAddImgNum) && that.set_data(that,_imgUrls,"+",true);

                    _imgUrls.length >= that.data.maxAddImgNum && that.set_data(that,_imgUrls.splice(0,that.data.maxAddImgNum),"+",false);

                    that.setData({i: ii+1});

                    that.uploadImg();

            //     },

            // });

        }

    },

    delImg: function (e) {    // 删除照片

        var index = e.target.dataset.index;

        var _imgUrls = this.data.imgUrls;

        _imgUrls.splice(index, 1);

        _imgUrls.length == 0 && this.set_data(this,_imgUrls,"拍照/相册",true);

        (_imgUrls.length > 0 && _imgUrls.length < this.data.maxAddImgNum) && this.set_data(this,_imgUrls,"+",true);

    },

    set_data: function(that,imgUrls,addImgText,canAddImg) {

        that.setData({

            imgUrls: imgUrls,

            addImgText: addImgText,

            canAddImg: canAddImg

        });

    }

});

这里有一点需要着重说明一下，也许有的人已经注意到了，这个demo是在用户每一次选择图片之后都进行上传操作，这样有利也有弊。

坏处：如果用户进行多次选择图片操作，选择后删除再选择又删除……，这样的话每一次选择的图片都会被上传到服务器上，而用户的删除操作不会将服务器上的清除，比较耗费服务器资源。

好处：在每一次选择图片之后进行上传，这样每一次等待的时间不会太长。而如果有很多要上传的图片，用户在多次选择完成，点击按钮（如提交按钮）后统一上传的话，可以想到，这么多的图片会上传很长时间，体验不好。

综合考虑，在上传图片数量多于5张的情况下，可以用上面demo的方式，每选择一次就将图片上传。小于5张图片的话，可以在提交的时候统一将选好的图片上传，这种方式的js代码如下：

Page({

    data: {

        imgUrls: [],

        addImgText: "拍照/相册",

        canAddImg: true,

        maxAddImgNum: 6,

        i: 0

    },

    addImg: function () {    // 上传照片

        var that = this;

        my.chooseImage({

            count: that.data.maxAddImgNum,

            success: (res) => {

                var _imgUrls = this.data.imgUrls;

                _imgUrls = _imgUrls.concat(res.apFilePaths);

                _imgUrls.length == 0 && that.set_data(that,_imgUrls,"拍照/相册",true);

                (_imgUrls.length > 0 && _imgUrls.length < that.data.maxAddImgNum) && that.set_data(that,_imgUrls,"+",true);

                _imgUrls.length >= that.data.maxAddImgNum && that.set_data(that,_imgUrls.splice(0,that.data.maxAddImgNum),"+",false);

            },

        });

    },

    toUploadImg: function(){

        this.uploadImg();

    },

    uploadImg: function() {

        var that = this;

        var ii = that.data.i;

        if(ii < that.data.imgUrls.length){

            // my.uploadFile({

            //     url: "",    //自己服务器接口地址

            //     fileType: 'image',

            //     fileName: 'file',

            //     filePath: that.data.imgUrls[that.data.i],

            //     formData: {   //这里写自己服务器接口需要的额外参数

            //         session: my.getStorageSync({key:'session'}).data

            //     },

            //     success: (res) => {

                    var res = {data:'{"data":{"image_url":"xxxxxx"},"code":0,"msg":"u6210u529f"}', errMsg:"uploadFile:ok", statusCode:200};

                    //res是自己服务器接口返回的数据（image_url的值为服务器上的图片链接），这里用假数据模拟

                    if(JSON.parse(res.data).code == 0){

                        console.log('上传成功' + that.data.i);

                    }

                    that.setData({i: ii+1});

                    that.uploadImg();

            //     },

            // });

        }else{

            that.setData({i:0})

        }

    },

    delImg: function (e) {    // 删除照片

        var index = e.target.dataset.index;

        var _imgUrls = this.data.imgUrls;

        _imgUrls.splice(index, 1);

        _imgUrls.length == 0 && this.set_data(this,_imgUrls,"拍照/相册",true);

        (_imgUrls.length > 0 && _imgUrls.length < this.data.maxAddImgNum) && this.set_data(this,_imgUrls,"+",true);

    },

    set_data: function(that,imgUrls,addImgText,canAddImg) {

        that.setData({

            imgUrls: imgUrls,

            addImgText: addImgText,

            canAddImg: canAddImg

        });

    }

});