HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

接软件开发

  1. Android原生开发
  2. flutter开发兼容android和ios端
  3. 小程序原生开发
  4. uniapp开发小程序
  5. uniapp原生插件开发

欢迎私聊,接软件开发。

  1. Android原生开发
  2. flutter开发兼容android和ios端
  3. 小程序原生开发
  4. uniapp开发小程序
  5. uniapp原生插件开发

欢迎私聊,接软件开发。

插件市场e签宝SaaSAPI升级通知

插件市场

尊敬的用户,您好!

接e签宝通知,因近期由电子签名、电子认证服务导致的用户投诉高发,为全面落实电子认证服务行业规范,杜绝违规认证行为,插件市场将对e签宝API进行升级。
升级的API包括:实名认证、合同签署、合同下载。

升级后最大的区别在于插件市场的e签宝实名认证将与e签宝官网的认证数据进行打通:

  • 升级前e签宝实名认证与e签宝官方的实名认证数据不互通,即实名认证信息为应用级别
  • 升级后e签宝实名认证将与e签宝官网实名认证数据互通,即实名认证信息为官网级别
    如果实名认证信息已在e签宝官网进行过认证,则在插件市场进行e签宝实名认证时只需要操作授权即可。

现有的e签宝实名认证数据在升级完成后将不再使用。为避免系统升级导致合同签署受阻,系统升级切换分为以下几步:

  1. 升级实名认证相关API,仍保留原实名认证状态,开发者可先行操作官网级别的实名认证。此时合同签署相关API仍未升级,继续使用原实名认证数据。
  2. 升级合同签署、合同下载相关API,废弃原应用级别实名认证,合同签署需使用官网级别实名认证。

其一已经升级完成,开发者可前往(插件市场 => 账户中心 => e签宝实名认证信息)[https://ext.dcloud.net.cn/manage/profile],对e签宝官网实名认证&授权进行操作。
其二将于2024年4月22日完成,届时合同签署需采用官网级别的实名认证信息,并且在签署时将进行意愿认证(如短信验证码)。

已发布过源码授权版插件的作者于2024年4月22日前完成第一步的e签宝官网实名认证&授权,以免影响插件售卖。普通用户可先行操作也可在购买时完成。

继续阅读 »

尊敬的用户,您好!

接e签宝通知,因近期由电子签名、电子认证服务导致的用户投诉高发,为全面落实电子认证服务行业规范,杜绝违规认证行为,插件市场将对e签宝API进行升级。
升级的API包括:实名认证、合同签署、合同下载。

升级后最大的区别在于插件市场的e签宝实名认证将与e签宝官网的认证数据进行打通:

  • 升级前e签宝实名认证与e签宝官方的实名认证数据不互通,即实名认证信息为应用级别
  • 升级后e签宝实名认证将与e签宝官网实名认证数据互通,即实名认证信息为官网级别
    如果实名认证信息已在e签宝官网进行过认证,则在插件市场进行e签宝实名认证时只需要操作授权即可。

现有的e签宝实名认证数据在升级完成后将不再使用。为避免系统升级导致合同签署受阻,系统升级切换分为以下几步:

  1. 升级实名认证相关API,仍保留原实名认证状态,开发者可先行操作官网级别的实名认证。此时合同签署相关API仍未升级,继续使用原实名认证数据。
  2. 升级合同签署、合同下载相关API,废弃原应用级别实名认证,合同签署需使用官网级别实名认证。

其一已经升级完成,开发者可前往(插件市场 => 账户中心 => e签宝实名认证信息)[https://ext.dcloud.net.cn/manage/profile],对e签宝官网实名认证&授权进行操作。
其二将于2024年4月22日完成,届时合同签署需采用官网级别的实名认证信息,并且在签署时将进行意愿认证(如短信验证码)。

已发布过源码授权版插件的作者于2024年4月22日前完成第一步的e签宝官网实名认证&授权,以免影响插件售卖。普通用户可先行操作也可在购买时完成。

收起阅读 »

IOS运行uniapp项目弹窗提示HBuilderX与手机SDK版本不匹配

iOS打包


理论上保持一致最好,如果测试验证没啥问题,不想更新sdk版本,那么mainfest钟设置忽略就好,代码如下:

"app-plus": {    
        "compatible": {    
            "ignoreVersion": true //true表示忽略版本检查提示框,HBuilderX1.9.0及以上版本支持    
        },    
    //....    
},    
//...

详见uni-app运行环境版本和编译器版本不一致的问题

继续阅读 »


理论上保持一致最好,如果测试验证没啥问题,不想更新sdk版本,那么mainfest钟设置忽略就好,代码如下:

"app-plus": {    
        "compatible": {    
            "ignoreVersion": true //true表示忽略版本检查提示框,HBuilderX1.9.0及以上版本支持    
        },    
    //....    
},    
//...

详见uni-app运行环境版本和编译器版本不一致的问题

收起阅读 »

nvue canvas踩坑经历

Webview canvas GCanvas nvue uniapp

总结就是:用到绘制海报类似的地方(drawImage)不要用nvue。

  1. nvue 不支持普通的canvas api绘制。
  2. 然后找到了gcanvas这个东西,在iOS上还行,可以用。
  3. 然后到Android上一测,拉垮了。报错:exception function:gcanvas setBackGround for android view, exception:WX_REND大概原因就是gcanvas在安卓上绘制图像很容易各种问题,gcanvas是个第三方团队产品,uniapp官方在社区也曾说不推荐使用gcanvas。确实支持度不好。
  4. 没办法,gcanvas不能用在安卓上,只能再看看其他办法。然后采用了nvue+webview的方案,nvue使用webview加载hybrid本地html,准备用web canvas来绘制,一通操作猛如虎,嗯,安卓上能正常了
  5. 然后到iOS上一看,又拉跨了,canvas.toDataURL时报错了:the operation is insecure。翻译一下就是资源跨域问题。还奇怪呢,本地html引用的都是相对路径的本地资源,咋还会跨域,一通查一通找,发现了官方给出的解释:wkwebview环境本地资源也算跨域。好吧,没办法,那继续看看有没有办法解决吧。后面在社区里看了下发现有两种办法 1.plus.io 相关api读取为本地路径。2.本地资源转成base64。一通操作一通调试后没走通,大概原因就是1.nvue webview环境下,不能用plus api。2.本地资源转base64,大概方法也是走的原生xhr或者plus转换,但是原生xhr还有canvas.toDataURL在这种情况都是有跨域问题,plus同原因1一样,也没有支持。
  6. 最后,不纠结了,掉头吧。然后页面转为vue文件渲染。然后就ok了。

nvue这个东西官方也不维护了,虽然确实性能比vue强,但真不适合用纯nvue来做项目,巨多坑。还是见仁见智吧,合适场景下vue+nvue结合使用。

nvue+vue画布绘制并导出图片的解决方案【插件】

继续阅读 »

总结就是:用到绘制海报类似的地方(drawImage)不要用nvue。

  1. nvue 不支持普通的canvas api绘制。
  2. 然后找到了gcanvas这个东西,在iOS上还行,可以用。
  3. 然后到Android上一测,拉垮了。报错:exception function:gcanvas setBackGround for android view, exception:WX_REND大概原因就是gcanvas在安卓上绘制图像很容易各种问题,gcanvas是个第三方团队产品,uniapp官方在社区也曾说不推荐使用gcanvas。确实支持度不好。
  4. 没办法,gcanvas不能用在安卓上,只能再看看其他办法。然后采用了nvue+webview的方案,nvue使用webview加载hybrid本地html,准备用web canvas来绘制,一通操作猛如虎,嗯,安卓上能正常了
  5. 然后到iOS上一看,又拉跨了,canvas.toDataURL时报错了:the operation is insecure。翻译一下就是资源跨域问题。还奇怪呢,本地html引用的都是相对路径的本地资源,咋还会跨域,一通查一通找,发现了官方给出的解释:wkwebview环境本地资源也算跨域。好吧,没办法,那继续看看有没有办法解决吧。后面在社区里看了下发现有两种办法 1.plus.io 相关api读取为本地路径。2.本地资源转成base64。一通操作一通调试后没走通,大概原因就是1.nvue webview环境下,不能用plus api。2.本地资源转base64,大概方法也是走的原生xhr或者plus转换,但是原生xhr还有canvas.toDataURL在这种情况都是有跨域问题,plus同原因1一样,也没有支持。
  6. 最后,不纠结了,掉头吧。然后页面转为vue文件渲染。然后就ok了。

nvue这个东西官方也不维护了,虽然确实性能比vue强,但真不适合用纯nvue来做项目,巨多坑。还是见仁见智吧,合适场景下vue+nvue结合使用。

nvue+vue画布绘制并导出图片的解决方案【插件】

收起阅读 »

uniapp是否兼容安卓原生mlkit机器学习功能

兼容性

我在制作文字识别原生插件时,按照安卓原生文档引入com.google.mlkit:text-recognition-chinese:16.0.0库时,用hb导出的离线资源可以实现文字识别功能,但是制作原生插件后,一直报语言包里一个类不存在问题。

我在制作文字识别原生插件时,按照安卓原生文档引入com.google.mlkit:text-recognition-chinese:16.0.0库时,用hb导出的离线资源可以实现文字识别功能,但是制作原生插件后,一直报语言包里一个类不存在问题。

在开发xr-frame时,uni-app编译后的小程序代码丢失了width与height属性,导致图像模糊

HBuilderX uni_app

目前是还未全面支持xr-frame么?是否有折中的方法解决上面这个问题

目前是还未全面支持xr-frame么?是否有折中的方法解决上面这个问题

uniapp中,vue3版本中,怎么在App.vue中导入`/theme/theme_${mode}.scss`带变量的文件?

uniapp中,vue3版本中,怎么在App.vue中导入/theme/theme_${mode}.scss带变量的文件?

我尝试了 import(/theme/theme_${mode}.scss).then().catch(),但不被支持

let mode = uni.getStorageSync('theme') || 'light';
import(/ @vite-ignore /'/theme/theme_'+ mode +'.scss').then(() => {}).catch(error => {
console.error('失败原因:', error);
});

vite下,require(@/theme/theme_${mode}.scss) 用不了。

需要怎么做才能顺畅的解决问题?

继续阅读 »

uniapp中,vue3版本中,怎么在App.vue中导入/theme/theme_${mode}.scss带变量的文件?

我尝试了 import(/theme/theme_${mode}.scss).then().catch(),但不被支持

let mode = uni.getStorageSync('theme') || 'light';
import(/ @vite-ignore /'/theme/theme_'+ mode +'.scss').then(() => {}).catch(error => {
console.error('失败原因:', error);
});

vite下,require(@/theme/theme_${mode}.scss) 用不了。

需要怎么做才能顺畅的解决问题?

收起阅读 »

谷歌插件-TV影视资源解析程序代码分享

uniapp

前言

  • 通过“谷歌插件”+“阿里妈妈RPA平台”,实现实时发布影视资源数据
  • 需配合 电视TV影视APP 进行使用
  • 编写此文章,是为了给大家一个思路,剩下的部分,就靠大家的智慧自由发挥

谷歌插件安装方式

谷歌插件使用方法

  • 打开影视资源网站 https://www.freeok.pro/ 【其他平台影视解析程序类似,欢迎大家补充】
  • 找到想看的电影资源,点击到播放页面,会多出来一个按钮“点击这里”,我们直接去点击即可
  • 插件会自动复制资源影视JSON数据,数据demo如下
    首页接口JSON数据  
    [{"id":1,"cover":"","title":"周处除三害","movieFlag":"1","typeName":"电影"}]  
    播放页接口JSON数据  
    {"id":1,"comment":"","info":"","title":"周处除三害","movieFlag":"1","type":"single","resources":[{"website":"freeOk","movieUrl":"https://v9.douyinvod.com/9d76bd905715dc366bc48a003cf58a78/65ffbc54/video/tos/cn/tos-cn-v-6db89e/ogNh9hQ8tCEtgyP4gzaydXAjmhAhfQcsWMBEND/?okvip.mp4","movieFlag":"1"},{"website":"爱奇艺","movieUrl":null,"movieFlag":"0"}]}

借助在线rap工具发布HTTP服务

  • 访问阿里旗下RAP网站,http://rap2.taobao.org/account/login,注册账号
  • 创建一个仓库
  • 创建两个接口服务,具体接口数据参照下图,点击导入按钮复制谷歌插件获取的JSON数据
  • 接口服务创建好之后,点击接口地址,即可查看HTTP服务地址,如下图

效果演示

文章分享

开源插件分享

交流方式

  • WX:cqcq8080
  • QQ:534780006
继续阅读 »

前言

  • 通过“谷歌插件”+“阿里妈妈RPA平台”,实现实时发布影视资源数据
  • 需配合 电视TV影视APP 进行使用
  • 编写此文章,是为了给大家一个思路,剩下的部分,就靠大家的智慧自由发挥

谷歌插件安装方式

谷歌插件使用方法

  • 打开影视资源网站 https://www.freeok.pro/ 【其他平台影视解析程序类似,欢迎大家补充】
  • 找到想看的电影资源,点击到播放页面,会多出来一个按钮“点击这里”,我们直接去点击即可
  • 插件会自动复制资源影视JSON数据,数据demo如下
    首页接口JSON数据  
    [{"id":1,"cover":"","title":"周处除三害","movieFlag":"1","typeName":"电影"}]  
    播放页接口JSON数据  
    {"id":1,"comment":"","info":"","title":"周处除三害","movieFlag":"1","type":"single","resources":[{"website":"freeOk","movieUrl":"https://v9.douyinvod.com/9d76bd905715dc366bc48a003cf58a78/65ffbc54/video/tos/cn/tos-cn-v-6db89e/ogNh9hQ8tCEtgyP4gzaydXAjmhAhfQcsWMBEND/?okvip.mp4","movieFlag":"1"},{"website":"爱奇艺","movieUrl":null,"movieFlag":"0"}]}

借助在线rap工具发布HTTP服务

  • 访问阿里旗下RAP网站,http://rap2.taobao.org/account/login,注册账号
  • 创建一个仓库
  • 创建两个接口服务,具体接口数据参照下图,点击导入按钮复制谷歌插件获取的JSON数据
  • 接口服务创建好之后,点击接口地址,即可查看HTTP服务地址,如下图

效果演示

文章分享

开源插件分享

交流方式

  • WX:cqcq8080
  • QQ:534780006
收起阅读 »

To D云:强制用户使用贵司 IDE 进行打包是否合理?

项目运行 打包

无法通过审核,见图

无法通过审核,见图

ios开发scroll-view横向滚动失效,scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可

scrollview

更正——这个问题有了最新的解决方案:
给scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可。经验证,ios、安卓段子展示均正常。
示例代码如下:

     <!-- 头部二级导航 -->  
        <scroll-view  
          class="header flex_wrap flex_row flex_left flex_middle"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
          <view class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>

如上, flex_row,flex_left,flex_middle均为封装好的样式,即横向、水平靠左、垂直居中布局。
————————————————————————————————————————————
老bug了,本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的,但是IOS App开发中子元素高度必须要大于scroll-view宽度才能滚动,应该是拿错参数了。
官方一直没解决这个问题,都是在自己摸索。
做了不少尝试,总算找到不影响页面布局展示的方法了。
解决方案:
用一个透明的宽度为1像素的占位View把内部容器的高度撑大,高度为子元素的总宽度,这样无论有多少个子元素,都能做到自适应滚动了。

具体操作如下:

  1. 在ScrollView里边给子元素列表添加一个父容器btnBox(如果已有就不用了)。
  2. 在获取到子元素数据之后通过dom.getComponentRect来获取btnBox的总宽度(图中蓝框所示)。
  3. 在btnBox前边或者后边添加一个同级的宽度为1像素的占位view,高度设置为btnBox的宽度(颜色设置为透明,避免部分机型可能会有的默认颜色)。

问题完美解决,横向可以滚动了,也不影响界面展示。
示例代码如下:

       <scroll-view  
          class="header flex_wrap flex_center bg_grey flex_top on"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
         <view id="navStart" class="bg_red" style="width:1rpx;" :style="{ height: subNavWidth * 2 + 'rpx' }"></view>  
          <view ref="subNav" class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>
      var refDom = this.$refs.subNav;  
      var result = dom.getComponentRect(refDom, option => {  
        this.subNavWidth = option.size.width;  
      });
继续阅读 »

更正——这个问题有了最新的解决方案:
给scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可。经验证,ios、安卓段子展示均正常。
示例代码如下:

     <!-- 头部二级导航 -->  
        <scroll-view  
          class="header flex_wrap flex_row flex_left flex_middle"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
          <view class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>

如上, flex_row,flex_left,flex_middle均为封装好的样式,即横向、水平靠左、垂直居中布局。
————————————————————————————————————————————
老bug了,本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的,但是IOS App开发中子元素高度必须要大于scroll-view宽度才能滚动,应该是拿错参数了。
官方一直没解决这个问题,都是在自己摸索。
做了不少尝试,总算找到不影响页面布局展示的方法了。
解决方案:
用一个透明的宽度为1像素的占位View把内部容器的高度撑大,高度为子元素的总宽度,这样无论有多少个子元素,都能做到自适应滚动了。

具体操作如下:

  1. 在ScrollView里边给子元素列表添加一个父容器btnBox(如果已有就不用了)。
  2. 在获取到子元素数据之后通过dom.getComponentRect来获取btnBox的总宽度(图中蓝框所示)。
  3. 在btnBox前边或者后边添加一个同级的宽度为1像素的占位view,高度设置为btnBox的宽度(颜色设置为透明,避免部分机型可能会有的默认颜色)。

问题完美解决,横向可以滚动了,也不影响界面展示。
示例代码如下:

       <scroll-view  
          class="header flex_wrap flex_center bg_grey flex_top on"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
         <view id="navStart" class="bg_red" style="width:1rpx;" :style="{ height: subNavWidth * 2 + 'rpx' }"></view>  
          <view ref="subNav" class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>
      var refDom = this.$refs.subNav;  
      var result = dom.getComponentRect(refDom, option => {  
        this.subNavWidth = option.size.width;  
      });
收起阅读 »

关于uni-forms组件的bug【提交的字段['*']在数据库中并不存在】问题的复现和临时解决办法

上午搞的好好的,还添加了数据,下午再测就出现这个问题了,重新编译也不行,真是大白天见*了。。。
百度了一番,发现该问题最早出现是在2021-08-13这样就过分了啊,快三年了还没解决呢?
提示提交的字段["dirty_data"]在数据库中并不存在
然后又找了几个类似的问题贴,看到官方的回复说是一直没办法复现,所以没法解决,好吧,你们真牛
经过几个小时的不断百度和测试,终于发现规律了,复现代码如下

<template>  
    <view class="uni-container">  
        <uni-forms ref="form" v-model="formData" :rules="rules">  
            <uni-forms-item name="goods_name" label="商品名称" label-width="100px" label-align="right" required>  
                <uni-easyinput v-model="formData.goods_name" :clearable="false" placeholder="请输入商品名称" />  
            </uni-forms-item>  

            <uni-forms-item name="is_more_specs" label="是否多规格" label-width="100px" label-align="right">  
                <uni-data-checkbox v-model="formData.is_more_specs" mode="button" :localdata="[{text: '是', value: 1}, {text: '否', value: 0}]"></uni-data-checkbox>  
            </uni-forms-item>  

            <template v-if="formData.is_more_specs">  
                <uni-forms-item name="goods_sku" label="商品sku" label-width="100px" label-align="right">  
                     <uni-easyinput v-model="formData.goods_sku" :clearable="false" placeholder="请输入商品sku" />  
                </uni-forms-item>  
            </template>  

            <template v-else>  
                <uni-forms-item name="remain_stock" label="商品库存" label-width="100px" label-align="right" required>  
                    <uni-easyinput v-model="formData.remain_stock" :clearable="false" placeholder="商品库存" />  
                </uni-forms-item>  
            </template>  

            <view class="uni-button-group">  
                <button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">{{$t('common.button.submit')}}</button>  
                <navigator open-type="navigateBack" style="margin-left: 15px;">  
                    <button style="width: 100px;" class="uni-button">{{$t('common.button.back')}}</button>  
                </navigator>  
            </view>  
        </uni-forms>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            formDataId: '',  
            //表单数据  
            formData: {  
                goods_id: '',  
                goods_name: '',  
                market_price: '',  
                goods_sku: '',  
                is_more_specs: 0  
            },  
            //数据验证  
            rules: {  
                goods_name: {  
                    rules: [  
                        {  
                            "required": true,  
                            "errorMessage": '请选择活动商品'  
                        }  
                    ]  
                },  
                remain_stock: {  
                    rules: [  
                        {  
                            "required": true,  
                            "errorMessage": '请输入商品库存'  
                        }, {  
                            format: 'number',  
                            errorMessage: '商品库存必须为数字'  
                        }  
                    ]  
                }  
            }  
        }  
    },  
    methods: {  
        submitForm() {  
            this.$refs.form.validate((err, res) => {  
                if (err) return false;  

                //入库  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">  

</style>


问题的原因就是某个表单项设置了验证规则,但是又因为业务需要增加v-if过滤掉了该表单项,这时候bug的出现了,但实际上这个提示才是最坑的,因为根本没有到去验证数据表那一步啊。

解决办法
如果把v-else节点的template更换成view就没问题了,至于原因我不知道,没心思去分析源码。
希望官方有空把这个烂尾处理了吧。。。

继续阅读 »

上午搞的好好的,还添加了数据,下午再测就出现这个问题了,重新编译也不行,真是大白天见*了。。。
百度了一番,发现该问题最早出现是在2021-08-13这样就过分了啊,快三年了还没解决呢?
提示提交的字段["dirty_data"]在数据库中并不存在
然后又找了几个类似的问题贴,看到官方的回复说是一直没办法复现,所以没法解决,好吧,你们真牛
经过几个小时的不断百度和测试,终于发现规律了,复现代码如下

<template>  
    <view class="uni-container">  
        <uni-forms ref="form" v-model="formData" :rules="rules">  
            <uni-forms-item name="goods_name" label="商品名称" label-width="100px" label-align="right" required>  
                <uni-easyinput v-model="formData.goods_name" :clearable="false" placeholder="请输入商品名称" />  
            </uni-forms-item>  

            <uni-forms-item name="is_more_specs" label="是否多规格" label-width="100px" label-align="right">  
                <uni-data-checkbox v-model="formData.is_more_specs" mode="button" :localdata="[{text: '是', value: 1}, {text: '否', value: 0}]"></uni-data-checkbox>  
            </uni-forms-item>  

            <template v-if="formData.is_more_specs">  
                <uni-forms-item name="goods_sku" label="商品sku" label-width="100px" label-align="right">  
                     <uni-easyinput v-model="formData.goods_sku" :clearable="false" placeholder="请输入商品sku" />  
                </uni-forms-item>  
            </template>  

            <template v-else>  
                <uni-forms-item name="remain_stock" label="商品库存" label-width="100px" label-align="right" required>  
                    <uni-easyinput v-model="formData.remain_stock" :clearable="false" placeholder="商品库存" />  
                </uni-forms-item>  
            </template>  

            <view class="uni-button-group">  
                <button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">{{$t('common.button.submit')}}</button>  
                <navigator open-type="navigateBack" style="margin-left: 15px;">  
                    <button style="width: 100px;" class="uni-button">{{$t('common.button.back')}}</button>  
                </navigator>  
            </view>  
        </uni-forms>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            formDataId: '',  
            //表单数据  
            formData: {  
                goods_id: '',  
                goods_name: '',  
                market_price: '',  
                goods_sku: '',  
                is_more_specs: 0  
            },  
            //数据验证  
            rules: {  
                goods_name: {  
                    rules: [  
                        {  
                            "required": true,  
                            "errorMessage": '请选择活动商品'  
                        }  
                    ]  
                },  
                remain_stock: {  
                    rules: [  
                        {  
                            "required": true,  
                            "errorMessage": '请输入商品库存'  
                        }, {  
                            format: 'number',  
                            errorMessage: '商品库存必须为数字'  
                        }  
                    ]  
                }  
            }  
        }  
    },  
    methods: {  
        submitForm() {  
            this.$refs.form.validate((err, res) => {  
                if (err) return false;  

                //入库  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">  

</style>


问题的原因就是某个表单项设置了验证规则,但是又因为业务需要增加v-if过滤掉了该表单项,这时候bug的出现了,但实际上这个提示才是最坑的,因为根本没有到去验证数据表那一步啊。

解决办法
如果把v-else节点的template更换成view就没问题了,至于原因我不知道,没心思去分析源码。
希望官方有空把这个烂尾处理了吧。。。

收起阅读 »