- 需求的场景描述（希望解决的问题） 小程序内部地图导航 - 希望提供的能力 类似腾讯地图+ 小程序的功能

为什么使用自定义导航 对比默认导航栏，我们会更需要： 统一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的时候有效 自定义顶部导航目前存在的坑 弹窗的背景蒙层无法覆盖原生胶囊按钮 页面下拉刷新的圆点会被自定义导航遮盖 如果要自定义顶部导航，以上问题避免不了，只能忍着接受。 目前还没遇到完美的解决方案，针对下拉刷新圆点被遮挡的问题微信官方还在需求开发中，如果你有好的想法欢迎留言反馈，一起学习交流。

     小程序插屏广告指小程序在特定场景切换时以卡片方式弹出的广告形式。当用户触发流量主指定场景时，插屏广告就会自动向用户展现，目前向非游戏类目全量流量主开放，小游戏类目即将启动内测。       此外激励式视频广告也向非游戏类小程序流量主开放，详见《激励式视频广告开通指引》。 [图片] [图片][图片] [图片][图片][图片][图片][图片] [图片] [图片] [图片]

[图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片]

formid 基础知识 formid 是啥 小程序给用户发消息的唯一途径，所以前端要尽量多收集 formid 保存到服务端； formid 怎么收集 小程序要求必须用户提交表单才能得到formid； form 增加 report-submit 属性，并通过 button submit，前端 formSubmit 事件就能获得 formid ，如下方代码所示： [代码]<form bindsubmit="formSubmit" report-submit class="layout"> <button formType="submit" class="button" hover-class="none"> 。。。 </button> </form> [代码] formid 组件封装（初期思路） 我们将form与button 封装成组件（fomids），通过slot，可以显示任意元素，模拟form submit； 把页面上需要点击的元素用fomids包起来，fomids 将收集的 formid 放入cache，然后通过网络请求将 fomid 传给服务端； 大数小程序都是这么做的，这样做也没有问题，就是略微麻烦，form 与button 组合的样式有时不太好控制 formid 组件封装（进阶思路） 此思路是上面思路的延申，我们把 formids 这个组件做成layout级，把整个页面包在里面，利用事件自动冒泡的特性，只要有点击事件，就能收集到 formid 新建组件layout [代码]<!--components/layout.wxml--> <form bindsubmit="formSubmit" report-submit class="layout"> <button formType="submit" class="button" hover-class="none"> <view class="fixed"><slot></slot></view> </button> </form> [代码] [代码]/* components/layout.wxss */ .layout { display: inline-block; padding-left: 0; padding-right: 0; box-sizing: border-box; font-size: inherit; text-align: left; text-decoration: none; line-height: inherit; -webkit-tap-highlight-color: transparent; color: inherit; width: 100%; position: relative; } .layout .button{ display: inline-block; padding-left: 0; padding-right: 0; box-sizing: border-box; font-size: inherit; text-align: left; text-decoration: none; line-height: inherit; -webkit-tap-highlight-color: #000; color: inherit; width: 100%; position: relative; } .layout .button .fixed{ position:relative; z-index: 9999; width: 100%; } .layout .button:before,.layout .button:after{ border-width: 0; } [代码] [代码]// components/layout.js Component({ methods:{ formSubmit: function(e) { console.log('layout.formids',e.detail.formId) if("the formId is a mock one"!=e.detail.formId){ let formids=wx.getStorageSync('formids') || []; formids.push(e.detail.formId); formids=[...new Set(formids)]; wx.setStorage({key:'formids',data:formids}); } }, }, }) [代码] 将 layout 添加为全局组件 app.json 中增加 [代码]"usingComponents":{ "layout":"/components/layout" }, [代码] 在页面wxml中使用 [代码]<layout> <view class="pages">...</view> </layout> [代码] 怎么将 formid 提给服务端 首先你必须将wx.requxest 进行封装为myRequxest，页面上都是用myRequxest 进行网络请求； myRequxest 中 header 增加formids，从cache中获得放到header中；并删除formid缓存；（需要服务端从header中获得formids并存起来） [代码]function myRequxest(....){ let formids = wx.getStorageSync('formids'); if(formids){ wx.removeStorage({key:'formids'}); } let openid='';//用户openid wx.request({ ... header: { formids:formids.toString(), openid:openid, }, ... }) } [代码] 延申思考 从 写 form 收集 -> 封装 formids 组件 -> 封装 layout(formids) 组件，跳出思维固化，可以做更多可能； 希望这个思路能给你一些触发

前面给大家讲过一个借助小程序云开发实现微信支付的，但是那个操作稍微有点繁琐，并且还会经常出现问题，今天就给大家讲一个简单的，并且借助官方支付api实现小程序支付功能。 传送门： 借助小程序云开发实现小程序支付功能 老规矩，先看本节效果图 [图片] 我们实现这个支付功能完全是借助小程序云开发实现的，不用搭建自己的服务器，不用买域名，不用备案域名，不用支持https。只需要一个简单的云函数，就可以轻松的实现微信小程序支付功能。 核心代码就下面这些： [图片] 一、创建一个云开发小程序 关于如何创建云开发小程序，这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学，可以去翻看腾讯云云开发公众号内菜单【技术交流-视频教程】中的教学视频。 创建云开发小程序有几点注意的 1.一定不要忘记在app.js里初始化云开发环境。 [图片] 2.创建完云函数后，一定要记得上传 二、创建支付的云函数 1.创建云函数pay [图片] [图片] 三、引入三方依赖tenpay 我们这里引入三方依赖的目的，是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node，我这里不做讲解，百度一下，网上一大堆。 1.首先右键pay，然后选择在终端中打开 [图片] 2.我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay [图片] [图片] [图片] 安装完成后，我们的pay云函数会多出一个package.json 文件 [图片] 到这里我们的tenpay依赖就安装好了。 四、编写云函数pay [图片] 完整代码如下 [代码]//云开发实现支付 const cloud = require('wx-server-sdk') cloud.init() //1，引入支付的三方依赖 const tenpay = require('tenpay'); //2，配置支付信息 const config = { appid: '你的小程序appid', mchid: '你的微信商户号', partnerKey: '微信支付安全密钥', notify_url: '支付回调网址,这里可以先随意填一个网址', spbill_create_ip: '127.0.0.1' //这里填这个就可以 }; exports.main = async(event, context) => { const wxContext = cloud.getWXContext() let { orderid, money } = event; //3，初始化支付 const api = tenpay.init(config); let result = await api.getPayParams({ out_trade_no: orderid, body: '商品简单描述', total_fee: money, //订单金额(分), openid: wxContext.OPENID //付款用户的openid }); return result; } [代码] 一定要注意把appid，mchid，partnerKey换成你自己的。 到这里我们获取小程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 [图片] 出现下图就代表上传成功 [图片] 五、写一个简单的页面，用来提交订单，调用pay云函数。 [图片] 这个页面很简单： 1.自己随便编写一个订单号（这个订单号要大于6位） 2.自己随便填写一个订单价（单位是分） 3.点击按钮，调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 [图片] 下图是我们调用pay云函数获取的参数，和上图所需要的是不是一样。 [图片] 六、调用wx.requestPayment实现支付 下图是官方的示例代码： [图片] 这里不在做具体讲解了，把完整代码给大家贴出来 [代码]// pages/pay/pay.js Page({ //提交订单 formSubmit: function(e) { let that = this; let formData = e.detail.value console.log('form发生了submit事件，携带数据为：', formData) wx.cloud.callFunction({ name: "pay", data: { orderid: "" + formData.orderid, money: formData.money }, success(res) { console.log("提交成功", res.result) that.pay(res.result) }, fail(res) { console.log("提交失败", res) } }) }, //实现小程序支付 pay(payData) { //官方标准的支付方法 wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, //统一下单接口返回的 prepay_id 格式如：prepay_id=*** signType: 'MD5', paySign: payData.paySign, //签名 success(res) { console.log("支付成功", res) }, fail(res) { console.log("支付失败", res) }, complete(res) { console.log("支付完成", res) } }) } }) [代码] 到这里，云开发实现小程序支付的功能就完整实现了。 实现效果 1.调起支付键盘 [图片] 2.支付完成 [图片] 3.log日志，可以看出不同支付状态的回调 [图片] 上图是支付成功的回调，我们可以在支付成功回调时，改变订单支付状态。 下图是支付失败的回调： [图片] 下图是支付完成的状态： [图片] 到这里我们就轻松的实现了微信小程序的支付功能了，是不是很简单啊。 源码地址： https://github.com/TencentCloudBase/Good-practice-tutorial-recommended 如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！ [图片]

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息： 一、小程序: 1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。 详情参考文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 2、使用 open-data 展示用户基本信息。 详情参考文档: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html 二、小游戏： 1、使用用户信息按钮 UserInfoButton。 详情参考文档: https://developers.weixin.qq.com/minigame/dev/document/open-api/user-info/wx.createUserInfoButton.html 2、开放数据域下的展示用户信息。 详细参考文档： https://developers.weixin.qq.com/minigame/dev/document/open-api/data/wx.getUserInfo.html 请各位开发者注意及时调整接口。

@官方 比如，我想说几个关键字，中间有停顿， 如：“同声“ 、”传译”，之间停顿了2秒， 返回的是“同声传译“， 我想获得每次停顿的结果，即“同声 传译“ ，注意有空格，即使停顿变成空格？

相信大家有时候在使用云开发的时候也有这样的想法，云开发可不可以开发网页端，接下来我就以java搭建一个简单的案例，实现云开发与网页端的管理 [代码]在小程序文档中的HTTP API对应接口，使用java时，我们需要采用HttpClient（自行百度）来做请求，直接上代码； [代码] [代码]添加所需依赖 [代码] [图片] 创建请求接口 [图片] 创建控制器基类 [图片] [图片] 控制器返回参数给网页端 [图片] [代码]运行结果图 [代码] [图片] 大功告成，希望对大家有帮助，这个服务已经封装好了，各位可以直接根据文档上来，直接更改文档接口与sql语句，对了，在基类中将小程序配置换成自己的小程序后台的配置，有不懂在问！！！！！

1、获取 lodash: 在 miniprogram 目录下 npm install -s lodash ** node_modules/ 不会被打包到目标包 2、复制 lodash 源码到 lib 目录 $ mkdir -p lib $ cp node_modules/lodash/lodash.min.js lib 3、编辑 app.js，添加以下内容 Object.assign(global, { Array : Array, Date : Date, Error : Error, Function : Function, Math : Math, Object : Object, RegExp : RegExp, String : String, TypeError : TypeError, setTimeout : setTimeout, clearTimeout : clearTimeout, setInterval : setInterval, clearInterval : clearInterval }); 4、引用 lodash 库 const _ = require(’./lib/lodash.min’);