fwq

我们使用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 );…

小程序依附于各大平台，支付宝、微信、头条、百度等小程序，都是在平台上进行开发，平台提供对应的技术支持和用户环境。对于个人开发者，这个还是蛮方便的，它本身带有流量属性，易于传播。 便捷开发 最近在弄自己的小程序，所以整一篇文章总结一下。如果你已经开发过小程序，这篇文章可以不用看了。 小程序开发相当的便捷，配合官方文档，、，即可在本地运行起来，如果只是单纯的展示，那只需要开发完之后上传，等待审核了。只需要一点前端基础，就可开发一个自己的小程序，有想法的同学可以行动起来。 如果在开发中出现问题，也可以在求助，微信小程序社区。 不是在给官方推广。如果你希望开发属于自己的应用，小程序是一个可以快速入手的方案，便捷开发，快速发布，自带传播功能。下面我选中微信小程序讲解。 <!-- 项目目录结构 --> |—— component               组件目录 |—— pages                   page页面目录 |   ......more dir            |   |—— index               index页面 |   |  |—— index.js         index.js- js逻辑文件      |   |  |—— index.json       index.json- json配置文件 |   |  |—— index.wxml       index.wxml- wxml页面结构 |   |  |—— index.wxss       index.wxss- wxss页面样式 |—— app.js                  全局js文件 |—— app.json                全局json配置文件 |—— app.wxss                全局样式文件 |—— project.config.json     项目配置 |—— sitemap.json            爬虫文件 登录后复制 将项目导入到小程序开发工具中，就可以开始开发了。添加页面，直接在pages目录添加新的文件目录。具体细节参考 语法支持： 目前最新版本库已经 支持Es6 /…

摘要: 很多开发者在微信小程序的开发过程中都可能会遇到图片失真的情况，因为微信小程序的image标签要设置其宽高，不然图片若宽高过大会撑开原始图片大小的区域。我们经常会看到如下的图示： 但是宽高设置固定了会导致有些 … 很多开发者在微信小程序的开发过程中都可能会遇到图片失真的情况，因为微信小程序的image标签要设置其宽高，不然图片若宽高过大会撑开原始图片大小的区域。我们经常会看到如下的图示： 但是宽高设置固定了会导致有些图片和规定显示图片大小的比例不一致而出现失真现象， 为此，想到一个方法，当图片加载成功的时候，会触发bindload事件，通过这个事件我们可以获取到图片的宽高，那么问题就引刃而解了，我们可以把图片原始的宽高获取到，然后算出它的比例，根据需求固定图片的宽(或高)，再根据比例来算出相应的高(或宽)，原理就是这样，下面放代码： 在utils中创建的一个js文件，暴露其接口imageLoad: function imageLoad(e,zhi,img,or) {     var windowWidth=0;        wx.getSystemInfo({             success: function(res) {                 console.log(1);                 windowWidth=res.windowWidth;              }             })      var $width=e.detail.width,    //获取图片真实宽度          $height=e.detail.height,   //获取图片的真实高度          ratio=$width/$height;   //图片的真实宽高比例         //  console.log(e);         if(or=='height'){              var viewWidth=zhi*ratio,           //设置图片显示宽度             viewHeight=zhi;             if(viewWidth/2&gt;windowWidth){                console.log("你的图片已经超过屏幕宽度");            }            }else{                         var viewWidth=zhi,           //设置图片显示宽度…