uni-app初使用小结

前言

        从2019年11月开始接触uni-app，总结了一些使用体验与小结。希望可以帮助到大家，毕竟这个生态圈还是比较小。如有偏误，欢迎指出，一起交流与进步。

         注：笔者当前使用的HBuilderX的版本为2.5.1.20200103，所以以下内容是基于当前版本，且非nvue。

使用

1. 插件

   1.1. 使用非插件市场的插件，放在node_modules，直接使用该插件抛出的类名XXX,  如 import XXX form 'XXX'

   1.2.  HBuilderX没有提供方法/自动更新插件，需要开发者到插件的github查看有没有更新版本及手动更新。

    1.3. 生成二维码插件【tki-code】 使用多一层view的wrap，会导致溢出计算出错，两种方法，一是包括wrap都使用px单位，保证多端生成的二维码都是一样大小；二是确保所需端的大小，例如android 实体机大小会偏小（rpx）

2. 样式

    2.1. checkbox，radio，在APP的不居中，改font-size即可

    2.2. 笔者在Andorid8的华为、iphone7plusAPP端，发现view不支持同级选择器（+），not选择器，同类选择器（:first-of-type），深度选择器也失效了，对于button又可以 同级选择器（+）,但线上的网站测评又说支持——（我还没找到规律，有人知道请告知）

3. API

    3.1. uni.previewImage, 除了H5外，其他端不支持base64流 （同wx-minprogram）

    3.2. uni.navigateTo跳转的参数是url且url带参了，该url要encodeURIComponent，不然在被跳转url页获取不到option的参数

4. VUE

   4.1. 属性slot

            4.1.1. （截至 2020/1/3）虽然识别了，但不支持 #slotname="{slotProp}"的写法

            4.1.2. slot的template 不能用v-if进行判断，看看是uni还是vue的限制，H5正常，APP会出现白屏问题——vue 见https://github.com/vuejs/vue/issues/10784 

            4.1.3. 组件使用了slot，如果循环输出，要把v-for放在父元素或内，在App端，slot才能生效

            4.1.4 具名插槽slot的具名，VUE(V2.6.11)不支持大小写混杂，支持带有中划线。uni-app不支持大小写混杂 和 带有中划线

 

 

    4.2. 除了H5外，不支持 v-自定义命令（截至 2019/12/3）及 自行触发事件（e.g. click）而且据说会过不了微信小程序审核，需要用户授权并主动点击触发。

    4.3. scroll-view 【置顶】方式只能通过事件触发，不能通过方法直接调用修改。

    4.4.【v-model】有坑，父节点使用了该组件设置v-model，在APP端传入该组件的值不被检测；需要拆分成 :属性名，@更新方法

    4.5.不允许【props】使用data、id等的保留字

5. 组件

    5.1. tabbar 存在bug, 官方建议在二级页面需要自行写。见官网（https://uniapp.dcloud.io/collocation/pages?id=tips-tabbar）

6. 文件目录

     6.1. 从插件市场添加的插件，会被直接放入@/components

7. Debug

     7.1. 如果出现APP端白屏（debug真机模拟下报出white screen cause create instanceContext failed 问题），一般看看是不是自己刚刚写了一些基于Vue的但可能不被HBuilderX支持的属性导致的；额外的，网上也有人是因为props中调用了this导致，此处仅提供相关思路供读者去排除。

8. 打包策略

     8.1. 打包后，多个页面引用了相同模块moduleA 。moduleA export多个不同的内容。不同业务页面根据各自内容import {partXXX} from moduleA ，虽然看起来只引用了一部分partXX，但打包的时候整个moduleA还是会被编译打包进来，从而整体的代码包变大。——建议看业务情况拆分。

生态圈与体验

        1. 作为一个生成多端的项目，对于广大的创业小公司的来说，的确是利好消息，毕竟公司请一端开发人员可以开发生成多端产品，节约成本同时提高开发效率。给一个大大的赞。

        2.  相比VUE、微信小程序，官网编写紊乱。语法混杂vue、wx-minprogram的语法，让人上手的时候难以区分。而且教程没及时更新有些新版本的属性，例如slot的prop。（VUE的官网就做的挺好的，会区分版本的教程及教程给出部分示例。通过不同版本的内容比较，读者可以更容易找出自己的问题）

        3. QQ群，偶有人互助帮忙解答问题，会有一个uniapp小助手（人工+机器人）挑选回答部分问题。=_=有时候机器人答非所问

        4. 有些存疑性问题，在论坛上提出，也没有被官网定为是否为真的bug还是提出问题方的问题。

疑问

1. 自定义组件模式与 非自定义组件模式有什么区别？

2. v3编译器主要就是优化了vue页面。但我在非NVUE项目下，使用V3编译器及fast启动模式进行编译，会如下报错，期望官方出一个相应教程说明一下。

3. 文件结构如下：

情况：

      1）在page.json注册路径只有，pages/hrm/pages/index/index

      2）当前项目pages/index.vue是包含了自行定义的tabbar的页面，其中一个tab点击后展示了组件tabParent。 tabParent 可以通过 “@/scss/view.scss”

      3）组件tabParent使用了子组件 weather

      4）子组件 weather引用“@/scss/view.scss” 会报错，找不到该文件

      5）在 子组件 weather 使用相对路径‘../../scss/view.scc’ 或者  把view.scss该文件挪入子组件路径下，即@/pages/components/Child/scss/view.scss   是成功的

     问题： 这是 uniapp哪种策略呢? 为什么第二层组件就无法通过“@/scss/view.scss”获取到view.scss文件呢？