目 录CONTENT

文章目录

最近的开发微信小程序一些记录

Hello!你好!我是村望~!
2023-11-21 / 0 评论 / 0 点赞 / 247 阅读 / 551 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

微信小程序扫描二维码进入页面-参数解析

二维码扫描进入的时候,参数会存在 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定义的样式!
那么这个样式就可以在组件内生效了!

0

评论区