添加到“用其他应用打开”中、app加入系统分享列表、获取分享的文件(ios、android)：https://ext.dcloud.net.cn/plugin?id=6901

开发过程中发现对v-for里面需要传入组件，查了下小程序里slot并不支持，官方推荐的解决方案是抽象节点，因此在unicli 3+ 里快速实现了这一套能力。
目前仅处理了手q和微信，开发者根据自身项目情况去斟酌使用
还有些其他细节问题，后续会抽空不断完善这个插件
npm 地址

how to use

install

• 仅支持uni-cli 3.0+

  $ npm i vite-plugin-uniapp-generics -D

• vite.config.js 添加插件

  import uni from '@dcloudio/vite-plugin-uni';  
  import generic from 'vite-plugin-uniapp-generics';  
  export default defineConfig({  
  ...  
  plugins: [  
  uni(),  
  generic(),  
  ],  
  });

父组件（定义抽象节点）

说明

• 在自定义的component下添加generic标识即可

  <自定义component名 generic />

  demo

  <!-- father-generic.vue -->  
  <template>  
  <view class="content">  
      <view>generic</view>  
      <view v-for="(val, index) in list" :key="index">  
          <beforeGeneric generic :index="index" :name="''+val" @tapInside="handleTap" />  
      </view>  
  
      <afterGeneric generic="true" :age="21" name="myname-after" />  
      <!-- 仅会验证generic参数，后面添加任意参数都不影响-->  
  </view>  
  </template>

组合组件（使用抽象节点）

说明

• 在父组件中通过generic:传入对应的generic标识和需要传入的组件
• 遵循小程序中的写法限制，仅允许传入自定义组件。

  <父组件名   
  generic:对应的generic组件名A="传入的子组件"   
  generic:对应的generic组件名B="传入的子组件"   
  ></父组件名>

demo

<!-- combine-generic.vue -->  
<template>  
    <view class="content">  
        <view>***** generic ***** </view>  
        <ceshiGenetic   
            generic:beforeGeneric="childComp1"   
            generic:afterGeneric="childComp2"  
        ></ceshiGenetic>  
        <view>***** end slot ***** </view>  
    </view>  
</template>  

<script>  
import childComp1 from '...';  
import childComp2 from '...';  

export default {  
  components: {  
    childComp1,  
    childComp2,  
  },  
}  
</script>

why to use

slot在小程序中的限制

1. v-for中使用slot会怎样？

   • 仅会渲染出v-for中的首条内容，后面的子组件不会被渲染。

2. slot并不支持v-for 需求：更强大的slot

   slot 本身应该是属于父组件的一部分，它能使用的数据是父组件数据而不是子组件数据。如果要定制子组件的“某些部分”的话，应该不是使用 slot，而是使用抽象节点吧

3. slot不支持父组件传递数据

   • 这个目前uniapp和taro都是静态编译的时候劫持数据，并在运行时结合vue3的响应式更新机制解决。

     taro3为什么可以结合v-for用slot

   • 推断taro3中是结合wxs动态的生成wxml文件，因此对wxml文件来说，slot结构可以平铺输出，处理遍历slot导致的问题（未看源码验证）
   • 但这种设计可能会导致wxml需要频繁的重新生成，造成一定的性能问题和意料之外的bug。

插件实现原理

原理

1. 结合抽象节点的使用说明，抽象出适合vue的写法（参考上方使用说明）
2. uniapp里的节点属性，除了白名单中的组件和白名单的props，其余都会被劫持到vue的运行时数据处理中，导致属性失效，因此需要在编译前通过白名单prop添加标识，文件输出阶段结合标识重组成微信小程序所需结构即可。

generic 入参限制

使用是相对遵循小程序原生写法，因此在组合组件的时候，generic入参仅支持传组件名，所以不能再组合组件的位置给generic组件入参。举个例子

• slot 可以在组合组件/父组件定义位置入参

  // compA.vue 定义 slot，并且传入参数  
  <view>  
      <slot name="header" height="180" />  
  </view>  
  
  // 组合组件 中 可以给 slot 入参  
  <compA>  
      <template #header="{ height }">  
          <childComp age="10" :height="height" />  
      </template>  
  </compA>

• generic 只能在 定义组件的位置入参

  // compB.vue 定义 generic，并且传入参数  
  <view>  
      <genericB :age="21" name="myname-after" />  
  </view>  
  
  // 组合组件 中, 不能给传入 generic 的组件入参  
  <compB   
      generic:genericB="childComp"   
  ></compB>

todo

• 替换 u-i 为专用节点
• 其他小程序中的验证
  • [x] 微信
  • [x] 手q
  • [ ] 快手
  • [ ] other...
• sourcemap https://rollupjs.org/guide/en/#source-code-transformations
• hbuilder 支持

RT

FirstUI(https://www.firstui.cn/)

First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！
包括框架、组件、模板、功能插件几个部分。FirstUI开发者、设计师不断精心打磨，持续发布新的组件、模板等新功能，力求为用户提供更高品质的产品，节约用户时间与成本。

一、FirstUI uni-app版特性

● 完美支持nvue和vue3
● 组件低偶合。大部分组件可以单独使用，不需要整体引入，侵入性低。
● 多端支持。一套代码，多端适用，支持iOS、Android、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台
● 完善的组件。目前共规划118款，已上线85款，涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。
● 丰富实用的布局、模板。基于FirstUI提供的组件，针对常用场景、行业，提供丰富实用的布局和模板。
● 专属社区。我们打造了FirstU专属社区，用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求，也可以在社区中反馈。

二、扫码体验FirstUI

大部分组件是操作性的，大家扫码操作可以有更真切的感受。目前发布了6个平台版本，大家可以扫码体验下。考虑快速预览，所以暂未上架App应用，后续待功能完善再进行上架。

三、已发布内容

• 框架
  • FirstUI组件库(uni-app版)
  • FirstUI组件库(微信小程序版)
• 模板
  • 登录（A）模板
  • 登录（B）模板
  • 登录（C）模板
  • 登录（D）模板
  • 门户模板
• 组件
  • 基础组件
  • Color 色彩
  • Icon 图标
  • Button 按钮
  • Footer 页脚
  • Animation 动画
  • StatusBar 状态栏
  • 布局组件
  • Layout 栅格布局
  • Grid 宫格
  • Panel 面板
  • Preview 表单预览
  • List 列表
  • Card 卡片
  • 表单组件
  • Calendar 日历
  • Cascader 级联选择器
  • Picker 选择器
  • DatePicker 日期时间选择器
  • Slider 滑块选择器
  • Form 表单校验
  • Select 选择器
  • Input 输入框
  • InputNumber 数字输入框
  • Label 标签
  • Radio 单选框
  • Checkbox 复选框
  • Switch 开关
  • Textarea 多行输入框
  • Rate 评分
  • Upload 图片上传
  • SearchBar 搜索栏
  • 操作反馈
  • ActionSheet 上拉菜单
  • Toast 轻提示
  • Backdrop 遮罩层
  • Dialog 对话框
  • DropdownMenu 下拉菜单
  • DropdownList 下拉菜单
  • Modal 模态框
  • Gallery 画廊
  • Landscape 压屏窗
  • Loading 加载
  • loadAni 加载动画
  • Message 消息提示
  • SwipeAction 滑动菜单
  • 导航组件
  • NavBar 导航栏
  • Pagination 分页器
  • BubbleBox 气泡框
  • SegmentedControl 分段器
  • Tabbar 标签栏
  • BottomNavbar 底部导航栏
  • Tabs 标签页
  • IndexList 索引列表
  • NoticeBar 通告栏
  • Sticky 吸顶容器
  • Steps 步骤条
  • Fab 浮动按钮
  • Drawer 抽屉
  • BottomPopup 底部弹出层
  • TopPopup 顶部弹出层
  • TimeAxis 时间轴
  • Vtabs 纵向选项卡
  • 数据组件
  • Badge 徽章
  • Alert 警告框
  • Avatar 头像
  • Tag 标签
  • Progress 进度条
  • Collapse 折叠面板
  • Circle 圆形进度条
  • CountDown 倒计时
  • Divider 分割线
  • LoadMore 加载更多
  • Empty 缺省页
  • Skeleton 骨架屏
  • 扩展组件
  • ShareSheet 分享面板
  • Result 结果页
  • FilterBar 筛选栏
  • SingleInput 单输入框
  • DigitalRoller 数字滚轮
  • DigitalKeyboard 数字键盘
  • LicensePlate 车牌号键盘
  • SwiperDot 轮播图指示点
  • CopyText 长按复制
  • CubicBezier 贝塞尔曲线
  • ImageCropper 图片裁剪
  • Drag 拖拽排序
  • SlideVerify 滑动验证
  • RotateVerify 旋转验证
  • SliderCaptcha 滑块拼图验证
  • PuzzleVerify 滑块拼图验证
  • OverflowHidden 内容超出隐藏
  • Timer 计时器
  • CountdownVerify 验证码倒计时
  • Lazyload 图片懒加载
  • Waterfall 瀑布流
  • Table 表格
  • Backtop 回到顶部
  • 画布组件
  • Poster 分享海报
  • Qrcode 二维码
  • Barcode 条形码
  • Autograph 手写签名
  • JS组件
  • Clipboard 复制文本
  • Request 网络请求
  • Utils 工具类
  • Validator 表单验证

四、开源版与商业版

FirstUI组件库 分为开源版与商业版，部分组件为商业版专属使用。

1、开源版

● uni-app版 github: https://github.com/FirstUI/FirstUI （欢迎star :-D）
● uni-app版 gitee: https://gitee.com/firstui/FirstUI （欢迎star :-D）
● uni-app版 文档地址: https://doc.firstui.cn
● 微信小程序版 github: https://github.com/FirstUI/FirstUI-weixin （欢迎star :-D）
● 微信小程序版 gitee: https://gitee.com/firstui/FirstUI-weixin （欢迎star :-D）
● 微信小程序版 文档地址: https://wxdoc.firstui.cn

2、VIP会员权益：

● 完整版源码
● 全部组件
● 物料商城享VIP折扣
● 专属会员群指导、答疑
● 新特性优先体验
● VIP专属文档
会员权益详情: https://www.firstui.cn/right

3、新版优惠

新版发布，现价￥399元，价格随功能完善调整。购买框架产品即升级为VIP会员，享受VIP会员权益。
立即购买：https://www.firstui.cn/store/detail/1

1.图片渲染问题：图片渲染有时发生错误，不能完全渲染出来 （渲染错误的概率 10%）

2. 首页打开抖动：因为首页加了背景图，整个页面的渲染肉眼可见的抖动，css定位还偶尔会错乱。
3. 问题很多很多，问题多到盖住了性能优势。

在main.js中全局注入mixin，查询当前this所在的位置，如 page页面还是component组件
代码如下

// main.js  
import pageReady from '@/mixins/pageReady'  

Vue.mixin(pageReady)

// pageReady.js  

/**  
 * this.mpType 可以获取到当前所在的是app、page、component  
 * 目前只测试了APP-PLUS/H5/微信/QQ/字节  
 * APP-PLUS：component 返回的结果是 undefined，其他正常  
 * H5：全都是undefined，可以通过其他参数进行区分  
 * 微信/QQ/字节(暂时理解为MP)：app 返回的是undefined，其他正常  
 */  
module.exports = {  
  computed: {  
    pageType() {  
      let mpType = this.mpType  
      // #ifdef APP-PLUS  
      if (mpType === undefined) {  
        mpType = 'component'  
      }  
      // #endif  

      // #ifdef MP  
      if (mpType === undefined) {  
        mpType = 'app'  
      }  
      // #endif  

      // #ifdef H5  
      if (this.appOptions) {  
        mpType = 'app'  
      } else if (this.$mp) {  
        mpType = 'page'  
      } else if (!this.$mp && this.$root.$mp) {  
        mpType = 'component'  
      }  
      // #endif  

      return mpType   
    }  
  }  
}

let flag = 0  
let WindowManager = null  
let mainActivity = null  
let window_android = null  
document.addEventListener('plusready', function(){  
    WindowManager = plus.android.importClass('android.view.WindowManager')  
    plus.android.importClass("android.view.Window");      
    mainActivity = plus.android.runtimeMainActivity();      
    window_android = mainActivity.getWindow();  
    flag = WindowManager.LayoutParams.FLAG_SECURE  
});  
function allowJp(){  
    // 允许截屏  
    window_android.clearFlags(flag);      
}  
function forbidJp(){  
    // 禁止截屏  
    window_android.addFlags(flag);  
}

直接调用上面的方法即可实现禁止和允许截屏
Tips: 在vue文件里面写不用监听plusready，可以直接把function里面的代码拿出来

场景：

大家项目中应该都存在这样的场景，在onLaunch里用wx.login拿到code，再用code去发送请求获取token、用户信息等，整个过程都是异步的，然后我们在页面里onLoad去用的时候异步请求还没回来，导致没拿到想要的数据，以往要么监听是否拿到，要么自己封装一套回调，总之都挺麻烦，每个页面都要写一堆无关当前页面的逻辑。

直接上终极解决方案，公司内部已接入一年很稳定：

1.可完美解决异步问题

2.使用方便

3.可灵活定制异步钩子

4.采用监听模式实现，接入无需修改以前代码

5.支持各种小程序和vue架构

。。。

//globalData提出来声明  
let globalData = {  
  // 是否已拿到token  
  token: '',  
  // 用户信息  
  userInfo: {  
    userId: '',  
    head: ''  
  }  
}  
//注册自定义钩子  
import CustomHook from 'spa-custom-hooks';  
CustomHook.install({  
 'Login':{  
    name:'Login',  
    watchKey: 'token',  
    onUpdate(token){  
      //有token则触发此钩子  
      return !!token;  
    }  
  },  
 'User':{  
    name:'User',  
    watchKey: 'userInfo',  
    onUpdate(user){  
      //获取到userinfo里的userId则触发此钩子  
      return !!user.userId;  
    }  
  }  
}, globalData)  
// 正常走初始化逻辑  
App({  
  globalData,  
  onLaunch() {  
      //发起异步登录拿token  
      login((token)=>{  
          this.globalData.token = token  
          //使用token拿用户信息  
          getUser((user)=>{  
             this.globalData.user = user  
          })  
     })  
   }  
}）  
//关键点来了  
//Page.js，业务页面使用  
Page({  
  onLoadLogin() {  
       //拿到token啦，可以使用token发起请求了  
       const token = getApp().globalData.token  
    },  
  onLoadUser() {  
       //拿到用户信息啦  
       const userInfo = getApp().globalData.userInfo  
    },  
    onReadyShowUser(){  
        //小程序内页面渲染完成 && 页面显示 && 拿到用户信息  
        //Tips：适用于需要获取小程序组件或者dom，并且每次页面显示都会执行的场景，例如，每次显示页面的时候都要拿到最新的头像去渲染到canvas上面  
    },  
})

具体文档和Demo见↓

Github：https://github.com/1977474741/spa-custom-hooks

祝大家用的愉快，记得star哦

tob-ui

https://dishait.gitee.io/tob-ui-doc/

智密科技承接安卓/IOS双端插件开发、安卓/IOS App外包开发、项目整体外包、各类硬件产品开发

我们的优势：
1、全职UI、前端、安卓、IOS、后端、硬件工程师，每个岗位都是专职开发更专业，选择智密您就拥有了一个完整的技术支持团队；
2、定制的产品无论是插件、APP、整套系统，一年内免费Bug修复；
3、定制的APP和整体项目软件著作权归客户所有，并协助软件著作权申请；
4、软件开发源头工厂，定价合理，与开发人员直接沟通，避免需求理解问题，提高开发效率；
5、软件均为自主开发，不基于网上代码进行二次开发，保障系统安全性；
6、软件源码自己开发，出现BUG能快速修复，新需求能快速实现；
7、签订开发合同，通过条款约定双方权利义务，服务和售后有保障；
8、我们的插件尽可能做到让用户UI自定义，用户改变UI之后无需联系我们修改插件，只要前端调整UI即可。

我们唯一的劣势：价格可能会比别人高
我们不提供廉价的插件和服务，服务和收费是成正比的。
我们的插件定价基本都在千元以上，插件使用成本=插件购买费用 插件集成成本 插件填坑成本 后续更新成本
在没有好的技术支持前提下，后面三项成本将远远大于插件购买费用，选择智密科技，实现双赢

经过几年积累，已拥有大量双端插件，常见功能的插件几乎都能直接试用，欢迎各位进群了解

插件沟通交流群：755910061(欢迎进群了解我们的技术支持方式及我们的技术能力)
商务QQ：57570616(这是传说中的搅屎棍，光动嘴皮子不干活的，进群最实在)
商务微信：ZhimiTec(同上...)

离线推送
仿抖音
多任务文件下载
视频播放器
文件选择
美颜相机
图片编辑
各类银行支付SDK
支付宝SDK
微信支付SDK
阿里云直播/点播/短视频
腾讯云直播/点播/短视频/IM
萤石云
直播美颜
高德地体
人脸识别
摄像头人脸区域识别
蓝牙
串口
二维码识别
快递单号识别
各类打印机
各类传感器
指纹识别
RFID识别
锁块控制
等等硬件相关的SDK接入或者通讯都有相关插件
所有插件 外包都可签订合同 开具发票
插件和APP均提供一年的免费维护(不增加功能的前提下，遇到BUG我们全免费修复)

月薪： 12~20 K，加项目分红
项目类型：门店数字化商城小程序
工作职责：使用 uniCloud 开发商城部分模块的 api 接口
公司当前情况：技术团队 2 人，办公场地 1000 平米，有健身房和餐厅，包午餐和晚餐。公司在起步阶段，机会多，发展空间大，现在加入有机会成为中坚力量
办公地点：佛山禅城区
联系微信： qyunke