loading请求处理中...
手机版 新型设计开发 托付式服务平台 全国站
新人享福利×
当前位置: 首页 > 威客攻略 > 网站程序开发

支付宝小程序开发网站

2019-06-18 18:33:10 阅读 28244次 0 标签: 网站程序开发 作者: 陈先生12121

可能大多数人对微信小程序很熟悉,但是对于支付宝小程序了解并不是很多,因为做了一个支付宝小程序,所以把自己遇到的一些问题,,现将其中的一些经验和坑记录下来,防止以后忘记,

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

顾名思义,支付宝小程序它就是手机应用嵌入支付宝客户端的一种方法,有以下特点:
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

        });

    }

});


扫码,回复【创业】领取

免费送您一份创业礼包!

从0到1,解锁创业全套秘籍

帮你避开创业那些坑

设计、开发、营销需求

扫描左边二维码

免费获取咨询和方案报价

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

相关文章

留言(0 展开评论

您需要注册登录才能发表言论

快速发任务

开发价格是多少?怎样找到合适的开发人才?

官方顾问免费为您解答

 
开发相关任务
DESIGN TASK 更多
医院药剂科公众号开发

¥6000 已有5人投标

求购一款客户订单的app

¥5000 已有2人投标

网站前端开发

¥5000 已有2人投标

开发一个聊天软件

¥10000 已有5人投标

小微商户系统

¥8000 已有1人投标

服务排行榜
SERVICE LIST 更多
全案VI设计 LOGO 名片 QQ...
价格面议 成交509
新萝卜-最实惠 QQ2108760...
【设计总监】包装设计 3套...
¥6000元 /件 成交491
新萝卜-最实惠 QQ2108760...
企业公司品牌logo设计图文...
¥500元 /起 成交483
初创网络传媒有限公司...
【普通设计师】LOGO设计 2...
¥800元 /件 成交422
新萝卜-最实惠 QQ2108760...
牛人设计总监 全网中标最...
¥5000元 /件 成交410
新萝卜-最实惠 QQ2108760...
资深设计师操刀
¥1200元 /件 成交394
新萝卜-最实惠 QQ2108760...
【高端LOGO】 全网中标最...
¥1300元 /起 成交375
大思设计 「标志&包装...
PPT设计定制策划制作美化...
¥300元 /起 成交364
利宏营销策划
【资深设计师】包装设计 ...
¥1500元 /件 成交362
新萝卜-最实惠 QQ2108760...
【总监设计师】高端LOGO设...
¥1800元 /件 成交361
新萝卜-最实惠 QQ2108760...