uniapp集成小程序总结

使用uni-ui组件库

1.关于uni-search-bar组件
uni-search-bar的@input事件，是在input的value值发生变化时触发
原生小程序的input的bindinput事件，是在键盘输入时触发

2.关于webview
微信小程序和qq小程序， H5是向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件
支付宝小程序， H5是向小程序发送消息是实时触发的

3.关于授权获取用户信息

• 微信小程序：wx.getUserProfile，wx.getUserInfo

兼容写法：

<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

Page({
  data: {
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

• qq小程序：qq.getUserInfo

特别说明：在用户未授权过的情况下调用此接口，将不再出现授权弹窗，会直接进入 fail
回调。在用户已授权的情况下调用此接口，可成功获取用户信息。点击进入qq小程序用户授权api

即如果没有进行过授权，需要使用button组件获取用户信息，否则会直接进入fail回调，而且在小程序的设置页面也没有任何授权失败的提醒

<!-- 需要使用 button 来授权登录 -->
<button
  qq:if="{{canIUse}}"
  open-type="getUserInfo"
  bindgetuserinfo="bindGetUserInfo"
>
  授权登录
</button>

Page({
  data: {
    canIUse: qq.canIUse('button.open-type.getUserInfo')
  },
  onLoad() {
    // 查看是否授权
    qq.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          qq.getUserInfo({
            success(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo(e) {
    console.log(e.detail.userInfo)
  }
})

• 支付宝小程序：my.getAuthCode，my.getOpenUserInfo

点击进入支付宝小程序获取用户信息api

<button a:if="{{canIUseAuthButton}}" open-type="getAuthorize" 
onGetAuthorize="onGetAuthorize" onError="onAuthError" 
scope='userInfo'>
    会员基础信息授权
</button>

onGetAuthorize(res) {
  my.getOpenUserInfo({
    fail: (res) => {
    },
    success: (res) => {
      let userInfo = JSON.parse(res.response).response // 以下方的报文格式解析两层 response
    }
  });
},

4.关于picker组件
微信小程序兼容所有端，表现形式一致，写法一致
支付宝小程序，安卓和ios表现形式不一致，写法一致
qq小程序，安卓和ios表现形式一致，写法不一致

<picker @change="bindPickerChange" :value="index" :range="currencyList" :range-key="'valueName'">
	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
	<!--  qq小程序ios端不支持此写法，安卓支持 -->
	<view class="uni-input" :class="[index === -1 ? 'item-none' : '']">
		{{index === -1 ? '请选择' : currencyList[index].valueName}}
	</view>
	<!-- #endif -->
	<!-- #ifdef MP-QQ -->
	<view class="uni-input" :class='[index == 0 ? "item-none" : ""]'>
		{{currencyList[index].valueName}}
	</view>
	<!-- #endif -->
</picker>

5.关于页面交互api，如：showToast 和 showModel
微信小程序和qq小程序可以共用一套代码，即微信小程序的交互api在qq小程序可以兼容使用
支付宝小程序需要uniapp的showModel和showToast时需要做兼容处理，支付宝小程序有单独的my.alert()可使用

页面展示上，qq小程序和微信小程序表现形式不一样

6.关于生成二维码
微信小程序使用wxacode.getUnlimited，只能生成已经发布的小程序页面二维码
qq小程序只能生成已经发布的小程序页面二维码

7.关于订阅消息
微信小程序可以设置接收体验版还是线上小程序
支付宝小程序无限制
qq小程序需要在qq提醒中查看一次性订阅消息，如果关闭了qq提醒，请务必打开请求提醒

8.关于上传小程序
微信小程序每次上传会自动覆盖上一次的体验版本，只需生成一个体验版二维码即可
支付宝小程序和qq小程序每次上传都需要重新生成一个新版本的体验版二维码

9.关于路由跳转api
qq小程序使用reLaunch跳转页面时，左上角不会出现返回首页的home图标
自定义title的页面左上角也不会出现返回首页的home图标

10.关于上传文件
qq小程序和微信小程序支持从聊天窗口上传文件，支付宝小程序不支持

11.关于返回上一页
微信小程序和qq小程序只能通过自定义title控制返回
支付宝小程序可以使用如下方法控制返回

events: {
	onBack() {
		// 在这里写需要处理的事件
	},
}

12.关于onTabItemTap
qq小程序onTabItemTap事件不执行

2022-2-28更新

13.关于picker组件
qq小程序在picker组件选项多于5个时，在安卓端会循环出现

14.生成永久二维码

• 微信小程序–服务端–wxacode.getUnlimited，只能生成已经发布的页面路径二维码，发布成功后可以通过接口参数env_version设置要打开的小程序版本。正式版为 release，体验版为 trial，开发版为 develop
• 支付宝小程序无限制。注：扫码打开页面的时候，需要先扫描对应版本的二维码，点击右上角的…，在弹出的弹框里面找到联调设置，把开关打开，在扫描对应的二维码，即可调到此版本。
• qq小程序只能生成已经发布的页面路径二维码。

15.二维码参数

• 微信小程序，详见链接-生成二维码，固定参数：scene，（最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&’()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式））
• 支付宝小程序无限制
• qq小程序无限制

16.页面交互弹框

• 微信小程序–可以设置按钮颜色
• 支付宝小程序不能设置按钮颜色
• qq小程序同微信小程序，2者可以共用一套代码
• 注：使用uniapp生成代码，需做兼容处理

17.关于qq小程序
qq小程序第一次上线发布时，需要上传一份小程序中用到的授权api说明文档。需要说明的api如下：
qq小程序用户隐私接口列表

18.关于request请求

• 微信小程序如下

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  // 此处跟支付宝小程序不同
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

• 支付宝小程序

my.request({
  url: 'https://httpbin.org/post',
  method: 'POST',
  data: {
    from: '支付宝',
    production: 'AlipayJSAPI',
  },
  // 此处跟微信小程序不同
  headers:{
    'content-type':'application/json'  //默认值
  },
  dataType: 'json',
  success: function(res) {
    my.alert({content: 'success'});
  },
  fail: function(res) {
    my.alert({content: 'fail'});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: 'complete'});
  }
});

19.预览文件

uni.downloadFile({
        url: url,
        success: function(res) {
            var filePath = res.tempFilePath;
            uni.openDocument({
                filePath: filePath,
                fileType: 'pdf',
                success: function(res) {
                    console.log('open document success')
                },
                fail: (err) => {
                    uni.alert('提示', '预览：' + res.errorMessage || res.error, '确定');
                }
            });
        }
    });

先这么多，其他的想起来了再写
ps:转载能注明出处，谢谢