mpvue升级uniapp修改记录（微信支付宝）

第一步，微信项目可运行

1、wx. -> uni.  删除每个页面的main.js, 修改页面配置（pages.json）.

2、页面跳转/main->/index

3、globalData修改涉及文件main.js,App.vue（uniapp使用常量或状态管理替换）

4、project.config -> manifest.json（微信，支付宝appId）

5、环境变量及编译设置->vue.config.js

6、rem->rpx微信编译不支持，支付宝支持 (uni-app 支持的通用 css 单位包括 px、rpx)

单位方面，px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。（引用白话uniapp）

 

第二步，授权登录

微信：appId,

支付宝：appId,  选择关联的小程序

获取服务供应商。provider, 再获取登录授权码。

 

 

 

 

第三步，兼容api,微信支付宝分环境编译

1、sourceId, channelId, 授权登录、获取openId接口入参出参不一样处理

 

 

 

2、绑卡支付宝实名获取处理

3、人脸识别条件编译

4、选择地区条件编译

5、调起支付兼容

6、请求结果，success, fail状态调用区别，微信：400，401在sucess调用，支付宝：400，401在fail调用（后面处理）

首页导航栏自定义：

"pages": [{
    "path": "pages/index/index",
    "style": {
        "navigationStyle": "custom",
        "mp-alipay": {
            "transparentTitle": "always",
            "titlePenetrate": "YES"
        }
    }
}]

 微信：wx.getEnterOptionsSync->uni.getLaunchOptionsSync

支付宝不支持的API属性：

* showLoading: mask

* setNavigateBarColor: frontColor

* showModal: confirmColor

* showToast: duration

* Span, Swiper-item标签: 不支持click事件

* v-html(微信支持数组以及字符串、支付宝只支持数组)

* 支付宝picker里面需要加<view>显示元素</view>

 

 

其他兼容注意点

1、uniapp组件，不属于小程序页面，不执行小程序页面的生命周期，需使用vue框架周期。