微信小程序扫描二维码进入页面-参数解析
二维码扫描进入的时候,参数会存在 option.scene
字段中
先使用 decodeURIComponent
将转义的一些字符还原例如:
console.log(containsEncodedComponents('%3Fx%3Dtest')); // ?x=test
然后通过一些方法将其解析为对应的字典数据类型 比如 ?x=test
转换为 {x:test}
方便我们使用这些参数
function getQueryStringArgs(scene) {
let items = scene.length ? scene.split('&') : []
let args = {}
let item = null,
name = null,
value = null
for (let i = 0; i < items.length; i++) {
item = items[i].split('=')
name = decodeURIComponent(item[0])
value = decodeURIComponent(item[1])
if (name.length) {
args[name] = value
}
}
return args
}
PS: 如果遇到二维码跳转页面传递参数过多的话可能会超出微信小程序二维码生成的时候限制的参数长度
可以使用对参数进行加密的方式来保证参数长度,生成二维码的时候对参数进行加密,然后扫码的时候进行解密,拿到原来的参数。
微信小程序组件样式隔离
遇到了一个小问题
全局有通过iconfont
注册的图标,但是在自定义组件引入的时候不能展示出来
<text class="iconfont iconf-right link-item-right"></text>
默认情况下,自定义组件的 class=“my-class” ,其中的 my-class 只能够在这个自定义组件的 wxss 中赋予样式,同时,这个自定义组件的 wxss 只对这个自定义组件生效。
因为当前这个组件没有针对iconfont iconf-right link-item-right
这些类去定义引入iconfont那些css 所以无法生效
通过添加 addGlobalClass:true
解决了问题
这个属性的意思是: 可以在 app.wxss 和 Page 的 wxss 中赋予样式,这些一般是全局的入口css,iconfont的相关css也会在这里进行导入!
也就是这个组件可以识别到,在这些入口文件定义的css,比如入口就有对iconfont iconf-right link-item-right
定义的样式!
那么这个样式就可以在组件内生效了!
评论区