- 服务商模式的几个问题
场景如下: 1、单位A开发了一个小程序,并申请了普通商户模式。可支付。 2、现在又开通了服务商模式,也是用该小程序支付。 3、添加特约商户,绑定单位A的小程序appid。 问题(小程序支付): 1、特约商户能否绑定单位A的小程序appid? 1.1、若可以绑定,那调用api的时候,sub_appid应该就是小程序的appid么? 2、服务商模式的时候,是否只能添加其他主体为特约商户? 3、调用api的时候(小程序支付),appid和sub_appid是否一样,都为小程序的appid? 3.1、appid和sub_appid若不一样,那么appid是从哪查看? 4、服务商模式下,官方有没有可以测试的特约商户号? 谢谢。
2019-12-25 - SAUI-table组件
前提:现成的框架里,table的组件,都是很简单的。遇到复杂的业务时,很多都是不满足的。 - 支持表头和表格body分组(自定义配置) - 支持表格左右滑动(可自定义配置表格固定列) - 支持点击事件 /*==================mock start =====================*/ //简单的数据结构 const headData = [ { title: '截止日期', key: 'time', hasClick: true}, { title: '是否经过审计', key: 'isSJ', hasClick: true}, { title: '审计日期', key: 'sjTime', align: 'right', hasClick: true}, ] const data = [ {time: '2020/3/31', isSJ: '未审计', sjTime: '2020/02/02'}, {time: '2020/3/31', isSJ: '已审计', sjTime: '2020/02/02'}, {time: '2020/3/31', isSJ: '未审计', sjTime: '2020/02/02'}, ] // 固定列,左右滚动的table,可点击修改 const data2 = [ {name: '财务报表截止日期', column1: '2020/01/02', column2: '2020/01/02', column3: '2020/01/02', column4: '2020/01/02'}, {name: '是否经过审计', column1: '未审计', column2: '未审计', column3: '已审计', column4: '已审计'}, {name: '审计日期', column1: '2020/01/02', column2: '2020/01/02', column3: '2020/01/02', column4: '2020/01/02'}, {name: '财务报表类型', column1: '1', column2: '1', column3: '2', column4: '2'}, ] const headData2 = [ { title: { '@item': { title: [ { title: '截止日期' }, { title: '指标' } ], titleClass: 'lineTd' } }, key: 'name', width: '260', sticky: true, }, { title: '2020/01/02', key: 'column1', width: '200', hasClick: true }, { title: '2020/01/03', key: 'column2', width: '200', hasClick: true }, { title: '2020/01/04', key: 'column3', width: '200', hasClick: true }, { title: '2020/01/05', key: 'column4', width: '200', hasClick: true }, ] const mock2 = { headData: ["2021-12-31", "2021-12-30", "2021-12-29", "2021-12-29"], data: [ { code: 'a', name: '经营活动产生的现金流量', value: [], isLevel1: true, isEdit: false, }, { code: 'a1', name: '销售商品', value: ['a1v', 'a2v', 'a3v', 'a4v'], isLevel1: false, }, { code: 'a2', name: '提供劳务收到的现金', value: ['a1v', 'a2v', '提供劳务收到的现金', 'a4v'], isLevel1: false, }, { code: 'a3', name: '提供劳务收到的现金', value: ['a1v', 'a2v', 'a3v', 'a4v'], isLevel1: false, }, { code: 'b', name: '经营活动产生的现金流量', value: ['', '', '', ''], isLevel1: true, isEdit: true, }, { code: 'b1', name: '销售商品', value: ['b1v', null, 'b3v', 'b4v'], isLevel1: false, }, { code: 'b2', name: '提供劳务收到的现金', value: ['b1v', 'b2v', 'b3v', 'b4v'], isLevel1: false, }, { code: 'b3', name: '提供劳务收到的现金', value: ['b1v', 'b2v', 'b3v', 'b4v'], isLevel1: false, }, ] } /*==================mock end =====================*/ //tableInst, tableInst2 由aotoo封装的table组件调用方式(图一) 正常的table返回数据构成 //tableInst3, tableInst4 由wxml封装的table组件调用方式(图二) 正常的table返回数据构成 //tableInst5 纯wxml构成(图三) 非正常的table返回数据构成 Pager({ data: { tableInst: tableList({ headData: headData, data: data, tableClass: 'border mb-default', // isHideHeader: true, // unit: '%', autoWidth: true }), tableInst2: Pager.item({}), tableInst3: null, tableInst4: null, tableInst5: null, }, onReady() { const $tableInst2 = this.getElementsById('tableInst2') this.$modal = this.getElementsById('modal') this.vm = null const that = this const inst = tableList({ headData: headData2, data: data2, tableClass: 'auto border sticky mb-default', onItemClick(params) { that.vm = this // 组件内部的this that.openModal(params) }, }) $tableInst2.update(inst) this.setData({ tableInst3: { headData: headData, data: data, tableClass: 'border auto mb-default', }, tableInst4: { headData: headData3, data: data3, tableClass: 'border auto mb-default', onItemClick(params) { const {idx, key, value} = params const dt = this.data.data const abc = that.filterClas(dt, params) this.setData({data: abc}) that.vm1 = this that.openModal(params, 1) }, }, tableInst5: { headData: mock2.headData, data: mock2.data }, }) } }) 图一: [图片] 图二: [图片] 图三: [图片] 效果: [图片]
2022-04-02 - FirstUI组件库:超高性能颜值,完美支持nvue、vue3组件低偶合业内顶尖的组件库、强大的功能库、丰富精美的模板库
[图片] First UI是一套超高性能、超高颜值的移动端UI综合解决方案,包含业内顶尖的组件库、强大的功能库、丰富精美的模板库,提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本,兼顾高效率与高性能,让您的开发获得百倍提质提速! 包括框架、组件、模板、功能插件几个部分。FirstUI开发者、设计师不断精心打磨,持续发布新的组件、模板等新功能,力求为用户提供更高品质的产品,节约用户时间与成本。 一、FirstUI uni-app版特性 完美支持nvue和vue3 组件低偶合。大部分组件可以单独使用,不需要整体引入,侵入性低。 多端支持。一套代码,多端适用,支持iOS、Android、微信小程序、支付宝小程序、QQ小程序、百度小程序、字节跳动小程序、H5平台 完善的组件。目前共规划118款,已上线85款,涵盖基础组件、表单组件、导航组件、布局组件、常用布局、扩展组件、操作反馈、数据组件、JS、图表、画布。 丰富实用的布局、模板。基于FirstUI提供的组件,针对常用场景、行业,提供丰富实用的布局和模板。 专属社区。我们打造了FirstU专属社区,用户可以在社区交流分享FirstUI的使用经验、提问。有其他组件、模板需求,也可以在社区中反馈。 二、扫码体验FirstUI 大部分组件是操作性的,大家扫码操作可以有更真切的感受。目前发布了6个平台版本,大家可以扫码体验下。考虑快速预览,所以暂未上架App应用,后续待功能完善再进行上架。 [图片] 三、已发布内容 框架 FirstUI组件库(uni-app版) 模板 登录(A)模板 登录(B)模板 登录(C)模板 登录(D)模板 门户模板 组件 基础组件 Color 色彩 Icon 图标 Button 按钮 Footer 页脚 Animation 动画 导航组件 NavBar 导航栏 Pagination 分页器 SegmentedControl 分段器 Tabbar 标签栏 Tabs 标签页 IndexList 索引列表 NoticeBar 通告栏 Sticky 吸顶容器 Steps 步骤条 Fab 浮动按钮 Drawer 抽屉 BottomPopup 底部弹出层 TopPopup 顶部弹出层 TimeAxis 时间轴 布局组件 Layout 栅格布局 Panel 面板 Preview 表单预览 List 列表 Card 卡片 扩展组件 ShareSheet 分享面板 Result 结果页 FilterBar 筛选栏 DigitalRoller 数字滚轮 DigitalKeyboard 数字键盘 CountdownVerify 验证码倒计时 SwiperDot 轮播图指示点 LicensePlate 车牌号键盘 SingleInput 单输入框 操作反馈 ActionSheet 上拉菜单 Toast 轻提示 BackDrop 遮罩层 Dialog 对话框 DropdownMenu 下拉菜单 Modal 模态框 Landscape 压屏窗 Loading 加载 Message 消息提示 SwipeAction 滑动菜单 DropdownList 下拉菜单 LoadAni 加载动画 数据组件 Badge 徽章 Alert 警告框 Avatar 头像 Tag 标签 Progress 进度条 Collapse 折叠面板 Divider 分割线 LoadMore 加载更多 Empty 暂无数据 画布 Poster 绘制分享海报 表单组件 Picker 选择器 DatePicker 日期时间选择器 Form 表单校验 Input 输入框 InputNumber 数字输入框 Radio 单选框 Checkbox 复选框 Switch 开关 Textarea 多行输入框 SearchBar 搜索栏 JS Clipboard 复制文本 Request 网络请求 Utils 工具类 Validator 表单验证 四、源码 ● gitee: https://gitee.com/firstui/FirstUI (欢迎star 😄) ● 文档地址: https://doc.firstui.cn
2022-01-17 - Thor UI组件库,小程序代码片段分享
尊敬的开发者,欢迎体验Thor UI! 该项目主要是一些小程序代码片段的分享,以及基础组件的封装。项目免费开源,源码可在GitHub上下载,会不定期进行更新。 项目可能存在缺陷或者bug,如果您在使用过程中发现问题或者有更好的建议,可反馈给我。您也可以将自己觉得不错的案例分享给我,我会扩展到此项目中。 ThorUI QQ交流群:928308676 扫码体验(一) [图片] 扫码体验(二) [图片] 组件文档地址: http://www.thorui.cn/doc ThorUI uni-app版本GitHub地址: https://github.com/dingyong0214/ThorUI-uniapp ThorUI uni-app版本插件市场地址: https://ext.dcloud.net.cn/plugin?id=556 ThorUI 小程序版本GitHub地址: https://github.com/dingyong0214/ThorUI ThorUI 小程序版本插件市场地址: https://ext.dcloud.net.cn/plugin?id=569 V1.6.5(2021-05-24) 1.tui-validation(表单验证)优化,新增validator自定义验证配置项,具体查看文档。 2.tui-round-progress(圆形进度条)组件优化,修复已知问题。 3.tui-cascade-selection(级联选择器)组件优化,修复已知问题。 4.tui-tabs(标签页)组件优化,选项卡可设置数字角标。 ===================== 【ThorUI示例V1.1.0】更新: 1.tui-org-tree(组织架构树)组件优化,可控制节点内容排版方式、节点选中状态、展开收起子节点,具体查看文档。 2.新增tui-form(表单)组件,主要用于表单验证。 3.新增tui-input(输入框)组件,原生input组件增强。 4.新增tui-textarea(多行输入框)组件。 5.新增tui-label(标签)组件,用来改进表单组件的可用性。 6.新增tui-radio(单项选择器)组件。 7.新增tui-checkbox(多项选择器)组件。 8.新增tui-switch(开关)组件。 9.新增tui-picker(选择器)组件,支持1~3级数据。 10.新增tui-landscape(压屏窗)组件。 11.新增tui-segmented-control(分段器)组件。 12.新增tui-notice-bar(通告栏)组件。 13.新增tui-alerts(警告框)组件。 14.新增tui-request(数据请求)封装,支持Promise,支持请求拦截和响应拦截,支持请求未结束之前阻止重复请求等。 15.tui-utils(工具类)优化,具体查看文档。 16.新增tui-row组件,配合组件tui-col组件使用(24栅格化布局)。 17.新增tui-tree-view(树型菜单)组件。 18.新增tui-charts-column(柱状图-css版)组件。 19.新增tui-charts-bar(横向柱状图-css版)组件。 20.新增tui-charts-line(折线图表-css版)组件。 21.新增tui-charts-pie(饼状图表-css版)组件。 22.tui-lazyload-img(图片懒加载)组件优化,修复已知问题。 23.新增tui-pagination(分页器)组件。 部分功能截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] V1.4.0: 1.新增日期时间选择器组件。 2.H5新增复制文本功能。 3.新增悬浮按钮组件。 4.新增Tabbar组件。 5.新增tabs标签页组件。 6.新增折叠面板组件。 7.新增图片上传组件。 8.NumberBox组件优化调整。 9.Modal组件优化调整。 10.sticky组件优化调整。 11.countdown组件优化调整。 12.商城模板新增购物车、我的、提交订单、支付成功、我的订单、地址列表、新增地址、设置、用户信息等页面。 V1.3.0 1.新增倒计时组件:时分秒倒计时,支持设置大小,颜色等。 2.新增分隔符组件:Divider分隔符,可设置占据高度,线条宽度,颜色等。 3.新增卡片轮播:包含顶部轮播,秒杀商品轮播等。 4.nvue下拉刷新优化。 5.修复已知bug。 V1.2.2 1.新增组件Modal弹框:可设置按钮数,按钮样式,提示文字样式等,还可自定义弹框内容。 2.修复部分已知bug。 ThorUI V1.2.1 1.新增组件Modal弹框:可设置按钮数,按钮样式,提示文字样式等,还可自定义弹框内容。 2.修复已知bug。 3.ThorUI已上线uni-app版本,请移步uni-app插件市场搜索ThorUI。 ThorUI V1.2.0 1.新增组件NumberBox数字框:可设置步长,支持浮点数,支持调整样式(可单独设置)。 2.新增组件Rate评分:可设置星星数,可设置大小颜色。 3.新增聊天模板,包含:消息列表,好友列表,聊天界面等。 4.新增商城模板,包含:商城首页,商城列表,商城详情等。 5.优化部分体验。 ThorUI V1.1.0 1.将基础组件移出扩展,单独出来。 2.扩展改为单独tab bar选项extend。 3.新增滚动消息(extend=>滚动消息):包括顶部通告栏,滚动新闻,以及搜索框中出现的热搜产品。 4.新增弹层下拉选择(extend=>弹层下拉选择):包含顶部下拉选择列表、输入框下拉选择以及底部分享弹层。 5.新增ActionSheet操作菜单(extend=>ActionSheet):可加入提示信息,可单独设置字体样式。 6.新增新闻模板(extend=>新闻模板):包含新闻列表,新闻详情,评论等。 7.部分功能优化,修复已知bug。 ThorUI V1.0.0 1.【地图】新增拖拽定位功能 2.【扩展】新增基础组件,包括:字体图标,按钮,Grid宫格,List列表,Card卡片… 3.【扩展】新增数字键盘 4.【扩展】新增时间轴 5.完善thor(个人中心)功能,包括:关于Thor UI,模拟登录,GitHub地址复制,赞赏,反馈,更新日志等 6.已知bug修复,以及部分功能优化 商城模板部分截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 新闻模板部分截图 [图片] [图片] [图片] [图片] [图片] [图片] 聊天模板截图 [图片] [图片] [图片] 组件功能部分截图 [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片]
2021-06-01 - 企业微信API是否支持创建客户群?
接口wx.qy.openEnterpriseChat里传入客户externalUserIds和企业成员userid可以拉起会话,目前调试的时候发现只能创建内部群 有两个问题 1.关于externalUserIds,同一个客户在服务端和客户端获取的数据是否一致 2.小程序的接口是否可以创建外部群
2021-02-08 - 在小程序的wxml中的wx:for循环 ,如何输出:键名, 通常是输键值,但是键名怎么获取和输出?
在小程序的wxml中的wx:for循环 ,如何输出:键名, 通常是输键值,但是键名怎么获取和输出? 假设数组对象是: [{"id":"001","name":"小红"},{"id":"002","name":"小明"},{"id":"003","name":"小丽"},........] 那么如何动态输出键名:id,name ,....等键名,呢?
2020-05-11 - 什么时候出个图片裁剪功能?
希望能有个图片裁剪的api出来
2019-08-21 - 全平台(Vue、React、微信小程序)任意角度旋转 图片裁剪组件
SimpleCrop全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件。 Github 地址:https://github.com/newbieYoung/Simple-Crop 特性及优势和目前流行的图片裁剪组件相比,其优势在于以下几点: 裁剪图片支持任意角度旋转;支持 Script 标签、微信小程序、React、Vue;支持移动和 PC 设备;支持边界判断、当裁剪框里出现空白时,图片自动吸附至完全填满裁剪框;移动端缩放以双指中心为基准点;交互体验媲美原生客户端。示例微信小程序示例[图片] 移动端示例[图片] 左侧是 IOS 系统相册中原生的图片裁剪功能,右侧为 SimpleCrop 移动端示例。 可以扫描二维码体验: [图片] 或者访问以下链接: https://newbieyoung.github.io/Simple-Crop/examples/test-2.html PC 示例[图片] 链接如下: https://newbieyoung.github.io/Simple-Crop/examples/test-1.html 安装npm install simple-crop 用法Script 用法微信小程序用法React 用法Vue 用法开源许可协议MIT License. 原理及实现[代码]全平台(Vue、React、微信小程序)任意角度旋转 图片裁剪组件[代码] https://newbieweb.lione.me/2019/05/16/simple-crop/
2020-03-04 - 小程序图片裁剪插件 image-cropper
之前的插件类目没有了导致搜不到了,重新发个文章。 image-cropper 一款高性能的小程序图片裁剪插件,支持旋转。 [图片] 优势 [代码]1.功能强大。[代码] [代码]2.性能超高超流畅,大图毫无卡顿感。[代码] [代码]3.组件化,使用简单。[代码] [代码]4.点击中间窗口实时查看裁剪结果。[代码] ㅤ 初始准备 1.json文件中添加image-cropper [代码] "usingComponents": { "image-cropper": "../image-cropper/image-cropper" }, "navigationBarTitleText": "裁剪图片", "disableScroll": true [代码] 2.wxml文件 [代码]<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper> [代码] 3.简单示例 [代码] Page({ data: { src:'', width:250,//宽度 height: 250,//高度 }, onLoad: function (options) { //获取到image-cropper实例 this.cropper = this.selectComponent("#image-cropper"); //开始裁剪 this.setData({ src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg", }); wx.showLoading({ title: '加载中' }) }, cropperload(e){ console.log("cropper初始化完成"); }, loadimage(e){ console.log("图片加载完成",e.detail); wx.hideLoading(); //重置图片角度、缩放、位置 this.cropper.imgReset(); }, clickcut(e) { console.log(e.detail); //点击裁剪框阅览图片 wx.previewImage({ current: e.detail.url, // 当前显示图片的http链接 urls: [e.detail.url] // 需要预览的图片http链接列表 }) }, }) [代码] 参数说明 属性 类型 缺省值 取值 描述 必填 imgSrc String 无 无限制 图片地址(如果是网络图片需配置安全域名) 否 disable_rotate Boolean false true/false 禁止用户旋转(为false时建议同时设置limit_move为false) 否 limit_move Boolean false true/false 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true) 否 width Number 200 超过屏幕宽度自动转为屏幕宽度 裁剪框宽度 否 height Number 200 超过屏幕高度自动转为屏幕高度 裁剪框高度 否 max_width Number 300 裁剪框最大宽度 裁剪框最大宽度 否 max_height Number 300 裁剪框最大高度 裁剪框最大高度 否 min_width Number 100 裁剪框最小宽度 裁剪框最小宽度 否 min_height Number 100 裁剪框最小高度 裁剪框最小高度 否 disable_width Boolean false true/false 锁定裁剪框宽度 否 disable_height Boolean false true/false 锁定裁剪框高度 否 disable_ratio Boolean false true/false 锁定裁剪框比例 否 export_scale Number 3 无限制 输出图片的比例(相对于裁剪框尺寸) 否 quality Number 1 0-1 生成的图片质量 否 cut_top Number 居中 始终在屏幕内 裁剪框上边距 否 cut_left Number 居中 始终在屏幕内 裁剪框左边距 否 [代码]img_width[代码] Number 宽高都不设置,最小边填满裁剪框 支持%(不加单位为px)(只设置宽度,高度自适应) 图片宽度 否 [代码]img_height[代码] Number 宽高都不设置,最小边填满裁剪框 支持%(不加单位为px)(只设置高度,宽度自适应) 图片高度 否 scale Number 1 无限制 图片的缩放比 否 angle Number 0 (limit_move=true时angle=n*90) 图片的旋转角度 否 min_scale Number 0.5 无限制 图片的最小缩放比 否 max_scale Number 2 无限制 图片的最大缩放比 否 bindload Function null 函数名称 cropper初始化完成 否 bindimageload Function null 函数名称 图片加载完成,返回值Object{width,height,path,type等} 否 bindtapcut Function null 函数名称 点击中间裁剪框,返回值Object{src,width,height} 否 函数说明 函数名 参数 返回值 描述 参数必填 upload 无 无 调起wx上传图片接口并开始剪裁 否 pushImg src 无 放入图片开始裁剪 是 getImg Function(回调函数) [代码]Object{url,width,height}[代码] 裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale) 是 setCutXY X、Y 无 设置裁剪框位置 是 setCutSize width、height 无 设置裁剪框大小 是 setCutCenter 无 无 设置裁剪框居中 否 setScale scale 无 设置图片缩放比例(不受min_scale、max_scale影响) 是 setAngle deg 无 设置图片旋转角度(带过渡效果) 是 setTransform {x,y,angle,scale,cutX,cutY} 无 图片在原有基础上的变化(scale受min_scale、max_scale影响) 根据需要传参 imgReset 无 无 重置图片的角度、缩放、位置(可以在onloadImage回调里使用) 否 GitHub https://github.com/wx-plugin/image-cropper/tree/master 如果有什么好的建议欢迎提issues或者提pr
2021-12-15 - 云开发短信跳小程序(自定义开发版)教程
写在前面如果你想要自主开发,但没有云开发相关经验,可以采用演示视频来学习本教程: [视频] 一、能力介绍境内非个人主体的认证的小程序,开通静态网站后,可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接,用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 总之,短信跳转能力的实现分为两个步骤,「配置拉起网页」和「发送短信」。本教程将介绍如何执行操作完成短信跳转小程序的能力。 如果你想要无需写代码就能完成短信跳转小程序的能力,可以参照无代码版教程进行逐步实现。 二、操作指引1、网页创建首先我们需要构建一个基础的网页应用,在任何代码编辑器创建一个 html 文件,在教程这里命名为 index.html 在这个 html 文件中输入如下代码,并根据注释提示更换自己的信息: window.onload = function(){ window.web2weapp.init({ appId: 'wx999999', //替换为自己小程序的AppID gh_ID: 'gh_999999',//替换为自己小程序的原始ID env_ID: 'tcb-env',//替换小程序底下云开发环境ID function: { name:'openMini',//提供UrlScheme服务的云函数名称 data:{} //向这个云函数中传入的自定义参数 }, path: 'pages/index/index.html' //打开小程序时的路径 }) } 以上引入的 web2weapp.js 文件是教程封装的有关拉起微信小程序的极简应用,我们直接引用即可轻松使用。 如果你想进一步学习和修改其中的一些WEB展示信息,可以前往 github 获取源码并做修改。 有关于网页拉起小程序的更多信息可以访问官方文档 如果你只想体验短信跳转功能,在执行完上述文件创建操作后,继续以下步骤。 2、创建服务云函数在上面创建网页的过程中,需要填写一个UrlScheme服务云函数。这个云函数主要用来调用微信服务端能力,获取对应的Scheme信息返回给调用前端。 我们在示例中填写的是 openMini 这个命名的云函数。 我们前往微信开发者工具,定位对应的云开发环境,创建一个云函数,名称叫做 openMini 。 在云函数目录中 index.js 文件替换输入以下代码: const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { return cloud.openapi.urlscheme.generate({ jumpWxa: { path: '', // 打开小程序时访问路径,为空则会进入主页 query: '',// 可以使用 event 传入的数据制作特定参数,无需求则为空 }, isExpire: true, //是否到期失效,如果为true需要填写到期时间,默认false expire_time: Math.round(new Date().getTime()/1000) + 3600 //我们设置为当前时间3600秒后,也就是1小时后失效 //无需求可以去掉这两个参数(isExpire,expire_time) }) } 保存代码后,在 index.js 右键,选择增量更新文件即可更新成功。 接下来,我们需要开启云函数的未登录访问权限。进入小程序云开发控制台,转到设置-权限设置,找到下方未登录,选择上几步我们统一操作的那个云开发环境(注意:第一步配置的云开发环境和云函数所在的环境,还有此步操作的环境要一致),勾选打开未登录 [图片] 接下来,前往云函数控制台,点击云函数权限,安全规则最后的修改,在弹出框中按如下配置: [图片] 3、本地测试我们在本地浏览器打开第一步创建的 index.html ;唤出控制台,如果效果如下图则证明成功! 需要注意,此处本地打开需要时HTTP协议,建议使用live server等扩展打开。不要直接在资源管理器打开到浏览器,会有跨域的问题! [图片] 4、上传本地创建好的 index.html 至静态网站托管将本地创建好的 index.html 上传至静态网站托管,在这里静态托管需要是小程序本身的云开发环境里的静态托管。 如果你上传至其他静态托管或者是服务器,你仍然可以使用外部浏览器拉起小程序的能力,但会丧失在微信浏览器用开放标签拉起小程序的功能,也不会享受到云开发短信发送跳转链接的能力。 如果你的目标小程序底下有多个云开发环境,则不需要保证云函数和静态托管在一个环境中,无所谓。 比如你有A、B两个环境,A部署了上述的云函数,但是把 index.html 部署到B的环境静态托管中了,这个是没问题的,符合各项能力要求。只需要保证第一步 index.html 网页中的云开发环境配置是云函数所在环境即可。 部署成功后,你便可以访问静态托管的所在地址了,可以通过手机外部浏览器以及微信内部浏览器测试打开小程序的能力了。 5、短信发送云函数的配置在上面创建 openMini 云函数的环境中再来一个云函数,名字叫 sendsms 。 在此云函数 index.js 中配置如下代码: const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }) exports.main = async (event, context) => { try { const config = { env: event.env, content: event.content ? event.content : '发布了短信跳转小程序的新能力', path: event.path, phoneNumberList: event.number } const result = await cloud.openapi.cloudbase.sendSms(config) return result } catch (err) { return err } } 保存代码后,在 index.js 右键,选择增量更新文件即可更新成功。 6、测试短信发送能力在小程序代码中,在 app.js 初始化云开发后,调用云函数,示例代码如下: App({ onLaunch: function () { wx.cloud.init({ env:"tcb-env", //短信云函数所在环境ID traceUser: true }) wx.cloud.callFunction({ name:'sendsms', data:{ "env": "tcb-env",//网页上传的静态托管的环境ID "path":"/index.html",//上传的网页相对根目录的地址,如果是根目录则为/index.html "number":[ "+8616599997777" //你要发送短信的目标手机,前面需要添加「+86」 ] },success(res){ console.log(res) } }) } }) 重新编译运行后,在控制台中看到如下输出,即为测试成功: [图片] 你会在发送的目标手机中收到短信,因为短信中包含「退订回复T」字段,可能会触发手机的自动拦截机制,需要手动在拦截短信中查看。 需要注意:你可以把短信云函数和URLScheme云函数分别放置在不同云开发环境中,但必须保证所放置的云开发环境属于你操作的小程序 另外,出于防止滥用考虑,短信发送的云调用能力需要真实小程序用户访问才可以生效,你不能使用云端测试、云开发JS-SDK以及其他非wx.cloud调用方式(微信侧WEB-SDK除外),会提示如下错误: [图片] 如果你想在其他处使用此能力,可以使用服务端API来做正常HTTP调用,具体访问官方文档 7、查看短信监控图表进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控,即可查看短信监控曲线图、短信发送记录。 [图片] 三、总结短信跳转小程序核心是静态网站中配置的可跳转网页,外部浏览器通过URL Scheme 来实现的,这个方式不适用于微信浏览器,需要使用开放标签才可以URL Scheme的生成是云调用能力,需要是目标小程序的云开发环境的云函数中使用才可以。并且生成的URL Scheme只能是自己小程序的打开链接,不能是任意小程序(和开放标签的任意不一致)短信发送能力的体验是每个有免费配额的环境首月100条,如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包,进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请[图片]短信发送也是云调用能力,需要真实小程序用户调用才可以正常触发,其他方式均报错返回参数错误,出于防止滥用考虑云函数和网页的放置可以不在同一个环境中,只需要保证所属小程序一致即可。(需要保证对应环境ID都能接通)如果你不需要短信能力,可以忽略最后两个步骤CMS配置渠道投放、数据统计可参考官方文档
2021-04-07 - 小程序登录、用户信息相关接口调整说明
公告更新时间:2021年04月15日考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈,为优化开发者调整接口的体验,回收wx.getUserInfo接口可获取用户授权的个人信息能力的截止时间由2021年4月13日调整至2021年4月28日24时。为优化用户的使用体验,平台将进行以下调整: 2021年2月23日起,若小程序已在微信开放平台进行绑定,则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息(头像、昵称、性别与地区),将直接获取匿名数据(包括userInfo与encryptedData中的用户个人信息),获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。新增getUserProfile接口(基础库2.10.4版本开始支持),可获取用户头像、昵称、性别及地区信息,开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档:《getUserProfile接口文档》由于getUserProfile接口从2.10.4版本基础库开始支持(覆盖微信7.0.9以上版本),考虑到开发者在低版本中有获取用户头像昵称的诉求,对于未支持getUserProfile的情况下,开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。请使用了wx.getUserInfo接口或<button open-type="getUserInfo"/>的开发者尽快适配。开发者工具1.05.2103022版本开始支持getUserProfile接口调试,开发者可下载该版本进行改造。 小游戏不受本次调整影响。 一、调整背景很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗,如果用户点击拒绝,无法使用小程序,这种做法打断了用户正常使用小程序的流程,同时也不利于小程序获取新用户。 二、调整说明通过wx.login接口获取的登录凭证可直接换取unionID 若小程序已在微信开放平台进行绑定,原wx.login接口获取的登录凭证若需换取unionID需满足以下条件: 如果开发者帐号下存在同主体的公众号,并且该用户已经关注了该公众号如果开发者帐号下存在同主体的公众号或移动应用,并且该用户已经授权登录过该公众号或移动应用2月23日后,开发者调用wx.login获取的登录凭证可以直接换取unionID,无需满足以上条件。 回收wx.getUserInfo接口可获取用户个人信息能力 4月28日24时后发布的新版本小程序,开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗,直接返回匿名的用户个人信息,获取加密后的openID、unionID数据的能力不做调整。 具体变化如下表: [图片] 即wx.getUserInfo接口的返回参数不变,但开发者获取的userInfo为匿名信息。 [图片] 此外,针对scope.userInfo将做如下调整: 若开发者调用wx.authorize接口请求scope.userInfo授权,用户侧不会触发授权弹框,直接返回授权成功若开发者调用wx.getSetting接口请求用户的授权状态,会直接读取到scope.userInfo为true新增getUserProfile接口 若开发者需要获取用户的个人信息(头像、昵称、性别与地区),可以通过wx.getUserProfile接口进行获取,该接口从基础库2.10.4版本开始支持,该接口只返回用户个人信息,不包含用户身份标识符。该接口中desc属性(声明获取用户个人信息后的用途)后续会展示在弹窗中,请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认,请开发者妥善保管用户快速填写的头像昵称,避免重复弹窗。 插件用户信息功能页 插件申请获取用户头像昵称与用户身份标识符仍保留功能页的形式,不作调整。用户在用户信息功能页中授权之后,插件就可以直接调用 wx.login 和 wx.getUserInfo 。 三、最佳实践调整后,开发者如需获取用户身份标识符只需要调用wx.login接口即可。 开发者若需要在界面中展示用户的头像昵称信息,可以通过<open-data>组件进行渲染,该组件无需用户确认,可以在界面中直接展示。 在部分场景(如社交类小程序)中,开发者需要在获取用户的头像昵称信息,可调用wx.getUserProfile接口,开发者每次通过该接口均需用户确认,请开发者妥善处理调用接口的时机,避免过度弹出弹窗骚扰用户。 微信团队 2021年4月15日
2021-04-15