回复 刷新

暂无评论

微信小程序编写过程中的报错及解决办法

1.渲染层错误

在这里插入图片描述
官方文档:(developers.weixin.qq.com/miniprogram…)

在这里插入图片描述

细看文档才发现,组件的CSS选择器是有限制的。其中最主要的一点就是只能使用类选择器。

2.组件lifetimes和pageLifetimes无效

在这里插入图片描述
我在attached和show生命周期函数中分别写个log,如图所示,控制台毫无反应。

官方文档:(developers.weixin.qq.com/miniprogram…)

在这里插入图片描述
查阅文档后,知道了是我的基础版本过低,无法使用lifetimes和pageLifetimes,在开发者工具中调试版本:

在这里插入图片描述

3.自定义组件flex-grow无效

当某个page页面是由多个component组成的时候,该page页使用了flex布局,而在某个子组件中使用flex-grow无效。

微信小程序开发社区也有人提到过此问题:(developers.weixin.qq.com/community/d…)

组件flex-grow子所以无效,是因为微信小程序在自定义组件上封装了一层view,因此设置flex-gorw无效,解决方法在上面链接。

4.修改不了自定义组件或者内置组件的margin、padding

修改内置组件样式:在组件外层包裹一个view,

/*wxml文件*/ <view class="wrapper"> <button class="btn">内置Button组件</button> </view> /*wxss文件*/ .wrapper .btn{ width:24px; } 复制代码

修改自定义组件样式:需要在组件Component构造器的选项中添加externalClasses配置

/*custom-component.js*/ Component({ externalClasses:['my-class','test'], data:{} }) /*custom-component.wxml*/ <view class="wrapper my-class"> <view class="test"></view> </view> /*在引用组件的wxml*/ <custom-component my-class="my-class" test="test"/> 复制代码

但是,我发现即便如此,也不能修改组件内置的padding和margin样式,如果非要修改可使用!import,其实这就是涉及到一个选择器优先级的问题。

  1. 选择器名越详细优先级越高。
  2. !important优先级最高。

5.没有像Vue的vuex和React的redux那样的状态管理?

Omix(读音 / [ˈomɪkɜ:s] /, 汉字类似于 欧米可思) 是一款使用 JSX 或者 hyperscript 创建Web用户界面的组件化框架,故得名:Omix。

具体使用方法查看官方文档:(cloud.tencent.com/developer/a…)

可使用omi-cli快速搭建脚手架,

yarn global add omi-cli //安装CLI omi init-x [project name] //初始化项目 x意思是使用omix初始化项目 复制代码

API

  1. create(store, option) 创建页面,
  2. store 从页面注入,可跨页面跨组件共享
  3. create(option)创建组件
  4. this.store 和 this.data 全局 store 和 data,页面和页面所有组件可以拿到, 操作 data会自动更新视图
  5. 不需要注入 store 的页面或组件用使用Page和Component 构造器, Component 通过triggerEvent 与上层通讯或与上层的 store 交互
  • 70
  • 0
  • 0