uni-app小程序速查手册（微信、支付宝、H5）

---

写在最前面： 如果开发遇到问题，首先去看相关文档 微信兼容就去看微信的文档，支付宝也一样 ， 90%的问题都在文档里面写好了，只是没注意到

这篇文档是近期笔者uni-app小程序开发踩坑所遇到的一些问题，并不是入门文档，更多的是一些

开发技巧和踩坑问题，在这里持续更新一篇文档，方便后续碰到问题查阅 ， 另外很多基础的api或

问题我就不放进来了，直接去看官方文档比看这些文档简单直接的多，这里附上链接：

uniapp.dcloud.net.cn/

如果文档用的话，麻烦点个赞再走哈~😁😁

默认环境为微信小程序 ，很多问题应该是通用的 ， 针对支付宝和H5的问题文章最后面会单独列出来

持续更新中。。。

可以搭配我的另外一篇文档《# Vue基础知识速查手册》 ， 食用更佳~~

1、uni-app 是什么

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架 。

优点：

• 一次开发多端编译
• 丰富的轮子 & UI库等

同类的还有Tarojs等，个人体验Taro好用一点

2、easycom

只要组件安装在项目的components目录下，并符合 components / 组件名称 / 组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用

DOC： uniapp.dcloud.io/collocation…

好处:

• 插件市场批量下载，编译时进行TreeShecking，删除未使用components 。

• 无需每个组件引入components中，可以作为内置组件直接使用

• 自定义组件配置：

  • page.json , my- 为自定义组件前缀，可自行修改

  • json
    复制代码
    "easycom": {
    		"autoscan": true,
    		"custom": {
    			"my-(.*)": "@/components/my-$1/my-$1.vue"
    		}
    	},
    

3、uni-app怎么使用npm库

Vue-cli 项目

平时怎么用，现在就怎么用，es6 model方式引用就行 npm i xxxxx --> import xxx from "xxxx"

HbuilderX项目

不能直接使用，需要额外npm i xxxx至某文件夹之后，拖进项目根目录才可在文件中通过commonjs 或 Es6 module方式引入

• ask.dcloud.net.cn/article/197…
• ask.dcloud.net.cn/article/349…

4、踩坑文档 & 使用心得（别人的文档）

• juejin.cn/post/684490…
• juejin.cn/post/684490…

5、生命周期：

应用生命周期

1.onLaunch：当 uni-app 初始化完成时触发（全局只触发一次）

2.onShow ：当 uni-app 启动，或从后台进入前台显示 //监听用户进入小程序

3.onHide :当 uni-app 从前台进入后台 //监听用户离开小程序

4.onError :当 uni-app 报错时触发

5.onUniNViewMessage :对 nvue 页面发送的数据进行监听

组件生命周期

• www.jianshu.com/p/0366b9bc9…
• 建议使用uni-app 的onLoad代替Vue的created
• 建议使用uni-app 的onReady代替Vue的mounted

1. onLoad （监听页面加载）
2. onShow （监听页面显示）
3. onReady （监听页面初次渲染完成）
4. onHide （监听页面隐藏）
5. onUnload :监听页面卸载
6. onResize :监听窗口尺寸变化
7. onPullDownRefresh :监听用户下拉动作，一般用于下拉刷新

6、跨组件通讯方法

DOC： uniapp.dcloud.io/api/router.…

• EventChannel.emit(string eventName, any args)
• EventChannel.off(string eventName, function fn)
• EventChannel.on(string eventName, function fn)
• EventChannel.once(string eventName, function fn)

1. 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
2. 使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.on 注 册 监 听 ， onUn load 里 边uni. of 注册监听，onUnload 里边 uni.on注册监听，onUnload里边uni.off 移除，或者一次性的事件，直接使用 uni.$once 监听

7、条件编译

DOC： uniapp.dcloud.io/tutorial/pl…

js
复制代码
/* 只在微信环境下执行 */
// #ifdef MP-WEIXIN   
uni.login({
	 xxxxx
});
// #endif

/* 除了微信其他环境下都执行 */
// #ifndef MP-WEIXIN   
uni.login({
	xxxxx
});
// #endif

表格：

值	生效条件
VUE3	HBuilderX 3.2.0+ 详情(opens new window)
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

8、全局变量&函数

1、在 app.vue 文件中配置

• 全局变量 && 全局函数：

  • globalData：{}
  • methods

• 组件中使用

  js
  复制代码
  const app = getApp();
  const gbobalData = app.gbobalData
  //...
  

2、main.js文件，将变量或函数挂载在全局 (与Vue配置全局函数方法一样)

如：

js
复制代码
  import Vue from 'vue';
  import cloneDeep form '@/public/utils/lodash/cloneDeep.js';
  Vue.prototype.$clone = cloneDeep;

9、分包

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

uniapp.dcloud.io/collocation…

uniapp.dcloud.io/collocation…

demo

js
复制代码
       "pages":[],
	// 分包配置
	"subPackages": [
		{
			"root": "pages_tickets",
			"pages": [
				{
					"path": "subpage1/index",
					"style": {
						"navigationBarTitleText": "哈哈哈哈哈哈",
						"enablePullDownRefresh": false,
					}
				},
				{
					"path": "subpage2/index",
					"style": {
						"navigationBarTitleText": "嘻嘻嘻嘻嘻",
						"enablePullDownRefresh": false,
					}
				},
			]
		}
	]

10、uni-popup 滚动穿透 || 小程序任意弹窗滚动穿透处理方案

核心原理是弹窗出现，设置最外层页面高度为可视窗口高度，超出隐藏，弹窗隐藏，高度恢复

1. 最外层父级组件设置属性

   1. overflow ， 弹窗显示，属性设置为hidden
   2. height ，弹窗显示，属性设置为 100vh ，100vh表示当前整个屏幕大小
   3. data新增属性showPopup，控制样式

   js
   复制代码
   <view 
       class = "page" 
       :style ="{ 
           overflow: showPopup ? 'hidden' : 'visible', 
           height: showPopup ? '100vh' : auto
        }"
    > 
           这是最外层父级组件 
     </view>
   

2. pop

• uni-popup 添加change事件

  vue
  复制代码
   <uni-popup ref="datePop" type="bottom" @change="popChange"> </uni-popup>
  

• js 修改data中showPopup的值

  js
  复制代码
  popChange(e) {
  	this.showPopup = e.show;
  },
  

11、scroll-view 不触发@scroll 及 @scrolltolower

scroll-view容器必须有一个确定的height（百分比的方式也会失效），否则会造成@scroll 及 @scrolltolower事件无法触发

解决方案：

• 计算属性获取距离顶部高度

js
复制代码
		computed: {
			scrollH: function () {
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750 / winWidth;
				let winHeight = parseInt(sys.windowHeight * winrate);
				return winHeight;
			}
		},

• 设置scroll高度

vue
复制代码
<scroll-view  :style="{ height: scrollH + 'rpx' }"> </scroll-view>

12、复制功能

js
复制代码
copyBtn() {
        uni.setClipboardData({
          data: this.copyContent,
          success: function (res) {
            uni.getClipboardData({
              success: function (res) {
                wx.showToast({
                  title: '已复制到剪贴板',
                });
              },
            });
          },
        });
},

参考： blog.csdn.net/qq_37939251…

13、本地图片加载失败

developers.weixin.qq.com/community/d…

14、图片懒加载

ps： 关于图片存放问题，用之前尽量用Tinypng压缩一下，超过1k的尽量用网络图，不要放本地，此处有坑。。。。

lazy-load属性

注意：  图片懒加载只针对 page 与 scroll-view 下的 image 有效。

html
复制代码
<image lazy-load :src="item.pic" />

按文档所述，小程序会提前加载上下三屏的图片，导致无法感知懒加载的存在。其实 image 组件还有个如下隐藏的属性，官方文档里面没有标出来：

属性名	类型	默认值	说明
lazy-load-margin	Number	—	图片懒加载屏数阈值，在即将进入设置的屏数才开始加载

为了能更清楚的确认懒加载是否生效，我们通过将 lazy-load-margin 设置为 0，再看效果，代码如下：

ruby
复制代码
<image lazy-load :lazy-load-margin="0" :src="item.pic" />

通过设置 lazy-load-margin，并结合 微信开发者工具 调试器中的 Network，我们可以很清楚的观察到懒加载的效果了。另外，可以通过 lazy-load-margin 灵活设置懒加载屏数阈值。

参考： www.lervor.com/archives/26…

15、Uni-app使用eventbus

www.ucloud.cn/yun/99244.h…

16、uni-pop弹不出来

juejin.cn/post/711780…

省流： 👉微信小程序 （两个方法都可以解决）

1. 删除uni-translate包重新导入 （👎👎不推荐，因为很麻烦）

2. 修改微信小程序开发者工具基础库 ， 随便切一下即可 （✨✨方便好用）

• 这里注意版本不要切太低 , 比如从基础库 2.21.2 开始，对获取手机号的接口新增code， 可能会出现的问题大家都懂 

👉支付宝小程序

1. 删除uni-translate包重新导入 （👎👎不推荐，因为很麻烦）
2. 删除uni-popup包重新导入（👎👎）

17、uni-pop修改背景底部安全区域黑色

修改背景色即可 , background-color="#fff"

html
复制代码
 <uni-popup

   mask-background-color="rgba(0, 0, 0, .8)"

   type="bottom"

   @change="popChange"

    background-color="#fff"

  >
  xxxxxxx
  </uni-popup>

坑：

修改背景色会导致pop内部元素圆角失效，需要修改uni-popupy源码两项内容，必须两个地方都改，否则不会生效

bottom 函数 ，修改 translate style属性

<template></template> 兼容设置bg的样式

18、Iphone 不识别 YYYY-MM-DD hh:mm:ss格式时间

改为YYYY / MM / DD hh:mm:ss即可

19、scroll-view去除滚动条

css
复制代码
scroll-view ::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background-color: transparent;
  }

20、小程序对应多个环境AppID怎么配置

背景： 小程序区分一下开发环境和生产环境，故分别做了两个appid区分，每次开发需要改manifest.json中的appid和其他配置文件的数据

解决方案：

新建static/utils/setManifest.js脚本

通过读取自定义config文件下的配置动态修改manifest.json

Demo:

js
复制代码

/**
 * config.js 
 * 用于配置全局api host 及 appid
 
 /** 修改完isDev之后执行一下代码，修改manifest中的appid */
const isDev = true;

const config = {
  isDev,
  AppName: 'xxxxxxxx',
  AppID: isDev ? 'xxxxxxxxx' : 'xxxxxxxxxxx',
  // domain_dev: 'https://xxxxxxxxxxxxx', // 开发环境,
  domain_dev: 'https://xxxxxxxxxxxxx', // 测试环境,
  domain_pro: 'https://xxxxxxxxxxxxx', // 生产环境
  ...
};

// 这里配置一下条件编译，保证脚本不在小程序环境下被编译进代码包里面即可，否则会报错 `fs.xxxx ****`  
// #ifdef quickapp
const setManifest = require('../../static/utils/setManifest');
setManifest(config.AppID);
// #endif

module.exports = config;

 */

js
复制代码


/**
 * setManifest.js 
 * 用于修改manifest.json文件中的appid
 */
const fs = require('fs');
const path = require('path');
const defaultPath = '../../';

module.exports = function (AppID) {
  if (!AppID) return;
  fs.readFile(path.join(__dirname, defaultPath + 'manifest.json'), 'utf8', function (err, data) {
    if (err) throw err;
    let manifest = JSON.parse(data);
    manifest['mp-weixin']['appid'] = AppID;
    let newContent = JSON.stringify(manifest, null, 4);
    fs.writeFile('./manifest.json', newContent, (err) => {
      if (err) throw err;
      console.log('AppID: ', AppID);
      console.log('success , 已修改manifest.json文件中的appid');
    });
  });
};

21、自定义导航栏

page.json 文件下，找到对应的page , 修改navigationStyle为custom即可👇

"navigationStyle": "custom"

js
复制代码
{
"path": "pages/home/index",
"style": {
	"navigationBarTitleText": "",
	"navigationStyle": "custom",
	}
},

坑：  ✋ 支付宝小程序下，自定义导航栏 ， 返回键 < 是无法去除的 ， 微信小程序正常

22、去除uni-button默认样式

css
复制代码
button {
    height: auto;
    width: 100%;
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    line-height: 0;
    overflow: hidden;
    border: none;
    & ::after {
        border: none;
}

23、运行报错： Syntax Error: Error: Unbalanced delimiter found in string

条件编译没写对,查看一下报错对应文件的ifdef条件编译配置是不是有单词拼错的情况，修改一下即可

// #ifdef H5

// #endif

24、自定义打包输出目录

在package.json中配置 UNI_OUTPUT_DIR

如： UNI_OUTPUT_DIR=dist/dev/dev-mp-weixin ， 注意这个字段一定要配置在uni-build之前

栗子🌰🌰🥕：

js
复制代码
  "scripts": {
    "dev:weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin UNI_OUTPUT_DIR=dist/dev/dev-weixin  vue-cli-service uni-build --watch",
    "dev:alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay UNI_OUTPUT_DIR=dist/dev/dev-alipay vue-cli-service uni-build --watch",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "build:weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin UNI_OUTPUT_DIR=dist/build/product-weixin vue-cli-service uni-build",
    "build:alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay UNI_OUTPUT_DIR=dist/build/product-alipay vue-cli-service uni-build",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"
  },

25、获取路由栈

js
复制代码
const routerHistory = getCurrentPages() || [];				

26、获取当前页面路由信息(当前路由栈最后一个就是)

js
复制代码
const routerHistory = getCurrentPages() || [];
const len = routerHistory.length;
const currentPage =  routerHistory[len - 1];
const route = currentPage?.currentPage

27、获取当前页面title

这个保留疑问，我试了一下拿不到title

js
复制代码
const pages = getCurrentPages() 
const page = pages[pages.length - 1] 
const title = page.$holder.navigationBarTitleText console.log(title)

28、开发工具 - 编译模式列表配置

uniapp.dcloud.net.cn/collocation…

page.json中配置condition

DEMO:

json
复制代码
"condition": {
	//模式配置，仅开发期间生效
	"current": 0, //当前激活的模式（list 的索引项）
	"list": [
		    {
			"name": "", //模式名称
			"path": "", //启动页面，必选
			"query": "" //启动参数
			},
		]
	}

29、uni-app 使用iconfont

照着文档配置即可

zh.uniapp.dcloud.io/component/u…

30、通用骨架屏样式

🐱‍🐉🐱‍🏍🐱‍💻🐱‍👤代码

css
复制代码
	@keyframes shine {
		0% {
			background-position: -468px 0;
		}
		100% {
			background-position: 468px 0;
		}
	}

	.skeleton {
		width: 100%;
		background-color: #f1f0f5 !important;
		background-image: linear-gradient(to right, #f1f0f5 8%, #fff 18%, #f1f0f5 33%) !important;
		background-size: 800px 100% !important;
		animation: 1.5s linear 0s infinite shine;
	}

🐱‍🐉🐱‍🏍🐱‍💻🐱‍👤使用

1、 将代码贴到App.vue的style中或放进自己项目的全局样式表中

2、 在需要做骨架屏的代码上配置skeleton类名（这个类名只是加了背景色和动画，其他的布局还是要自己写的哈😅😄😄😅😄）

🐱‍🐉🐱‍🏍🐱‍💻🐱‍👤DEMO

html
复制代码
<!-- 骨架屏 -->
<view class="ad-card">
  <view class="left skeleton"/>
  <view class="right">
  	<view class="top skeleton" />
              <view class="flex-between bottom">
                  <view class="bottom-left skeleton" />
                  <view class="bottom-right skeleton" />
  	</view>
  </view>
</view>

🐱‍🐉🐱‍🏍🐱‍💻🐱‍👤效果

32、打包完成之后，微信、支付宝、h5均多了一个非程序图片请求（shadow-grey.png）

https://cdn.dcloud.net.cn/img/shadow-grey.png

图片作用：这个是导航栏下方的阴影线，在pages.json的文档里有描述。目前只能在编译后的源码里删除引用。

解决方案： 将cdn.dcloud.net.cn/img/shadow-…

我的方案： 通过js脚本正则替换shadow-grey.png为base64格式图片

1. 在 /common/js/ 新建文件modifyProductCss.js

2. 代码：

   js
   复制代码
   // 用于修改build包下 main.acss 、main.wxss 文件中 https://cdn2.dcloud.net.cn/img/shadow-grey.png 为base64格式
   const fs = require('fs');
   const path = require('path');
   const defaultPath = '../../../';
   //支付宝build包路径
   const mainAcssPath = 'dist/build/product-alipay/common/main.acss';
   //微信build包路径
   const mainWxssPath = 'dist/build/product-weixin/common/main.wxss';
   
   const modifyFile = (filePath) => {
           fs.readFile(path.join(__dirname, defaultPath + filePath), 'utf8', function (err, data) {
                   if (err) throw err;
                   if (/shadow-grey.png/.test(data)) {
                           data = data.replace(
                                   /https.*?shadow-grey.png/g,
                                   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAGBAMAAADwPukCAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAASUExURdnZ2fT09N7e3uzs7OTk5Pr6+vVa4lkAAAAUSURBVAjXY2BgUGBwYDBgEGAIAAAEXADx8btKYQAAAABJRU5ErkJggg=='
                           );
                           fs.writeFile('./' + filePath, data, (err) => {
                                   console.log('ok');
                           });
                   } else {
                           console.log('ok');
                   }
           });
   };
   
   modifyFile(mainAcssPath);
   modifyFile(mainWxssPath);
   

3. 使用： 修改package.json 的build脚本, 在build脚本后追加

   && node ./src/common/js/modifyProductCss.js

4. DEMO：

   js
   复制代码
   "build:weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin UNI_OUTPUT_DIR=dist/build/product-weixin vue-cli-service uni-build && node ./src/common/js/modifyProductCss.js",
   
   "build:alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay UNI_OUTPUT_DIR=dist/build/product-alipay vue-cli-service uni-build && node ./src/common/js/modifyProductCss.js",
   

5. BASE64图片不同颜色自取：

   ask.dcloud.net.cn/question/92…

33、uni中使用vue-count-up

1、ext.dcloud.net.cn/plugin?id=8…

这个插件是vue-count-up的移植版 ， 可以直接导进项目包中使用

2、www.uviewui.com/components/…

uview组件库， 但是需要将整个库引入，按自己项目评估使用哪一个

34、iphone7、iphone7P不支持透明色关键字transparent

解决方案： rgba(0,0,0,0)代替即可

LAST1、编译为H5问题

1. 跨域 & devServer配置

修改manifest.json或者vue.config.js文件，两者配置冲突改一个即可；

这里是修改manifest.json中的H5相关配置

详细参考webpack devserver参数配置即可

js
复制代码
"h5": {
        "router": {
            "mode": "hash"
        },
        "devServer": {
            "https": false,
            "port": 8080,
            "hot": true,
            "open": false,
            "compress": true,
            "disableHostCheck": true,
            "allowedHosts": [
                "host1.com",
                "host2.com",
                "host3.com",
            ],
            "proxy": {
                "/api": {
                    "target": "https://xxxxx.com",
                    "changeOrigin": true,
                    "secure": false
                },
            }
        }
    }

2. router.base 配置之后，本地静态资源（图片）链接不对

如：

本地图片地址为 ： static/images/cover.min.png

H5的router配置如下

js
复制代码
  "router": {
            "mode": "hash",
            "base": "/h5"
},

期望：

编译为H5之后，页面引用资源地址为：

h5/static/images/cover.min.png

结果：

依然为原来链接，静态资源前没有自动拼上base ，static/images/cover.min.png

解决方案：

引用静态资源的时候加入 ~@ 如：

arduino
复制代码
background-image: url('~@/static/images/cover.min.png');

<image class="search" src="~@/static/images/search.min.png" mode="aspectFit" />

结果：

最终build打包之后，通过这种方式引入的静态图片会自动转化为base64的方式引入，如下图DEMO：

所以放本地的图片体积尽量不要太大，一定要压缩，有条件尽量使用网络图

LAST2、编译为支付宝小程序问题

1. uni.getPhoneNumber 返回值和 my.getPhoneNumber返回值不同

文档：  注意使用这个api 需要去支付宝申请，通过了服务端才能解析出手机号码

opendocs.alipay.com/mini/api/ge…

问题：

调用uni.getPhoneNumber的返回值和my.getPhoneNumber参数格式不同，期望得到my.getPhoneNumber格式的返回值

期望返回：

js
复制代码

{
  response: "{"response":"","sign":""}"
}

实际返回：

js
复制代码

{
    encryptedData: "xxxxxxxxx",
    errMsg: "getPhoneNumber:ok",
    sign: "xxxxxxxxxx"
}

解决方案：  重新调用支付宝的my.getPhoneNumber Api

html
复制代码
     <button
       class="login_btn"
       open-type="getPhoneNumber"
       @getphonenumber="getPhoneNumber"
    />

js
复制代码
    async getPhoneNumber(event) {
    
        const bol = event.detail?.errMsg == 'getPhoneNumber:ok';
        
        /* 注意这里一定要提前判断return，否则即使拒绝授权也会重新调用支付宝登录api */
        if (!bol) return;
        
        /* 支付宝环境下重新调用 my.getPhoneNumber ,微信环境不做处理 */
        
        // #ifdef MP-ALIPAY
        event.detail = await this.getAliPayPhoneNumber();
        // #endif
        
        //  ...
        
     },
     
     // 支付宝电话号码授权
     getAliPayPhoneNumber(){
       return new Promise((resolve, reject) => {
          my.getPhoneNumber({
            success: (res) => {
              resolve(res);
            },
            fail: (err) => {
              reject(err);
            },
          });
        });
   }

2. 支付宝小程序 , 👉安卓机👈 ， 不支持String.replaceAll()

问题：  如上描述 ， 【安卓机支付宝小程】序中使用String.replaceAll()会报错，微信小程序、H5及【IPhone机支付宝小程序】使用正常，由于本人用的iphone，自测及开发者工具都没问题，发出去给测试测发现这个bug，最后借手机真机调试才找到原因

找到原因时的心情：

• 支付宝 😤😤😤😤😡😡😡😡
• 安卓系统 😤😤😤😤😡😡😡😡

解决方案：  可使用正则替换

js
复制代码
"aaabbbbccc".replace(/a/g,'&')
//'&&&bbbbccc'

3. 支付宝小程序，自定义导航栏 ， 返回键 < 是无法去除的

问题：  支付宝小程序下自定义导航栏，左侧返回键依然存在

解决方案：  无 ， 支付宝说的算 ， 按自己需求找折中方案

4. 联系客服

问题:  button设置 open-type="contact" 支付宝环境下无效

html
复制代码
<button 
    class="service" 
    open-type="contact" 
    bindcontact="handleContact" 
    session-from="sessionFrom" 
 />

原因：

支付宝小程序的联系客服与微信小程序联系客服使用方式不同，不能通过openType配置

解决方案：

官方文档： opendocs.alipay.com/mini/compon…

配置条件编译，支付宝环境下直接使用支付宝提供的contact-button标签

tntInstId 和 scene 需要自己去支付宝智能客服配置页获取

html
复制代码
<!-- #ifdef MP-ALIPAY -->
<contact-button 
    :tnt-inst-id="config.tntInstId" 
    :scene="config.scene" 
    size="60" 
    icon="/static/images/service2.png" 
/>
<!-- #endif -->

5. 禁止页面下拉

文档： zh.uniapp.dcloud.io/collocation…

page.json中配置全局样式或针对mp-alipay设置allowsBounceVertical属性即可

这里要注意，是 allowsBounceVertical：'YES' 或 allowsBounceVertical：'NO'，

不要顺手写true、false了😅 , 因为我做过这种蠢事

DEMO:

js
复制代码
{
	"globalStyle": {
		"pageOrientation": "portrait", // 横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
		"navigationBarTextStyle": "black", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
		"navigationBarBackgroundColor": "#FFFFFF", // 导航栏背景颜色（同状态栏背景色）
		"allowsBounceVertical": "NO", //不允许下拉页面
	},
 }

6. 支付宝小程序分享

这里有个调试技巧，微信小程序分享是不能调试的，但是支付宝小程序点击分享会显示你配置的内容及页面参数（可以调试），可以自己去点点试试

js
复制代码
onShareAppMessage() {

	return {
		title: activityInfo.shareContent,

		// #ifdef Mp-WEIXIN
		path: '/pages/xxxxxx/index?params1=aa&params2=bb',
		imageUrl: 'https://sharebg.png',//分享封面
		// #endif

		// #ifdef MP-ALIPAY
                
                //注意这里pages前面没有斜杠
		path: 'pages/xxxxxx/index?params1=aa&params2=bb',
		bgImgUrl:  'https://sharebg.png'//分享封面
		// #endif
		;
},

7. 链接打开支付宝

文档：  opendocs.alipay.com/support/01r…

坑：

链接打开支付宝小程序目前只支持页面后携带一个参数，多个参数的情况下会参数丢失

DMEO：

/pages/user/index?userId='xjygatyurwteryft'&source='h5'

如上链接其实有两个参数：userId和source ， 但最终页面onload能接收到的query只有userid一个参数

文档中有urlsheme，可通过query字段传参，但是我实在没试出来，直接做了特殊兼容处理，把两个参数间用-或者?拼接 ： /pages/user/index?userId='xjygatyurwteryft'  ?  source='h5' ，拿到之后再自己 截取出来，虽然麻烦但是比较节省看文档加测试的时间 ， 有兴趣的同学可以自己去看下文档然后看看怎么玩

8. uniapp， rich-text传入内容，微信及H5正常，支付宝小程序显示不出来

html
复制代码
<rich-text :nodes="strings"></rich-text>

这里属于支付宝兼容问题， 支付宝rich-text的node格式为Array ，写法比较类似Vnode ， 具体可以去支付宝官方文档看一下： opendocs.alipay.com/mini/compon…

DEMO：

ini
复制代码
 <rich-text nodes="{{nodes}}" onTap="tap"></rich-text>

9. 开支付宝小程序 ，IOS , 输入框聚焦，光标错位(位置偏移)

解决方案：

1、input 添加 always-system属性

缺点：

• type = 'number' 时 ，maxlength 属性失效 ，且js无法截取
• page中使用了固定定位 position:fixed的元素位置可能会偏移

2、针对支付宝单独兼容

支付宝文档： opendocs.alipay.com/mini/compon…

步骤一：若已在 input 中设置了 enableNative 属性，删除 enableNative 属性的全部设置。
步骤二：在 app.json 文件 window 对象内，设置 "enableInPageRenderInput":"YES"。

DEMO:

js
复制代码
"mp-alipay": {
   "allowsBounceVertical": "NO",
   "enableInPageRenderInput": "YES",
   "gestureBack": "YES"
}