HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

php常用代码块

PHP

把下面的复制粘贴到php代码块中即可使用,包括php标签、语言编码、请求头等代码。

复制后放到代码块的 { } 内即可:

    "p_h_p": {  
    "body": [  
        "<?php",  
        "\t$1",  
        "?>"  
    ],  
    "prefix": "php?"  
},  
"$_GET": {  
    "body": [  
        "_GET"  
    ],  
    "prefix": "$_GET"  
},  
"$_POST": {  
    "body": [  
        "_POST"  
    ],  
    "prefix": "$_POST"  
},  
"header_utf-8": {  
    "body": [  
        "header('content-type:text/html;charset=utf-8');"  
    ],  
    "prefix": "heautf"  
},  
"set_re_head": {  
    "body": [  
        "setRequestHeader('Content-type','application/x-www-form-urlencoded');"  
    ],  
    "prefix": "setrh"  
}  
继续阅读 »

把下面的复制粘贴到php代码块中即可使用,包括php标签、语言编码、请求头等代码。

复制后放到代码块的 { } 内即可:

    "p_h_p": {  
    "body": [  
        "<?php",  
        "\t$1",  
        "?>"  
    ],  
    "prefix": "php?"  
},  
"$_GET": {  
    "body": [  
        "_GET"  
    ],  
    "prefix": "$_GET"  
},  
"$_POST": {  
    "body": [  
        "_POST"  
    ],  
    "prefix": "$_POST"  
},  
"header_utf-8": {  
    "body": [  
        "header('content-type:text/html;charset=utf-8');"  
    ],  
    "prefix": "heautf"  
},  
"set_re_head": {  
    "body": [  
        "setRequestHeader('Content-type','application/x-www-form-urlencoded');"  
    ],  
    "prefix": "setrh"  
}  
收起阅读 »

【报Bug】更新完hbuild 导致打包完的h5是空白的?!

h5

【报Bug】更新完hbuild 导致打包完的h5是空白的?!

【报Bug】更新完hbuild 导致打包完的h5是空白的?!

DCloud插件大赛2020启动!大奖、流量、变现都在等着你!

插件大赛

更新,中奖结果见:https://ask.dcloud.net.cn/article/37747

  • 主办:DCloud
  • 协办:腾讯云云开发
  • 特别赞助:阿里云开发者社区

去年的插件大赛,iphone等大奖刷刷发出去,很多人后悔没有参赛,都在问下次大赛何时举行。

来了,今年的大赛,更刺激!

2020大赛,从“uni-app插件大赛”,升级为“DCloud插件大赛”,因为不止包含uni-app,还包含uniCloudHBuilderX插件。同时还得到腾讯云、阿里云等合作伙伴的鼎力支持。

自然奖励也大幅升级喽,比去年多10倍的奖励,就问你心动不心动?

经过1年的发展,插件市场已有数千款插件,包罗了uni-app开发的方方面面。而DCloud,也已经成长为拥有500万开发者、10亿月活设备的巨型平台。

接下来,插件市场将更大幅的开放流量,让插件作者通过这个开放平台,获客、赚钱。

奖品设置

  • 特等奖:
    奖品:5万元插件包销 + 旗舰手机1部(iphone 11 或 华为mate pro 5G 2选1)+ 插件市场置顶推荐1个月 + HBuilderX预置
    名额:1名
  • 一等奖:
    奖品:3万元插件包销 + 旗舰手机1部(iphone 11 或 华为mate pro 5G 2选1)+ 插件市场置顶推荐半个月 + HBuilderX预置
    名额:2名
  • 二等奖
    奖品:1万元插件包销 + 极客外设1台(HHKB 机械键盘 或 小米 34寸曲面显示器 2选1)+ 插件市场置顶推荐1个星期
    名额:5名
  • 三等奖
    奖品:800元uniCloud代金券 + 小米13.5寸液晶小黑板
    名额:10名
  • 贡献奖
    奖品:uni-app纪念马克杯 或 uni-app T恤 或 HBuilderX加长鼠标垫 3选1
    名额:32名

中奖范围50人!

“插件包销”,是指获奖插件通过插件市场销售,DCloud兜底包销。以特等奖的5万元包销为例,如果获奖插件在插件市场1年内销售额没有达到5万元,则由DCloud付差额给获奖者进行兜底。包销只针对付费插件,如免费插件获得二等奖及以上奖励,其中的包销奖励无效。

除了已支持的App原生付费插件外,插件市场新增了uniCloud付费插件,并提供了良好的版权保护。

“HBuilderX预置”,是在HBuilderX新建项目界面,可直接选择该项目模板。下图为去年获奖插件在HBuilderX预置的效果。

除上述奖品外,

  • 所有获奖插件作者,都将进入DCloud VIP技术支持群,享受优先的技术支付、问题反馈。
  • 所有获奖插件的集锦页面,还将通过HBuilderX工具、论坛、QQ微信群进行全量推广,给予优秀插件充分的曝光。

协办方及赞助方奖品:

腾讯云、阿里云也参与本次大赛,给插件作者提供丰富奖励。

阿里云开发者社区提供的奖品如下:

  • 阿里云开发者社区cherry机械键盘 1个

  • 阿里云开发者社区电脑双肩包 3个

  • 阿里云开发者社区定制鼠标垫 15个

  • 阿里云开发者社区文化T恤衫 15件

  • 获奖插件将得到阿里云的宣传资源推广

  • 获奖插件作者将得到阿里云代金券,细则见下方附录。

腾讯云云开发提供的奖品如下:

  • 插件中深度集成腾讯云服务的插件作者,可获得100元腾讯云满减代金券,适用产品:OCR、人脸识别、图像处理、云直播、云点播、语音识别、语音合成、自然语言理解等,共200张。
  • 使用腾讯云云开发进行插件部署,激励100元代金券(满101减100元)
  • 获奖作品中,使用到腾讯云其他产品能力的可以获得腾讯云云开发公众号推荐。

协办方、赞助方的奖品发放,由赞助商的评委单独评选。细则稍后公布。

3类鼓励插件说明

1. uniCloud插件

插件市场已经有众多项目模板,但仅包含前端部分。uniCloud插件将弥补后端部分,并且这部分支持付费。
比如一个电商模板,前后端一体直接在插件市场获取,拿来就能用。

DCloud提供了云函数插件的产权保护、试用、购买。
定价方面,插件市场支持源码加密定价和源码开放定价这2种价格(目前只支持加密版销售,后续上线免密版销售)。
比如某电商模板的云函数中,有3个云函数设为加密(即源码对购买者不可见),定价500元;而全部云函数均不加密,定价1000元。
也就是对于购买者而言,可以较便宜的得到模板的使用权,但若想得到全部控制力和二次开发灵活性,则需加价购买。

DCloud提供了uni-IDuniPay的基础件支持,插件作者将不用再自己实现用户系统和支付,直接用现成的开源基础件即可,可极大提升插件开发效率。

而对于插件使用者而言,经常需要在自己的App中整合1个电商系统和1个论坛系统。只要这些系统都基于uni-ID,就可以方便的把多个系统整合到一起,连接同一套uni-ID账户体系,为用户同时提供商品销售和论坛交流服务。

uni-ID是DCloud推荐每个云函数项目均应该使用的库,详见:https://ext.dcloud.net.cn/plugin?id=2116

除了卖应用模板,uniCloud插件还将支持卖数据服务(比如天气数据、小说数据)、卖爬虫模板,无限可能的金矿等你来发掘。

2. 有助于运营变现的前端插件

前端插件里,鼓励含 uni-AD 的插件,以帮助开发者更好的运营变现。

  • 比如电子书模板阅读一定章节后,需观看激励视频。
  • 比如激励视频与积分、区块链相结合的模板。
  • 比如签到激励,提供帮助开发者提升留存手段的插件。

如果这些模板同时包含uniCloud,那大奖就离你非常近了:)

3. HBuilderX插件

HBuilderX包含传统意义的ide插件,比如某些字处理技巧,但不限于此。
HBuilderX将通过插件系统给所有开发者送水人释放500万开发者流量。
比如提供可视化界面设计的、提供源码托管的、提供手机测试服务的、提供持续集成的、提供团队任务管理的、提供招聘求职的.......,都可以为HBuilderX做一个插件,打通HBuilderX用户和自己服务的链路。
HBuilderX还会给插件开放一键登录(类似微信小程序里调用微信登录)。

虽然重点鼓励上述3类插件,但并非奖品只包含上述三类。只要插件做的好、用户喜欢,都有机会获奖。

大赛活动时间

  • 即日起至2020年8月31日24点之前,更新插件市场插件的,均为合格参赛者。
  • 2020年9月1-4日,评委评选获奖者。评选原则见下。
  • 2020年9月7日,公布获奖名单并发放奖品

参赛方式

  1. 注册插件市场并登陆账号,https://ext.dcloud.net.cn/
  2. 点击发布插件,插件开发指南参考:https://ask.dcloud.net.cn/article/35408
  3. 填写插件描述信息并提交发布

评奖参考依据

客观指标:插件的下载人数、评价、销售额、赞赏量
主观指标:插件对DCloud生态的价值
两种指标结合评定最终结果。

协办方和赞助方的奖品发放原则,由此选派的评委,另行提供。

开发插件过程中有任何问题可在DCloud官方社区提问:https://ask.dcloud.net.cn

本活动解释权归DCloud.io所有

附录1:阿里云开发者社区赞助代金券细则

阿里云提供的奖品:

  • 为所有插件开发者提供免费的小程序Serverless云服务资源
  • 为深度集成阿里云服务的插件获奖者提供阿里云移动研发平台EMAS产品代金券

代金券明细

奖项 获奖人数 代金券设置 代金券金额合计 使用规则
特等奖 1 2000 2000 参见使用规则
一等奖 2 1000 2000
二等奖 5 500 2500
三等奖 10 200 2000
贡献奖 32 100 3200
合计 50人 11700元

使用规则

  1. 每位获奖同学发放1张对应额度的代金券;
  2. 每个账户只能使用1张代金券;
  3. 代金券不支持和其他优惠活动同时使用;
  4. 代金券适用于阿里云移动研发平台(EMAS)全线产品,包括:EMAS套餐包、移动推送、HTTPDNS、移动测试、移动热修复、性能分析、远程日志、崩溃分析等;
  5. 有效期,自活动颁奖后3个月,目前活动安排是10/20公布获奖结果;
    (代金券使用最终解释权在阿里云)

附录2:插件创意

官方期待大量云端一体插件,所谓云端一体,指前端和云端配套,完成了一段相对独立的业务。
比如uni-id就是典型的云端一体插件。
但事实上云端一体,大有可为,官方认为如下插件大有可为:

云端一体组件

  • banner云端一体组件

    1. 云数据库中设计一个banner表,存放图片地址、点击链接
    2. 云函数处理逻辑
    3. 前端需要一个组件,基于swiper的封装
    4. pc端需要一个维护界面,可以上传图片、编辑地址

    当插件作者提供好这样的组件时,开发者可以极大的提升效率。传统开发中,上述开发需要前后端工程师和测试工程师协作,至少需要2人周才能完成。
    而有了banner云端一体组件,立即节省两人周。哪怕为此插件付费,也是值得的。
    注意admin版和业务版,需要按2个项目上传为两个插件,在readme里互相引用说明。

  • 上传组件
    1. 前端可以上传多张照片、视频,以及在app端可以上传任意文件
    2. 调用压缩
    3. 客户端安全直传uniCloud CDN,避免服务器中转
    4. 云函数中记录数据库
  • 评分rate组件
    前端组件点击五角星,该组件利用clientDB绑定云数据库字段,实现点击五角星后,出现waiting,并直接修改数据库
  • switch异步组件
    前端点击switch,利用clientDB绑定云数据库字段,自动修改数据库里的bool值,中间联网时有个waiting圈转
  • 投票组件
    1. 云数据库设计一个vote表
    2. 前端通过clientDB渲染投票表单界面
    3. 点击投票按钮后利用clientDB提交数据库
    4. 管理端页面提供一个生成投票、统计投票的界面
  • 企业通信录选择
    1. 云数据设计企业通信录
    2. 前端出一个多级选择界面
  • 省市地址选择
    搭配着云数据库的多列picker
  • 机场列表选择
    类似于一般app的机场选择界面,包含前端页面、搜索、indexList、云数据库

其实云端一体新世界,会迸发出非常多创意,不止上述这些。有了这些云端一体插件,开发者的开发效率又将大幅的提升。

云端一体模板

除了云端一体组件,还有云端一体的项目模板。
目前插件市场已经有云端一体的电商、外卖等模板,重点还期待如下项目模块:

  • 电子书模板阅读一定章节后,需观看激励视频
  • 将激励视频用于拉新、获客、留存、分享裂变,甚至与区块链相结合的项目模板
  • 完善的新闻、博客、社区、在线教育、线下连锁商户、OA、CRM、进销存等项目模板

我们认为,这些插件都是需求广泛的插件,不但对开发者的效率提升有重大帮助,也能让插件作者收获躺赚的感觉,利用插件市场的流量、计费和版权保护,让插件作者和开发者共赢。

云端一体是一个新世界,拥有太多新机会。

不管是解决什么问题的插件,早做,就容易树立自己的品牌,在这个新风口占据一个躺赚的位置。

祝大家,成功获奖、成功躺赚!

友情提示 - 发布插件建议提供成品示例:

  • 发布H5版本到uniCloud的静态托管,让使用者可以直接体验;
  • 发布apk版本到uniCloud的静态托管,让使用者可以直接安装到手机上体验;
继续阅读 »

更新,中奖结果见:https://ask.dcloud.net.cn/article/37747

  • 主办:DCloud
  • 协办:腾讯云云开发
  • 特别赞助:阿里云开发者社区

去年的插件大赛,iphone等大奖刷刷发出去,很多人后悔没有参赛,都在问下次大赛何时举行。

来了,今年的大赛,更刺激!

2020大赛,从“uni-app插件大赛”,升级为“DCloud插件大赛”,因为不止包含uni-app,还包含uniCloudHBuilderX插件。同时还得到腾讯云、阿里云等合作伙伴的鼎力支持。

自然奖励也大幅升级喽,比去年多10倍的奖励,就问你心动不心动?

经过1年的发展,插件市场已有数千款插件,包罗了uni-app开发的方方面面。而DCloud,也已经成长为拥有500万开发者、10亿月活设备的巨型平台。

接下来,插件市场将更大幅的开放流量,让插件作者通过这个开放平台,获客、赚钱。

奖品设置

  • 特等奖:
    奖品:5万元插件包销 + 旗舰手机1部(iphone 11 或 华为mate pro 5G 2选1)+ 插件市场置顶推荐1个月 + HBuilderX预置
    名额:1名
  • 一等奖:
    奖品:3万元插件包销 + 旗舰手机1部(iphone 11 或 华为mate pro 5G 2选1)+ 插件市场置顶推荐半个月 + HBuilderX预置
    名额:2名
  • 二等奖
    奖品:1万元插件包销 + 极客外设1台(HHKB 机械键盘 或 小米 34寸曲面显示器 2选1)+ 插件市场置顶推荐1个星期
    名额:5名
  • 三等奖
    奖品:800元uniCloud代金券 + 小米13.5寸液晶小黑板
    名额:10名
  • 贡献奖
    奖品:uni-app纪念马克杯 或 uni-app T恤 或 HBuilderX加长鼠标垫 3选1
    名额:32名

中奖范围50人!

“插件包销”,是指获奖插件通过插件市场销售,DCloud兜底包销。以特等奖的5万元包销为例,如果获奖插件在插件市场1年内销售额没有达到5万元,则由DCloud付差额给获奖者进行兜底。包销只针对付费插件,如免费插件获得二等奖及以上奖励,其中的包销奖励无效。

除了已支持的App原生付费插件外,插件市场新增了uniCloud付费插件,并提供了良好的版权保护。

“HBuilderX预置”,是在HBuilderX新建项目界面,可直接选择该项目模板。下图为去年获奖插件在HBuilderX预置的效果。

除上述奖品外,

  • 所有获奖插件作者,都将进入DCloud VIP技术支持群,享受优先的技术支付、问题反馈。
  • 所有获奖插件的集锦页面,还将通过HBuilderX工具、论坛、QQ微信群进行全量推广,给予优秀插件充分的曝光。

协办方及赞助方奖品:

腾讯云、阿里云也参与本次大赛,给插件作者提供丰富奖励。

阿里云开发者社区提供的奖品如下:

  • 阿里云开发者社区cherry机械键盘 1个

  • 阿里云开发者社区电脑双肩包 3个

  • 阿里云开发者社区定制鼠标垫 15个

  • 阿里云开发者社区文化T恤衫 15件

  • 获奖插件将得到阿里云的宣传资源推广

  • 获奖插件作者将得到阿里云代金券,细则见下方附录。

腾讯云云开发提供的奖品如下:

  • 插件中深度集成腾讯云服务的插件作者,可获得100元腾讯云满减代金券,适用产品:OCR、人脸识别、图像处理、云直播、云点播、语音识别、语音合成、自然语言理解等,共200张。
  • 使用腾讯云云开发进行插件部署,激励100元代金券(满101减100元)
  • 获奖作品中,使用到腾讯云其他产品能力的可以获得腾讯云云开发公众号推荐。

协办方、赞助方的奖品发放,由赞助商的评委单独评选。细则稍后公布。

3类鼓励插件说明

1. uniCloud插件

插件市场已经有众多项目模板,但仅包含前端部分。uniCloud插件将弥补后端部分,并且这部分支持付费。
比如一个电商模板,前后端一体直接在插件市场获取,拿来就能用。

DCloud提供了云函数插件的产权保护、试用、购买。
定价方面,插件市场支持源码加密定价和源码开放定价这2种价格(目前只支持加密版销售,后续上线免密版销售)。
比如某电商模板的云函数中,有3个云函数设为加密(即源码对购买者不可见),定价500元;而全部云函数均不加密,定价1000元。
也就是对于购买者而言,可以较便宜的得到模板的使用权,但若想得到全部控制力和二次开发灵活性,则需加价购买。

DCloud提供了uni-IDuniPay的基础件支持,插件作者将不用再自己实现用户系统和支付,直接用现成的开源基础件即可,可极大提升插件开发效率。

而对于插件使用者而言,经常需要在自己的App中整合1个电商系统和1个论坛系统。只要这些系统都基于uni-ID,就可以方便的把多个系统整合到一起,连接同一套uni-ID账户体系,为用户同时提供商品销售和论坛交流服务。

uni-ID是DCloud推荐每个云函数项目均应该使用的库,详见:https://ext.dcloud.net.cn/plugin?id=2116

除了卖应用模板,uniCloud插件还将支持卖数据服务(比如天气数据、小说数据)、卖爬虫模板,无限可能的金矿等你来发掘。

2. 有助于运营变现的前端插件

前端插件里,鼓励含 uni-AD 的插件,以帮助开发者更好的运营变现。

  • 比如电子书模板阅读一定章节后,需观看激励视频。
  • 比如激励视频与积分、区块链相结合的模板。
  • 比如签到激励,提供帮助开发者提升留存手段的插件。

如果这些模板同时包含uniCloud,那大奖就离你非常近了:)

3. HBuilderX插件

HBuilderX包含传统意义的ide插件,比如某些字处理技巧,但不限于此。
HBuilderX将通过插件系统给所有开发者送水人释放500万开发者流量。
比如提供可视化界面设计的、提供源码托管的、提供手机测试服务的、提供持续集成的、提供团队任务管理的、提供招聘求职的.......,都可以为HBuilderX做一个插件,打通HBuilderX用户和自己服务的链路。
HBuilderX还会给插件开放一键登录(类似微信小程序里调用微信登录)。

虽然重点鼓励上述3类插件,但并非奖品只包含上述三类。只要插件做的好、用户喜欢,都有机会获奖。

大赛活动时间

  • 即日起至2020年8月31日24点之前,更新插件市场插件的,均为合格参赛者。
  • 2020年9月1-4日,评委评选获奖者。评选原则见下。
  • 2020年9月7日,公布获奖名单并发放奖品

参赛方式

  1. 注册插件市场并登陆账号,https://ext.dcloud.net.cn/
  2. 点击发布插件,插件开发指南参考:https://ask.dcloud.net.cn/article/35408
  3. 填写插件描述信息并提交发布

评奖参考依据

客观指标:插件的下载人数、评价、销售额、赞赏量
主观指标:插件对DCloud生态的价值
两种指标结合评定最终结果。

协办方和赞助方的奖品发放原则,由此选派的评委,另行提供。

开发插件过程中有任何问题可在DCloud官方社区提问:https://ask.dcloud.net.cn

本活动解释权归DCloud.io所有

附录1:阿里云开发者社区赞助代金券细则

阿里云提供的奖品:

  • 为所有插件开发者提供免费的小程序Serverless云服务资源
  • 为深度集成阿里云服务的插件获奖者提供阿里云移动研发平台EMAS产品代金券

代金券明细

奖项 获奖人数 代金券设置 代金券金额合计 使用规则
特等奖 1 2000 2000 参见使用规则
一等奖 2 1000 2000
二等奖 5 500 2500
三等奖 10 200 2000
贡献奖 32 100 3200
合计 50人 11700元

使用规则

  1. 每位获奖同学发放1张对应额度的代金券;
  2. 每个账户只能使用1张代金券;
  3. 代金券不支持和其他优惠活动同时使用;
  4. 代金券适用于阿里云移动研发平台(EMAS)全线产品,包括:EMAS套餐包、移动推送、HTTPDNS、移动测试、移动热修复、性能分析、远程日志、崩溃分析等;
  5. 有效期,自活动颁奖后3个月,目前活动安排是10/20公布获奖结果;
    (代金券使用最终解释权在阿里云)

附录2:插件创意

官方期待大量云端一体插件,所谓云端一体,指前端和云端配套,完成了一段相对独立的业务。
比如uni-id就是典型的云端一体插件。
但事实上云端一体,大有可为,官方认为如下插件大有可为:

云端一体组件

  • banner云端一体组件

    1. 云数据库中设计一个banner表,存放图片地址、点击链接
    2. 云函数处理逻辑
    3. 前端需要一个组件,基于swiper的封装
    4. pc端需要一个维护界面,可以上传图片、编辑地址

    当插件作者提供好这样的组件时,开发者可以极大的提升效率。传统开发中,上述开发需要前后端工程师和测试工程师协作,至少需要2人周才能完成。
    而有了banner云端一体组件,立即节省两人周。哪怕为此插件付费,也是值得的。
    注意admin版和业务版,需要按2个项目上传为两个插件,在readme里互相引用说明。

  • 上传组件
    1. 前端可以上传多张照片、视频,以及在app端可以上传任意文件
    2. 调用压缩
    3. 客户端安全直传uniCloud CDN,避免服务器中转
    4. 云函数中记录数据库
  • 评分rate组件
    前端组件点击五角星,该组件利用clientDB绑定云数据库字段,实现点击五角星后,出现waiting,并直接修改数据库
  • switch异步组件
    前端点击switch,利用clientDB绑定云数据库字段,自动修改数据库里的bool值,中间联网时有个waiting圈转
  • 投票组件
    1. 云数据库设计一个vote表
    2. 前端通过clientDB渲染投票表单界面
    3. 点击投票按钮后利用clientDB提交数据库
    4. 管理端页面提供一个生成投票、统计投票的界面
  • 企业通信录选择
    1. 云数据设计企业通信录
    2. 前端出一个多级选择界面
  • 省市地址选择
    搭配着云数据库的多列picker
  • 机场列表选择
    类似于一般app的机场选择界面,包含前端页面、搜索、indexList、云数据库

其实云端一体新世界,会迸发出非常多创意,不止上述这些。有了这些云端一体插件,开发者的开发效率又将大幅的提升。

云端一体模板

除了云端一体组件,还有云端一体的项目模板。
目前插件市场已经有云端一体的电商、外卖等模板,重点还期待如下项目模块:

  • 电子书模板阅读一定章节后,需观看激励视频
  • 将激励视频用于拉新、获客、留存、分享裂变,甚至与区块链相结合的项目模板
  • 完善的新闻、博客、社区、在线教育、线下连锁商户、OA、CRM、进销存等项目模板

我们认为,这些插件都是需求广泛的插件,不但对开发者的效率提升有重大帮助,也能让插件作者收获躺赚的感觉,利用插件市场的流量、计费和版权保护,让插件作者和开发者共赢。

云端一体是一个新世界,拥有太多新机会。

不管是解决什么问题的插件,早做,就容易树立自己的品牌,在这个新风口占据一个躺赚的位置。

祝大家,成功获奖、成功躺赚!

友情提示 - 发布插件建议提供成品示例:

  • 发布H5版本到uniCloud的静态托管,让使用者可以直接体验;
  • 发布apk版本到uniCloud的静态托管,让使用者可以直接安装到手机上体验;
收起阅读 »

关于H5打包的提示不支持file打开的问题

h5 HBuilder X

看到新版本支持编译后的包可以通过file方式打开,所以打包完成后提示的这句是不是可以去掉了。

看到新版本支持编译后的包可以通过file方式打开,所以打包完成后提示的这句是不是可以去掉了。

html2canvas和wxml2canvas踩坑记

相关问题描述可查看此链接
http://blog.gcrong.com/#/aDetail/56

相关问题描述可查看此链接
http://blog.gcrong.com/#/aDetail/56

删除文件

uniapp

uni.removeSavedFile(OBJECT);

删除本地存储的文件。

1 平台

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序
x

2 语法

语法:

2.1 OBJECT参数

参数名 类型 必填 说明 平台差异
filePath String 需要删除的文件路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

3 示例

uni.getSavedFileList({  
  success: function (res) {  
    if (res.fileList.length > 0) {  
      uni.removeSavedFile({  
        filePath: res.fileList[0].filePath,  
        complete: function (res) {  
          console.log(res);  
        }  
      });  
    }  
  }  
});
继续阅读 »

uni.removeSavedFile(OBJECT);

删除本地存储的文件。

1 平台

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序
x

2 语法

语法:

2.1 OBJECT参数

参数名 类型 必填 说明 平台差异
filePath String 需要删除的文件路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

3 示例

uni.getSavedFileList({  
  success: function (res) {  
    if (res.fileList.length > 0) {  
      uni.removeSavedFile({  
        filePath: res.fileList[0].filePath,  
        complete: function (res) {  
          console.log(res);  
        }  
      });  
    }  
  }  
});
收起阅读 »

扫码

HTML5+ api js uniapp

uni.scanCode(OBJECT)
调起客户端扫码界面,扫码成功后返回对应的结果。

1 平台

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序
x

2 语法

2.1 OBJECT参数

参数名 类型 必填 说明 平台差异说明
onlyFromCamera Boolean 是否只能从相机扫码,不允许从相册选择图片 字节跳动小程序不支持此参数
scanType Array 扫码类型,参数类型是数组,二维码是'qrCode',一维码是'barCode',DataMatrix是‘datamatrix’,pdf417是‘pdf417’。 字节跳动小程序不支持此参数,支付宝只支持条码和二维码
success Function 接口调用成功的回调,返回内容详见返回参数说明。
fail Function 接口调用失败的回调函数(识别失败、用户取消等情况下触发)
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

3 示例

// 允许从相机和相册扫码  
uni.scanCode({  
    success: function (res) {  
        console.log('条码类型:' + res.scanType);  
        console.log('条码内容:' + res.result);  
    }  
});  

// 只允许通过相机扫码  
uni.scanCode({  
    onlyFromCamera: true,  
    success: function (res) {  
        console.log('条码类型:' + res.scanType);  
        console.log('条码内容:' + res.result);  
    }  
});  

// 调起条码扫描  
uni.scanCode({  
    scanType: ['barCode'],  
    success: function (res) {  
        console.log('条码类型:' + res.scanType);  
        console.log('条码内容:' + res.result);  
    }  
});
继续阅读 »

uni.scanCode(OBJECT)
调起客户端扫码界面,扫码成功后返回对应的结果。

1 平台

App H5 微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ小程序
x

2 语法

2.1 OBJECT参数

参数名 类型 必填 说明 平台差异说明
onlyFromCamera Boolean 是否只能从相机扫码,不允许从相册选择图片 字节跳动小程序不支持此参数
scanType Array 扫码类型,参数类型是数组,二维码是'qrCode',一维码是'barCode',DataMatrix是‘datamatrix’,pdf417是‘pdf417’。 字节跳动小程序不支持此参数,支付宝只支持条码和二维码
success Function 接口调用成功的回调,返回内容详见返回参数说明。
fail Function 接口调用失败的回调函数(识别失败、用户取消等情况下触发)
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

3 示例

// 允许从相机和相册扫码  
uni.scanCode({  
    success: function (res) {  
        console.log('条码类型:' + res.scanType);  
        console.log('条码内容:' + res.result);  
    }  
});  

// 只允许通过相机扫码  
uni.scanCode({  
    onlyFromCamera: true,  
    success: function (res) {  
        console.log('条码类型:' + res.scanType);  
        console.log('条码内容:' + res.result);  
    }  
});  

// 调起条码扫描  
uni.scanCode({  
    scanType: ['barCode'],  
    success: function (res) {  
        console.log('条码类型:' + res.scanType);  
        console.log('条码内容:' + res.result);  
    }  
});
收起阅读 »

振动

HTML5+ uniapp js

uni.vibrateLong(OBJECT);
uni.vibrateShort(OBJECT);

1 语法

OBJECT参数都是

参数名 类型 必填 说明 平台差异
success Function 接口调用成功的回调
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

2 示例

uni.vibrateLong();  
// 长振动  
uni.vibrateShort();  
// 短振动

3 实例

需要分为两步来完成。

3.1 第一步 Vue

<!-- template -->  
<template><!-- 使用<template> -->  
    <view class="content">  
        <button type="primary" @click="uni.vibrateLong()">长振动</button>  
        <button type="default" @click="uni.vibrateShort()">短振动</button>  
        <icon type="warn" size="23" /><text selectable="true">iOS只有长振动,没有短振动。<!-- 提示 --></text>  
    </view>  
</template>

3.2 第二步 JavaScript

无需再编写代码。

继续阅读 »

uni.vibrateLong(OBJECT);
uni.vibrateShort(OBJECT);

1 语法

OBJECT参数都是

参数名 类型 必填 说明 平台差异
success Function 接口调用成功的回调
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

2 示例

uni.vibrateLong();  
// 长振动  
uni.vibrateShort();  
// 短振动

3 实例

需要分为两步来完成。

3.1 第一步 Vue

<!-- template -->  
<template><!-- 使用<template> -->  
    <view class="content">  
        <button type="primary" @click="uni.vibrateLong()">长振动</button>  
        <button type="default" @click="uni.vibrateShort()">短振动</button>  
        <icon type="warn" size="23" /><text selectable="true">iOS只有长振动,没有短振动。<!-- 提示 --></text>  
    </view>  
</template>

3.2 第二步 JavaScript

无需再编写代码。

收起阅读 »

确认提示框

js uniapp HTML5+ api

uni.showModal(OBJECT)

1 参数

OBJECT参数说明

参数 类型 必填 说明 平台差异说明
title String 提示的标题
content String 提示的内容
showCancel Boolean 是否显示取消按钮,默认为 true
cancelText String 取消按钮的文字,默认为"取消",最多 4 个字符
cancelColor HexColor 取消按钮的文字颜色,默认为"#000000" H5、微信小程序、百度小程序
confirmText String 确定按钮的文字,默认为"确定",最多 4 个字符
confirmColor HexColor 确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff" H5、微信小程序、百度小程序
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)  

2 代码示例

确认提示框代码

uni.showModal({  
title:"title",// 标题  
content:"content",// 内容  
showCancel:true // 可以不要  
});

3 回调

3.1 成功(res.xxxx)

数据 说明
confirm 点击确定关闭
cancel 点击取消关闭

3.2 失败(err.xxxx

无参数。(errCode,errMsg等还是有的)

3.3 完成

无参数。

4 提醒

  • OBJECT.showCancel参数可以不要
继续阅读 »

uni.showModal(OBJECT)

1 参数

OBJECT参数说明

参数 类型 必填 说明 平台差异说明
title String 提示的标题
content String 提示的内容
showCancel Boolean 是否显示取消按钮,默认为 true
cancelText String 取消按钮的文字,默认为"取消",最多 4 个字符
cancelColor HexColor 取消按钮的文字颜色,默认为"#000000" H5、微信小程序、百度小程序
confirmText String 确定按钮的文字,默认为"确定",最多 4 个字符
confirmColor HexColor 确定按钮的文字颜色,H5平台默认为"#007aff",微信小程序平台默认为"#3CC51F",百度小程序平台默认为"#3c76ff" H5、微信小程序、百度小程序
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)  

2 代码示例

确认提示框代码

uni.showModal({  
title:"title",// 标题  
content:"content",// 内容  
showCancel:true // 可以不要  
});

3 回调

3.1 成功(res.xxxx)

数据 说明
confirm 点击确定关闭
cancel 点击取消关闭

3.2 失败(err.xxxx

无参数。(errCode,errMsg等还是有的)

3.3 完成

无参数。

4 提醒

  • OBJECT.showCancel参数可以不要
收起阅读 »

ipa文件上架app store的方法,很简单

我们的ipa文件打包完后,分adhot测试或app store两种类型。

而对于app store类型的文件,我们需要将它上传到苹果的开发者中心,然年在开发者中心发布版本,但是发布到开发者中心却相当麻烦,需要使用mac电脑,万一我们没有mac电脑怎么解决?

可以使用免费的上传网站:香蕉云编

https://www.yunedit.com/ipadetail

这个网站可以帮你在线上传你的ipa文件上去苹果开发者中心,而无需使用mac电脑。

对于adhot类型,我们需要将这个ipa文件下载到用户手机测试,十分麻烦,需要使用itunes或者自己搭建https服务,配置xml文件。

我们也可以使用香蕉云编这个网站的应用内测功能,上传你的ipa文件,它会帮你生成一个二维码,添加了udid的手机扫码就可以安装测试。

继续阅读 »

我们的ipa文件打包完后,分adhot测试或app store两种类型。

而对于app store类型的文件,我们需要将它上传到苹果的开发者中心,然年在开发者中心发布版本,但是发布到开发者中心却相当麻烦,需要使用mac电脑,万一我们没有mac电脑怎么解决?

可以使用免费的上传网站:香蕉云编

https://www.yunedit.com/ipadetail

这个网站可以帮你在线上传你的ipa文件上去苹果开发者中心,而无需使用mac电脑。

对于adhot类型,我们需要将这个ipa文件下载到用户手机测试,十分麻烦,需要使用itunes或者自己搭建https服务,配置xml文件。

我们也可以使用香蕉云编这个网站的应用内测功能,上传你的ipa文件,它会帮你生成一个二维码,添加了udid的手机扫码就可以安装测试。

收起阅读 »

uniapp开发微信小程序获取用户手机号

微信小程序

uniapp开发微信小程序获取用户手机号

功能描述:微信小程序,点击微信第三方登录,获取到当前用户绑定的手机号与openId(或unionid),请求后端接口实现登录。

功能拆分逻辑:

  1. 点击某个按钮,弹出请求微信授权界面。
  2. 点击允许按钮,获取用户微信绑定的手机号与openId
  3. 请求后端接口,实现登录。

主要重点还是在前两步。我们来看一下实际的实现


创建getPhoneNumber按钮

依据微信小程序开发文档描述,小程序官方文档,先写一个button按钮,open-type 设为 getPhoneNumber,在uniapp页面中创建按钮:

代码示例

<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">唤起授权</button>

:warning:注意:
小程序官方的写法如下,但我们在uniapp想要触发按钮点击,并进行后续操作的话,建议使用上面的写法。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

调用 wx.login 接口,获取code

:warning: 根据官方文档描述,要想获取加密的手机号码,必须要先登录,所以我们在页面的 onload 中调用微信登录接口,并获取code。
代码示例:

onload(){  
    wx.login({  
        success: (res) => {  
            if (res.code) {         //微信登录成功 已拿到code  
                // ...doSomething  
            } else {  
                console.log('登录失败!' + res.errMsg)  
            }  
        }  
    })  
}

code 换取 sessionopenId

在获取到登录成功后微信返回的 code 后,我们要用 code 换取 sessionopenid/unionid
换取方式有两种:

  1. 第一种不借助后端(不推荐)
  2. 第二种借助后端

    1.不借助后端获取

    不借助后端获取,就是你必须知道你小程序的 APPIDsecret,这个可以在 小程序控制台->开发->开发设置 中看到,然后用 APPID secret 以及上一步获取到的 code 请求微信的 auth.code2Session 接口,获取 sessionopenid auth.code2Session文档

:warning:这样做的话你的小程序的 APPID 和 secret会明文出现在前端代码中,有泄漏风险

改造上面的onload事件
代码示例:

onload(){  
    wx.login({  
        success: (res) => {  
            if (res.code) {         //微信登录成功 已拿到code  
                this.jsCode=res.code        //保存获取到的code  
                uni.request({  
                    url: 'https://api.weixin.qq.com/sns/jscode2session',  
                    method:'GET',  
                    data: {  
                        appid: 'wx********',        //你的小程序的APPID  
                        secret: 'xxxxxxxxxx',       //你的小程序的secret,  
                        code: res.code              //wx.login 登录成功后的code  
                    },  
                    success: (cts) => {  
                        // 换取成功后 暂存这些数据 留作后续操作  
                        this.openid=cts.data.openid     //openid 用户唯一标识  
                        this.unionid=cts.data.unionid     //unionid 开放平台唯一标识  
                        this.session_key=cts.data.session_key     //session_key  会话密钥  
                    }  
                });  
            } else {  
                console.log('登录失败!' + res.errMsg)  
            }  
        }  
    })  
}

:warning:注意:
1.如果请求 jscode2session 接口失败,请在你的 小程序后台【request合法域名】中添加https://api.weixin.qq.com

  1. unionid 并不是每个账号都会返回,必须要在满足 UnionID 下发条件的情况下会返回,详见 UnionID 机制说明

2.借助后端获取

借助后端获取实际上就是让后端给你一个接口,你请求后端的接口,后端再去请求微信的 jscode2session,这样你前端只需要提交code 就可以。APPID和secret都是保存在后端,不容易泄漏。
例如,我的后端开发了个接口 https://www.xx123.com//common/unionId.do,我只需要把上面代码中的请求的地址和参数换一下就可以了。
代码示例

onload(){  
    wx.login({  
        success: (res) => {  
            if (res.code) {         //微信登录成功 已拿到code  
                uni.request({  
                    url: 'https://www.xx123.com//common/unionId.do',        //演示地址,请以你的后端接口为准  
                    method:'POST',  
                    data: {  
                        code: res.code              //wx.login 登录成功后的code  
                    },  
                    success: (cts) => {  
                        // 换取成功后 暂存这些数据 留作后续操作  
                        this.openid=cts.data.openid     //openid 用户唯一标识  
                        this.unionid=cts.data.unionid     //unionid 开放平台唯一标识  
                        this.session_key=cts.data.session_key     //session_key  会话密钥  
                    }  
                });  
            } else {  
                console.log('登录失败!' + res.errMsg)  
            }  
        }  
    })  
}

按钮点击触发事件 onGetPhoneNumber

做完以上几个步骤后,我们终于可以拿到加密的用户信息了,在页面的 methods 中创建点击触发事件,注意判断一下用户是否拒绝授权

代码示例:

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  

            //拒绝授权后弹出一些提示  

        }else{      //允许授权  
            console.log(e.detail.encryptedData)  
            e.detail.encryptedData      //加密的用户信息  
            e.detail.iv     //加密算法的初始向量  时要用到  
        }  
    }  
}

控制台打印出来的加密信息:
image

解密用户信息

用户信息我们拿到了,加密的,接下来我们如何解密呢?
解密方式主要有3种,第三种因为条件有限,我暂时无法尝试。主要还是讲讲前两种

  1. 前端解密
  2. 后端解密
  3. 云开发解密(只适用于开通云开发的小程序)

1.前端解密

(1) 安装 crypto-js

使用npm 安装 crypto-js

安装命令:

npm install crypto-js

(2)下载 WXBizDataCrypt.js 文件

WXBizDataCrypt.js微信官方下载地址

下载解压后你会发现原来是后端文件:grin::grin::grin:,没关系。
image

打开Node文件夹,把 WXBizDataCrypt.js 文件放入你的项目中。(比如我是放在我的common文件夹下)

在需要解密的页面引用该文件

import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";        //请以你的实际地址为准

(3)调用解密

改造 onGetPhoneNumber 方法,注意此处还是要用到小程序的APPID

代码示例:

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  

            //拒绝授权后弹出一些提示  

        }else{      //允许授权  
            let pc = new WXBizDataCrypt('wxXXXXXXX',this.session_key);           //wxXXXXXXX为你的小程序APPID  
            let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);  

            console.log(data)       //data就是最终解密的用户信息  

            //后续操作。。。  

        }  
    }  
}

解密后的用户信息:
image

前端解密会在前端有泄漏小程序APPID的风险
(因为我们的后端是java,官方没有dome文件,所以只能前端解密了) :sob::sob:

2.后端解密

后端解密就是同样的让后端创建一个接口,前端请求这个接口,提交 encryptedData ivsession_key 让后端给你返回解密后的信息。

代码示例:

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  

            //拒绝授权后弹出一些提示  

        }else{      //允许授权  
            uni.request({  
                url: 'https://www.xx123.com//common/decode.do',        //演示地址,请以你的后端接口为准  
                method:'POST',  
                data: {  
                    iv:e.detail.iv,  
                    encryptedData: e.detail.encryptedData ,             
                    session:this.session_key,         
                },  
                success: (res) => {  
                    console.log(res.data)       //res.data 即为后端返回的解密数据  
                }  
            });  

        }  
    }  
}

完整代码示例下载

index 页面为前端处理 ,page2 页面为后端处理

继续阅读 »

uniapp开发微信小程序获取用户手机号

功能描述:微信小程序,点击微信第三方登录,获取到当前用户绑定的手机号与openId(或unionid),请求后端接口实现登录。

功能拆分逻辑:

  1. 点击某个按钮,弹出请求微信授权界面。
  2. 点击允许按钮,获取用户微信绑定的手机号与openId
  3. 请求后端接口,实现登录。

主要重点还是在前两步。我们来看一下实际的实现


创建getPhoneNumber按钮

依据微信小程序开发文档描述,小程序官方文档,先写一个button按钮,open-type 设为 getPhoneNumber,在uniapp页面中创建按钮:

代码示例

<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">唤起授权</button>

:warning:注意:
小程序官方的写法如下,但我们在uniapp想要触发按钮点击,并进行后续操作的话,建议使用上面的写法。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

调用 wx.login 接口,获取code

:warning: 根据官方文档描述,要想获取加密的手机号码,必须要先登录,所以我们在页面的 onload 中调用微信登录接口,并获取code。
代码示例:

onload(){  
    wx.login({  
        success: (res) => {  
            if (res.code) {         //微信登录成功 已拿到code  
                // ...doSomething  
            } else {  
                console.log('登录失败!' + res.errMsg)  
            }  
        }  
    })  
}

code 换取 sessionopenId

在获取到登录成功后微信返回的 code 后,我们要用 code 换取 sessionopenid/unionid
换取方式有两种:

  1. 第一种不借助后端(不推荐)
  2. 第二种借助后端

    1.不借助后端获取

    不借助后端获取,就是你必须知道你小程序的 APPIDsecret,这个可以在 小程序控制台->开发->开发设置 中看到,然后用 APPID secret 以及上一步获取到的 code 请求微信的 auth.code2Session 接口,获取 sessionopenid auth.code2Session文档

:warning:这样做的话你的小程序的 APPID 和 secret会明文出现在前端代码中,有泄漏风险

改造上面的onload事件
代码示例:

onload(){  
    wx.login({  
        success: (res) => {  
            if (res.code) {         //微信登录成功 已拿到code  
                this.jsCode=res.code        //保存获取到的code  
                uni.request({  
                    url: 'https://api.weixin.qq.com/sns/jscode2session',  
                    method:'GET',  
                    data: {  
                        appid: 'wx********',        //你的小程序的APPID  
                        secret: 'xxxxxxxxxx',       //你的小程序的secret,  
                        code: res.code              //wx.login 登录成功后的code  
                    },  
                    success: (cts) => {  
                        // 换取成功后 暂存这些数据 留作后续操作  
                        this.openid=cts.data.openid     //openid 用户唯一标识  
                        this.unionid=cts.data.unionid     //unionid 开放平台唯一标识  
                        this.session_key=cts.data.session_key     //session_key  会话密钥  
                    }  
                });  
            } else {  
                console.log('登录失败!' + res.errMsg)  
            }  
        }  
    })  
}

:warning:注意:
1.如果请求 jscode2session 接口失败,请在你的 小程序后台【request合法域名】中添加https://api.weixin.qq.com

  1. unionid 并不是每个账号都会返回,必须要在满足 UnionID 下发条件的情况下会返回,详见 UnionID 机制说明

2.借助后端获取

借助后端获取实际上就是让后端给你一个接口,你请求后端的接口,后端再去请求微信的 jscode2session,这样你前端只需要提交code 就可以。APPID和secret都是保存在后端,不容易泄漏。
例如,我的后端开发了个接口 https://www.xx123.com//common/unionId.do,我只需要把上面代码中的请求的地址和参数换一下就可以了。
代码示例

onload(){  
    wx.login({  
        success: (res) => {  
            if (res.code) {         //微信登录成功 已拿到code  
                uni.request({  
                    url: 'https://www.xx123.com//common/unionId.do',        //演示地址,请以你的后端接口为准  
                    method:'POST',  
                    data: {  
                        code: res.code              //wx.login 登录成功后的code  
                    },  
                    success: (cts) => {  
                        // 换取成功后 暂存这些数据 留作后续操作  
                        this.openid=cts.data.openid     //openid 用户唯一标识  
                        this.unionid=cts.data.unionid     //unionid 开放平台唯一标识  
                        this.session_key=cts.data.session_key     //session_key  会话密钥  
                    }  
                });  
            } else {  
                console.log('登录失败!' + res.errMsg)  
            }  
        }  
    })  
}

按钮点击触发事件 onGetPhoneNumber

做完以上几个步骤后,我们终于可以拿到加密的用户信息了,在页面的 methods 中创建点击触发事件,注意判断一下用户是否拒绝授权

代码示例:

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  

            //拒绝授权后弹出一些提示  

        }else{      //允许授权  
            console.log(e.detail.encryptedData)  
            e.detail.encryptedData      //加密的用户信息  
            e.detail.iv     //加密算法的初始向量  时要用到  
        }  
    }  
}

控制台打印出来的加密信息:
image

解密用户信息

用户信息我们拿到了,加密的,接下来我们如何解密呢?
解密方式主要有3种,第三种因为条件有限,我暂时无法尝试。主要还是讲讲前两种

  1. 前端解密
  2. 后端解密
  3. 云开发解密(只适用于开通云开发的小程序)

1.前端解密

(1) 安装 crypto-js

使用npm 安装 crypto-js

安装命令:

npm install crypto-js

(2)下载 WXBizDataCrypt.js 文件

WXBizDataCrypt.js微信官方下载地址

下载解压后你会发现原来是后端文件:grin::grin::grin:,没关系。
image

打开Node文件夹,把 WXBizDataCrypt.js 文件放入你的项目中。(比如我是放在我的common文件夹下)

在需要解密的页面引用该文件

import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";        //请以你的实际地址为准

(3)调用解密

改造 onGetPhoneNumber 方法,注意此处还是要用到小程序的APPID

代码示例:

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  

            //拒绝授权后弹出一些提示  

        }else{      //允许授权  
            let pc = new WXBizDataCrypt('wxXXXXXXX',this.session_key);           //wxXXXXXXX为你的小程序APPID  
            let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);  

            console.log(data)       //data就是最终解密的用户信息  

            //后续操作。。。  

        }  
    }  
}

解密后的用户信息:
image

前端解密会在前端有泄漏小程序APPID的风险
(因为我们的后端是java,官方没有dome文件,所以只能前端解密了) :sob::sob:

2.后端解密

后端解密就是同样的让后端创建一个接口,前端请求这个接口,提交 encryptedData ivsession_key 让后端给你返回解密后的信息。

代码示例:

methods:{  
    onGetPhoneNumber(e){  
        if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户决绝授权  

            //拒绝授权后弹出一些提示  

        }else{      //允许授权  
            uni.request({  
                url: 'https://www.xx123.com//common/decode.do',        //演示地址,请以你的后端接口为准  
                method:'POST',  
                data: {  
                    iv:e.detail.iv,  
                    encryptedData: e.detail.encryptedData ,             
                    session:this.session_key,         
                },  
                success: (res) => {  
                    console.log(res.data)       //res.data 即为后端返回的解密数据  
                }  
            });  

        }  
    }  
}

完整代码示例下载

index 页面为前端处理 ,page2 页面为后端处理

收起阅读 »

小程序解密用户信息偶发41003

微信小程序

关键点在于uni.login所获取的code与获取用户信息(iv,encryptedData)先后问题,解决方案就是在获取用户信息之后再获取code一并提交服务器进行解密!

<button class="auth-item" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">

             bindGetUserInfo(u) {  
                const _this = this;  
                if ('getUserInfo:ok' != u.detail.errMsg) {  
                    _this.er('获取用户信息失败');  
                    return false;  
                }  
                //login之后再获取用户信息,不然会解密偶发失败  
                uni.login({  
                    provider: 'weixin',  
                    complete(e) {  
                        if ('login:ok' != e.errMsg) {  
                            _this.er('获取用户登录状态失败');  
                            return false;  
                        }  
                        //获取用户信息  
                        uni.getUserInfo({  
                            complete(userInfo) {  
                                if ('getUserInfo:ok' != userInfo.errMsg) {  
                                    _this.er('获取用户信息失败');  
                                    return false;  
                                }  
                                //这里把数据提交给服务器解密  
                                _this.wxSendLogin({  
                                    iv: encodeURI(userInfo.iv),  
                                    code: encodeURI(e.code),  
                                    encryptedData: encodeURI(userInfo.encryptedData)  
                                });  
                            }  
                        })  
                    }  
                });  

            },
继续阅读 »

关键点在于uni.login所获取的code与获取用户信息(iv,encryptedData)先后问题,解决方案就是在获取用户信息之后再获取code一并提交服务器进行解密!

<button class="auth-item" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">

             bindGetUserInfo(u) {  
                const _this = this;  
                if ('getUserInfo:ok' != u.detail.errMsg) {  
                    _this.er('获取用户信息失败');  
                    return false;  
                }  
                //login之后再获取用户信息,不然会解密偶发失败  
                uni.login({  
                    provider: 'weixin',  
                    complete(e) {  
                        if ('login:ok' != e.errMsg) {  
                            _this.er('获取用户登录状态失败');  
                            return false;  
                        }  
                        //获取用户信息  
                        uni.getUserInfo({  
                            complete(userInfo) {  
                                if ('getUserInfo:ok' != userInfo.errMsg) {  
                                    _this.er('获取用户信息失败');  
                                    return false;  
                                }  
                                //这里把数据提交给服务器解密  
                                _this.wxSendLogin({  
                                    iv: encodeURI(userInfo.iv),  
                                    code: encodeURI(e.code),  
                                    encryptedData: encodeURI(userInfo.encryptedData)  
                                });  
                            }  
                        })  
                    }  
                });  

            },
收起阅读 »