网站开发

  关于微信小程序开发一直想写一篇相关的文章总结和记录下，结果拖延症犯了迟迟没有下笔；这不最近天气不错，于是找一个空闲的下午将这篇文章输出下（好像跟天气没啥关系），那我们就开始吧！ 注意：本文默认开发者对微信小程序开发有一定语法基础。小程序开发文档 相关免费学习推荐： 微信小程序小结   在接触的微信小程序开发过程中，不难发现微信小程序为了方便开发人员入手对很多底层api进行了很好的封装，比如针对接口请求的wx.request()，针对路由跳转和页面导航的wx.switchTab、wx.navigateTo···等。虽然在一定程度上简化了开发，但是对于项目工程的系统化构建还是不够的，因此本人在对比以前基于Vue开发项目的经验和自身的开发习惯，总结出如下3点可供参考： 1、全局变量和配置信息统一管理； 2、封装路由守卫相关api：vue-router的router.beforeEach()和router.afterEach()真的香； 3、接口请求公共信息进一步提取封装； 4、封装接口的请求和响应拦截api：axios的axios.interceptors.request.use()和axios.interceptors.response.use()用过的都说好； 从上述四点出发，对微信小程序初始化工程进行规范优化，能够很大程度提高开发效率和进行项目维护管理。封装的好处不只体现在调用的方便上，也体现在管理的方便上，同时，公共操作集中处理，很大程度减少繁杂重复代码。 一、项目初始化    新建微信小程序项目，在项目下新建如下目录和文件： config文件夹：统一管理可配置的信息和变量； erroList.js：接口报错错误码匹配列表文件； globalData.js：全局变量统一管理文件（相当于vuex）； keys.js：可配置系统信息管理文件（全局常量命名等）； pages文件夹：小程序页面文件管理文件夹（每个页面一个子文件夹目录）； router文件夹：路由管理文件件; router.js：对微信小程序5种路由导航api的封装； routerConfig.js：页面路由名称和路径匹配配置文件； routerFilter.js：路由前置拦截封装； servers文件件：接口请求服务管理文件夹； apis文件夹：request请求封装管理和接口api配置管理文件夹； request.js：对wx.request的Promise封装； xxx.js：对应模块的接口管理文件； requestFilter.js：接口请求和响应拦截封装文件； 其他都是初始化默认文件； 二、路由跳转和路由守卫封装…

我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 app.json文件是全局配置文件之一： {   "pages":[           //这个里边都是用来配置所需要用到的界面所在的文件路径，配置为第一行的是默认显示的页面。     "pages/index/index",     "pages/--------/--------”,     "pages/--------/--------",     "pages/--------/-------"//记住最后一行不要加逗号        ],   "window":{      //这个属性是用来配置界面的上边的标题栏的，     "backgroundTextStyle":"light",//这个用来设置文本的风格。     "navigationBarBackgroundColor": "#0066CC",//这个是背景颜色，记住用这种颜色格式的，不要用七种颜色的英文单词（red,blue）等，不然不起效果     "navigationBarTitleText": "--------",//这个就是文字内容     "navigationBarTextStyle":"white"//这个是文字的颜色。   },   "tabBar": {//这个的话就是配置下边的菜单栏。     "color": "#0066CC",//这个是配置文字的颜色     "selectedColor": "#FF0033",//这个是配置选中某个菜单时文字的颜色。     "borderStyle": "#336699",     "backgroundColor": "#99CC00",//这个是整个菜单栏的背景颜色     "list": [//这个是列表，就是具体设置菜单栏       {       "text": "-----",//文字       "pagePath": "pages/index/index",//就是对应到那个页面       "iconPath": "image/--------",//默认的图片…

今天栏目为大家介绍小程序无痕埋点。 背景 微信小程序发布以来，已经从小巧和用完即走的定位，变成了包含复杂功能和完整业务的移动应用。 随之而来的是，生产运营会出现更多难以定位和无法简单复现的bug，尤其本人从事银行业务开发，稳定性要求极高，不然很容易造成客诉甚至资金损失。 另外，为了做了用户研究，需要了解用户如何使用我们的小程序，如路由时序、点击流等。 以上都需要有完整可用的日志来发现和定位生产问题，跟踪用户行为。 日志种类 翻查api文档，小程序打印日志方式有三种，简单描述如下： 控制台日志（console）：开发测试阶段用于调试 实时日志（wx.getRealtimeLogManager）：实时记录用户操作，官方提供了很好的过滤筛选，可以精准定位到具体日志；日限500w条，不过多个打印会合并成一条上报；最多保留7天。传送门 本地日志（ wx.getLogManage）：客户端本地日志，用户点击“反馈与投诉”或者点击页面中的反馈组件可以同步到管理台；最大5m。传送门 集合上报和数据脱敏 对于具体的问题可能需要通过不同的日志来定位，或者结合起来相互印证用户的行为。 所以我们需要同时上报几种日志，但对于某些业务敏感数据可能不适合上报到外系统（微信服务器）或保存在客户端本地，我们可以在封装的集合上报函数中先对数据进行脱敏处理。 做法很简单，遍历日志对象，通过正则匹配，把敏感数据打码。 脱敏后的实时日志如下： 可以参考我们封装的日志插件 @wxa/log 无痕埋点 事件捕获 一般来说，前端日志至少包括：路由切换信息，脚本错误日志，接口请求数据，用户交互信息 在小程序中，前三可以通过官方监听接口和封装函数的方法来抓取数据并且上报。 唯独用户交互信息，因为小程序的双线程架构，导致没办法像h5那样直接在document对象中抓取用户事件。只能在每个wxml模版最外层绑定事件来监听用户行为。 但是对于非冒泡事件（如catchtap）和组件事件（如getuserinfo），还是没办法捕获。 再者，也没办法捕获所有事件，组件事件是不会冒泡的。 劫持事件 另辟蹊径，能不能劫持小程序中所有事件函数来实现事件捕获？可以。…

以下是我自己编写的一个代码，功能是在微信公众号开发过程中实现倒计时的。效果如下，订单已提交，请在2分57秒内完成支付。纯代码解析。 开始的思路没有考虑页面在后台运行以及锁屏等情况。代码如下： let interval = setInterval(() =&gt; {             let {staticTime} = this.state;             staticTime = staticTime - 1;             if (staticTime  {             let {backGroundTime, staticTime} = this.state;             this.setState({                 backGroundTime:0             });             staticTime = staticTime - backGroundTime - 1;              if (staticTime <p>listenPageShowHideHandle = () =&gt;{</p><pre class="brush:js;toolbar:false;">let {backGroundTime} = this.state; let start, end; let self = this; document.addEventListener("visibilitychange", function() {     if(document.visibilityState == 'hidden'){         start = new Date().getTime();     }else if(document.visibilityState == 'visible'){         end = new Date().getTime();         backGroundTime = Math.floor((end - start)/1000);         self.setState({backGroundTime});         console.log('时间差：', backGroundTime);     }     console.log( document.visibilityState );…