我们先来看看支付宝小程序和微信小程序开发的区别(支付宝小程序和微信小程序开发的区别)

支付宝小程序和微信小程序开发的区别

一。app.json

（1）设置小程序的通用状态栏、导航栏、标题和窗口背景颜色。

支付宝小程序

"窗口& quot:{ & quot默认标题& quot:& quot病历回家”，//页面标题“titleBarColor & quot:& quot# 1688FB & quot//导航栏背景色}，微信小程序

"窗口& quot:{ & quotbackgroundTextStyle & quot:& quot光& quot，//窗口“navigationBarBackgroundColor & quot；:& quot# 1688FB & quot，//导航栏背景色“navigationBarTitleText & quot:& quot病历回家“，//导航栏标题“navigationBarTextStyle & quot:& quot白色& quot//导航栏的标题颜色仅支持黑/白。

②设置标签栏

支付宝小程序

"tabBar & quot:{ & quottextColor&quot:& quot# 333333 & quot，//默认颜色“selectedColor & quot:& quot# 1688FB & quot，//选择颜色“backgroundColor & quot:& quot# ffffff & quot，//背景色“items & quot：

微信小程序

我分别在微信小程序和支付宝小程序中设置页面，区别在于:

1.支付宝小程序中的视图图层页面文件后缀为“axml”，样式文件后缀为“ACSS”；

2.微信小程序中的视图图层页面文件后缀为“wxml”，样式文件后缀为“wxss”。

（2）查看图层页面axml和wxml

1.泡沫事件和非泡沫事件

支付宝小程序

onTap、catchTap

On事件绑定不会阻止冒泡事件向上冒泡，而catch事件绑定可以阻止冒泡事件向上冒泡。

& ltbutton class = & quotweui -BTN & quot；onTap = & quot登录& quottype = & quot主要& quot& gt注册

bindtap、catchtouchstart

绑定事件绑定不会阻止冒泡事件向上冒泡，而catch事件绑定可以阻止冒泡事件向上冒泡。

& ltbutton class = & quotweui -BTN & quot；bindtap = & amp#39;登录&amp。#39;type = & quot主要& quot& gt注册

page（{ data:{ list:【{ Title:& amp；#39;支付宝&；#39;，}，{ Title:& amp；#39;微信和# 39；}】} }）支付宝小程序

& lt块a:for = & quot；{ { list } } & quot& gt& lt视图键= & quotitem -{ { index } } & quot；index = & quot{ { index } } & quot& gt{{item。Title } } & lt/view & gt；& lt/block & gt；微信小程序

& lt阻止wx:for = & quot；{ { list } } & quot& gt& lt视图wx:key = & quot；这& quotwx:for -item = & quot；item & quot& gt{{item。Title } } & lt/view & gt；& lt/block & gt；3.条件渲染

支付宝小程序

& lt观点a:if = & quot；{ { length & gt5 } } & quot& gt1 & lt/view & gt；& lt观点a:elif = & quot；{ { length & gt2 } } & quot& gt2 & lt/view & gt；& lt视图a:else & gt；3 & lt/view & gt；微信小程序

& ltview wx:if = & quot；{ { length & gt5 } } & quot& gt1 & lt/view & gt；& ltview wx:elif = & quot；{ { length & gt2 } } & quot& gt2 & lt/view & gt；& lt查看wx:else & gt；3 & lt/view & gt；第三，开发过程中常用的两个小程序中组件的不同用法。

⑴互动

1.消息提示框

支付宝小程序

my . show toast（{ type:& amp；#39;成功& amp#39;，//默认无，支持成功/失败/异常/无。内容:& amp#39;操作成功&；#39;，//文本内容持续时间:3000，//显示持续时间，单位为毫秒，默认为2000成功:（）= & gt{ my . alert（{ title:& amp；#39;土司消失了&；#39;, });},});my . Hide toast（）//隐藏弱提示。微信小程序

wx . show toast（{ title:& amp；#39;成功&；#39;，//提示图标的内容:&；#39;成功& amp#39;//success显示成功图标；加载显示加载图标；无不显示图标持续时间:2000 }）//当图标为“成功”“正在加载”正在加载时，标题文本最多显示7个汉字长度wx . Hide toast（）//Hide 2。消息提示框。

支付宝小程序

my . show loading（{ content:& amp；#39;装货...&;#39;，延迟:1000，}）；my . hide loading（）；微信小程序

wx . show loading（{ title:#39;正在加载&；#39;，}）wx . hiding（）3 . http请求

支付宝小程序

my . http request（{ URL:& amp；#39;http://httpbin.org/post&第39名；，方法:& amp#39;邮政和邮政。#39;，数据:{ from:& amp；#39;支付宝&；#39;，生产:#39;AlipayJSAPI & amp#39;，}，标题:& quot"，//Default { &；#39;内容-类型&amp。#39;:& amp#39;应用程序/x-www-form -URL encoded & amp；#39;}数据类型:#39;json&amp#39;，success:function（RES）{ my . alert（{ content:& amp；#39;成功& amp#39;});}，fail:function（RES）{ my . alert（{ content:& amp；#39;失败与失败。#39;});}，complete:function（RES）{ my . hide loading（）；my . alert（{ content:& amp；#39;完成& amp#39;});}});微信小程序

wx . request（{ URL:& amp；#39;测试。& amp#39;，//只是一个例子，不是真正的接口地址数据:{ x:&；#39;& amp#39;y:& amp；#39;& amp#39;}，header:{ & amp；#39;内容-类型&amp。#39;:& amp#39;应用/JSON & amp；#39;//默认值}，success（RES）{ console . log（RES . data）}）实际上，微信小程序和支付宝小程序提供的api方法基本相同，只是微信小程序以“wx”开头。支付宝小程序以“我的”开头。剩下的可能只是api方法中的“文本、内容、名称和标题”字段。

②选择器

1.时间选择器

支付宝小程序

支付宝小程序提供了一个api，my.datePicker（对象）。

my . date picker（{ format:& amp；#39;yyyy-MM-DD & amp；#39;，//返回的日期格式，current Date:&；#39;2012-12-12。#39;，//初始选择的日期和时间，默认当前时间start date:&；#39;2012-12-10。#39;，//最小日期时间结束日期:&；#39;2012-12-15。#39;，//最大成功日期和时间:（RES）= & gt；{ my . alert（{ content:RES . date，}）；},});微信小程序

微信小程序是通过picker组件实现的。

& lt视图class = & quot第& quot& gt& lt视图class = & quot第_ _节title & quot& gt日期选择器

支付宝小程序

支付宝小程序提供了一个API my . multi level select（Object）。

级联选择功能主要用于多级关联数据选择，如省市信息选择。

1.1.介绍一个省市的json格式文件http://blog.shzhaoqi.com/uploads/js/city_json.zip。

1.2.将该文件引入js。

1.3，使用my.multiLevelSelect（对象）

var citysJSON = require（& amp；#39;../../utils/city . js & amp；#39;);page（{ data:{ provinces:& amp；#39;陕西省&；#39;城市:& amp#39;Xi安& # 39；，面积:& amp#39;碑林区。}，choose address:function（）{ my . multi level select（{ title:& amp；#39;选择省市&；#39;，//级联选择标题列表:cityjson.citys，success:（RES）=》{ this . setdata（{ provinces:RES . result【0】。姓名、城市:RES . result【1】。名称、区域:RES . result【2】。name，}）} }）；}，}）微信小程序

微信小程序仍然是通过picker组件实现的。

& lt视图class = & quot第& quot& gt& lt视图class = & quot第_ _节title & quot& gt省级选举人

支付宝小程序

my . trade pay（{ trade no:& amp；#39;201711152100110410533667792 & amp；#39;//调用统一收单交易创建接口（alipay.trade.create），获取返回字段支付宝交易号:（RES）=》{ my . alert（{ content:JSON . stringify（RES），}）；}，fail:（RES）= & gt；{ my . alert（{ content:JSON . stringify（RES），}）；}});微信小程序

wx . request payment（{ timeStamp:& amp；#39;& amp#39;，//timestamp，自1970年1月1日00:00:00以来的秒数，即当前时间nonce str:&；#39;& amp#39;，//长度小于32个字符的随机字符串package:&；#39;& amp#39;，//统一订购接口返回的prepay_id的参数值，提交格式如下:prepay _ ID = * * * sign type:&；#39;MD5 & amp#39;，//签名算法paysign:&；#39;& amp#39;，//签名成功（RES）{ }，失败（RES）{ } }）（4）电话

支付宝小程序

my . make phone call（{ number:& amp；#39;400-8097-114。#39;}）微信小程序

wx . make phone call（{ phone number:& amp；#39;400-8097-114。#39;}）（5）获取登录凭证（代码）

支付宝小程序

my . getauthcode（{ success（RES）{ if（RES . authcode）{ console . log（RES . authcode）} }）微信小程序

wx . log in（{ success（RES）{ if（RES . code）{ console . log（RES . code）} }）支付宝小程序和微信小程序有很多相似之处，无论是组件还是api都会给你一种熟悉的感觉！

这几篇文章你可能也喜欢：

• 我们先来看看支付宝小程序和微信小程序开发的区别(微信小程序和支付宝小程序常见吗？)

本文由主机参考刊发，转载请注明：我们先来看看支付宝小程序和微信小程序开发的区别(支付宝小程序和微信小程序开发的区别) https://zhujicankao.com/113936.html