UNIAPP 支付宝、钉钉小程序常见问题汇总

1、支付宝小程序把图片都转成了背景图片

解决方法:在app.vue的style中添加 image{background-size:100% 100%; } 将整体背景图片设置宽高百分比即可。

/* #ifdef MP-ALIPAY */
image{
      background-size:100% 100%; 
} 
/* #endif */

2、xxxxxx 被作为 component 使用,但没有 "component": true 声明”报错

解决方法:在pages.json文件中去掉报错组件路径或者重写组件独立出来,小程序自定义组件不能既当组件又当页面使用。

3、textarea 字数重叠

支付宝小程序textarea标签属性 maxlength已自带实现 0/2000效果,固通过条件编译移除相关代码

<!-- #ifndef MP-ALIPAY -->
<view class="tips" v-if="field.type=='textarea'">{{value&&value.length||0}}/{{field.max_value||txtLength}}</view>
<!-- #endif -->

4、v-for中,非 h5 平台 :key 不支持表达式 index+'_'
同级多个 v-for 时 key 的值是不允许重复的,key 的绑定是不支持表达式的,需改成不是同级的,增加 view 标签。

5、支付宝小程序目前仅支持GET、POST 请求

UVIEW 由于某些小程序平台的限制:

delete请求,不支持支付宝和头条小程序(HX2.6.15)
put请求,不支持支付宝小程序(HX2.6.15)

发网络请求 - 钉钉开放平台

Http请求 | uView - 多平台快速开发的UI框架 - uni-app UI框架

6、v-html 仅支持HTML字符串,富文本 rich-text 标签仅支持html 数组

解决方案1 :采用 rich-text标签 ,使用mini-html-parser2插件将html字符串转换为html数组

安装插件
npm install mini-html-parser2 --save

引入插件
import parse from 'mini-html-parser2';

转换富文本信息

  // #ifdef MP-ALIPAY
  // html转换为支付宝富文本节点数组
  list.map(item =>{
      parse(item.content, (err, htmlNodes) => {
          if(!err) {
          tem.content = htmlNodes
          }
      });
      return item;
  });
  // #endif

方案2:采用 u-parse 或 mp-html 标签替代,传html字符串即可

u-parse 是UVIEW自带的,使用方法:

<u-parse :html="content"></u-parse>

mpHtml 需要手动安装
mp-html 富文本组件【全端支持,可编辑】 - DCloud 插件市场

import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";

<mp-html class="rich_text" :content="content" />

7、af-appx.worker.min.js:26 Cannot read properties of null (reading 'split')

textarea、input标签双向绑定数据时,提示“系统错误,正在排查”,控制台没有报错
原因是绑定值的类型错误,类型只能为string,不能是null

文章来源:UNIAPP 支付宝、钉钉小程序常见问题汇总 - 科源网路

### 使用 UniApp 开发钉钉小程序 #### 创建钉钉小程序项目 为了创建一个新的钉钉小程序项目,建议使用 HBuilderX 进行开发。HBuilderX 是 DCloud 官方推荐的 IDE 工具,支持多种框架和技术栈。 安装完成后,在 HBuilderX 中新建一个基于 `uni-app` 的项目,并选择目标平台为钉钉小程序[^2]。 ```bash npm install -g dcloud-cli dcloud create myDingTalkProject cd myDingTalkProject ``` #### 初始化配置文件 在项目的根目录下找到 `manifest.json` 文件,设置 `"appid"` 字段为你申请到的应用 ID;同时修改 `"type": "dingtalk"` 来指定这是一个钉钉应用[^3]。 #### 添加必要的依赖库 确保已正确引入钉钉开放平台提供的 JavaScript SDK: ```json { ... "usingComponents": { ..., "dd-sdk": "/components/dd-sdk/index" } } ``` #### 编写页面逻辑 下面是一个简单的登录页示例代码片段,展示了如何通过调用 `dd.auth.codeToToken()` 方法完成身份验证过程: ```html <template> <view class="container"> <button @click="login">点击登录</button> </view> </template> <script> export default { methods: { async login() { try { const res = await dd.auth.codeToToken({ corpId: 'your_corp_id', onSuccess(result) { console.log('Login success:', result); }, onFail(error) { console.error('Failed to log in:', error); } }); } catch (err) { console.error(err.message || err.errMsg); } } } }; </script> ``` 需要注意的是,在实际环境中应当替换掉模板中的占位符(如 `'your_corp_id'`),并处理好异常情况下的用户体验优化工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值