• 上次是重装了解决了卡顿的问题; 总不能过几天就重装一次啊...0. 关闭微信web开发者工具; 1. 打开 finder, 按下 shift + command + G , 输入 ~/资源库 2. 找到 下面几个文件夹, 删掉这几个东西:  Application Suppor

    上次是重装了解决了卡顿的问题;

    总不能过几天就重装一次啊!

    更不能忍受现在这样一点一卡, 一键一卡!

    找遍菜单也没找到任何有用的选项!

    开始解决:

    0. 关闭微信web开发者工具;

    1. 打开 finder, 按下 shift + command + G , 输入 ~/资源库


    2. 找到 下面几个文件夹, 删掉这几个东西:

        Application Support --> 微信web开发者工具
       Preferences -->com.tencent.wechat.devtools.plist
       Caches -->微信web开发者工具

    3. 重新打开吧

    展开全文
  • 我的情况是将在webStorm上开发的代码复制到微信开发者工具上时,经简单修改后不报错了但是界面黑屏, 找了一段时间发现是图片资源的路径没有设置正确。如下: 这是在微信开发者工具上的情况: 其实在webStrom上...

    我的情况是将在webStorm上开发的代码复制到微信开发者工具上时,经简单修改后不报错了但是界面黑屏,

    找了一段时间发现是图片资源的路径没有设置正确。如下:

    这是在微信开发者工具上的情况:

    其实在webStrom上的路径是:

    ['rock','../res/Rock.png'],

    这也是我们在做比如java开发时路径写法,../表示回到上一级目录,在webStorm上没有问题,但是在微信开发者工具上却不能有../

    展开全文
  • 新版微信开发者工具更新后很多用户出现启动出现黑屏卡屏,现我将解决方法及代码贡献出来,让更多开发者能够及时生产。
  • 使用微信web开发者工具时,有时无论怎样都无法打开,连接超时,微信扫描后一直在登录界面 方法1:软件重新安装,系统重启 当遇到这种情况的时候,尝试多次而不得,大多数人的想法就是卸载掉,重新安装一次好了,...

    问题:使用微信web开发者工具时,有时无论怎样都无法打开,连接超时,微信扫描后一直卡在登录界面

    方法1:软件重新安装,系统重启

    当遇到这种情况的时候,尝试多次而不得,大多数人的想法就是卸载掉,重新安装一次好了,要不就关机重启电脑,这种方法特别具有使用性,是大多数程序员必备小技巧。

    方法2:杀掉之前的残留进程

    可以尝试关掉所有跟开发者工具有关的进程,然后再开一下就行了,这个方法有些人的电脑还可以行得通。打开任务管理器,如下图所示,结束所有关于微信web开发者工具的进程。
    在这里插入图片描述

    方法3: win10下,用管理员或者兼容方式运行

    这时候我们在图标出点击右键你的微信Web开发工具,选择属性。在属性、兼容性中,点击兼容模式到兼容性选项卡(我的是win10的系统),并选着以管理员身份运行此程序。点击应用,并确认更改。
    在这里插入图片描述
    如果不行,就在加一个以win7兼容模式运行
    在这里插入图片描述

    方法4: 重新安装到一个新的目录

    重装 “微信web开发者工具” ,要把安装目录修改为非上次安装的目录(安装在一个新目录下,不受原有文件影响,小编试过安装在原有的目录下,安装过程中会报与原有文件冲突,而且安装好后也无法启动)。

    方法5:最简单暴力的方法,32位

    软件重装,系统重启,管理员运行,更换目录,表示均无效的时候,告诉你们一个奇葩解法,好了过来谢谢我,你们下个32位的!别犹豫了,对!就是32位的,见证奇迹…

    因为我的系统是windows10 64位的,所以,我下载的小程序也是64位,后来发现,其实不对,腾讯的版本似乎错了,在windows 10 的某些64位版本,要 下的是微信小程序的32位版本。

    方法6:修改显卡驱动(没试过)

    还有人说微信web开发者工具基于nw.js,本质上是一个webkit,对部分显卡驱动支持不好。在nvidia控制面板指定微信web开发者工具强制使用集成显卡,问题可解决。

    展开全文
  • 微信开发之微信小程序性能优化

    微信小程序的开发,是当前移动端开发的重点,随着这么多年微信小程序的发展,也基本进入到了一个相对稳定的状态,大家当前不紧紧对功能要求更高了,对性能的要求也是越来越高,那么微信小程序的性能优化就是当前的重点,那么微信小程序性能优化应该从哪些方面入手呢?

    首先看下小程序的加载流程:

    preview

    以上图就是小程序的加载流程,主要分三个步骤:

    1. 资源准备,就是说小程序在下载资源包;
    2. 业务代码注入和渲染,就是说小程序开始将业务代码注入到视图层和逻辑层,然后开始渲染页面;
    3. 异步数据请求,就是当进入首页如果有数据请求,那么现在开始异步数据加载。

    了解了小程序的启动过程后,我们就具体说说小程序性能的优化:

    1、代码包大小的优化

    代码包的大小会直接影响小程序的启动速度,代码包越大,那么下载包的时间也就会越长,代码注入的时间也就会越长,所以控制包的大小势在必行:

    (1)控制包大小

    • 在开发完成之后,上传代码的时候,开发工具会自动压缩代码,将包的体积变小,另外也可以通过第三方工具,如webpack,gult等打包工具压缩代码;
    • 要把文件中的没有用的文件,无用代码,及时清理掉,这样也可以缩减代码包;
    • 要尽量将类似于图片等资源放到cdn上,因为小程序对资源文件的压缩比例特别的小;

    (2) 分包加载 + 分包预加载

    分包加载:我们如果不做分包,那么也就意味着小程序在初次加载的时候,将会把小程序的所有包都下载下来,那么这个过程中就会将暂时用不到的包也下载下来,这岂不是又费时又费力,所以,我们要分包下载,首先将tab页放到主包中,那么在最开始加载的时候加载主包,其他的按需加载,这样就实现了分包下载。性能也就提高了。可分包加载也有它的局限性,用户首次打开分包页面时,需要先进行分包代码的加载和注入,会造成页面切换时产生一定的延时,因此在此基础上,官方又推出了分包预加载和独立分包。

    分包预加载:提前配置可能会跳到哪些分包,框架在进入页面后根据配置进行预下载,分包预加载会在你进入主包页面后,为你静默开启分包代码的下载和注入,这个过程是无感的。分包预加载需要注意的是:同一个分包中的页面享有共同的预下载大小限额2M,限额会在工具中打包时校验,因此不能把所有的分包页面都配置到分包预加载的配置中,只配置主包页面会跳转的页面即可。

    (3)独立分包

    从分包页面启动时,必须依赖于主包的下载和注入,启动所以就会收到主包大小的限制,因此,我们就需要独立分包,这样在启动页面的时候,就可以不依赖于主包,减少了主包的下载和注入时间,通常会将广告,活动等具有独立逻辑的代码做独立分包。

    2、首屏加载优化

    • 提前发起请求,异步数据数据请求不需要等待页面渲染完成;
    • 利用缓存,可以将异步请求的数据缓存,下次进入页面的时候,可以先从缓存中获取,如果没有,再发起异步请求;
    • 避免白屏:先展示页面骨架和基础内容;
    • 及时反馈:及时地对需要用户等待的交互操作给出反馈,避免用户以为小程序没有响应 

    3、渲染优化

    clipboard.png

    上图是小程序的渲染流程。可以看出:js引擎和native都可以通过js的计算或者data修改来对Webview发起绘制操作,但是对开发者来说最重要的就是js引擎和Webview之间的通信,这通信过程是一个跨进程通信,是非常耗时的一个过程。所以:

    (1)避免使用setData不当

    • 使用data在方法间共享数据,会增加setData传输的数据量,同时会增加页面重绘的概率
    • data仅包括与页面相关的数据
    • 使用setData传输大量数据,通讯耗时与数据量正相关,页面更新延迟可能造成更新开销增加
    • 仅传输页面中发生变化的数据,使用setData的特殊key实现局部更新
    • 后台页面进行setData抢占前台页面的资源
    • 页面切入后台后的setData调用,延迟到页面重新展示的时候执行

    总结来说就是在data中只定义与页面渲染相关的数据,其他与页面渲染无关的数据都定义成普通变量,在做setData操作时,尽量只传输页面渲染需要的数据,当页面切换时,将后台执行的setData操作销毁,等到页面重新展示的时候再执行。

    (2)避免使用onPageScroll不当

    • 只在必要的时候监听pageScroll事件
    • 避免在onPageScroll中执行复杂逻辑
    • 避免在onPageSroll中频繁调用setData
    • 避免频繁查询节点信息(SelectQuery),部分场景使用节点布局相交状态监听(IntersectionObserver)替代

    由于onPageSroll事件监听在处理js引擎和webview之间的通信时也是一个跨进程通信,因此在使用onPageScroll事件时,要注意以上的几点内容,来进行相关的优化

    (3)使用自定义时间

    在需要频繁更新的场景下,自定组件的更新只在组件内部更新,不受页面其他部分内容复杂性影响,这样也可以在一定程度优化渲染性能。

    小程序的性能优化大致说这么多,当然还有很多要做。。。。请在评论区留言。。。。。

    展开全文
  • 本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法。毕竟借小程序写...

    本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法。毕竟借小程序写js,html,css,感谢小程序,让我深深感到iOS开发环境xcode还是多么好用的。

    基础了解

    • 类目:

      • 不得超出小程序类目范围,不得与其他小程序相似,不得与微信功能相似,如微信群聊,发红包等。
      • 小程序所提供的所有服务类目功能,必须在小程序首页得到体现,要求清晰的分辨出主要功能,弱化干扰项,次要内容
    • 小程序大部分API和组件均属前端范畴,但是前端开发的第三方可能支持前端但不支持小程序,比如bootstrap,网页端的docment方法小程序中不能使用

    • 通过编写javascript/(w)xml/css实现逻辑,即开发语言要求了解:js;html;css

    • .js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件

    • 微信小程序的语音格式是silk

    • 微信为小程序提供的开发框架为MINA框架,类似于Weex,Vue框架

    • app.json不能添加任何注释

    • 每个页面的“路径+页面名”都要写到app.json 的pages中

    • 所有页面层级不能超过5层

    • 顶部navigation bar上的icon无法自定义(甚至目前”…”里面的操作也不能自定义)

    • 顶部tab项不得超过4项

    • 重要:设计有规范

    心得体会:纯html/css效率不高啊标签写起来费时间,能可视化拖动自动生成就好了,有相关工具的告诉我哈,但是修改由于页面布局分开还是很快

    后续补充:网上有小程序模版,真的拖就可以了。。看我别的博客有体验介绍

    开发过程中

    由于项目中希望用到多个第三方js库,而小程序开发工具本身并不支持,所以我们用webpack,babel开发小程序项目脚手架,集成了 dva-core.可在小程序环境下欢乐的使用redux…. 就是一堆前端的东西,所以我要去了解下面这些东西了

    • 理解这个概念:数据驱动模型
    • webpack:模块打包机,它做的事情是分析你的项目结构,找到js模块和预设的css,打包为合适的格式以供浏览器使用;
    • npm
    • Node.js :是一个让JS运行在服务器端的开发平台,本质上是js 的运行环境。官网:Nodes.org,用node 启动web服务器
    • redux:针对JavaScript应用的可预测状态容器,前端架构
    • promise :异步编程
    • MINA,Weex,Vue框架
    • loader
    • wxml-loader
    • wxapp-webpack-plugin
    • wxapp-boilerplate
    • dva-core
    • dva
    • flex布局,css盒状模型

    参考博文:

    心得体会:我已经不用微信开发工具了,换了VSCode,感觉编译后自动同步到微信开发工具这种方式写界面并不比开发工具好用。。还有看着上面的东西,感觉如果前端转小程序开发一定 so easy.

    开发中的部分问题及解决办法,我有在小程序分类的博客中记录。。供参考

    Html/css使用踩坑记录:

    1.图片
    a.使用base64编码地址
    例如:background-image: url( base64编码后的图片地址)
    background-image 只能用网络url或者base64 . 本地图片要用image标签才行
    b.图片显示不设置宽高则默认320*240,计算高度自适应及比例可以在标签中使用 bindload=”绑定实例,计算高度的方法”,该bindload在图片下载到后会调用。

    2.包管理工具
    关于yarn与npm install ,yarn 要快很多,解决了npm的一些缺陷问题,比如项目中的依赖同步问题。
    相关介绍:一文看懂npm、yarn、pnpm之间的区别

    3.自动滚动的坑
    微信小程序API中给出的滚动方法:scroll-into-view = “{{要滚动到的元素id}}”,在使用中,如聊天信息滚动,可能滚动到的信息较长会展示不全,不能完全滚动到元素底部。
    我这里设置了滚动数据距底部的距离,数据显示到那个高度就相当于触底,这样导致数据始终到底部有段距离,但是会完全显示完全,并且可以全屏手动滚动。看某些聊天app也是如此效果,但是如果你有别的解决办法,望不吝赐教留言。

    4.wxml中可以使用三目运算符。
    例如:class=”{{isBoss?’showBoss’:’noBoss’}}”
    注意:这里要分清单引号与双引号,不能弄混淆

    5.text,image,view等视图标签都可以添加点击
    移动开发除了button 可点击,其他要添加手势,从这点看移动开发弱了些

    6.class中可以放多个样式,空格写就好

    开发工具

    • VSCode(有小程序的插件可以用)
    • 微信开发工具,调试方法(单步调试,数据查看,)等。
      开发工具上很多真机上出现的问题,模拟器上不会出现。。另外,安卓和苹果有些bug是只有一端有。。再另外。。同为安卓或苹果不同的手机出现的bug 也可能只有部分手机有。。。多测试真机。

    其他

    • TypeScript语法要求
    安装TypeScript:
    > npm install -g typescript
    
    运行ts编译器,可以输出一个同名js文件
    >tsc xxxx.ts
    
    --
    快捷键:
    
    F12   跟踪函数定义
    
    -- -- 
    [安装ASP.NET Core](https://www.visualstudio.com/zh-hans/thank-you-downloading-visual-studio-mac/?sku=communitymac&rel=15&dotnetid=2108664613.1503281813&rr=https%3A%2F%2Fwww.microsoft.com%2Fnet)
    

    最后的吐槽

    • 小程序不能过大,超过2M内存占用,无法上传,虽然可以压缩,但是要有个大小的概念,领导非要做成大程序,其实也只能不断压缩,压缩会导致的问题:开发不好调试。

    如何和领导沟通:

    • 先看文档,对于明确说明的用文档说话:比如领导想webview和别的控件放到一个页面,webview会自动铺满屏并覆盖其他任何组件;领导想跳10级页面,呵呵;
    • 观察下官方demo,有些问题是暂时不好处理的,比如官方demo的滚动击穿?
    • 复杂页面的性能?卡不卡做出来领导自己体会去好了。。沟通起来比较累。。复杂程度怎么看呢,比如我有个页面,里面有几到几十个滚动视图,滚动视图上面放富文本,富文本里面有文字,图片,链接等。不要怀疑,我们就有一个这样的页面。。。偶尔卡到用来练习耐心

    如何和设计师沟通:
    建议先看这个:UI设计师必备!小程序设计规范来了![内附sketch+psd源文件]
    小程序使用单位是rpx,
    小程序文档中有设计规范(同框不同尺寸),字体设计有规范
    顶部navigation bar上的icon无法自定义(甚至目前”…”里面的操作也不能自定义),
    其他最好要有PSD(PSD配合PXCook软件,自动生成css代码,复制粘贴来用就好了,尤其是一些复杂的样式,省了去搜索找文档和调试的时间了),尺寸规范(能得寸进尺的话我想要压缩后的图),在标准图的基础上,考虑非标准状态(文字换行,没有图片,篇幅过长,),截效果图给设计


    展开全文
  • 为大家分析盘点十大基于微信开发的火爆应用,让我们一起看看这批创业者是如何追赶这张移动互联网时代的船票的?  10、微擎——发动微信创业者商业模式的引擎。名思义就是微信引擎的意思。创始团队早早看到了...
  • .NET Core 是一个开源通用的开发框架,源码由微软官方和社区共同支持。支持跨平台,即支持在 Window,macOS,Linux 等系统上的开发和部署,并且可以在硬...
  • 相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的开发,涉及...
  • 使用微信支付需要先开通服务号,然后还要开通微信支付,最后还要配置一些开发参数,过程比较多。 申请服务号(企业) 开通微信支付 开发配置 具体准备工作请参考Spring Boot入门教程(三十九):微信支付集成-申请...
  • 认识微信小程序的目录结构 一、根目录下的三个文件: 1、app.js,必须,小程序逻辑文件。 2、app.json,必须,小程序配置文件。 3、app.wxss,全局公共样式文件。 4、[pages],用于存放页面文件的文件夹。 5...
  • 微信官方提供了开发者工具,集成了开发调试、代码编辑及程序发布等功能。具体的文档在这里:微信官方文档,文档里面包含了该工具的基本操作,接下来就是下载工具了。2、下载完工具之后,我们就可以选择:本地小程序...
  • Windows10笔记本上运行微信小程序开发者工具,输入框(input,textarea)没有焦点,只能在真机调试,效率太低。 后来发现是Window10对笔记本高分支持不好,要DPI缩放,导致兼容性问题。 解决方法: 显示设置、...
  • 再更一次2016/4/20 10:23 今早还看到有朋友在“微信里面的浏览器在 s7 edge 上 键盘覆盖网页上表单 ,表单不会自动向上移动,导致无法看着输 ”今早在腾讯浏览器的群里问这事情,估计有一部分机子还没修复这个...
  • 为什么80%的码农都做不了架构师?>>> ...
  • 最新小程序商城类开发教程: 1微信小程序之侧栏分类 —— 微信小程序实战商城系列(1) 2微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列(2) 3微信小程序之购物数量加减 —— 微信小程序实战商城系列...
  • 微信公众平台开发 进入篇(Web App开发入门)
  • 文中提到的登录微信公众号后的功能,都是下图中的其中一个: 1 注册   注册一个微信小程序公众号,包括账号注册和管理员信息登记,管理员信息登记很重要,因为管理员才有权限发布小程序、设置开发版的体验...
  • 基于H5的微信支付开发详解  这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能。当然了,微信官网上的微信支付开发文档也...
  • 前提:由于涉及公司业务,部分核心代码无法展示,这里仅仅是聊一下如何解决微信公众号支付无法支付的解决方案。问题:微信公众号平台支付失败。页面:大致页面就是下面这张图片(引自《公众号支付开发者文档》中的&...
1 2 3 4 5 ... 20
收藏数 6,084
精华内容 2,433