乐趣区

关于小程序:支付宝微信小程序常见开发问题汇总

支付宝小程序:(2020.12.4 – 2022- 3 期间批改)
1. 自定义组件内申明的事件,事件处理函数只能写在自定义组件 js 中进行治理。
2.template 模板中不能引用自定义组件。并且如果要动静渲染某一个字段,必须在 page 的 data 对象里申明一个配置对象。
例如:data:{indexBannerConfig:{indexBannerList:”}} this.setData({{indexBannerList:[…,…,]}} 而后用 template 的 data 属性就行传递
<template is=”some” data={{…{indexBannerList:”}} />
3.axml 的 style 解决模式:<view style=”color:{{isRed ? ‘red’ : ‘ ‘}}”>
4.axml 的属性要绑定动态数据不须要加双引号,wxml,swan 需加双引号。<view a:for={{list}} > success in axml
<view a:for=”{{list}}“> success in wxml,swan
5.tab 组件的 tab-content 不能用 a:for 循环
6.image, 依赖引入资源时能够应用绝对路径。引入自定义组件不行
7. 自定义组件申明的事件如何放在 page 里对立治理?
首先子组件申明的事件,只能在子组件中设置监听函数。子组件外部的数据只能由子组件应用 this.setData 来更改,父组件触发无用。
子组件 <view onTap=”testClick”> method:{testClick(){this.props.onTestClick() // 此处父组件必须是 on 结尾的自定义属性绑定的事件,否则编译器会把它
转成字符串。
父组件 <myView onTestClick=” 本人命名的函数 ”> 本人命名的函数 ():{……}
8. 多目运算法
this.maskRight=(speed<18 || speed>95) ? 0 :((speed>18 && speed<=85)? 1080 : 1080 – 1080/10(speed-85)) / 遮罩层间隔左边 */
9.async 和 await 解决异步
async doOne(){

let res = await this.doTwo() //await 承受一个 promise 对象
console.log(res)

},
async doTwo(){

return new Promise(res=>{res('1233')
})

}
10. 相对不要这样赋值
App({isAuthorized:false},onLaunch,onShow) // 在 onLaunch,onShow 中进行”this.isAuthorized=true” 扭转
而后 page 里的 data({isAuthorized:app.isAuthorized})// 只会获取默认的 false,必须通过 setData 进行更新
this.setData({isAuthorized:app.isAuthorized})
11. 防抖:n 秒内,传参函数提早执行,也就是说用户在主 handler 函数里点击屡次,触发屡次响应函数会提早执行,但不会只执行一次;
节流:n 秒内,传参函数提早执行,也就是说用户在主 handler 函数里点击屡次,触发屡次响应函数会只执行一次
12.
<focus-on-fortune onClosed=” 敞开监听办法 ” onFollowAndFavorite=” 关注 & 珍藏监听办法 ”
onFollow=” 关注监听办法 ” onFavorite=” 珍藏监听办法 ”/>

组件展现固定在小程序页面顶部,加载显示时会有向下推出动画;
组件一共 2 套显示格调,深色和浅色,会依据 title bar 的背景色彩主动抉择,如果 title bar 是深色,那组件就是深色格调,反之如果是浅色,那组件就是浅色格调;
组件是为有关联财产号的小程序打造的一键关注财产号,并珍藏小程序的性能;
如果小程序没有珍藏,并且没有关注关联的财产号,组件按钮显示“立刻增加”,logo 是对应的财产号,title 是对应的财产号名称,点击 logo 或文字跳转到对应的财产号页面,点击“立刻增加”,胜利变成“查看”,之后“查看”也是对应跳到财产号页面;
如果小程序已珍藏,但没有关注财产号,组件按钮显示“关注”,其余的操作 & 显示和第 4 条统一;
如果小程序已关注,但未珍藏,组件按钮显示“珍藏”,logo 是对应小程序 logo,logo 和文字不可点击,“珍藏”胜利之后,按钮隐没;
如果小程序已关注 & 已珍藏,组件不显示;
组件点击敞开按钮,组件隐没,并有向上推的动画;
组件有 4 种事件可增加捕捉,敞开,关注 & 珍藏,关注,珍藏;

问题 1:测试的时候,为什么组件不呈现了?
答复:

  1. 组件的呈现有对立的疲劳度管制,若用户点击敞开组件后,3 天内不再呈现组件;
  2. 用户最多有 3 次敞开组件行为,即用户有一次敞开组件,后续组件显示中,如果再被敞开第二次、第三次时,永远不再对该用户显示组件;若要解决该状况,能够重新安装客户端包;
  3. 组件对应支付宝最低版本是 10.1.55,低于这个版本组件不显示;
  4. 对于网络异样,网络谬误等起因,组件也是降级不显示;
  5. 如果应用组件的小程序,没有关联的财产号,组件也不显示;
  6. 如果小程序曾经实现了珍藏,并且对应的财产号曾经关注,也不显示;
    13.
    ①小程序模板音讯退订,步骤如下:
    1、在“服务揭示”页面,左滑单条音讯;

2、点击“退订此类音讯”;

14. 音讯订阅插件会存在点击 ’ 回绝,下次不再拜访 ’ 或者’批准承受音讯‘都会走 success 回调,如果要监听’回绝下次不再拜访‘能够通过
res.refuse 字段来操作,为 true 代表用户点击了 下次不再展现.

15. 对于 scroll-view 组件设置 scroll-left(横向滚动条地位)属性不失效?
个别在页面加载时咱们会申请数据, 并渲染列表, 然而咱们在标签或者 data 中设置的 scroll-left 值会在数据渲染前赋值.
此时的 scroll-view 中还是空的, 所以 scroll-left 不会失效. 咱们应该在数据渲染到 scroll-view 中当前, 再同步 scroll-left 的值
https://blog.csdn.net/qq_4220…

16.my.ap.navigateToFinance()会在 IOS 跳转过程中闪一下,进入 onShow 生命周期函数,安卓不会。
17. 点击小程序的返回按钮, 返回上一个页面,并不会重置 app 和上一个 page 页面的数据。相当于执行了 my.navigateBack().

18.alipays://platformapi/startapp?appId=2021002112625176&page=pages/index/index?fromCard=1;内部小程序跳转链接地址

19. 应用 my.ap.navigateToFinance()时在 ios 手机上会默认执行进入一次 page 的 onshow 函数。

20. 页面 onLoad 函数和 app 的 onLaunch 函数如果都存在异步行为,小程序是没法阻止 onLoad 函数后执行。如果有异步操作,只能在页面 onLoad 函数里调用 app 的一个具备 promise 的办法进行同步操作,
如在 app.js 申明 userLogin 办法,该办法返回一个 promise 对象,在 onLoad 里进行执行,通过.then()或者 async await 模式进行同步操作。

21 swiper 组件 不能通过在 swiper-item 外面的元素来撑开高度。扭转 swiper-item 高度不行;circular 有限滚动属性必须要大于三条数据能力失效

22 能够应用 touchStart 和 touchEnd 来模仿创立一个上拉事件,只有 touchStart 的 clientY 或者 pageY 减去 touchEnd 的 clientY 或者 pageY 的数值大于某一个阈值(自己设的是 200)才申请
接口,相当于一个上拉操作成果。原生的 onPullRrefishDown 拉了当前 会有一个动画 会有 2 - 5 秒提早,导致无奈操作,比方申请数据。实际效果就是上拉不丝滑。

23. 支付宝 scheme 链接最多 256 位,超出的话 会没法解析。

24.my.getLaunchOptionsSync 用于灵便获取 APP 参数,次要解决 page 的 onLoad 异步行为先于 APP 的 onLaunch 函数先执行。目前不能应用。

25. 自定义组件内的款式 会净化内部款式。支付宝这边后续版本都改不了,倡议应用不同的 class 名,以及 加 !important 解决

26. 小程序元素设置相对定位 左右能够滑动 起初确定是 padding-left 和 right 过长 导致页面超过屏幕宽度 呈现滚动条

27 onLaunch 和 onShow 的参数 query 只能是从带有 query 参数的 scheme 链接当中才有;referrerInfo 罕用于别的小程序跳转办法,或者
navigateToMiniprogram 办法中获取。

28. 小程序页面存在缓存问题。在页面 1 带参数跳转到页面 2,在页面 2 返回页面 1,第二次跳转的时候,页面 2 的后果是在第一次的根底上减少的,相应的 my.navigateToMiniprogram()存在这个问题。my.navigateTo 不会缓存上一个页面数据。

29.border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em; border-radius: 左上 右上 右下 左下;
30.my.navigateTominiProgram 跳转小程序同一个页面时,会有一个缓存成果。即你如果跳转页面 A,
31. 目前小程序不反对本地模仿场景值,要做判断能够通过给跳转链接加查问字符串参数(2021-08-26)
32. 因为平台限度,定时器 setTimeout 作用的代码在以后小程序切换到手机后盾后不能失常执行,所以不能依赖定时器的确切工夫,必须本人在回调函数中再次计算时间差;如需保障确切工夫后做某些操作,请在服务器端计时。
33.ios 零碎不反对 new Date(‘2020-05-04 14:25:26’)格局,反对 new Date(‘2020/05/04 14:25:26’);安卓两者都反对
34.button 组件应用 open-type 为 lifestyle,能够绑定 onFollowLifestyle 事件,其回调函数 e
let statue = e.detail.followStatus //1 关注胜利 2 勾销关注
35.ios 存在点透景象,如果输入框下面有按钮点击事件,会触发点透景象,此时输入框为聚焦状态。解决办法:点击函数触发时使得输入框不能聚焦,再设置一个提早函数使得输入框能够聚焦。
36. 我发现小程序有一个问题 就是我从 A 页面,请求分页,一共渲染 20 条,在第 20 条数据这里点击跳转到 B 页面,点返回 从新申请接口 此时入参是{pageSize:25,pageNum:1} 模式传参申请到 25 条数据刷新页面,这个时候会触发 onReachBottom 触底函数。
37. 本地图片无奈显示,通过 require 函数进行封装
38.canvas-api 有点坑,只适宜做一些简略的文字图形联合,简单的图举荐用第三方库,如 f2。
39.transform-origin 指定变换元素以那个原点进行转换, 值”left top” 罕用于指针旋转。
40. 函数节流函数只对屡次跳转无效,对于执行办法有效。
41. 如何解决 input 输入框在 iOS 客户端的光标漂移问题?
步骤一:若已在 input 中设置了 enableNative 属性,删除 enableNative 属性的全副设置。
步骤二:在 app.json 文件 window 对象内,设置 “enableInPageRenderInput”:”YES”。
微信小程序:(2022-5-2022- 6 编辑)
1. 应用 antmove 工具将支付宝小程序代码转换为微信端,如果 a:if={{num === 1}}语句中大括号之前没有加引号,编译进去的微信小程序代码会乱码,倡议对立标准规范。xx:if=”{{num === 1}}“
2.wxs 文件不反对 es6 语法。wxs 标签属性也和 sjs 不统一。
3. 小程序 wxss 不反对通配符 组件内不能应用 .a tag 模式,id 模式,属性选择器模式,要用类模式选择器代替。
4. 如果源代码组件存在援用 wxss,须要手动把 axss 改为 wxss。
5. 微信小程序组件不能利用全局款式时,须要在 component 的 option 属性下增加 ”addGlobalClass”: true
6.rpx 单位是微信小程序中 css 的尺寸单位,rpx 能够依据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏幕宽度为 375px,共有 750 个物理像素,则 750rpx=375px=750 物理像素,1rpx=0.5px= 1 物理像素。设施 rpx 换算 px(屏幕宽度 /750)px 换算 rpx(750/ 屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6s1rpx=0.552px1px=1.81rpx 微信小程序也反对 rem 尺寸单位,rem 和 rpx 的换算关系:rem: 规定屏幕宽度为 20rem;1rem=(750/20)rpx 注:开发微信小程序时设计师能够用 iPhone6 作为视觉稿的规范。倡议:设计稿应用设施宽度 750px 比拟容易计算 750px 的话 1rpx=1px,这样的话,设计图上量进去的尺寸是多少 px 就是多少 rpx,至于在不同的设施上实际上要换算成多少个 rem 就交给小程序本人换算。
7. 微信小程序子组件调用父组件办法,通过 this.triggerEvent(“XXXX”,e); 这里 e 代表传参,而后父组件 wxml:
<component bind:XXXX=”fatherHandler”></componet> js:fatherHandler(){console.log(e);// e 就是子组件传过来的事件
详情。e.detail 能够获取到子组件传过来的参数}
8.wxs 中尽量不要用 ES6 语法,小程序不会报错!比方我用了 let,小程序不报错,就是无奈过滤你要过滤的字符。
9. 自定义组件不反对模板嵌套。
10. 小程序 webview 拜访公众号文章提醒非业务域名
11. 小程序 page 页面也能援用 behaviors

退出移动版