HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni统计1.0入门教程

uni统计 uniapp

uni统计2.0已经发布 ,uni统计2.0 是开源、全端、云端一体的统计平台。另行查看:文档

以下是uni统计1.0的文档

  1. 无需在各端接不同的sdk、无需在不同报表看数据。uni统计:一张报表看遍业务全景。
  2. 拉通内容。让你知道用户到底喜欢你提供的什么内容,不管是新闻app里的新闻,还是购物app里的商品,都可以一目了然的看到全景。

web控制台地址:https://tongji.dcloud.net.cn

第一步、配置统计开关

自 uni-app 2.2.3版本后,uni-app项目在发布时会默认启用 uni统计,开发者可在https://tongji.dcloud.net.cn查看数据报表。
但从 uni-app 2.7起,默认值改为了不启用。需要在manifest中手动配置开启。

在HBuilderX中打开manifest,选择 uni统计,如下图:

如果不使用HBuilderX,也可在 manifest.json 的源码视图中手动关闭 uni统计

manifest.json -> uniStatistics 下的 enable 字段设置为 false 来关闭 uni 统计

//...  
"uniStatistics": {  
    "enable": false//全局关闭  
},  
//...

注意:uniStatistics支持分平台设置,比如若需仅关闭微信平台的 uni统计,则在mp-weixin节点下设置uniStatistics ->enable即可,如下:

//...  
"mp-weixin":{  
    "uniStatistics": {  
        "enable": false //微信平台关闭统计  
    }  
}

第二步、小程序端需添加域名访问白名单

由于各家小程序对可访问的域名要配置白名单,否则无法联网,所以需要将tongji.dcloud.io配入服务器域名列表。详细教程可参考https://ask.dcloud.net.cn/article/36298

第三步、使用HBuilderX 2.2.3以上或对应的cli版发行应用

应用在运行、调试时不会上报统计数据,仅在发行后,并启动新版的App、h5、小程序,才会上报数据。

第四步、登陆统计后台看数据

uni统计报表网址:https://tongji.dcloud.net.cn

请使用正确的DCloud账户登陆后台,每个DCloud账户登陆后可看到自己名下创建的应用。如果看不到期待的应用,那说明这个账户不是某个应用的所有者。

如果appid对应的项目的所有者发生变更,请参考如何转让应用

数据报表更新有延时,手机端上报数据后延迟几十分钟可在后台报表看到数据。


发行时为什么提示“当前应用未配置Appid,无法使用uni统计”

uni统计以appid区分不同应用,因此在编译项目时,若发现当前应用未配置appid,则会在控制台显示如下警告提醒:

当前应用未配置Appid,无法使用uni统计

此时,开发者可通过HBuilderX、DCloud开发者中心两个入口创建应用,获取Appid。

方式1. 登录HBluiderX获取

在HBluiderX中先登录,然后在项目根目录打开 manifest.json,在可视化界面点击获取 APPID 获取,无需其他设置,如下图

获取appid

方式2. 登录DCoud开发者中心获取(即将支持)

登录DCloud开发者中心,在线创建应用,然后将新应用的appid填写到manifest.json中

{  
  // ...  
  "appid":"创建的 appid"  
  // ...  
}

Tips

  • 使用 uni 统计必须配置 APPID 才能正常使用
  • 获取以及创建的 APPID 是与您的 DCloud 账号绑定的,请不要随意填写,否则将不能正常获取上报内容
  • 部分开发者不重视Appid,在不同应用中使用相同的appid,请修改这些错误的行为。
  • 附参考文章:DCloud的Appid有什么用,如需转让应用怎么做

注意事项

  • uni统计具备当日实时数据统计功能,但这个实时,仍然要经历一定运算时间,一般在3分钟到1个小时内的不等。
  • 如果开发者连续3日不登录uni统计控制台,则暂停实时统计服务;再次登录后1小时内会开始进行实时统计。这种暂停不影响日报、不影响整体数据准确性。
  • 如果开发者连续1个月不登录uni统计控制台,则暂停数据上报功能。再次登录后点击按钮恢复数据上报。暂停前系统会发送提醒邮件给开发者。暂停期间,数据不再记录,历史数据不受影响。恢复后,暂停期间的数据也无法恢复。

常见问题

  1. 后台数据一直显示 0 ,看不到数据上报

    • 请检查 manifest.json 是否配置 uni 统计为开启
    • 如已经配置请检查 HBuilderX 是否升级到 2.2.3 版本以上,CLI 方式是否升级到最新。
    • 请确认小程序的服务器域名名单中加入了tongji.dcloud.io
    • 请确认带有uni统计的新版本已经发布到手机上并且启动运行
    • 统计数据有几十分钟的延迟,如果是刚配上,请等一会再刷新报表
    • 应用需发布后才有数据,运行期不上报数据
    • 当日实时统计显示逻辑:3天内未登录统计后台的应用不会处理当日实时统计;再次登录后1小时内会开始进行实时统计。
  2. 自定义事件怎么用
    使用 uni.report() API 上报数据,详见自定义事件说明

  3. 内容统计是什么/ 页面规则怎么配置
    内容统计是uni统计的特色功能之一,是内容详情页的访问统计,详见内容统计说明

  4. 不支持导入老数据合并统计。uni统计需要自开通上线后才有数据

  5. 售卖用户数据,或未经用户同意共享数据给第三方,属于违法行为,DCloud严格遵守国家法律要求,uni统计可安心使用。

继续阅读 »

uni统计2.0已经发布 ,uni统计2.0 是开源、全端、云端一体的统计平台。另行查看:文档

以下是uni统计1.0的文档

  1. 无需在各端接不同的sdk、无需在不同报表看数据。uni统计:一张报表看遍业务全景。
  2. 拉通内容。让你知道用户到底喜欢你提供的什么内容,不管是新闻app里的新闻,还是购物app里的商品,都可以一目了然的看到全景。

web控制台地址:https://tongji.dcloud.net.cn

第一步、配置统计开关

自 uni-app 2.2.3版本后,uni-app项目在发布时会默认启用 uni统计,开发者可在https://tongji.dcloud.net.cn查看数据报表。
但从 uni-app 2.7起,默认值改为了不启用。需要在manifest中手动配置开启。

在HBuilderX中打开manifest,选择 uni统计,如下图:

如果不使用HBuilderX,也可在 manifest.json 的源码视图中手动关闭 uni统计

manifest.json -> uniStatistics 下的 enable 字段设置为 false 来关闭 uni 统计

//...  
"uniStatistics": {  
    "enable": false//全局关闭  
},  
//...

注意:uniStatistics支持分平台设置,比如若需仅关闭微信平台的 uni统计,则在mp-weixin节点下设置uniStatistics ->enable即可,如下:

//...  
"mp-weixin":{  
    "uniStatistics": {  
        "enable": false //微信平台关闭统计  
    }  
}

第二步、小程序端需添加域名访问白名单

由于各家小程序对可访问的域名要配置白名单,否则无法联网,所以需要将tongji.dcloud.io配入服务器域名列表。详细教程可参考https://ask.dcloud.net.cn/article/36298

第三步、使用HBuilderX 2.2.3以上或对应的cli版发行应用

应用在运行、调试时不会上报统计数据,仅在发行后,并启动新版的App、h5、小程序,才会上报数据。

第四步、登陆统计后台看数据

uni统计报表网址:https://tongji.dcloud.net.cn

请使用正确的DCloud账户登陆后台,每个DCloud账户登陆后可看到自己名下创建的应用。如果看不到期待的应用,那说明这个账户不是某个应用的所有者。

如果appid对应的项目的所有者发生变更,请参考如何转让应用

数据报表更新有延时,手机端上报数据后延迟几十分钟可在后台报表看到数据。


发行时为什么提示“当前应用未配置Appid,无法使用uni统计”

uni统计以appid区分不同应用,因此在编译项目时,若发现当前应用未配置appid,则会在控制台显示如下警告提醒:

当前应用未配置Appid,无法使用uni统计

此时,开发者可通过HBuilderX、DCloud开发者中心两个入口创建应用,获取Appid。

方式1. 登录HBluiderX获取

在HBluiderX中先登录,然后在项目根目录打开 manifest.json,在可视化界面点击获取 APPID 获取,无需其他设置,如下图

获取appid

方式2. 登录DCoud开发者中心获取(即将支持)

登录DCloud开发者中心,在线创建应用,然后将新应用的appid填写到manifest.json中

{  
  // ...  
  "appid":"创建的 appid"  
  // ...  
}

Tips

  • 使用 uni 统计必须配置 APPID 才能正常使用
  • 获取以及创建的 APPID 是与您的 DCloud 账号绑定的,请不要随意填写,否则将不能正常获取上报内容
  • 部分开发者不重视Appid,在不同应用中使用相同的appid,请修改这些错误的行为。
  • 附参考文章:DCloud的Appid有什么用,如需转让应用怎么做

注意事项

  • uni统计具备当日实时数据统计功能,但这个实时,仍然要经历一定运算时间,一般在3分钟到1个小时内的不等。
  • 如果开发者连续3日不登录uni统计控制台,则暂停实时统计服务;再次登录后1小时内会开始进行实时统计。这种暂停不影响日报、不影响整体数据准确性。
  • 如果开发者连续1个月不登录uni统计控制台,则暂停数据上报功能。再次登录后点击按钮恢复数据上报。暂停前系统会发送提醒邮件给开发者。暂停期间,数据不再记录,历史数据不受影响。恢复后,暂停期间的数据也无法恢复。

常见问题

  1. 后台数据一直显示 0 ,看不到数据上报

    • 请检查 manifest.json 是否配置 uni 统计为开启
    • 如已经配置请检查 HBuilderX 是否升级到 2.2.3 版本以上,CLI 方式是否升级到最新。
    • 请确认小程序的服务器域名名单中加入了tongji.dcloud.io
    • 请确认带有uni统计的新版本已经发布到手机上并且启动运行
    • 统计数据有几十分钟的延迟,如果是刚配上,请等一会再刷新报表
    • 应用需发布后才有数据,运行期不上报数据
    • 当日实时统计显示逻辑:3天内未登录统计后台的应用不会处理当日实时统计;再次登录后1小时内会开始进行实时统计。
  2. 自定义事件怎么用
    使用 uni.report() API 上报数据,详见自定义事件说明

  3. 内容统计是什么/ 页面规则怎么配置
    内容统计是uni统计的特色功能之一,是内容详情页的访问统计,详见内容统计说明

  4. 不支持导入老数据合并统计。uni统计需要自开通上线后才有数据

  5. 售卖用户数据,或未经用户同意共享数据给第三方,属于违法行为,DCloud严格遵守国家法律要求,uni统计可安心使用。

收起阅读 »

页面绑定的数据深层次更新,Dom没有检测到导致页面并没有重新渲染。

数据交互

这是一个上拉加载的回调函数,调用getListDataFromNet函数从服务端获取数据,然后更新到页面数据orderList中,因为orderList是一个二维数组,所以深层的数据更新不会触发Dom的重新渲染,于是在数据更新后添加强制重新渲染 this.$forceUpdate(); 问题解决。

upCallback(mescroll) {  
                //联网加载数据  
                this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{  
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;  
                    mescroll.endSuccess(curPageData.length);  
                    //设置列表数据  

                    if(mescroll.num == 1) this.orderList[this.tabIndex] = []; //如果是第一页需手动制空列表  
                    this.orderList[this.tabIndex]=this.orderList[this.tabIndex].concat(curPageData); //追加新数据  
                    console.log(this.orderList[this.tabIndex])  
                    this.$forceUpdate();  
                }, () => {  
                    //联网失败的回调,隐藏下拉刷新的状态  
                    mescroll.endErr();  
                })    
            },
继续阅读 »

这是一个上拉加载的回调函数,调用getListDataFromNet函数从服务端获取数据,然后更新到页面数据orderList中,因为orderList是一个二维数组,所以深层的数据更新不会触发Dom的重新渲染,于是在数据更新后添加强制重新渲染 this.$forceUpdate(); 问题解决。

upCallback(mescroll) {  
                //联网加载数据  
                this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{  
                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;  
                    mescroll.endSuccess(curPageData.length);  
                    //设置列表数据  

                    if(mescroll.num == 1) this.orderList[this.tabIndex] = []; //如果是第一页需手动制空列表  
                    this.orderList[this.tabIndex]=this.orderList[this.tabIndex].concat(curPageData); //追加新数据  
                    console.log(this.orderList[this.tabIndex])  
                    this.$forceUpdate();  
                }, () => {  
                    //联网失败的回调,隐藏下拉刷新的状态  
                    mescroll.endErr();  
                })    
            },
收起阅读 »

QQ小程序qq.getMenuButtonBoundingClientRect()获取为空

uni_app qq小程序

没关系,它不给,我们可以用模拟器+真机调试自己算

先给结论

{width:80,height:30,left:e.windowWidth-12-80,right:e.windowWidth-12,top:e.statusBarHeight+10,bottom:e.statusBarHeight+10+30};

这里的e是用uni.getSystemInfo得到的。可以看到效果如下

继续阅读 »

没关系,它不给,我们可以用模拟器+真机调试自己算

先给结论

{width:80,height:30,left:e.windowWidth-12-80,right:e.windowWidth-12,top:e.statusBarHeight+10,bottom:e.statusBarHeight+10+30};

这里的e是用uni.getSystemInfo得到的。可以看到效果如下

收起阅读 »

uni 内容统计说明

uni统计 uniapp

内容统计是uni统计的特色功能之一,是内容详情页的访问统计。
如果你做的是新闻App,那么新闻详情页就是内容统计,你可以方便的了解什么样的新闻访问次数、分享次数更高。
如果你做的是电商App,那么商品详情页就是内容统计,你可以方便的了解什么样的商品人们最感兴趣、分享次数更多。

如果详情页标题,是pages.json配置的原生导航,且正是内容标题本身,那么无需配置。在uni统计里可直接查看报表。
但如果使用自定义导航栏或者内容标题写在了别处,参考本文下方【页面标题采集】一节上报正确的页面标题,以方便报表展示。

内容统计会根据 url 的参数进行分析,根据参数的不同,将相同的页面进行分组。如资讯类应用的新闻页面,不同的新闻内容计为多个内容页。 商城类应用的商品详情页面,不同的产品计为多个内容页

【重要】为了保证采集到的内容 url 是正确有效的,需要先配置【页面规则】才会采集内容页面。页面规则介绍及配置方法详见下文。

实际场景使用说明

我们以社区版的 Hello uni-app 为例,现在我们想知道每个帖子的访问人数最多,那个问题是用户最关注的, 这个时候就需要用到内容统计了。

那么我们如果统计到同一个页面不同的内容呢 ?

内容统计名词说明

  1. 页面
    不同 url 表示一个不同的页面,如在 pages.json --> pages 下的每一项都表示一个不同页面

  2. 内容页
    相同的 url,不同的参数值表示一个内容页面

  3. 内容名称
    可以让用户直观感受的名称,如某个商品的详情,某个新闻的描述,可通过自定义事件自主上报

什么是页面规则

页面规则是用于生成内容统计 url 的规则。通过设置页面有效参数,通过带参数的 url 对内容进行标识。

如当前我们需要统计的页面地址为 pages/forum/detail/detial 的一个详情内容页,而这个页面是需要从前一个页面携带参数跳转过来的。通过携带的参数,我们才能知道这个页面的内容是什么。

例:

如下是一个页面完整的 url 表达

pages/forum/detail/detial?id=1&type=2&title=搜索内容

当前 url 传递了三个参数 idtypetitle ,但是只有 idtype 这两个参数才是有效参数,需要通过这两个参数来决定展示内容(如 request 请求数据)

idtype 就是当前页面的页面规则,这两个参数是区分页面的唯一方式,缺一不可。

配置页面规则

进入到统计后台,点击列表左侧导航的 内容统计 --> 页面规则 --> 编辑规则

如下图,点击添加参数,添加 idtype ,确定保存规则,

这个时候的规则如下

  • 当前页面 url 中包含 idtype 两个参数,且这两个参数值相同的情况下,我们认为这是同一个内容页面

  • 当前页面 url 中包含 idtype 两个参数,且这两个参数值不同的情况下,我们认为这是一个新的内容页面

  • 当前页面 url 中不包含任何规则中的参数,那么此页面将不会在内容统计中显示

Tips

  • 每条规则可以添加多个参数,进行匹配时,每条规则单独生效。
  • 每个页面可以添加多个规则(最多 5 个规则),进行匹配时,后添加的规则优先级较高
  • 目前的匹配规则只能处理通过 url 显式传递参数,且参数形式为上述示例中的键值对格式。

页面标题采集

在页面规则配置成功之后,在 内容统计 --> 内容统计 中的会显示根据规则匹配到的页面,到这一步,应该可以正常统计到详情页,为了更直观的感受,需要采集页面标题。

统计 SDK 会自动采集页面标题,页面标题的采集来源有以下几种

如果采集的页面标题不符合业务需求,可以通过后台手动修改页面标题。

如果以上几种设置页面标题的行为同时存在,则统计后台按照以下优先级显示页面标题 :

后台直接修改页面标题 > uni.report > uni.setNavigationBarTitle > 原生导航栏获取

如果配置正确的页面规则,正确采集标题,则如下图展示

继续阅读 »

内容统计是uni统计的特色功能之一,是内容详情页的访问统计。
如果你做的是新闻App,那么新闻详情页就是内容统计,你可以方便的了解什么样的新闻访问次数、分享次数更高。
如果你做的是电商App,那么商品详情页就是内容统计,你可以方便的了解什么样的商品人们最感兴趣、分享次数更多。

如果详情页标题,是pages.json配置的原生导航,且正是内容标题本身,那么无需配置。在uni统计里可直接查看报表。
但如果使用自定义导航栏或者内容标题写在了别处,参考本文下方【页面标题采集】一节上报正确的页面标题,以方便报表展示。

内容统计会根据 url 的参数进行分析,根据参数的不同,将相同的页面进行分组。如资讯类应用的新闻页面,不同的新闻内容计为多个内容页。 商城类应用的商品详情页面,不同的产品计为多个内容页

【重要】为了保证采集到的内容 url 是正确有效的,需要先配置【页面规则】才会采集内容页面。页面规则介绍及配置方法详见下文。

实际场景使用说明

我们以社区版的 Hello uni-app 为例,现在我们想知道每个帖子的访问人数最多,那个问题是用户最关注的, 这个时候就需要用到内容统计了。

那么我们如果统计到同一个页面不同的内容呢 ?

内容统计名词说明

  1. 页面
    不同 url 表示一个不同的页面,如在 pages.json --> pages 下的每一项都表示一个不同页面

  2. 内容页
    相同的 url,不同的参数值表示一个内容页面

  3. 内容名称
    可以让用户直观感受的名称,如某个商品的详情,某个新闻的描述,可通过自定义事件自主上报

什么是页面规则

页面规则是用于生成内容统计 url 的规则。通过设置页面有效参数,通过带参数的 url 对内容进行标识。

如当前我们需要统计的页面地址为 pages/forum/detail/detial 的一个详情内容页,而这个页面是需要从前一个页面携带参数跳转过来的。通过携带的参数,我们才能知道这个页面的内容是什么。

例:

如下是一个页面完整的 url 表达

pages/forum/detail/detial?id=1&type=2&title=搜索内容

当前 url 传递了三个参数 idtypetitle ,但是只有 idtype 这两个参数才是有效参数,需要通过这两个参数来决定展示内容(如 request 请求数据)

idtype 就是当前页面的页面规则,这两个参数是区分页面的唯一方式,缺一不可。

配置页面规则

进入到统计后台,点击列表左侧导航的 内容统计 --> 页面规则 --> 编辑规则

如下图,点击添加参数,添加 idtype ,确定保存规则,

这个时候的规则如下

  • 当前页面 url 中包含 idtype 两个参数,且这两个参数值相同的情况下,我们认为这是同一个内容页面

  • 当前页面 url 中包含 idtype 两个参数,且这两个参数值不同的情况下,我们认为这是一个新的内容页面

  • 当前页面 url 中不包含任何规则中的参数,那么此页面将不会在内容统计中显示

Tips

  • 每条规则可以添加多个参数,进行匹配时,每条规则单独生效。
  • 每个页面可以添加多个规则(最多 5 个规则),进行匹配时,后添加的规则优先级较高
  • 目前的匹配规则只能处理通过 url 显式传递参数,且参数形式为上述示例中的键值对格式。

页面标题采集

在页面规则配置成功之后,在 内容统计 --> 内容统计 中的会显示根据规则匹配到的页面,到这一步,应该可以正常统计到详情页,为了更直观的感受,需要采集页面标题。

统计 SDK 会自动采集页面标题,页面标题的采集来源有以下几种

如果采集的页面标题不符合业务需求,可以通过后台手动修改页面标题。

如果以上几种设置页面标题的行为同时存在,则统计后台按照以下优先级显示页面标题 :

后台直接修改页面标题 > uni.report > uni.setNavigationBarTitle > 原生导航栏获取

如果配置正确的页面规则,正确采集标题,则如下图展示

收起阅读 »

小程序统计域名配置

uni统计 uniapp


由于小程序有域名访问白名单限制。在各平台小程序中使用 uni 统计,需要配置合法域名 tongji.dcloud.io,不然统计无法生效。

以微信小程序为例配置合法域名

  • 需要管理员权限微信扫码确认身份

  • 在 request 合法域名中配置 tongji.dcloud.io 为合法域名,点击 保存并提交

  • 打开微信开发者工具,配置对应 appid ,点击详情 --> 项目配置 ,在域名信息下 request 合法域名中可以看到第四步配置的 tongji.dcloud.io ,表示配置成功

其他小程序平台类似,请在后台添加域名。

注意事项
HBuilderX Alpha 2.2.7 + 版本优化统计接口上报性能,已启用uni统计的历史项目,尽早在小程序后台request安全域名中新增 tongji.dcloud.io

继续阅读 »


由于小程序有域名访问白名单限制。在各平台小程序中使用 uni 统计,需要配置合法域名 tongji.dcloud.io,不然统计无法生效。

以微信小程序为例配置合法域名

  • 需要管理员权限微信扫码确认身份

  • 在 request 合法域名中配置 tongji.dcloud.io 为合法域名,点击 保存并提交

  • 打开微信开发者工具,配置对应 appid ,点击详情 --> 项目配置 ,在域名信息下 request 合法域名中可以看到第四步配置的 tongji.dcloud.io ,表示配置成功

其他小程序平台类似,请在后台添加域名。

注意事项
HBuilderX Alpha 2.2.7 + 版本优化统计接口上报性能,已启用uni统计的历史项目,尽早在小程序后台request安全域名中新增 tongji.dcloud.io

收起阅读 »

承接APP,小程序定制开发

承接APP,小程序定制开发

承接APP,小程序定制开发

unipopup+picker-view,这么低级的bug都有

uniapp

app效果:

h5,微信小程序无此bug

代码如下
<template>
<view>
<view style="height: 100rpx;"></view>
{{JSON.stringify(value)}}
<button @click="openPopup">打开选择器</button>

    <uniPopup :show="false" ref="popup" type="bottom" >  
        <picker-view class="single-picker" indicator-style="height: 80rpx;" @change="changePicker" :value="value">  
            <picker-view-column>  
                <block v-for="(item,index) in list" :key="index">  
                    <view class="disease-item">{{item[labelKey]}}</view>  
                </block>  
                <!-- 匿名插槽,可用于 插入显示列表加载提示 -->  
                <slot></slot>  
            </picker-view-column>  
        </picker-view>  
    </uniPopup>  
</view>  

</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
name: "getlocation",
components:{
uniPopup
},
data() {
return {
labelKey: "name",
list: [],
value: [0]
}
},
onLoad() {
this.getList();
},
methods: {
getList() {
for (var i = 0; i < 12; i++) {
this.list.push({
name: "picker-" + i,
id: i
})
}
},
changePicker(e) {
console.log(e.detail.value)
this.value = e.detail.value;
//this.$emit("change",e.detail.value);
},
openPopup() {
this.$refs.popup.open();
},
changePopUp(obj) {
console.log(this.value)
}
}
}
</script>

<style lang="scss">
.single-picker{
height: 50vh;
}
</style>

继续阅读 »

app效果:

h5,微信小程序无此bug

代码如下
<template>
<view>
<view style="height: 100rpx;"></view>
{{JSON.stringify(value)}}
<button @click="openPopup">打开选择器</button>

    <uniPopup :show="false" ref="popup" type="bottom" >  
        <picker-view class="single-picker" indicator-style="height: 80rpx;" @change="changePicker" :value="value">  
            <picker-view-column>  
                <block v-for="(item,index) in list" :key="index">  
                    <view class="disease-item">{{item[labelKey]}}</view>  
                </block>  
                <!-- 匿名插槽,可用于 插入显示列表加载提示 -->  
                <slot></slot>  
            </picker-view-column>  
        </picker-view>  
    </uniPopup>  
</view>  

</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
name: "getlocation",
components:{
uniPopup
},
data() {
return {
labelKey: "name",
list: [],
value: [0]
}
},
onLoad() {
this.getList();
},
methods: {
getList() {
for (var i = 0; i < 12; i++) {
this.list.push({
name: "picker-" + i,
id: i
})
}
},
changePicker(e) {
console.log(e.detail.value)
this.value = e.detail.value;
//this.$emit("change",e.detail.value);
},
openPopup() {
this.$refs.popup.open();
},
changePopUp(obj) {
console.log(this.value)
}
}
}
</script>

<style lang="scss">
.single-picker{
height: 50vh;
}
</style>

收起阅读 »

关于安装 less 插件 3.10.0 版本运行报错的解决方案

less

因less npm升级为3.10.0,引发了向下兼容问题。而HBuilderX自带的less插件没有锁版。导致部分使用HBuilderX的less插件的开发者无法正常编译uni-app。
目前HBuilderX的插件服务器已经升级。
之前(2019年8月17日-2019年8月18日)部分用户安装了有问题的less插件,请重新安装。

解决方案:

卸载重装 less 插件:工具->插件安装-less编译->卸载-安装

继续阅读 »

因less npm升级为3.10.0,引发了向下兼容问题。而HBuilderX自带的less插件没有锁版。导致部分使用HBuilderX的less插件的开发者无法正常编译uni-app。
目前HBuilderX的插件服务器已经升级。
之前(2019年8月17日-2019年8月18日)部分用户安装了有问题的less插件,请重新安装。

解决方案:

卸载重装 less 插件:工具->插件安装-less编译->卸载-安装

收起阅读 »

hbuilderX安装less编译插件后无法编译less样式

HBuilder X less bug确认中

hbuilderx安装less编译插件,uniapp项目运行到浏览器是报Module build failed (from ./node_modules/less-loader/dist/cjs.js): Class constructor FileManager cannot be invoked without 'new in undefined (line undefined, column undefined)。

继续阅读 »

hbuilderx安装less编译插件,uniapp项目运行到浏览器是报Module build failed (from ./node_modules/less-loader/dist/cjs.js): Class constructor FileManager cannot be invoked without 'new in undefined (line undefined, column undefined)。

收起阅读 »

关于 uni-app 内使用 websocket 后导致安卓白屏的解决方案

白屏 WEBSOCKET

部分安卓设备使用 websocket 后导致出现启动白屏,可以尝试以下临时解决方案:

继续阅读 »

部分安卓设备使用 websocket 后导致出现启动白屏,可以尝试以下临时解决方案:

收起阅读 »

UNIAPP兼职接外包QQ群:47323557 欢迎大家加入

外包

为了方便大家交流,我创建了一个uniapp接单的QQ群,欢迎 大家加入
群号:47323557

为了方便大家交流,我创建了一个uniapp接单的QQ群,欢迎 大家加入
群号:47323557