微信小程序转为支付宝小程序注意点

微信小程序转为支付宝小程序

最近在做一个项目，需要将微信小程序转为支付宝小程序，因为第一次弄支付宝，现在将项目中遇到的一些问题、注意点总结一下

1：文件名修改

wxml改为axml
wxss改为acss

2调用api

js中调用方法由wx.改为my.
wx.request() => my. request()
axam中的循环、if判断等有wx:改为a:
wx:if => a:if
wx:for => a:for
wx:key => a:key
wx:for-item => a:for-item
wx:for-index => a:for-index

3html中调用方法

微信将调用方法写在.wxs文件中

var phone = function(val) {
    return val.substring(0, 4) + "*****" + val.substring(7, val.length);
   }
  module.exports = {
      phone:phone,
    }

wxml文件中导入对应方法

<wxs src="/wxs/substr.wxs" module="tools" />
        <text style="margin-right:10px;">{{tools.phone (comments.records[0].pjone)}}</text>

支付宝将调用方法写在.sjs文件中

var display = function (val) {
  return val ? (val.substring(0, 1) + "**") : '';
}
export default {
display:display,
}

axml文件中导入对应方法

<import-sjs from="/sjs/tools.sjs" name="tools"></import-sjs>
            <view class="row-title">{{tools.sub(option3[arrIndex1].text)}}</view>

4组件转换

微信小程序中常用的组件是vant组件，支付宝可以使用vant-aliapp组件（加载依赖），并在对应的json文件中加入

 "usingComponents": {
    "van-tabs": "vant-aliapp/dist/dist/tabs/index",
    "van-tab": "vant-aliapp/dist/dist/tab/index",
    "van-button": "vant-aliapp/dist/dist/button/index",
    "van-empty": "vant-aliapp/dist/dist/empty/index",
    "am-tabs": "mini-ali-ui/es/tabs/index",
    "tab-content": "mini-ali-ui/es/tabs/tab-content/index"
  }

注：并不是所有组件转换后都好用，类似于 van-dropdown-menu等组件vant-aliapp组件不能很好适应，可以使用mini-ali-ui组件（支付宝专用）进行组件替换

5绑定事件

微信	支付宝
bindchange	onChange
bindtap	onTap

6数据请求

微信中wx.request()请求数据时
header:{
headerToken : {},//对应toke
“content-type”: “application/json”//参数格式
},
在支付宝中my…request()请求数据时
headers:{
headerToken : {},//对应token
“content-type”: “application/json”//参数格式
},

7JS文件中具体api的变化

微信	支付宝	作用
wx.showModal(）	my.confirm(）	提示框

7page.json中差异

微信

"window": {
    "navigationBarTitleText": "互联网医院",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eeeeee"
  },
  "tabBar": {
    "selectedColor": "#0068B7",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/tab_home.png",
        "selectedIconPath": "images/tab_home_s.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/infomation/infomation",
        "iconPath": "images/tab_infomation.png",
        "selectedIconPath": "images/tab_infomation_s.png",
        "text": "资讯"
      },
      {
        "pagePath": "pages/me/me",
        "iconPath": "images/tab_me.png",
        "selectedIconPath": "images/tab_me_s.png",
        "text": "我的"
      }
    ]
  },

支付宝中

"window": {
    "defaultTitle": "互联网医院",
    "enableWK": "YES",
    "allowsBounceVertical": "YES"
  },
  "tabBar": {
    "textColor": "#404040",
    "selectedColor": "#108ee9",
    "backgroundColor": "#F5F5F9",
    "items": [
      {
        "pagePath": "pages/index/index",
        "icon": "images/tab_home.png",
        "activeIcon": "images/tab_home_s.png",
        "name": "首页"
      },
      {
        "pagePath": "pages/infomation/infomation",
        "icon": "images/tab_infomation.png",
        "activeIcon": "images/tab_infomation_s.png",
        "name": "资讯"
      },
      {
        "pagePath": "pages/me/me",
        "icon": "images/tab_me.png",
        "activeIcon": "images/tab_me_s.png",
        "name": "我的"
      }
    ]
  }

8其他功能示例链接

支付宝上传图片（示例+注意点）亲测
https://blog.csdn.net/qq_23979127/article/details/121454601
支付宝登录界面（示例） 亲测
https://blog.csdn.net/qq_23979127/article/details/121747279
该文章会持续更新，欢迎关注