混合开发-uniApp

peyton鹏
646 阅读4分钟

「回顾2022，展望2023，我正在参与2022年终总结征文大赛活动」

年中的时候，小立一个flag。草稿箱中还躺了一篇关于uniApp相关的文章没有输出。嘿眨眼间到年底了~

本次带来的是关于提交uni-ui的两个pr的一点总结

uni-ui介绍

（这里就一句话介绍完，撑下文章内容~）
uni-ui 主要特点

  1. 高性能
    目前为止，在小程序和混合app领域，uni-ui是性能的标杆。
  2. 全端
    uni-ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。
  3. 风格扩展
    uni-ui的默认风格是中型的，与uni-app基础组件风格一致。但它支持uni.scss，可以方便的扩展和切换应用的风格。

事件

在开发过程中会碰到类似的业务需求，数据回显。
在文档uni-data-picker使用api示例中，通过v-model="classes"，对应了dataTree对象中的value: "1-2"即可。
uni-data-picker 关于api的使用，这里不作过多介绍。基本跟 antd、ele中的picker使用类似~

<uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>

image.png
但是

  1. 对于不可编辑数据，数据回显后，不可点击。
  2. 再次点击input框，tips提示。

根据配置项readonly，配置后picker的交互直接无反应。并且对应input框的效果也发生了变化

image.png

当然了这个问题，肯定可以通过一些曲线救国的方式或者一些莫名的骚操作来解决


还是那句话了解真相才能获得真正的自由~

源码

tips： 点击官网首页的github 连接，打开的是uni-app的仓库地址。本次修改项为uni-app的扩展组件， uni-ui仓库地址。点击这里不迷路~哈哈

image.png

一、老样子fork该项目进入到本地仓库的修改，这个地方有个建议。即使在自己仓库中修改或准备提交pr，也应该遵循git开发规范。checkout出不同的分支。与公司中开发项目无异。这里还有一个好处就是，再多次提交pr的时候。可以在不同的分支上面提交，这样的话就不需要等待官方review完成后才能提交下次一次的pr。或者说可以方便提交多个pr，刷下Contributors的排名~

二、与别的开源项目不同点，uni的项目无法直接在vscode中直接编译。这块我也咨询过官方，暂时未得到答复。只能用HBuilderX 编译器编译，以及编译器中自带的预览功能，进行develop的开发。调试时候还是有点不方便。感觉是不是有点不开源了，或者是处于商业的考量吧~，这这都不是重点。我们还是进入到源码中来

三、整个项目结构还是比较清晰~ 进入到pages文件夹下，vue文件中已经预制了官方实例代码。而 uni_modules文件中就是组件库的源码。不出意外直接在此处修改源码，即可run出效果。

image.png

四、关于uni-data-picker 打开uni-data-picker.vue文件。在进行源码阅读的时候，给大家推荐一个小插件Bookmarks。 具体我在之前文章中也有介绍Vue 3 源码阅读流程

image.png

直接检索下readonly，这里直接列举出相关的核心代码

//
// readonly相关源码 start
<view v-if="clearIcon && !readonly && inputSelected.length" class="icon-clear" @click.stop="clear">
            <uni-icons type="clear" color="#c0c4cc" size="24"></uni-icons>
          </view>
          <view class="arrow-area" v-if="(!clearIcon || !inputSelected.length) && !readonly ">
            <view class="input-arrow"></view>
</view>
// readonly相关源码 end


 load() {
        if (this.readonly) {
          this._processReadonly(this.localdata, this.dataValue);
          return;
        }
        
   //底部省去相关源码     
 }

由此可以得出结论： 1、view层 readonly属性拦截了右侧icon的显示 2、js中，如果readonly为true直接返回。几乎所有的相关事件都无法响应。

而我们的需求是，readonly后，需要有可点击效果的tips。以及在不破坏源码的结构的情况下，极少的改动那是极好滴~

所以我的思路是，在外层的view提供一个click事件即可。

//1、 在handleInput事件中将事件emit的出来即可
<view class="uni-data-tree-input" @click="handleInput"></view>
 
//2、 'inputclick'
emits: ['inputclick']

//3、针对原有逻辑 readonly为true时进行处理
 handleInput() {
        if (this.readonly) {
	this.$emit('inputclick')
          return
        }
        this.show()
},

修改完源码，记得添加相关的注释，以及最好跑下单元测试~ 尤其这种开源项目

另外一个pr 是关于uni-data-select组件的, 禁用后选中的默认值是否回显。 下面是连接大家也可以看看，不过在check的状态。 uni-data-select

至于具体的提交pr流程 以及issue规范 、pull request规范等 可以参考我之前的文章Element-plus提交pr有感

接下就是提交pr等待官方的review，如果被采纳。会有github的推送，同时也恭喜你成为改项目的 Contributors之一

image.png

最后

  • 年终了首先感谢活着，最近终于“杨康”了。又可以开心的搬砖了~
  • 其次计划依然是这么个计划，把flag一步一步fix掉。
  • 当你掩面在全年的各种版本的迭代中，也许你开发的产品上线了。可能用户会认可，也许不会。但Merged最起码说明有人认可了你的代码~还是挺开心的
avatar
文章
阅读
粉丝