- 小程序登录的演变过程
1. 初版登录存在问题: 并发请求会有多次登录[图片]2. 存储promise[图片] 3. 使用存储promise优化存在问题: wx.checksession个别时候会出现fasle,原因未知无网络提示逻辑[图片] 4. 添加全局控制&校验网络存在问题: 无登录过期处理逻辑[图片] 5. 添加登录过期逻辑还可优化: 页面跳转预加载接口重试逻辑[图片] 6. 添加页面预加载相关[图片] 7. 完整流程[图片]
2020-09-02 - 小程序开发过程中遇到的那些事儿
一、使用wx.getLaunchOptionsSync()这个Api时的注意事项1.该Api获取的是小程序 冷 启动时的参数,与App.onLaunch的回调参数一致。 2.要再更仔细的强调的话,就是说,如果在小程序冷启动后,业务逻辑牵扯到新的启动参数的话,不能用这个Api获取,得拿App.onShow的回调参数。 二、小程序setData给一个数组中的某一对象的一个属性赋值 data: { list: [ { spu_name: "欧莱雅小蜜罐金致臻颜花蜜奢侈痒女补", is_check: true }, { spu_name: "水保湿滋润抗皱面妆欧莱", is_check: false } ] }, let index = 1 let = 'list[' + index + '].is_check' this.setData({ [s]: true }) 三、小程序canvas层级太高,业务逻辑可选的处理方式:方案一、如果要在canvas之上写模块(eg: 弹框,页面顶部的自定义导航栏),该模块所有的view标签换成cover-view标签,这种方法能解决简单的模块兼容,具体cover-view的使用以及坑点可参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html。 方案二、在canvas之上显示一个弹框时,可以使用wx:if暂时隐藏该canvas,弹框再次隐藏时重新显示canvas。 四、业务逻辑中遇到授权button要阻止冒泡,如何处理授权button是有特定的属性获取授权信息,我们一般阻止冒泡一般用catchtap方法,那么授权类型的button在这种情况下是用不了catchtap的,因此,这个需要一个新的解决方案: [图片] 方案一、用一个view标签将这个button包起来,在这个view标签上写上catchtap,对应的方法写成空的即可。 class="cart-box" catchtap="preventBubble"> if="{{!isAuth}}" class="cart" open-type="getUserInfo" bindgetuserinfo="goAuth"> class="iconfont icon-jiagouwuche font-25 icon"> else class="cart" bindtap="addCart"> class="iconfont icon-jiagouwuche font-25 icon"> 五、使用wx.showTabBarRedDot、wx.hideTabBarRedDot这两个Api时的注意事项 1.开发时得注意,要在tab页面使用这些Api,不要在非tab页面使用,否则console会报错。 六、好玩的小程序开发调试利器之一-AppDataAppData panel 用于显示当前项目运行时小程序 AppData 具体数据,实时地反映项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。 话不多说,体验效果如下: [图片] [图片] [图片] 七、好玩的小程序开发调试利器-自动预览自动预览可以实现编写小程序时快速预览,免去了每次查看小程序效果时都要扫码或者使用小程序助手的麻烦。开发者只需按下快捷键,保持前台运行的微信即可自动唤出或刷新小程序。 要使用自动预览功能,需要配合 6.6.7 及以上的微信客户端版本。 [图片] 八、好玩的小程序开发调试利器-多账号调试通过 菜单 - 工具 - 多帐号调试 可以使用多帐号调试功能,这是做助力活动(需要多人助力)的开发者的福音。 [图片]
2020-08-25 - 短参数-扫太阳码进小程序流程
开发人员只需要完成普通的页面跳转到结果页过程的逻辑开发即可。 开发建议,函数编写尽量使用传参方式,减少页面全局变量的使用 eg: getGoodDetial(id){ goodDetailApi({ id:id }).then(res=>{ this.setData({ goodId: res.id }) }) } eg: error 错误例子 getGoodDetial(){ goodDetailApi({ id:this.data.goodId }).then(res=>{ }) } [图片]
2020-08-21 - 小程序多组件高复杂度实现方案
备注:此方法多适用于多模块高复杂度多插件的页面开发 原理:应用事件总线进行事件传递,并将数据挂载到wx上用于各个组件模块共享 一、事件总线事件总线挂载在wx对象上wx.eventBus派发事件 wx.eventBus.$emit('name',params)监听事件 wx.eventBus.$on('name',fn)示例: [图片] // 派发事件addCart 传递参数为1 wx.eventBus.$emit("addCart", 1) // 监听事件 // 方式1 wx.eventBus.$on("addCart", num => { this.setData({ number: num }); }); // 方式2 this.setNum为methods中的方法 wx.eventBus.$on("addCart", this.setNum).bind(this); 二、共享数据设置共享数据wx.setShareData(data)获取共享数据wx.getShareData()示例: [图片] // 设置共享数据 一般为主页面设置共享数据,组件更新部分数据 wx.setShareData({ data: { spu, sku, watch, postageFee }, chooseSkuInfo, // 选择的sku footerBtnType, pageSetting, closeCommunity: false }); // 获取共享数据 const { footerBtnType, pageSetting, chooseSkuInfo, data: { sku } } = wx.getShareData() // 组件中 更新部分数据 wx.setShareData({ chooseSkuInfo: { ...item, number: 1 } });
2020-08-19 - 轻量级BI工具Superset在后端数据分析中的应用
微信小程序官方后台目前已经有数据分析模块,可以对小程序用户属性、访问情况、流量来源等进行基本的分析,也有相对灵活的自定义分析模块。但是对于较复杂的业务数据分析,还是得通过专业的第三方数据分析平台或者自己搭建数据分析平台来进行业务跟踪分析。 这次介绍的Superset就是我们在搭建自己的数据分析平台过程中,为了快速展现数据而采用的BI工具。先来张官方网站(http://superset.apache.org/)的图感受一下。 [图片] 0 Superset 简介 Superset 是一款由 Airbnb 开源的“现代化的企业级 BI(商业智能) Web 应用程序”,其通过创建和分享 dashboard,为数据分析提供了轻量级的数据查询和可视化方案。 Superset 的前端主要用到了 React 和 NVD3/D3,而后端则基于 Python 的 Flask 框架和 Pandas、SQLAlchemy 等依赖库,主要提供了这几方面的功能: 集成数据查询功能,支持多种数据库,包括 MySQL、PostgresSQL、Oracle、SQL Server、SQLite、SparkSQL 等,并深度支持 Druid。 通过 NVD3/D3 预定义了多种可视化图表,满足大部分的数据展示功能。如果还有其他需求,也可以自开发更多的图表类型,或者嵌入其他的 JavaScript 图表库(如 HighCharts、ECharts)。 提供细粒度安全模型,可以在功能层面和数据层面进行访问控制。支持多种鉴权方式(如数据库、OpenID、LDAP、OAuth、REMOTE_USER 等) 1.数据源 接下来,将演示如何连接数据库,以及怎样使用表和导入 CSV 到数据库。Superset 还深度支持 Druid(一个高效的海量数据查询系统),但这里不做介绍。 1.1 连接到数据库 从顶部导航菜单的 Source — Databases 进入数据库列表页: [图片] 点击在数据库列表右上角的绿色加号按钮: [图片] 点击按钮后,将进入添加数据库的表单页,因为这只是一次简单的演示,只需要填写两项:Database 和 SQLAlchemy URL,分别是数据库名称和 SQLAlchemy 的连接 URI (参阅为目标数据库创建连接 URI 的 SQLAlchemy 文档)。 [图片] 这里为了方便,用的是本地的 SQLite 数据库。也可以使用其他数据库,如官方文档推荐的 PostgreSQL 的一些示例数据集或官方文档使用的示例天气数据。 接着点击 Test Connection 按钮,测试是否能成功连接到数据库。若成功连接,则会看到下图的弹出框: [图片] 当连接测试成功后,可在页面底部看到该数据库下的数据表,点击 Save 按钮,完成创建。 [图片] 1.2 创建表 现在已经配置了数据库,接下来需要向 Superset 添加想要查询的特定表。从 Sources — Tables 进入到数据表列表页: [图片] 点击列表页右上角的绿色加号按钮: [图片] 点击按钮后,将进入添加数据表的表单页,在该页面依次填写目标数据库、数据表名称、数据库模式(可选),再点击 Save 按钮,即可完成创建。 [图片] 创建完成后,将重定向回到列表页,此时在页面顶部会出现一条消息提示指示表已创建: [图片] 在列表页还可以对已添加的数据表进行编辑: [图片] 点击编辑图标,可进入表的编辑页,对表的详细信息、字段、指标进行配置,这里演示对表字段的配置(设置是否可对指定字段进行分组或过滤): [图片] 1.3 上传 CSV Superset 还可以导入 CSV 到数据库中,从 Sources — Upload a CSV 进入到导入 CSV 的表单页: [图片] 依次填写表名称、导入 CSV 文件、选择要导入的数据库,再点击 Save 按钮完成导入: [图片] 创导入完成后,将重定向回到数据表列表页,此时在页面顶部会出现一条消息提示指示表已创建: [图片] 2 创建 dashboard2.1 探索数据 要开始探索数据,只需在可用数据表列表中点击刚刚创建的表名: [图片] 点击表名后进入表的可视化页面,默认的可视化类型为表视图: [图片] 在 Datasouce & Chart Type 下方,依次可以进行时间、Group By、Not Group By 以及字段过滤等设置: [图片] 在页面左侧完成相关设置后,点击 Run Query 按钮,即可在右侧的可视化视图,查看数据的可视化展示: [图片] 2.2 创建图表 通过更改可视化类型和其他设置,可以很灵活地对数据进行探索性分析。若在探索的过程中发现某个有价值的点,可以点击左上角的 Save 按钮,在出现的弹出框中命名图表并选择是否将其添加到 dashboard,以将其保存为图表: [图片] 从顶部导航菜单的 Charts 进入到图表的列表页,找到刚刚创建的图表: [图片] 点击图表名称进入到刚才的可视化页面,对已保存的图表进行再次编辑。 2.3 创建 dashboard 从顶部导航菜单的 Dashboards 进入到 dashboard 的列表页,点击右上角的绿色加号按钮: [图片] 点击按钮后,将进入添加 dashboard 的表单页,在该页面依次填写 dashboard 名称和拥有者,再点击 Save 按钮,即可完成创建: [图片] 2.4 编辑 dashboard 完成 dashboard 的创建后,将重定向到 dashboard 的列表页,找到刚创建的 dashboard: [图片] 点击 dashboard 的名称,进入 dashboard,此时 dashboard 还未配置任何图表,处于空值状态,点击右上角的 Edit dashboard 按钮进行编辑: [图片] 进入编辑状态后,可已导入图表(仅限 dashboard 拥有者拥有的图表)、标签页、行、列、标题、Markdown 和分割线等组件: [图片] 并可通过拖拽编辑 dashboard 的布局(在拖拽过程中,Superset 还提供了辅助线和栅格进行提示): [图片] Superset 还可以通过编辑 CSS 修改 dashboard 的样式: [图片] 在进行编辑之后,点击 Save changes 按钮,即可完成操作。 3 SQL 查询 在使用 SQL 查询前,需要进行两项设置: 首先,从顶部导航菜单的 Sources — Databases 进入数据库的列表页,选中数据库进行编辑,将 Expose in SQL Lab 和 Allow Run Sync 都勾选上,其余的不要勾选。 [图片] 在勾选完上述两项之后,Windows 用户还会出现 [代码]“module" object has no attribute 'SIGALRM'[代码] 错误,这又是由于 Windows 环境下依赖包不兼容导致的 —— Python 的 signal 包只作用于 Linux 和 Mac ,在 Windows 下不启作用。解决方法很简单粗暴,在 superset/utils.py 下找到相关代码,把 [代码]signal[代码] 所在行都注释,然后再加上一个 [代码]pass[代码] (这块代码的功能是在超时后将查询进程杀掉,注释后没大影响)。 [代码] def __enter__(self): try: pass #signal.signal(signal.SIGALRM, self.handle_timeout) #signal.alarm(self.seconds) except ValueError as e: logging.warning("timeout can't be used in the current context") logging.exception(e) def __exit__(self, type, value, traceback): try: pass #signal.alarm(0) except ValueError as e: logging.warning("timeout can't be used in the current context") logging.exception(e)[代码] 上面两步做完后,即可在 SQL Lab — SQL Editor 进行 SQL 查询操作: [图片] 可对查询语句进行执行、保存、分享(复制)操作,还可以对查询结果可以进行可视化和导出为 CSV 文件。 [图片] 4 安全性 Superset 中的安全性由 Flask AppBuilder(FAB)处理(一个“简单快速的应用程序开发框架,构建在Flask之上”)。FAB 提供身份验证、用户管理、权限和角色,可参阅其安全文档。角色由一组权限组成,不同的用户角色被赋予了不同的权限,Superset 本身提供了一组基本角色: Admin:拥有所有可能的权限,包括从其他用户授予或撤消权限以及更改其他人的切片和 dashboard。 Alpha:可以访问所有数据源,但不能授予或撤消其他用户的访问权限。它们也仅限于改变它们拥有的对象。可以添加和更改数据源。 Gamma:访问受限,只能使用通过另一个互补角色获得访问权限的数据源。他们只能查看由他们有权访问的数据源制作的切片和 dashboard。无法更改或添加数据源,但可以可以创建切片和 dashboard。 sql_lab:被授予对 SQL Lab 的访问权限。 public:可以通过在 superset\config.py 设置 [代码]PUBLIC_ROLE_LIKE_GAMMA = True[代码],授予该角色与 Gamma 角色相同的权限集。 在执行 [代码]superset init[代码] 命令时,所有这些基本角色将重新同步到初始值,因此不建议通过授予或撤消权限来更改这些基本角色。 这里不对 Superset 的安全机制做过多展开,如果想了解更多,包括如何为用户提供对特定数据集的访问权限,以及如何定制自己的角色,可以参阅官方的安全文档。 5 小结 虽然 Superset 仍有着很多不足,例如:没有提供图表的下钻功能、不支持多图表间的复杂联动、处理大数据集效率较低、权限管理和图表管理的功能设计不友好等。但其作为一款轻量级的 BI 应用,其不失为一个优雅且高效的自助式数据分析解决方案。
2019-07-19 - 分享扫码打开小程序操作实战
这是我们工作过程中的经验总结,现在分享给大家 说明:生成能打开小程序的二维码分为两种:1. 服务端调用接口生成;2. 前端生成二维码 一、服务端调用接口生成 https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN 适用于需要的码数量较少的业务场景 生成小程序码,可接受 path 参数较长。 永久有效,可生成的码数量限制为 100,000 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN 适用于需要的码数量极多的业务场景。 可接受页面参数较短,生成个数不受限。 永久有效,数量暂无限制 调用分钟频率受限(5000次/分钟) ,如需大量小程序码,预生成 https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN 适用于需要的码数量较少的业务场景。 生成二维码,可接受 path 参数较长。 生成个数受限,可生成的码数量限制为 100,000 在小程序中接受参数方式:page onLoad函数中接受 [代码]Page({ onLoad(query) { // 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene const scene = decodeURIComponent(query.scene) } }) [代码] 二、前端生成二维码 操作步骤: 1. 在小程序后台(mp.weixin.qq.com)配置链接 https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=1318106189&lang=zh_CN [图片] 2. 点击添加: [图片] 3. 添加完成后点击上线 4. 在JS中用第三方库将拼接好的URL(比如: https://xxxxx/homeindex?orderId=123)生成二维码 小程序获取二维码中携带的参数: app.js的 onshow/onLoad函数中获取参数,options.query.q是生成二维码的完成URL,后截取URL获取相应参数 [代码]if (!!options.query && !!options.query.q) { let url = decodeURIComponent(options.query.q) if (url.indexOf('orderId') > -1) { let index = url.slice(url.indexOf('orderId')) if (index.indexOf('&') > -1) { let orderObj = index.slice(0, index.indexOf('&')) this.globalData.orderId = orderObj.split('=')[1] } else { this.globalData.orderId = index.split('=')[1] } } } [代码]
2019-08-16