自己做了一个h5端调起微信扫一扫的功能，上网一找，没有说得很详细的，依样画葫芦，结果出了很多问题。下面给大家讲一下做的方法，用这个方法亲测有效。 在做之前了解一下 JSSDK使用步骤，这个在 https://developers.weixin.qq.com/doc/ [图片] 如果看完这个，对UNIAPP（H5）JSSDK的使用还是不明白，可以看看下面这种方法 [图片] 这个随便一搜就有。下面开始实现 第一步引入jweixin-module文件，按照自己喜欢的方式途径下载好jweixin-module文件 本人是直接 npm install jweixin-module --save [图片] [图片] 我们只需要引入文件夹里面的jweixin-module就行 在main.js加载jweixin-module文件 import wx from '@/node_modules/jweixin-module/lib/index' 这里的路径看你文件放在哪，我没有单独把jweixin-module文件提出来，你也可以提出来后放在components里面 接着就是页面中使用了 下面分段说明 [图片] 这里我在页面加载完毕的时候就请求接口了，你也自己封装一个方法，直接引入就行。 通过config接口注入权限设置（拿到签名数据后就是注入权限了) [图片] 最后在需要的地方使用就行啦 [图片] 最后附上我的代码，里面请求接口改成你自己的 <template>     <view>         <button class="bg-blue" @click="scancode()">扫码</button>     </view> </template> <script>     export default {         data() {             return {}         },         onLoad() {             // #ifdef H5             let redirect_uri = location.href.split('#')[0]             this.$http.get('你的接口', {                 sing_url: redirect_uri             }).then(res => {                 this.wx_co(res.data)             }).catch(e => {                 console.log('错误信息', e);             });             // #endif         },         methods: {             wx_co: function(wx_co) {                 this.$wx.config({                     debug: false, // 开启调试模式                     appId: wx_co.appId, // 必填，公众号的唯一标识                     timestamp: wx_co.timestamp, // 必填，生成签名的时间戳                     nonceStr: wx_co.nonceStr, // 必填，生成签名的随机串                     signature: wx_co.signature, // 必填，签名，见附录1                     jsApiList: ['onMenuShareAppMessage', 'scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2                 });                 this.$wx.ready(function() { //需在用户可能点击分享按钮前就先调用                     this.$wx.checkJsApi({                         jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,                         success: function(res) {                             // 以键值对的形式返回，可用的api值true，不可用为false                             // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}                         }                     });                 });                 this.$wx.error(function(res) {                     console.log(res, 'this.$wx.error') // config信息验证失败会执行error函数                 });             },             scancode: function() {                 this.$wx.scanQRCode({                     needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，                     scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有                     success: function(res) {                         var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果                     }                 });             }         }     } </script> <style lang="scss"> </style> 好了，到这里UNI-APP 开发微信公众号（H5）调用微信扫一扫就实现了，是不是很简单， 最后附上效果 [图片] [图片] 讲得不是很好，但是用这个方法一定可以调起微信扫一扫！ 想要代码可以找我拿

为什么使用自定义导航 对比默认导航栏，我们会更需要： 统一Android、IOS手机对于页面title的展示样式及位置 更丰富的导航栏定制效果，如添加home图标等 左上角返回事件的监听处理 统一实现双击返回顶部功能 自定义导航组件实现思路 自定义导航组件实现的核心是需要计算导航栏的真实高度 这里以官方文档->扩展能力中的Navigation组件为例分析实现思路。当使用"navigationStyle": "custom"时，默认导航被移除，页面的开始位置变成了屏幕顶部，这时我们需要实现的导航栏是在状态栏下面。 导航栏的真实高度=状态栏高度+导航栏内容。 [图片] 使用wx.getSystemInfo获取到statusBarHeight便是导航栏的高度，但是导航栏内容高度呢？ 有人可能觉得导航栏内容高度顾名思义就是导航栏内容高度啊，内容撑起还用管嘛！要，必须要！ 因为右上角胶囊按钮是原生加载的，我们的导航栏内容需要正好贴在胶囊的下方且垂直居中。 导航栏内容高度=（胶囊按钮的顶部距离 - 状态高度）*2 + 胶囊高度 [图片] 如何计算胶囊的数据呢？幸运的是我们有 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的布局位置信息，那么动态计算导航栏的内容高度就很方便啦。 好了，以上就是动态计算的核心思路，我们再来看官方Navigation组件高度是怎么实现的 [代码]page{--height:44px;--right:190rpx;} .weui-navigation-bar .android{--height:48px;--right:222rpx} .weui-navigation-bar__inner{ position:fixed;top:0;left:0;z-index:5001;display:flex;align-items:center; height:var(--height);padding-right:var(--right);width:calc(100% - var(--right)) } [代码] 导航栏内容的高度是通过- -height这个css变量提前声明好的，安卓机型会重新覆盖为新的css变量值，目前没发现有适配问题。 官方就是官方啊，具体尺寸都知道，那就不用一番计算周折啦，直接拿来主义即可。 导航的布局位置已经搞定啦，剩下就是写具体的内容，不同业务实现需求不同这里就不一一赘述了。 完善官方顶部导航组件 本着拿来主义，直接使用官方Navigation组件，但在实际业务开发中还是遇到不少需要自定义的需求，就比如： loadding样式没实现 标题内容超出没有出现省略号 和原生顶部的样式不兼容，导致单个页面引入时跳转有明显差异出现 没有双击返回顶部功能开关功能 引入页面需要获取导航栏的高度，来控制其他元素距离顶部的位置， 不能根据页面栈数据动态显示隐藏back按钮， 针对以上需求，我们对官方的组件进行二次完善开发，满足常规的自定义需求绰绰有余，直接引入开箱即用。 源码使用示例 https://github.com/YuniorZen/minicode-debug/tree/master/minicode02 [图片] 使用说明 [代码]/*自定义头部导航组件，基于官方组件Navigation开发。*/ <navigation-bar title="会员中心" bindgetBarInfo="getBarInfo"></navigation-bar> [代码] 组件属性列表 属性 类型 描述 bindgetBarInfo function 组件实例载入页面时触发此事件，首参为event对象，event.detail携带当前导航栏信息，如导航栏高度 event.detail.topBarHeight bindback function 点击back按钮触发此事件响应函数 backImage string back按钮的图标地址 homeImage string home按钮的图标地址 ext-class string 添加在组件内部结构的class，可用于修改组件内部的样式 title string 导航标题，如果不提供为空 background string 导航背景色，默认#ffffff color string 导航字体颜色 dbclickBackTop boolean 是否开启双击返回顶部功能，默认true border boolean 是否显示顶部导航下边框分割线，默认false loading boolean 是否显示标题左侧的loading，默认false show boolean 显示隐藏导航，隐藏的时候navigation的高度占位还在,默认true left boolean 左侧区域是否使用slot内容，默认false center boolean 中间区域是否使用slot内容，默认false Slot name 描述 left 左侧slot，在back按钮位置显示，当left属性为true的时候有效 center 标题slot，在标题位置显示，当center属性为true的时候有效 自定义顶部导航目前存在的坑 弹窗的背景蒙层无法覆盖原生胶囊按钮 页面下拉刷新的圆点会被自定义导航遮盖 如果要自定义顶部导航，以上问题避免不了，只能忍着接受。 目前还没遇到完美的解决方案，针对下拉刷新圆点被遮挡的问题微信官方还在需求开发中，如果你有好的想法欢迎留言反馈，一起学习交流。

头像小程序 [图片] 技术：基于uniapp使用vue快速实现。 功能：头像加口罩、头像加字、头像加福、聊天背景图、生日宇宙图 地址：https://github.com/infinityu/mina-wear-mask 租房小程序 [图片] 技术：基于Cloud Base（TCB）云开发，小程序端集成了管理后台。 功能：用户可以发布新房、二手房、租房等委托，中介机构审核发布、推荐，客户挑好房子后可以直接中介或者房源发布者。 地址：https://github.com/lx164/house 优惠券小程序 [图片] 技术：源码为uniapp项目，需下载hbuilder导入项目打包 功能：美团饿了吗CPS红包小程序 地址：https://github.com/zwpro/coupons 王者荣耀故事站小程序 [图片] 技术：小程序 + nuxt + koa2 + vue2.0 + vuex + nginx + pm2 功能：显示所有王者荣耀的故事 地址：https://github.com/naihe138/heroStory

微信“应该”是最近开放了 schema 跳转小程序 的能力，大大方便了短信、邮件、外部网页等唤起微信小程序。 schema 链接格式大体是这样：[代码]weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e[代码]，但是这段文本在安卓端无法识别。小规模测试结果如下： [图片] 后来想到用一个正常能够识别的网页地址，内容是重定向到指定的 schema 链接。这就是擅长的领域了，query 参数上带上 schema 链接，location.href 一下不就行了。这里就不 show 代码了，能看到文章的你一定行。 但是，发现在部分安卓手机下（如小米）还是没反应，原来简单的 schema 跳转水这么深的，于是百度谷歌了一下，找到了下面两份关键材料： H5唤起APP进行分享的尝试 AlanZhang001/H5CallUpNative: H5端唤醒移动客户端程序 看源码也不多，总结下来，因不同系统和浏览器对 schema 规范的理解不同，还有一些商业因素，不同环境下面需要用不同的方式进行跳转，甚至有的环境你根本就跳不了。 时间紧，任务重。简单处理吧，不同方式都来一遍，谁好使就用谁。所以简单总结了下，能用的几种方式： location 跳转 a 链接跳转 iframe 跳转 以上三种方式，逐一试用，最后实在不行就不行吧，简单处理，看有没有大神补充的。 相关代码如下： location [代码]location.href = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e"; [代码] a 链接跳转 [代码]var aLink = document.createElement("a"); aLink.className = 'call_up_a_link'; aLink.href = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e"; aLink.style.cssText = "display:none;width:0px;height:0px;"; document.body.appendChild(aLink); aLink.click(); [代码] iframe [代码]var iframe = document.createElement('iframe'); iframe.className = 'call_up_iframe'; iframe.src = "weixin://dl/business/?ticket=l69894d682fa8dbafe724a0ca3950741e"; iframe.style.cssText = "display:none;width:0px;height:0px;"; document.body.appendChild(iframe); [代码] 以上代码均可从参考资料中找到出处，感谢 是直接一进来就执行，还是事件触发，都可以。或者是一开始进来就执行，失败了显示几个可选跳转按钮让用户手动触发跳转。 但是关键问题还有一个，如何判断是可以成功唤起了呢？上述 github 代码里提到了一个根据页面 hidden 状态，但不够精准，如果用户没有选择跳转到微信呢？这是另一个需要深究的问题。 出于时间考虑，先以业务交付优先，如果有朋友知道的也可以一起讨论下。 另行文时间短，以技术交流为主，若有瑕疵，欢迎指出。 附上 vue 版本源码：微信 schema 跳转 参考链接： 微信官方文档：urlscheme.generate H5唤起APP进行分享的尝试 AlanZhang001/H5CallUpNative: H5端唤醒移动客户端程序 安卓端，微信schema无法跳转微信小程序？

适用对象 目前更适用于企业内部管理及报单类应用场景 Q no A Q1：您当前是如何实现您的消息推送的？ Q2：您使用模板消息推送是否会遇到： [代码] 1. 需要推送的对象涉及多个场景，需要被提醒多次？ 2. 需要推送的时间点超出操作后7天时间范围？ [代码] Q3: 收集了足够的formId，最终频繁的推送导致客户无法接收到有效信息？ 当然模板消息的推送方式和限制是有问题的么？ 不 没有问题！但是依旧会有一些特殊场景需要突破模板消息的限制。 被动接收： A 提交工单到 B平台 ， B平台安排 C员工处理工单 需及时通知到C 反复提醒： C员工接收到工单， B平台需向A 及时通告处理进度 [已派单 => 已出发 => 已到达 => 已处理 => 待评价 => 已结单 ] 长时间回复： A 所提交工单为特殊工单，需指定于一周后安排上门实施 这种场景下，C未操作平台B的小程序，B很难推送给C ； A只操作一次，B很难推送多条信息 ； 超过有效期 ， B 也很难推送信息给A 。 当然最后您也可以选择收集formId 、 邮件推送、短信提醒的方式。 言归正传 为了在微信小程序下，更好的解决这些问题。我们在小程序内引入了一种新的消息管理方式。通过集中的消息管理让用户自主选择信息。用户可以选择强提醒（app推送，邮件推送，微信推送，立即接收）、弱提醒（消息收取但不提醒，感兴趣再查看）、不提醒（不接收任何消息） [图片] 猝不及防的丢个菊花码给你 是他是他 就是他 干脆再甩个 github吧 强势插入的说明 app为Bark，目前仅支持ios 。是由 Finb 开发并开源的一款软件 Bark是什么？ Bark is an iOS App which allows you to push customed notifications to your iPhone 客户端 https://github.com/Finb/Bark 服务器端 https://github.com/Finb/go-tools AppStore https://itunes.apple.com/cn/app/bark-customed-notifications/id1403753865 暂无android端软件，为更好体验。正在寻求接入一款同类型的android端推送类软件。如果有知道的朋友也可以留言提供。谢谢 PS：目前已支持app推送、邮件推送、微信推送、静默推送等方式。可以无需下载app即可体验 流程演示 下面给个Gif 感受一下， 第三方小程序通过授权接入，主动向授权成功用户推送消息的流程。 整个授权流程还是比较简单的。 [图片] 说明：最后的推送是由申请授权的第三方小程序主动触发的，大家可以搜索“Hacker密码”来体验这一功能。 如何接入 免费接入使用，不收取任何费用。鼓励个人开发者接入 1. 接入 添加至app.json [代码] "navigateToMiniProgramAppIdList":["wx74db71d8a9e3b699"] [代码] 微信小程序代码内跳转至授权页 [代码] wx.navigateToMiniProgram({ appId: "wx74db71d8a9e3b699", path: "/pages/bind/app", extraData: { appName: "Bark Helper", // 必填，修改为您当前小程序名称 openid: "" // 必填，修改为当前用户的openid }, envVersion: "release", success(res) { // 打开成功 } }) [代码] 请填写真实有效的openid，以便于调用接口对指定用户发放。虚假的openid将导致信息发送错乱 接收授权结果 用户授权成功或失败后，Bark助手都将返回源小程序 您需要在[代码]App.onLaunch[代码]或[代码]App.onShow[代码]监听来自[代码]appId: 'wx74db71d8a9e3b699'[代码]的[代码]extraData[代码]数据 数据格式为： [代码] "extraData":{ "key":"", //app的授权key "bind":true, //绑定状态 Boolean "errMsg":"" //错误信息 bind为false是会返回 } [代码] 建议在[代码]App.onShow[代码]内监听 [代码] onShow(event){ if(event && event.referrerInfo && event.referrerInfo.appId === 'wx74db71d8a9e3b699'){ const _extraData = ( event && event.referrerInfo && event.referrerInfo.extraData ) || {} if(_extraData.bind){ //绑定成功 console.log(_extraData.key) }else{ //绑定失败 console.log(_extraData.errMsg) } } } [代码] 当bind为true时，表示授权成功 便捷接入 接口文档：github 用户保护 1. 自由选择接收信息的权利 用户可以自由管理已授权的应用，主动屏蔽和解绑已授权的应用，实现消息免打扰和禁收消息 2. 消息推送分离 所有推送不会在微信消息内被提示，只会在小程序内被提示 对于用户想及时了解的应用可以通过app及时获取 消息免打扰开启后，该应用所有推送不会通过用户绑定的Bark进行推送，但消息仍会被小程序接收。需要打开小程序查看 3. 文本过滤 通过微信内容安全[代码]security.msgSecCheck[代码]接口对所有应用推送信息进行过滤 4. 投诉与处罚 用户可在收到推送后，对推送信息发起投诉。投诉成立后，该应用会受到不同程度的处罚（扣分、临时封禁、永久封禁）。 写在最后 1.为什么我们不参照大多数的推送方式去收集formid来共用？ 我们希望在腾讯的生态上更好的弥补小程序的约束和不足，而不是希望通过破坏规则来实现所谓的“捷径” 2.是否一定需要安装app？ app目前只适配“Bark”，后续将适配更多第三方app。如果您无法或不愿意安装app，也可以选择绑定邮箱。以邮件的形式接收信息

UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]