- 小程序地理位置相关接口调整
为进一步规范开发者调用涉用户信息相关接口或功能,保障用户合法权益,平台将对如下地理位置相关接口调用实行准入开通: wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.chooseLocation、wx.choosePoi 自2022年4月18日开始,如使用以上接口,在代码审核环节将检测该接口是否已完成准入开通(申请路径:小程序管理后台 -「开发」-「开发管理」-「接口设置」),如未开通,将在代码提审环节进行拦截,请涉及相关接口的开发者尽快进行接口权限申请,第三方开发者申请方式:可通过 apply_privacy_interface 接口完成。 请广大涉及相关接口的开发者尽快进行相关接口准入申请,如未申请,后续将影响线上小程序相关接口的使用。
2023-09-26 - 微信小程序如何实现页面传参?
前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。 路径传递 通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’。 案例:A页面带参数跳转到B页面 A页面跳转代码 [代码]goB(){ wx.navigateTo({ url: '/pages/B/index?id=value', }) }, [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', options.id) } [代码] 上面的案例是字符串参数,但是很多情况下需要传递对象,如下方代码。 [代码]Page({ data: { userInfo:{ name:'cym', age:16 } }, goB(){ wx.navigateTo({ url: '/pages/B/index?id='+this.data.userInfo, }) }, }) [代码] 如果使用上面同样的方式结构,输出的结果是:[object Object] 这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递,再到接收页面通过JSON.parse解析使用。 A页面跳转代码 [代码] goB(){ let userStr = JSON.stringify(this.data.userInfo) wx.navigateTo({ url: '/pages/B/index?id='+userStr, }) } [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', JSON.parse(options.id)) } [代码] 全局变量 通过App全局对象存放全局变量。 app.js代码 [代码]App({ // 存放对象的全局变量 globalData:{}, }) [代码] A页面跳转代码 [代码]// 获取App对象 const app = getApp() Page({ /** * 页面的初始数据 */ data: { userInfo: { name: 'cym', age: 16 } }, goB() { app.globalData.userInfo = this.data.userInfo wx.navigateTo({ url: '/pages/B/index', }) }, }) [代码] B页面接收代码 [代码]// 获取全局对象 const app = getApp() Page({ onLoad: function (options) { console.log(app.globalData.userInfo) } }) [代码] 存放在 App 全局变量里面,可以被多个页面使用,直接从 App 对象获取即可。这个数据是保持在内测中,每次小程序销毁就没有了。 数据缓存 通过存储到数据缓存中。 A页面跳转代码 [代码] goB() { wx.setStorageSync('userInfo', this.data.userInfo) wx.navigateTo({ url: '/pages/B/index', }) } [代码] B页面接收代码 [代码] onLoad: function (options) { let userInfo = wx.getStorageSync('userInfo', this.data.userInfo) console.log(userInfo) } [代码] 存放在数据缓存里面,可以被多个页面使用,直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中,除非清楚数据缓存或者删除小程序否则一直存在。 事件通信 通过事件通信通道。 A页面跳转代码 [代码]goB() { wx.navigateTo({ url: '/pages/B/index', success:(res)=>{ // 发送一个事件 res.eventChannel.emit('toB',{ userInfo: this.data.userInfo }) } }) } [代码] B页面接收代码 [代码]onLoad: function (options) { // 获取所有打开的EventChannel事件 const eventChannel = this.getOpenerEventChannel(); // 监听 index页面定义的 toB 事件 eventChannel.on('toB', (res) => { console.log(res.userInfo) }) } [代码] 总结 大家可以针对具体业务场景来进行选择合适自己的传参方式。
2022-02-19 - 小技巧!CSS 整块文本溢出省略特性探究
今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略。 感兴趣的小伙伴点击链接,了解详情~ http://github.crmeb.net/u/yi 对于单行文本,使用单行省略: { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [图片] 而对于多行文本的超长省略,使用 [代码]-webkit-line-clamp[代码] 相关属性,兼容性也已经非常好了: { width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } [图片] CodePen Demo -- inline-block 实现整块的溢出打点 问题一:超长文本整块省略 基于上述的超长打点省略方案之下,会有一些变化的需求。譬如,我们有如下结构: Sb Coco FEUIUX Designer前端工程师 [图片] 对于上述超出的情况,我们希望对于超出文本长度的整一块 -- 前端工程师,整体被省略。 如果我们直接使用上述的方案,使用如下的 CSS,结果会是这样,并非我们期待的整块省略: .person-card__desc { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [图片] 将 [代码]display: inline[代码] 改为 [代码]display: inline-block[代码] 实现整块省略 这里,如果我们需要实现一整块的省略,只需要将包裹整块标签元素的 [代码]span[代码] 的 [代码]display[代码] 由 [代码]inline[代码] 改为 [代码]inline-block[代码] 即可。 .person-card__desc span { display: inline-block; } [图片] 这样,就可以实现,基于整块的内容的溢出省略了。完整的 Demo,你可以戳这里: CodePen Demo - 整块超长溢出打点省略 问题二:iOS 不支持整块超长溢出打点省略 然而,上述方案并非完美的。经过实测,上述方案在 iOS 和 Safari 下,没能生效,表现为这样: [图片] 查看规范 - CSS Basic User Interface Module Level 3 - text-overflow,究其原因,在于 [代码]text-overflow[代码] 只能对内联元素进行打点省略。(Chrome 对此可能做了一些优化,所以上述非 iOS 和 Safari 的场景是正常的) 所以猜测是因为经过了 [代码]display: inline-block[代码] 的转化后,已经不再是严格意义上的内联元素了。 解决方案,使用多行省略替代单行省略 当然,这里经过试验后,发现还是有解的,我们在开头还提到了一种多行省略的方案,我们将多行省略的代码替换单行省略,只是行数 [代码]-webkit-line-clamp: 2[代码] 改成一行即可 [代码]-webkit-line-clamp: 1[代码]。 .person-card__desc { width: 200px; white-space: normal; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .person-card__desc span { display: inline-block; } 这样,在 iOS/Safari 下也能完美实现整块的超长打点省略: [图片] CodePen Demo -- iOS 下的整块超长溢出打点省略方案 值得注意的是,在使用 [代码] -webkit-line-clamp[代码] 的方案的时候,一定要配合 [代码]white-space: normal[代码] 允许换行,而不是不换行。这一点,非常重要。 这样,我们就实现了全兼容的整块的超长打点省略了。 当然,[代码] -webkit-line-clamp[代码] 本身也是存在一定的兼容性问题的,实际使用的时候还需要具体去取舍。 最后 好了,本文到此结束,一个简单的 CSS 小技巧,希望对你有帮助 :) 感兴趣的小伙伴点击链接,了解详情~ http://github.crmeb.net/u/yi 作者:chokcoco
2021-03-15 - 【小程序技巧】如何让长文本超过限定行数自动折叠,并且可以展开收起
这是去年在校做项目遇到的一个需求,文章沉在草稿箱里一直没写完,主要分享一下如何实现长文本的折叠展开。 长文本超过限定行数自动折叠,点击长文本或者按钮,实现展开收起效果。这类效果其实在平时的app中或者网站中很常见,举几个栗子: 微信朋友圈: [图片] 新浪微博: [图片] 分析需求 1、文本超长省略,主要是通过 line-clamp 实现: [代码].text-clamp2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } [代码] 文本效果: [图片] 2、如何判断文本是否超出两行,显示「全文」「收起」按钮呢? [图片] 通过上图我们可以发现,当文本区域省略时,它的高度会相对变小,那么我们只需要获取到不省略和省略时的文本区域高度,进行比较就能知道是否超出了两行。 [图片] 思路解决了,怀着喜悦的心情翻看了一下文档:咦?为什么小程序没有像 js 那样操作 dom 节点的接口?那还怎么获取元素的尺寸高度!好在功夫不负有心人,终于在文档找到类 DOM 操作的 API「SelectQuery」。 实现需求 3、什么是 SelectQuery?如何去使用它? 从文档(传送门)描述来看 SelectQuery 是一个查询节点信息的对象,它可以选择匹配选择器的所有节点以及显示区域内的节点信息。既然它可以类似 jQuery 那样去匹配选择器,那么我们可以获取到需要的高度信息了。 [代码]// wxml <view class="contentInner1 text-clamp2">小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。</view> <view class="contentInner2">小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。</view> [代码] [代码]// js wx.createSelectorQuery().selectAll(".contentInner1, .contentInner2").boundingClientRect(res => { console.log(res) }).exec() [代码] 查询结果(文本区域省略时高度为 52px、不省略时为 104px,只要 res[0].height < res[1].height,此时就应该显示展开收起按钮 ) [图片] 4、逻辑设计上的优化 由于论坛帖子不只一个,我们得匹配对应的两个长文本节点,如果都给一个唯一的选择器,那么在页面中一次性查询这么多节点,很明显这不是最优的。 实际上我们可以将这封装成一个自定义组件,可供每个页面循环复用,在组件内我们只需要关注 单个 长文本的节点信息,不需要一次性获取当前页面的所有长文本节点,更重要的是:在组件内每个长文本的展开与收起状态都是独立的,也省去了在页面内定义字段去标识每个帖子的展开状态。 5、实现效果 [图片] [图片] 6、参数说明 属性 类型 默认值 说明 content String “示例文本” 长文本内容 maxline Number 1 最多展示行数[只允许 1-5 的正整数] position String “left” 展开收起按钮位置[可选值为 left right] foldable Boolean true 点击长文本是否展开收起 最后附上代码片段,有疑问欢迎在下方留言或者发社区私信(三连暗示) [图片]
2021-12-30 - 微信小程序开发常见问题(七)
知晓程序员,专注微信小程序开发的程序员! 一、判断小程序版本号 小程序的API是不断更新的,你可能使用某个API时,文档里会说明,此API在1.x.x版本开始支持,需要自己做兼容处理。 如果你使用小程序版本号做兼容,就必须了解小程序的基础库版本号规则,在这里介绍一下。 小程序基础库版本号使用 semver 规范,格式为 Major.Minor.Patch,Major、Minor、Patch 均为整数,1.9.901、2.44.322、10.32.44 都是符合 semver 风格的版本号。 以下是官方提供的兼容代码: [图片] 二、设置仅发起者可转发 有些场景,需要仅发起者可转发,参与者不能转发。比如老师上课点名签到,老师如果把签到小程序分享到群内,只希望现场的同学可以正常签到,即使其他同学想分享,也没有权限。 方法一:禁止显示分享按钮 小程序中有个API,wx.hideShareMenu,如下: [图片] 在page.js中,正常写入onShareAppMessage,然后判断用户是否为发起者,如果是发起者,调用wx.showShareMenu,如果不是发起者,调用wx.hideShareMenu。 方法二:单独做一个分享后的页面 这个办法比较low,但也能实现。思路是在onShareAppMessage里面的写入一个默认path,打开之后就是一个提示界面。如果是发起者,就把path修改成正常的路径~ [图片] 三、swiper禁止手动滑动 最简单的方式,在swiper上面加一个透明的蒙层~ 四、使用switchTab跳转后页面不刷新的问题 方法一:通过getCurrentPages获取获取当前的页面栈,调用对应的方法 [图片] switchTab成功跳转后调用success,此时可以拿到跳转后页面的page对象,从而调用页面onLoad方法重载页面; 方法二:把还tab的页面,代码逻辑放在onShow里面 [图片] 五、e.target和e.currentTarget的区别 简单的说,e.currentTarge是指注册了事件监听器的对象,e.target是指对象里的子对象,实际触发这个事件的对象。 [图片] 小程序开发过程中,如果通过event未获取到值时,或许是你自己用错了。 六、图片设置为圆角,会快速从方形闪烁一下 解决方法:给父元素设置圆角,或者给图片添加透明边框 七、input中使用手写输入法的坑 之前总有“报名工具”的小程序用户反馈,说是报名内容都输入完整了,但是保存不完整。 经排查,发现所有使用手写输入法的用户,都会遇到这现象。排查代码发现绑定的input事件,用户如果不点击手写输入法上的确认键,就不会触发bindinput。 这种情况下,有两种解决方式: 1、改用event.detail.value的形式来获取form表单数据; 2、再添加一个bindblur事件,保证事件能够正常执行; 因报名工具小程序中,有用户自定义字段,所以不确定用户会添加多少个字段,使用event获取的话,需要给每个input添加一个name属性,相对比较费劲,我改用了第二种方案。 [图片] 八、IOS下用户授权后,头像和昵称显示问题 这个问题其实是图片src是一个data中的变量,然后这个变量又发生了变化。但是在IOS设备上,就是没办法显示更改后的图片。(或者编辑图文投票时,也会有这现象) 解决办法:通过wx:if和wx:else判断,展示不同的image组件 [图片] 九、一键退出(隐藏)小程序 首先要说,这个需求不合理,右上角有退出按钮,但既然有同学问这问题,我也自己折腾了一下,基本可以实现一键退出。 先在每个page中添加隐藏page的方法: [图片] 有退出button的页面,对应的JS添加方法: [图片] 虽然可以实现,但也很low,其实就是隐藏了所有的page而已~
2018-04-11 - 微信小程序去掉button边框
button { margin: 0; padding: 0; background-color: inherit; position: static; } button:after { content: none; } button::after { border: none; }
2021-05-11 - 简单的时间格式化
时间格式化是很常见的需求,即便是微信开发者工具初始化的极简项目里,[代码]util.js[代码] 也写了一个公用方法 [代码]formatTime()[代码],其格式是固定的。 如果需要灵活的格式化,moment 是不错的选择,但小程序单包(主包/分包)大小不能超过 2M,这限制了我们不能导入太多功能库。当然,另一方面也提醒我们精简代码。 如果只是为了显示,不操作日期,以下方法可满足一般的需求,直接上代码 [代码]/** * @param {String} fmt eg: yyyy-MM-dd hh:mm * @author meizz * https://blog.csdn.net/meizz/article/details/405708 */ Date.prototype.Format = function (fmt) { const o = { 'M+': this.getMonth() + 1, 'd+': this.getDate(), 'h+': this.getHours(), 'm+': this.getMinutes(), 's+': this.getSeconds(), 'q+': Math.floor((this.getMonth() + 3) / 3), S: this.getMilliseconds() } if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) for (let k in o) if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr((o[k] + '').length)) return fmt } [代码] 这个方法来自 meizz,以下是简单的几个栗子 [代码]// 最常用的格式 new Date().Format('yyyy-MM-dd hh:mm') // 2020-05-20 13:14 const log = console.log const date = new Date('2020-05-20 13:14:20:233') log(date.Format('yyyy-MM-dd')) // 日期:2020-05-20 log(date.Format('yy-MM-dd')) // 年份显示后两位:20-05-20 log(date.Format('yy-M-d')) // 个位数时不补0:20-5-20 log(date.Format('yyyy年M月d日')) // 自定义分隔符:2020年5月20日 log(date.Format('M/d/yyyy')) // 自定义顺序:5/20/2020 log(date.Format('h:m:s')) // 时间:13:14:20 log(date.Format('hh:mm:ss S')) // 毫秒:13:14:20 233 // 随便你写,有出现 y M d h m s q S 字符的都可以 log(date.Format('现在是yyyy年M月份,第q季度')) // 现在是2020年5月份,第2季度 [代码] [代码]Format()[代码] 方法是为了处理格式化显示,如果需要对时间进行一丢丢加减操作呢(如使用 localStorage 缓存数据常需要设置过期时间),于是我写了个方法 [代码]/** * @param {Number} num * @param {String} unit enum: y,M,d,h,m,s */ Date.prototype.Add = function (num, unit) { const s = 1000, m = s * 60, h = m * 60, d = h * 24, M = d * 30, y = M * 12 const obj = { s, m, h, d, M, y } if (!Object.keys(obj).includes(unit)) throw new Error(`Invalid param unit`) return new Date(this.getTime() + num * obj[unit]) } [代码] 简单使用的栗子🌰 [代码]const log = console.log const date = new Date('2020-05-20 13:14:20:233') // 加两小时 log(date.Add(2, 'h')) // 2020-05-20T07:14:20.233Z // 减 10 分钟 log(date.Add(-10, 'm')) // 2020-05-20T05:04:20.233Z // 返回为 Date 对象,可配合 Format() 链式调用 log(date.Add(1, 'd').Format('明天是M月d日')) // 明天是5月21日 [代码]
2020-05-22 - 前端发起网络请求的几种方式
当前,前后端分离已成为互联网项目开发的业界标准,通过JSON数据格式进行前后端数据的交互可以对整体项目进行有效的解耦,前后端分离也为项目未来的分布式架构、多端化服务扩展打下坚实的基础。 前后端分离,离不开前端代码与后端代码的数据交互。 那么前端都有哪几种朝后端发起请求的方式呢? js直接发起XHR XHR作为兼容性最好的纯数据请求方式,被广泛用于前端数据请求。 所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。 它可以 在不重新加载页面的情况下更新网页 在页面已加载后向服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 它是异步请求数据的首选。 早期jQuery时代的 $.ajax 还是现在流行的 axios,底层原理其实都是 new XMLHttpRequest()。 它出生较早,数据使用回调的方式进行处理,写法较繁琐。 xhr可以原生支持异步请求 使用示例: [代码]var xhr = new XMLHttpRequest(); xhr.open("get","url", true); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status == 200){ alert(xhr.responseText); } } } [代码] featch API 现代前端发起请求的标准方式,大大简化了发起请求的复杂度,代码量较少。 天然融合promise,默认异步,只有网络异常或跨域时才会reject掉。 想要实现同步效果需要借助 async await 较底层,可用于文件数据流读取 它是浏览器原生支持的,可以不用引用http的类库即可实现发送请求 但是 fetch也是有兼容问题的,但随着时间的流逝,浏览器厂商的升级,IE的死亡,这个问题在不久的将来不会是大问题 fetch配置请求是否携带cookie和接受服务端写入cookie是需要额外设置的credentials 使用示例: [代码]fetch('url', { method: 'GET', // *GET, POST, PUT, DELETE body: '', headers: { 'user-agent': 'Mozilla/4.0', 'content-type': 'application/json' }, credentials: 'include' }) .then(function(response) { return response }) .then(function(response) { console.log(response); }); [代码] 图片的src请求 众所周知, HTML中img标签,只要放置了src属性,就会发出请求。 重复的图片地址,所有浏览器都只请求一次。 常用于加载一张图片用于显示或绘制画布。 用于统计打点。好处是资源消耗超少,天然跨域。但由于是Get请求,数据量有限制。 [代码]<img src="xx.xx" style="display: none"/> [代码] 在js中: [代码]let img = new Image() img.onload = (e) => { console.log('图片加载完毕', e) } img.src = 'xx.xx' [代码] navigator.sendBeacon 专为前端统计和诊断而生。 它会异步的以post方式发送数据到服务端 它会尝试在卸载(unload)文档之前向web服务器发送数据,不会影响页面渲染和阻塞页面,即使页面关闭,也不会影响其数据的发送,浏览器会对其进行调度,以确保其可靠性和最低影响性 不受跨域限制 仅IE不支持。 [代码]navigator.sendBeacon(url, data); [代码] 跨域下载JS请求 这是前端的根本,加载一个js脚本,无论是模块化,还是分包都会用到切割js,异步下载它。 不同的异步方式,加载执行的顺序会受浏览器影响。 静态前端库的专有CDN链接。 常见的跨域解决方案中的JSONP的解决方案也是跨域请求JS的典型。 form 表单提交 典型请求发起方式。 文件上传。 注意content-type的不同,以及参数的组装方式不同 代码示例: [代码]<form action="/url" method="post"> <input type="text" name="name"/> <input type="submit" value="提交"> </form> [代码] iframe 链接 本身设计用于引用完整的外部网站 因为也会自动发起一次网络请求,并且可以支持随后发起一系列请求。 常见用于外部广告、Hybird中原生与H5通信、后台管理系统。 css 请求 下载外部css样式文件 用于打点时原理类同于图片打点,都是会向服务器发出一次get请求。 以上就是几种常见的由前端发起网络请求的方式 当然前端与后端进行服务器通信还有其他的诸多方法,比如 webSocket ,比如App端的消息主动推送等等 欢迎大家补充
2021-06-29 - 微信开放标签 wx-open-launch-app 样式设置技巧
微信7.0.12开始,增加了 [代码]wx-open-launch-app[代码]标签,用于打开App,感觉又高大上了。 前期相关配置需严格对照文档,戳 微信内网页跳转App功能 和 开发标签说明 按照官方demo加各种配置踩坑,终于弹出了唤起App的弹窗以及打开了App,不容易啊~,现在要开始真正的写需求了 对照设计稿,有一个button,带背景色和圆角,点击要唤起App,按照文档的方式,样式写在了 template中的style里,样式还算简单,终于撸出来了,但标签内样式无法使用vw(这次妥协下,就不适配了) 后面又来了个需求,是个复杂的列表,需求点击每个item都是唤起App操作,一看这个,想着等于要在这个标签内完成原生的样式,而且还有数据的渲染,想想都可怕(React/Vue都出来多少年了~)。想了下,干脆用absolute定位,将内部空元素覆盖在外面不就可以了,直接开干,但最后悲剧了,没有任何效果,在社区一搜发现样式不能设置position [图片] 休息下,重点马上到来~~ 试来试去发现 [代码]wx-open-launch-app[代码]这个标签本身是可以加样式的,那还等什么,直接设置个[代码]postition: absolute[代码],然后外面样式该怎么写就怎么写,外层设置个[代码]position: relative[代码]就好,template内部样式就放一个空div,设置[代码]width:100%, height: 100%[代码],见证奇迹的时刻到了 你以为这样就结束了,但打开发现内部根本没有高度,因此必须设置真实高度,代码大致如下(React) [代码]export const getWxOpenAppHtml = (extinfo: string, height: number) => { const id = 'launch-btn' + getRandomId(); return { id, html: ` <wx-open-launch-app id=${id} style="position:absolute;top:0;left:0;right:0;bottom:0;" extinfo=${extinfo} appid="appid" > <template> <style> .wx-btn{ width:100%; height:${getRealSize(height, isPad)}px; } </style> <div class="wx-btn"></div> </template> </wx-open-launch-app> `, }; }; <div className="open-app-btn"> <Button className="btn">打开APP</Button> <div onClick={() => { openAppError(); // 用于处理标签未生效的情况 }} dangerouslySetInnerHTML={{ __html: openBtnAppHtml }} ></div> </div> [代码] 上面的[代码]getRealSize[代码]我这边主要是为了处理传入的高度,并将其按vw的形式进行适配,返回适配后的px 总结 配置需严格按照文档,wx.config调用时,jsApiList必须传入至少一项Api,不能只传openTagList 外部样式无法影响标签内样式,因为template下生成了document-fragment单独的doc,样式已于外界隔离 template样式无法使用position 标签本身可以设置样式,因此对其设置absolute,外部按正常方式写,只是样式多一个relative即可 内部高度无法使用百分比,需要传入真实高度,因此不适用不知道外部高度的场景 弹窗唤起后,不报错的情况下,点击允许和取消都会进入launch事件,无法区分,见 https://developers.weixin.qq.com/community/develop/doc/000a0e72ba07207ffd9a115025b400
2020-07-29