微信开发者工具隐藏式选项卡_启用开发者选项微信公众号如何打开微信素材 - CSDN
  • 另外一种在代码中添加导航栏的方式用循环模式来获取导航<view class='navbar-tab'> <!-- 导航栏 --> &...view wx:for='{{navbardata}}' data-currentId="... b...

    另外一种在代码中添加导航栏的方式


    用循环模式来获取导航

    <view class='navbar-tab'>
       <!-- 导航栏 -->
       <view wx:for='{{navbardata}}' data-currentId="{{index}}" class="navbar-swiper {{currentTab==index?'active':''}}" bindtap='swichNav' >
       {{item}}
       </view>
    </view>
    <!-- 内容 -->
    <swiper current='{{currentTab}}' duration='300' bindchange='bindChange'>
        <swiper-item>
           <view>aaa</view>
        </swiper-item>
         <swiper-item>
           <view>bbb</view>
        </swiper-item>
         <swiper-item>
           <view>ccc</view>
        </swiper-item>
    </swiper>
    

    在data中添加数组即可

     navbardata: ["一", "二","三"],
      //滑动      
      bindChange:function(e){
        this.setData({ currentTab: e.detail.current})
      },
      //点击导航
      swichNav:function(e){
        //wxml添加个data-currentId自定义属性
        this.setData({ currentTab: e.target.dataset.currentid})
      }


    展开全文
  • Chrome 提供的一些调试功能,在排查代码故障时非常有帮助。事实上,由于谷歌浏览器提供的调试工具太多,很多都被隐藏了起来,等待你去探索。声明:本文已获...

    Chrome 提供的一些调试功能,在排查代码故障时非常有帮助。事实上,由于谷歌浏览器提供的调试工具太多,很多都被隐藏了起来,等待你去探索。

    声明:本文已获作者Ferenc Almasi翻译授权。

    作者 | Ferenc Almasi

    译者 | 明明如月,责编 | 郭芮

    头图 | CSDN 下载自东方 IC

    出品 | CSDN(ID:CSDNnews)

    以下为译文:

    Chrome DevTools(开发者工具)团队每月(https://developers.google.com/web/updates/capabilities都会在他们的网站上发布更新,你也可以在他们的官方 Twitter 账户(https://twitter.com/chromedevtools上找到一些很棒的提示。如果你想了解更多关于 Chrome 提供的工具的信息,我强烈推荐查看这两个信息来源。

    在这篇文章中,我收集了 10 个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程,可以在更短的时间内完成更多的工作。

    日志保持

    这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题,你会尝试登录控制台,但所有内容都被清除了。解决方法很简单,但我很久以前就不知道了:

     在控制台中保持日志

    事件监听器的断点

    通常,当用户交互发生时会出现问题。捕捉这些事件来检查在交互中运行的位置和内容非常有帮助。幸运的是,我们可以通过访问 Sources 选项卡,用 Ctrl + P 打开一个 js 文件,并检查其中的相关事件:

    为事件监听器添加断点

    DOM 操作的断点

    对于 DOM 操作也可以添加断点。通常可以断点在某节点接收到属性更改上,例如添加了某个 class 。在一个大型代码仓库中搜索相关代码将耗费大量时间,其实你可以简单地为元素添加一个断点,然后剩下的交给 DevTools 处理。

    为 DOM 节点操作添加断点

    代码覆盖率

    有时候我们对代码进行性能优化,会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下,你可以分析资源并查看哪些行没有执行。如果你关注的不是所有交互,只执行你所关注的交互操作有助于你获取准确的覆盖率。你可以点击 Ctrl + Shift + P 打开工具面板,然后点击重新加载图标开始记录,所有以红色显示的内容都不会被执行。

    使用 DevTools 查看代码覆盖率

    展示重新绘画

    不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时,每次更新都会导致整个页面重新绘制。你可以通过在 Render 选项卡中启用 "paint flashing" 来解决这些问题,并查看哪些元素触发了这些问题。

    同样,Ctrl + Shift + P 会弹出工具栏。

    在 Rendering 选项卡上启用重新绘制

    动画审查

    既然上面讨论了渲染,那么让我们来看看如何调试 CSS 动画。用 Ctrl + Shift + P 打开工具菜单,输入“ animation” 它将为你打开动画标签,这将记录任何发生在网站上的动画。你可以重播它们,看看它们的宽松程度,然后根据时间或持续时间调整:

    在 DevTools 中调试动画

    截屏

    我们经常需要与其他人分享截图来验证更改。如果你不得不重复多个步骤,这个任务可能会消耗时间:

    • 打开第三方应用程序

    • 选定裁剪的部分

    • 保存图片并发送

    这可以在 DevTools 内部完成。你可以从整个页面、单个节点(被选中的节点)或视图中创建图像:

    在 DevTools 中创建截图

    黑盒

    假设你正在调试一个问题,并且你的代码中有两个断点。你正在进行堆栈跟踪,你会发现堆栈信息中大多数来自核心框架文件,如 React 或 jQuery。为了避免在调试器中包含这些核心文件,你可以对它们进行黑盒处理,这意味着 DevTools 将跳过这些文件,以便你可以专注于自己的代码。

    Devtools 中的脚本黑盒

    本地覆盖

    本地覆盖是我最喜欢的一个,我发现自己使用它越来越频繁。它是一个强大的工具,使你能够加载生产文件的本地副本,并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时,这一点尤其有用。

    你可以在“Source” 选项卡下启用 "Overrides"(重写)。如果你没有看到 Overrides 链接,点击 Page 右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。

    在 DevTools 中覆盖文件

    Lighthouse

    我发现自己一直在使用 Lighthouse 面板,这是为了审计你的网站在各种指标:性能,PWA,可访问性,或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接,它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits” 选项卡下进入“灯塔”,如果你没有看到标签,只需点击锯齿符号来显示隐藏的标签。

    生成报告后,可以将结果保存为 JSON 文件,稍后导入以进行比较。

    上面是必须知道的 10 个 Chrome 开发工具特性,它们帮助我简化了工作流程,并且在更短的时间内完成了更多的工作。

    你每天使用的 Chrome 开发者工具的功能是什么? 请在评论中告诉我们。

    原文:https://medium.com/better-programming/10-must-know-features-of-chrome-devtools-94e4a4e530c5

    作者简介:Ferenc Almasi,匈牙利前端开发者,热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术,创造简单而有吸引力的东西。

    译者:明明如月,知名互联网公司 Java 高级开发工程师,CSDN 博客专家。

    【End】

    推荐阅读 

    GitHub接连封杀开源项目惹众怒,CEO亲自道歉

    360 回应安全云盘出现交易异常;苹果官网陆续限购 iPhone;GitHub 屏蔽微软工程师的开源项目 | 极客头条

    2020年,5种将死的编程语言

    抗住百万人直播、被联合国推荐,起底飞书技术演进之路!

    还不知道 AWS 是什么?这 11 个重点带你认识 AWS !

    智能合约编写之 Solidity 的设计模式

    你点的每一个在看,我认真当成了喜欢

    展开全文
  • 常用API开发技巧学习笔记第一章 认识微信小程序前后端分离的开发方式小程序的特点小程序对开发者的影响学习小程序需要的基础第二章 小程序环境搭建与开发工具介绍小程序开发环境 第一章 认识微信小程序   微信小...

    常用API开发技巧学习笔记

    第一章 认识微信小程序

      微信小程序是一种不需要下载安装即可使用的全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有“用完即走,不用关心是否安装太多应用”的使用体验。
      微信小程序做成了一个开放式的平台,它让开发者可以将自己的想法做成微信小程序的服务放在平台上供人们使用。通过微信小程序的开发,应用将无处不在,随时可用。在进行开发之前,需要进行注册,绑定开发者等一系列操作。详情移步微信官方文档
    在这里插入图片描述
      笔者观看的教学视频于2017年初拍摄,所以当时最新的开发者工具版本为0.11.122100版,现官方文档中提供的最新版本为1.02.1907112版本。
    是真的不需要下载安装即可使用吗?
    不是的,微信小程序的安装包小于1MB(最新版改为2MB),在用户点击使用的时候,就不到1MB的安装包,下载安装的时候,用户本人是感受不到的。
    在这里插入图片描述

    前后端分离的开发方式

      前端先制造假数据,可以将假数据在页面很好的展示之后再和服务器的数据进行相应的对接。
      前端驱动服务器开发的设计理念。由此目的在于设计比较合理,api较方便。

    小程序的特点
    • 小程序适合做简单的、用完即走的应用
    • 小程序适合做低频的应用
    • 小程序适合性能要求不高的应用(被折叠放入微信,在操作系统之间还是隔了一层的,不能满足性能高的应用)
      【此处可查阅小程序、外部,混合app、原生应用的性能区别】
      哪些应用适合小程序开发?
      例子:
      1、知乎------不太适合小程序开发
      原因:
      (1)知乎是数据型应用,用户停留时间较长,不能满足用完即走的特点。(如果阅读的时候突然来了一条消息,则会被迫退出。回来的时候找不到原来的位置)
      (2)知乎的使用频度较高,不能满足低频使用的特点。让用户多次打开微信再打开小程序会用户体验不好。
      (3)知乎的消息发布依赖于系统推送,但是小程序的推送是一种模板推送,属于一种被动触发。当用户做一些操作的时间可以作为一个消息反馈给用户。
      (4)小程序不支持UIView。也就是说,小程序没办法去加载一个网页(服务器静态化好的HTML页面)。
      2、饿了么/猫眼电影/滴滴打车------适合小程序开发
      特点:
      (1)业务逻辑简单
      (2)使用频度不算高
      (3)提交订单(表单)性能要求不高
      3、对于中大型应用,可以将某些功能拆分出来做成小程序
      比如:
      美团的点外卖、银行的信用卡查询等单点的服务
      在这里插入图片描述
    小程序对开发者的影响
    • 短期内将提升市场对JavaScript程序员的需求量
    • 小程序是0基础开发者很好的入门平台
    • 小程序不可以使用现有的JavaScript组件库
    • 因为小程序的平台是封闭的,小程序是不支持很多组件
      库,比如DOM的,所以以DOM为对象的组件库都是用不了的。
      小程序的思想是数据优先,所以不能操作DOM。
    • 开发环境和开发逻辑较简单,适合新手入门
    学习小程序需要的基础
    • JavaScript
    • CSS
    • ES6-很好的特性构建简洁的小程序代码
      在这里插入图片描述

    第二章 小程序环境搭建与开发工具介绍

    小程序开发环境

    前往开发工具下载地址去下载
    下载完成之后,通过微信扫一扫打开开发者工具,选择新建项目
    在这里插入图片描述
    AppID选择使用测试号(因为注册小程序号比较麻烦)
    其他选项设置好之后选择创建,进行创建新的小程序项目
    平台会自动生成一个小程序HelloWorld的demo
    在这里插入图片描述
      此工具左边是效果区,右边是代码区。它有一个特点就是修改某些参数不需要编译就可以预览。直接Ctrl+S就可以看见修改的效果。
    在这里插入图片描述
    调试区用来打断点调试代码。点击上方菜单栏的调试工具按钮打开调试区。
    在调试区的js文件:
      带sm后缀的是用来打断点调试的文件,和写的代码是一样的。
      不带sm后缀的是编译过后的文件,和写的代码也是一样的。只不过第一行出现了一个编译的信息。

    没有小程序号对开发者的限制

    1、不能上传和发布小程序
    2、不能真机运行,只可以在PC模拟器中运行
    3、录音、网络状态、罗盘、拨打电话等功能无法使用
    4、获取用户信息的流程是模拟的而不是真实的
    但是,不影响我们学习小程序开发

    调试的几个区域

    在debug的断点状态时,快捷键和Crome是一样的。

    Console区域—系统编译区
    • 编译错误的报错信息
    • 警告信息
    • 用console.log输出的调试信息

    在这里插入图片描述
    注:在打开调试区的状态下点击下图标注的按钮,可以单独将调试区打开一个窗口,并将Console折叠放在窗口下方。
    在这里插入图片描述

    NetWork区域—网络信息的列表

    和Crome的NetWork一模一样

    • 网络链接的列表
    • 加载的文件
    • 加载耗费的时间
    • 具体查看每一个网络请求信息
    Storage区域—本地缓存列表

    用来查看小程序本地缓存数据
    在这里插入图片描述

    AppData区域—所有页面被绑定数据情况

    在这里插入图片描述

    wxml区域—小程序的UI界面和代码联调

    鼠标停留在右边代码上面的时候左边页面显示对应的UI元素
    在这里插入图片描述
    模拟器的上面菜单栏有按钮切换前后台,用来模拟打开别的小程序,本程序在后台运行的动作。当后台运行时在小程序里会触发一个事件。

    注:如何快速打开小程序api文档–点击上面菜单的:微信开发者工具–>关于–>打开api文档

    第三章 从一个欢迎页开始制作小程序

    生成HelloWorld小程序之后点击它的主页面进入一个子页面可以查看启动的日志信息。
    在这里插入图片描述

    小程序文件类型与目录结构
    • js文件:行为文件
    • json文件:配置文件,对应一个个配置
    • wxml文件:对应html文件,编写小程序骨架
    • wxss文件:对应css样式文件
    • app文件:描述应用程序整个状态,是惟一的
      对于一个样式来讲以离页面最近的配置为准

    在这里插入图片描述

    应用程序和页面之间的关系

    注:下图的无限多个只是理论上的。过多的页面违背小程序的设计初衷。小程序的总体的压缩文件包的体积超过1MB将不能上传(最新版本上传限制在2MB)。

    无限多个
    无限多个
    无限多个
    应用程序入口
    一级页面
    二级页面
    三四五级页面--最多五级
    每一个页面由以下文件组成
    wxml
    wxss
    json
    js

    小程序自生成的目录结构
    在这里插入图片描述
    在app.json中设置打开的是哪个页面
    在这里插入图片描述
    P.S.:json文件是不可以随意加注释的。

    注册小程序页面,View\Image\Text等组件用法

    在这里插入图片描述

    • View组件相当于html中的div标签,起到容器的作用并且可以分割小程序文档的不同部分。
    • Image组件用来表示一个图片。它的src属性用来添加路径。
    • text在小程序中用来作为文本标签。
      只有text包围的文字在手机上才能长按选中
      text可以支持嵌套text内置样式,支持转义字符的转义。(比如将\n转义为换行)

    图片大小px与rpx:

      px在这里不是指图片属性的物理像素,而是Iphone6上的逻辑分辨率概念。Iphone6上物理分辨率和逻辑像素的2:1的关系。也就是说,在iphone6上面,2rpx=1px。
      为了动态去适应不同分辨率的设备,我们用rpx(逻辑分辨率)做适应。设计图是0-750的像素,大小可以直接转化成rpx。

    如何设置样式:
    方式一(动态样式):在标签中加入style属性,写入当前标签样式
    方式二(静态样式):写wxss文件–在标签上加入一个class属性,通过class选择器写css样式。wxss文件不需要单独去引用。因为注册的是以某名字为名名的所有文件。
    例子:
    wxml文件:
    在这里插入图片描述
    wxss文件:
    在这里插入图片描述

    Flex弹性盒子模型

    用来将堆叠在一起的元素变规整,显示成列排布
    colum:列排布
    row:横向排布
    在这里插入图片描述
    align-items用来设置对齐版式,center表示左右居中
    在这里插入图片描述
    全局一样的样式可以提到全局的样式设置里面设置。在这里插入图片描述

    关于背景:

      不能在容器中直接设置background-color的颜色。因为容器没有设置高度和宽度,它会自适应里面元素的高度和宽度。如果直接给一个高度的话,如果里面内容是一个动态内容,可能会超出规定的高度和宽度,造成内容溢出。
    解决方案:
      经过调试我们发现,系统在我们规定的view容器外面还包了一层名叫page的容器。我们去设置page的样式
    在这里插入图片描述
    设置导航栏背景色:
    在app.json中有window配置项 用于设置小程序的标题、状态栏、导航条、窗口背景色。
    其中navigationBarBackgroundColor用来设置导航栏背景色。

    移动端分辨率及小程序自适应单位RPX
    从一张设计图的实现说起

    如何在比例不失真的情况下显示一张图片?
    在这里插入图片描述

    • pt:逻辑分辨率。可以理解为一个视觉长度单位。与屏幕尺寸有关系。
    • px:物理分辨率。与屏幕尺寸无直接关系。理解为像素点。

    1个pt可以有1个px构成,也可以有2个,3个甚至更多构成
    一个pt下px越多,图像显示越细腻。两倍已经达到了人眼能够分辨的极限,所以plus版本并不能比6和6S更加清晰。
    iphone6下2个px构成1个pt

    • 屏幕尺寸:指的是屏幕对角线之间的距离。
    • PPI:每英寸包含了多少个物理像素点

    PPI=px开根号/屏幕尺寸

    为什么模拟器下的ip6的分辨率是375而设计图一般给750

    因为微信小程序显示的375是逻辑分辨率,而设计图一般给的是物理分辨率。

    如何适配不同的机型

    使用rpx作为单位,小程序会自动在不同的分辨率下进行转换。
    在iphone6的尺寸进行设计的话,一个像素就是一个rpx。
    在这里插入图片描述
    不是所有的单位都适合用rpx
    比如,文字不适合用rpx,不然设备自适应以后看不清文字。
    错误VM285:1 pages/index/index.js 出现脚本错误或者未正确调用 Page()
    需要在这个js里写一个page方法,里面什么都不写就可以。

    第四章 开发新闻阅读列表

    1、在page文件夹下新建posts文件夹,在其中建立.js.wxml.wxss文件,并在.js文件中填入空的Page函数(如果不填会报错)。
    2、将原先的app.json的pages属性数组之中加入新建的.wxml文件的地址(当把它放在第一个的时候,运行时默认先显示它)。
    注:快捷键F1打开命令面板,有很多快捷选项

    Swiper组件的应用-------轮播图

    swiper标签代表轮播图,里面的字标签swiper-item代表每个图片。

    • swipper-item没办法设置高宽,系统自动将swipper-item的高宽设置成swipper高宽的100%,但是如果swipper-item里面有image,需要再在image里设置一下高宽。因为image不会继承上级的高宽。

    在这里插入图片描述

    • swipper不决定轮播的是什么内容,它只是一个容器。swipper-item里面放什么内容就轮播什么内容。

    代码示例:
    在这里插入图片描述

    swiper的相关属性:在这里插入图片描述

    App.json里关于导航栏、标题的配置

      在子页面的json文件里可以配置页面的导航栏颜色等配置,从而不影响全局的配置。
      但是只能配置window这一个参数的属性,所以window就不标了。直接将app.json里的window参数展开,平铺到子页面的json文件中。

    绝对路径与相对路径

    • 以" / "为开头的是绝对路径,用来表示从根目录下一级一级往下找而找到的资源
    • 以". . / . ."开头的是相对路径,用来表示资源相对当前文件的位置

    部分代码示例
    posts.wxss
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    经验:水平用rpx,垂直用px。(水平如果元素少到不可能发生换行也可用px)

    posts.wxml
    在这里插入图片描述

    Page页面与应用程序的生命周期

    在编码过程中,可以使用脚本文件将服务器的数据对接到小程序中。
    编写脚本文件时,在js文件中输入page,开发工具会生成一个默认的脚本文件结构。
    js文件所有的脚本代码都会在名叫Page的json结构体中运行。
    其中包含下列生命周期函数:

    • onLoad:页面加载后调用
    • onReady:页面初次渲染完成后调用
    • onShow:页面显示完成后调用
    • onHide:页面隐藏完成后调用
    • onUnload:页面卸载后调用
    • onPullDownRefresh:用户下拉动作后调用
    • onReachBottom:页面上拉触底事件的处理函数
    • onShareAppMessage:用户点击右上角分享后调用

    应用的生命周期
    先进行页面初始化(onLoad)—>页面显示(onShow)–>页面渲染完成(onReady)

    注:js脚本中可以自定义函数进行调用

    在公众平台之中小程序完整的生命周期图片如下
    在这里插入图片描述

    数据绑定(核心)

      在网页开发的过程中,我们要把一个数据显示到页面上的操作是:
    先获取DOM对象,再对获取的节点的数据进行操作。

    在小程序中提倡数据优先的思想。
    在小程序中不支持DOM,所以在小程序的开发中的操作应该是:
    在js脚本的data属性中以json格式放入数据,在wxml文件中使用双大括号调用。
    示例如下:
    js脚本:
    在这里插入图片描述
    wxml:
    在这里插入图片描述
    小程序在这里实现的数据绑定是单向数据绑定
      也就是说,数据可以从脚本文件向wxml文件传递的时候可直接赋值,但是如果数据被wxml文件所改变,脚本文件中的数据不会发生变化。如果要通过wxml改变脚本文件中的数据,则需要采取事件传递的形式。

    显示从服务器动态获取的数据
      假设数据是从脚本文件向服务器动态获取的,那么应该在页面初始化之后显示数据。也就是说数据绑定的操作应该写在onLoad函数里面来,之后再使用setData()函数平铺入data数组之中

    示例:
    js脚本
    在这里插入图片描述
    对应wxml文件
    在这里插入图片描述
    注:

    • 如果绑定的数据是放在标签的属性中的,需要在双花括号外面加上双引号
    数据绑定的运算与逻辑
    当某个属性以"false"进行赋值时并不能得到想要的效果

    原因:赋给这个属性的false是个字符串,小程序在解析字符串的时候会将其转换成布尔值,此字符串的布尔值是true。
    例子如下:
    在这里插入图片描述
    解决方法:使用数据绑定的语法,将false用双花括号括起来,这样才会解析成false。
    在这里插入图片描述
    同理,设置某个属性为true的时候,随便置入一个字符串的值,都会被解析成true。

    如果js脚本外再包一层json对象,那么需要通过"{{对象名.属性名}}"进行调用
    示例:
    在这里插入图片描述
    在这里插入图片描述
    注:两个数据绑定挨在一起是可以正常解析的。

    wx-if:控制标签元素的显示与隐藏

    使用示例:
    在这里插入图片描述
    当然,可以通过脚本文件来动态控制标签元素的显示与隐藏。

    数据绑定的双花括号里可进行简单的运算

    比如:
    在这里插入图片描述
    同理,也可以在双花括号之中进行加减乘除的数字计算。

    wx-for:循环显示数据

    如果服务器拿过来的数据是一个json数组,那么需要小程序的for循环进行动态的展示。
    json数组示例:
    在这里插入图片描述
    以上做法会出现显示不了的问题
    原因:this.setData方法是将参数平铺置入data数组中,在进行循环显示的时候会显示不全。
    解决方法:给数据数组一个key并置入data中,这样data解析出来就会是一个数组。
    在这里插入图片描述
    wxml展示示例:
    在这里插入图片描述
    block标签:理解为括号,将循环体给包裹起来

    • wx:for后面引入数组数据
    • wx:for-item后面引入元素指代(默认命名:item)
    • wx:for-index后面指代的子元素的序号(默认命名:index)

    注:如果指代为item,则可省略。因为微信小程序默认的元素指代就是以item命名的。

    页面跳转

    1、在app.json的页面指定的位置将欢迎页设置为第一个页面。
    在这里插入图片描述
    2、目的:点击欢迎页的按钮,跳转到之前做好的新闻展示页中(上图页面对应posts)
    在这里插入图片描述
    3、绑定事件–tap事件(tap事件详情见如下表格)
    标签事件绑定的写法:事件名前面加bind
    在这里插入图片描述
    4.在脚本文件中写入函数负责页面跳转

    wx.navigateTo函数负责页面跳转

    注:填入的url可以是相对路径也可以是绝对路径,但是需要和app.json中配置的形式一致(不要加.wxml)
    在这里插入图片描述
    5.设置将跳转进来的页面不设为上一个页面的子页面(取消左上角返回)

    在这里插入图片描述

    wx.redirectTo函数负责重定向页面(不可返回)

    实现两个页面之间的平行跳转。
    在这里插入图片描述
    效果:
    在这里插入图片描述
    关于这两个函数完整的参数:
    在这里插入图片描述

    wx.navigateTo和wx.redirectTo的区别

      当调用wx.redirectTo方法时,脚本后台会调用onUnLoad(页面被卸载之后触发)事件。
      当调用wx.navigateTo方法时,脚本后台会调用onHide(页面被隐藏之后触发)事件。

    事件与事件对象

    什么是事件?

    • 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。
    • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
    • 事件对象可以携带额外信息,如 id, dataset, touches。

    使用WXS函数响应事件–基础库 2.4.4 开始支持,低版本需做兼容处理。

      从基础库版本2.4.4开始,支持使用WXS函数绑定事件,WXS函数接受2个参数,第一个是event,在原有的event的基础上加了event.instance对象,第二个参数是ownerInstance,和event.instance一样是一个ComponentDescriptor对象。

    事件分类

    事件分为冒泡事件和非冒泡事件:

    • 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
    • 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

    WXML的冒泡事件列表:

    类型 触发条件 最低版本
    touchstart 手指触摸动作开始
    touchmove 手指触摸后移动
    touchcancel 手指触摸动作被打断,如来电提醒,弹窗
    touchend 手指触摸动作结束
    tap 手指触摸后马上离开
    longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0
    longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
    transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
    animationstart 会在一个 WXSS animation 动画开始时触发
    animationiteration 会在一个 WXSS animation 一次迭代结束时触发
    animationend 会在一个 WXSS animation 动画完成时触发
    touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发 1.9.90

    注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)

    事件绑定和冒泡

    事件绑定的写法同组件的属性,以 key、value 的形式。

      key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。
      value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
      bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

    第五章 小程序的模块化与模板化

      正常的流程应该是从脚本文件向服务器发一个请求去请求数据到js脚本文件,但是小程序目前没有服务器数据,将数据大量罗列到js脚本文件非常的不利于阅读。

    解决方式:
      将所需数据全都放到一个单独的文件中去,从脚本文件加载数据文件,从而模拟从服务器加载数据的过程。

    AppData区域介绍
    小程序缓存

    流量限制

    列表渲染(核心)
    Template模板的使用(核心)
    展开全文
  • 原址 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具,主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》,于是建了这么一个仓库,...

    原址

     这个仓库主要是收集非常好用的Mac应用程序、软件以及工具,主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》,于是建了这么一个仓库,持续更新作为补充,搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issues 给我推荐优秀好用的Mac应用,很显然我是一个资深Mac用户,我需要它们帮助我快乐、高效的工作,同时也分享给你。格式参照awesome的清单。

    在这里非常感谢 @GitHubDaily 的推荐

    说明

    Open-Source Software 表示 开源软件 ,点击进入 开源 仓库; 
    Freeware 表示 免费 使用,或者个人 免费 ; 
    hot 表示 热门 的软件; 
    tuijian 表示 推荐 的软件; 
    必备 表示 装机必备 的软件; 
    App Store 表示 App store 连接地址; 
    1 star 表示 强烈推荐 的必装神器,数量来表达强烈的程度;

    目录

    编辑器

    一种用于编辑纯文本文件的程序,建议使用免费开源的编辑器

    • Atom - GitHub推出的开源编辑器,Atom常用插件star 4 Open-Source Software Freeware hot
    • Sublime Text - 一个比较简洁大方带插件管理系统的流行编辑器,Sublime常用插件hot tuijian 必备
    • Brackets - Adobe推出的Brackets免费/开源编辑器。Open-Source Software Freeware
    • Visual Studio Code - 微软推出的免费/开源编辑器,TypeScript支持杠杠的。Open-Source Software Freeware hot
    • Emacs - Emacs是基于控制台的编辑器和高度可定制的。
    • LightTable - 下一代代码编辑器。Open-Source Software Freeware
    • TextMate - 文本编辑器软件,与BBedit一起并称苹果机上的emacs和vim,这是以前。Freeware
    • BBEdit - 强大的文件编辑器,用于编辑文件,文本文件及程序源代码。
    • Coda2 - 编写Web应用长得漂亮的编辑器。
    • Vim - Vim古老命令行中使用的编辑器。Freeware hot 
      • Vundle.vim - Vim插件管理工具。Open-Source Software Freeware
      • vim-plug - 一个简约的vim插件管理器。Open-Source Software Freeware
      • WebVim - 倾向于开发JavaScript和Web的vim。
      • vim-web - 一个前端开发工程师的vim。Open-Source Software Freeware
      • Neovim - 提高Vim可扩张灵活性。Open-Source Software Freeware hot
      • Spacevim - 模仿Spacemacs的使用方式。
      • Spf13 - 一套全方位的配置项目。
    • Vimr - Vim客户端,升级Vim体验。Open-Source Software Freeware
    • HBuilder - HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。Freeware hot
    • Tincta - 一个免费的文本编辑器。Freeware
    • IntelliJ IDEA - 一款Java开发集成环境。(学生免费)hot tuijian
    • Webstorm - 是jetbrains公司旗下一款JavaScript开发工具。 
      • 学生免费,点击这里 查看更多。
      • 一些很好的插件 
        • NodeJS - 集成Node.js,你肯定需要它,很多功能需要它。
        • EditorConfig - 帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。
        • Material Theme UI - Google为React开发的主题。
    • Deco IDE - React Native IDE 支持控件拖拽界面实时变更。Open-Source Software Freeware hot tuijian
    • Xamarin Studio - 免费的跨平台的C# IDE。支持iOS、Android和.net开发。Open-Source Software Freeware
    • NetBeans IDE - 免费、开源的IDE,主要用于java开发,可支持多种语言和框架。 Open-Source Software Freeware
    • Eclipse - 流行的开源IDE,主要用于Java,但为多种语言和平台的插件支持。Open-Source Software Freeware hot

    开发者工具

    • WeFlow - 一个基于 tmt-workflow 前端工作流的开发工具。Open-Source Software Freeware
    • Koala - 预处理器语言图形编译工具,支持Less、Sass、CoffeeScript、Compass framework 的即时编译。Open-Source Software Freeware
    • CodeKit - 自动编译Less、Sass、Stylus、CoffeeScript、Jade & Haml等文件。
    • Hosts.prefpane - 编辑 hosts 文件的工具。Open-Source Software Freeware
    • iHosts - 唯一上架 Mac App Store 的 /etc/hosts 编辑神器。App Store Freeware
    • SwitchHosts - 一个管理、切换多个 hosts 方案的工具。Open-Source Software Freeware
    • Gas Mask - 编辑 hosts 文件的工具,更简单方便。Open-Source Software Freeware hot 必备
    • DiffMerge - 可视化的文件比较(也可进行目录比较)与合并工具。Freeware
    • Beyond Compare - 对比两个文件夹或者文件,并将差异以颜色标示。
    • Kaleidoscope - 一款很强大的文本文件和图像比较工具,同时和 git、svn 等版本控制工具能够完美的结合。
    • Fanvas - 把swf转为HTML5 canvas动画的系统。Open-Source Software Freeware
    • EnvPane - 图形终端查看环境变量的应用工具。Open-Source Software Freeware
    • Dash - 强大到你无法想象的API离线文档软件。star 5 Freeware hot tuijian 必备
    • Dlite - 简单的使用Docker的一个软件。Open-Source Software Freeware
    • SnippetsLab - 管理和组织你的代码片段。
    • StarUML - 强大的软件建模软件。
    • Vagrant Manager - 管理你本地服务。Open-Source Software Freeware
    • zeplin - 前端与设计协同工作专用工具。Freeware hot
    • Go2Shell - 从Finder打开命令行。Freeware hot
    • SecureCRT - 一款支持SSH、Telnet等多种协议的终端仿真程序。
    • MJML - 简化设计回应电子邮件的方式。Open-Source Software Freeware
    • TeXstudio - 集成创建LaTeX文档的写作环境。 Open-Source Software Freeware

    正则编辑器

    • Patterns - 正则表达式编辑器。
    • Reginald - 正则表达式测试应用程序,使用 RegexKitLiteOpen-Source Software Freeware
    • Regex - 感觉是用过最漂亮的正则表达式测试工具。
    • Reggy - 正则表达式编辑器。Open-Source Software Freeware
    • RegExRX - 正则表达式的开发工具。hot

    测试工具

    • Charles - 一个代理工具,允许你查看所有的HTTP和HTTPS流量。
    • Insomnia 3.0 - 漂亮的HTTP请求测试工具。Freeware
    • Cocoa Rest Client - 比Postman看起来漂亮的客户端,测试HTTP/REST endpoints。Open-Source Software Freeware
    • Paw - 先进的 HTTP 客户端。
    • Cellist - HTTP调试客户端。
    • Integrity - 轻松找到无效链接。Freeware
    • Postman - Postman 帮助我们快速测试API。Freeware hot 必备

    命令行工具

    • iTerm2 - 免费的终端工具,直接替代自带的Terminal,有非常多惊人的特性。star 4 Open-Source Software Freeware hot tuijian 必备
    • cool-retro-term - 怀旧的命令行终端。Open-Source Software Freeware
    • Oh my zsh - 拥有大量的有用的功能,助手,插件,主题,等特性的命令行工具插件。Open-Source Software Freeware hot tuijian 必备
    • Glances - 在命令行中查看你系统运行状态的工具。Open-Source Software Freeware
    • Cakebrew - Homebrew 的客户端软件。摆脱命令方便安装、查看、卸载软件。Open-Source Software Freeware
    • Black Screen - 来自 21 世纪的强大终端。Open-Source Software Freeware
    • Fish Shell - 智能且用户友好的命令行终端。hot tuijian
    • oh-my-fish - 和Oh my zsh相似,建立在Fish Shell框架上。hot tuijian
    • bash-it - 一个社区的bash的框架。Open-Source Software Freeware
    • color-retro-term - 一款复古风格的终端,非常酷炫。
    • HyperTerm - 一款基于Node开发的终端软件,逼格很高。Open-Source Software Freeware
    • itunes-remote - 通过终端控制您的iTunes。Open-Source Software Freeware
    • mycli - 为MySQL命令行客户端,提供语法高亮和提示功能的工具! star 5 Open-Source Software Freeware tuijian
    • LNav - 日志文件阅读器. Open-Source Software Freeware
    • tmux 终端登录远程主机的命令行工具。Open-Source Software
    • mas - 一个简单的命令行界面的苹果应用商店。 Open-Source Software Freeware

    版本控制

    GUI

    • Gitbar - 开源,在你的菜单栏上显示GitHub贡献统计。Open-Source Software Freeware
    • GitHub Desktop - 使用GitHub的GUI应用。Freeware
    • Oh My Star - GitHub的star功能弱,比如分类,本地组织你的GitHub star!
    • GitUp - 一个简单功能强大的git客户端。star 3 Open-Source Software Freeware
    • Hub - 将GitHub接口和git命令进行包装。Open-Source Software Freeware
    • SourceTree - 强大的Git跨平台客户端。Freeware hot
    • Tower2 - 最强大的Git客户端。
    • Versions - Mac上最好的SVN管理工具。
    • Cornerstone - Mac上最佳的SVN管理工具。

    版本控制系统

    • GitLab - 一个用于仓库管理系统的开源项目。Freeware hot tuijian 必备
    • Coding.net - 代码托管,项目管理,WebIDE,演示部署,开启云端开发模式,让开发更简单。Freeware
    • phabricator phabricator支持Git、SVN、HG 基于 PHP + Mysql 的开放源代码软件开发平台。Freeware
    • Gogs - 一款极易搭建的自助 Git 服务。Open-Source Software Freeware
    • Gerrit Gerrit 是一个免费、开放源代码的代码审查软件,使用网页界面。Freeware
    • GitHub GitHub代码托管,项目管理,演示部署,瞧,您现在就访问GitHub。Freeware hot tuijian 必备

    数据库

    • Sequel Pro - 一个MySQL数据库管理软件。Open-Source Software Freeware hot 必备
    • MySQL Workbench - MySQL数据库官方管理软件。
    • Postico - 现代PostgreSQL客户端,漂亮功能多。
    • ElectroCRUD - MySQL数据库CRUD应用程序。Open-Source Software Freeware
    • Base 2 - 一个用于管理SQLite数据库的软件。Open-Source Software Freeware
    • Postgres.app - Mac上最简单的方法的使用PostgreSQL关系型数据库管理系统。Open-Source Software Freeware
    • PSequel - PostgreSQL数据库GUI软件。Freeware
    • Robomongo - 基于Shell的MongoDB图形化客户端管理软件。Open-Source Software Freeware
    • MongoBooster - MongoDB图形化管理软件,内嵌MongoShell,ES6语法,流畅查询及智能感知。Freeware
    • Mongo Management Studio - MongoDB图形化客户端管理软件。
    • MongoChef - MongoDB图形化客户端管理软件。Freeware
    • Chrome MySQL Admin - 一个Chrome插件,是MySQL开发的跨平台、可视化数据库工具。Open-Source Software Freeware
    • JackDB - 直接的SQL访问你所有的数据,无论在哪里。Open-Source Software Freeware
    • medis - 漂亮的Redis管理软件。Open-Source Software Freeware
    • RedisDesktopManager - Redis跨平台的GUI管理工具。Open-Source Software Freeware
    • MDB Explorer - Mac上查看编辑Access数据库的工具。
    • Datum - SQLite - Sqlite3数据库管理软件。
    • mongoDB.app - 在Mac 上最简单的使用MongoDB Open-Source Software Freeware

    设计和产品

    设计工具

    • Acorn - 一个像PS,全面的功能集的图像编辑器。
    • Affinity Designer - 矢量图像设计工具,可能的Adobe Illustrator的替代。
    • Affinity Photo - 光栅图像设计工具,可以替代Adobe PS图象处理软件。
    • Blender - 全功能可扩展的跨平台3D内容套件。Open-Source Software Freeware
    • Pixelmator - 强大的图像编辑器,可能PS图像处理软件的选择。
    • Sketch - 混合矢量/位图布局应用,特别适用于用户界面,Web和移动设计。star 5 hot tuijian 必备 
    • inklet - 将Mac上的触摸板变成绘图板。tuijian
    • Monodraw - 一款文本图像编辑器。Freeware
    • SketchBook - 出众的绘图软件。Freeware
    • Tayasui Sketches - 专业的绘图软件。
    • Nik Collection - 专业照片后期制作工具Google收购后免费。Freeware tuijian
    • Paintbrush - 位图图像编辑器。star 2 Open-Source Software Freeware
    • Krita - 一个开源的位图形编辑软件,包含一个绘画程式和照片编辑器。 Open-Source Software Freeware
    • Vectr - 免费图形编辑器。这是一个简单而强大的Web和桌面跨平台工具,把你的设计变成现实。Freeware
    • Principle - 使用它很容易设计动画和交互式用户界面。star 5
    • MagicaVoxel - 轻量级的8位像素编辑和交互路径追踪渲染器。Freeware
    • ScreenToLayers - 轻松导出桌面分层文件PSD文件。Open-Source Software Freeware

    原型流程

    • Justinmind - 功能更丰富团队协作方便。tuijian
    • MockFlow - 用于网页设计和可用性测试的在线原型设计套件。
    • Axure RP 8 - 画原型图工具,团队协作SVN方便好用。hot
    • Mockplus - 更快更简单的原型设计工具。
    • OmniGraffle - 可用来绘制图表、流程图、组织结构图、思维导图以及插图或原型。
    • XMind - 一款实用的思维导图软件。hot 必备
    • Scapple - 一款实用的思维导图软件。hot
    • Framer - 做交互原型的工具。star 5hot
    • Balsamiq Mockups - 一个快速的网页设计原型工具,帮助你更快、更聪明的工作。
    • Marvel - 简单设计,原型设计和协作。Freeware
    • MindNode - 简洁的风格与人性化的操作,绘制思维脑图。

    其它工具

    • Notes - 简洁的笔记应用。 Open-Source Software Freeware
    • TinyPNG4Mac - 图片压缩专用开源工具。Open-Source Software Freeware
    • Image2icon - 将你的图片转换成图标。Freeware
    • ImageAlpha - 压缩PNG图片,去掉无效的透明。Open-Source Software Freeware
    • ImageOptim - 压缩图片,删除EXIF信息。Open-Source Software Freeware
    • Sip - 收集,整理和分享你的颜色拾色器。tuijian
    • Frank DeLoupe - 支持 Retina 的屏幕拾色器。
    • ColorSchemer - 专业的配色、调色软件。
    • IconKit - App图标自动生成器。
    • Licecap - 是一款屏幕录制工具输出GIF,录制过程中可以随意改变录屏范围。star 4 Open-Source Software Freeware hot 必备
    • Kap - 轻量 GIF 录屏小工具。star 5 Open-Source Software Freeware hot 必备
    • GIPHY Capture - 免费软件的捕捉和分享图片在桌面上。Freeware
    • Skitch - 截图附带强大的标注功能。Freeware hot
    • 截图(Jietu) - 截图附带强大的标注功能,腾讯作品。star 5 Freeware tuijian 必备
    • Snip - 高效的截图工具,支持滚动截屏,腾讯作品。Freeware tuijian
    • iPic - 上传插图链接分享。Freeware
    • Iconjar - 图标管理软件,带组织和搜索功能。star 5 Freeware tuijian
    • RightFont - 字体管理工具。star 4 tuijian
    • Solarized - 干净清爽的颜色主题,支持iTerm、Intellij IDEA、Vim等。tuijian

    虚拟机

    • Parallels Desktop - 虽然好用但是收费机制,更新花钱、花钱、花钱。hot
    • Virtual Box - 免费、免费、免费,带NTFS读写,不用买ParagonNTFS,省100块。star 4 Freeware tuijian
    • VMWare Fusion - 强大的虚拟机,商业软件。
    • Veertu - Mac上最轻便的虚拟机,只有跑Windows才会收费。比较新,很多功能不支持。Freeware tuijian

    通信

    推荐一些通信工具,沟通,团队协同。

    • Franz - 一个使用 Electron开发的,可以同时登录23个平台的即时通讯软件。hot Freeware
    • QQ - QQ for Mac App。Freeware
    • WeChat - 微信 for Mac App。Freeware
    • Electronic WeChat - 调用微信接口,使用 Electron 开发的第三方漂亮开源微信应用。Open-Source Software Freeware hot
    • Skype - Skype共享、跨平台的短信和电话。
    • WeiboX - 微博第三方Mac应用。star 5 Freeware tuijian
    • 御飯 - 饭否第三方Mac应用。star 3 Freeware
    • ChitChat - WhatsApp非官方。Open-Source Software Freeware
    • Telegram - 通讯新时代。
    • Messenger - Facebook第三方聊天工具。Open-Source Software Freeware
    • Adium - 呃这个是老的集成多个平台的聊天客户端。Freeware
    • Textual - 最受欢迎的世界与我们相关的KPI应用 for OS X。
    • Gitter - 关于GitHub的项目交流,支持 Markdown,对开发者极为友好。
    • 简聊 - 企业级即时沟通工具,已经下线了,可以自己搭建一套系统玩儿。Open-Source Software Freeware
    • 钉钉 - 企业级办公通讯免费平台。Freeware
    • Slack - 团队协作,沟通工具。
    • 零信 - 随时随地工作,跨平台。
    • 今目标 - 一款面向中小企业的互联网工作平台。
    • BearyChat - 互联网团队协作,沟通工具。
    • Bitpost - 私人分散消息。它是一个p2p的去中心化和无须第三方提供信用担保协议。Open-Source Software
    • Teambition - 团队协作。提供管理任务、安排日程、查找文件、即时讨论等团队所需要的一切协作功能。Freeware
    • 日事清 - 个人日程管理,团队协作工具。日程安排,计划分配,笔记总结等。Freeware
    • Coding.net - 代码托管,项目管理,WebIDE,演示部署,开启云端开发模式,让开发更简单。Freeware
    • WeeChat - 一个命令行聊天客户端。Freeware

    Email

    • Spark - 新推出的快速邮件客户端支持Mac和iPhone。Freeware
    • Airmail - 快速的邮件客户端支持Mac和iPhone。
    • Foxmail - 快速的邮件客户端。Freeware hot tuijian
    • MailTags - 管理和组织邮件,日程和标签进行分类邮件。
    • N1 - 可以扩展的开源收费邮件客户端。
    • Postbox - 这个貌似也非常强大哦,关键是简洁漂亮的收费邮件客户端。
    • Polymail - 简单,功能强大,长得好看的新晋邮件客户端。Freeware
    • CloudMagic Email - 界面非常简洁的一个邮件客户端。
    • ThunderBird - Mozilla 公司出品的强大的Email客户端程序。Freeware

    数据恢复

    音频和视频

    • Kodi - 一款一流的免费开源媒体中心软件,可用于播放视频、音乐,查看图片,玩游戏等.Open-Source Software Freeware
    • MPV - 一个免费、开源和跨平台的媒体播放器。 star 5 Open-Source Software Freeware
    • VOX Player - 免费全能音乐播放器,撸码之余听听歌是一种享受。star 5 Freeware hot tuijian 必备
    • Radiant Player - Google Play音乐播放器。Open-Source Software Freeware
    • Sonora - 一个很小的音乐播放器。Open-Source Software Freeware
    • Audacity - 免费开源的编辑音频的软件。Open-Source Software
    • Audio Hijack - 一个记录任何应用程序的音频,包括网络电话Skype,网络流从Safari,以及更多。
    • Stringed 2 - 音频编辑处理工具。
    • Mixxx - 免费的DJ软件,给你一切你需要的表演组合,名副其实的替代Traktor。Open-Source Software Freeware
    • Cog - 一个免费的开源音频播放器。Open-Source Software Freeware
    • VLC - 开源的跨平台多媒体播放器及框架,可播放大多数多媒体文件。Open-Source Software Freeware
    • XLD - 解码/解码/转换/播放各种“无损”音频文件。Open-Source Software Freeware tuijian
    • HandBrake - 高性能的视频编码和转换工具,具有很好的图形用户界面。Open-Source Software
    • MPlayerX - 媒体播放器。 star 3 Open-Source Software
    • ScreenFlow - 屏幕和视频编辑软件。
    • mpv - 媒体播放器。Open-Source Software
    • ArcTime - 跨平台字幕制作软件。hot tuijian 必备
    • Perian - 让QuickTime播放所有常见格式的免费插件。star 5 Open-Source Software hot tuijian 必备

    书签阅读写作

    • OpenOffice - 是一套跨平台的办公室软件套件。Open-Source Software hot tuijian 必备 Freeware
    • Spillo - 功能强大,美观、快速网络书签网页阅读。
    • iChm - 读chm文件的软件。Freeware
    • Chmox - 读chm文件的软件。Freeware
    • CHM Reader - 读chm文件的软件。Freeware tuijian
    • Kindle App - 亚马逊 Kindle App 电子书阅读器。
    • RSS 
      • Feeds 2 - 监控任何RSS。Open-Source Software Freeware
      • ReadKit - 书签RSS管理客户端。
      • Reeder 3 - RSS 服务订阅。hot tuijian 必备
      • Leaf - RSS 客户端程序。hot
      • Vienna - RSS/Atom 新闻阅读客户端。Open-Source Software Freeware
    • Markdown 
      • Mou - 免费 Markdown 编辑神器。Freeware hot
      • Marp - Markdown 制作幻灯片编辑器。Open-Source Software Freeware
      • TextNut - Markdown编辑器,富文本之间自由切换。Freeware
      • MWeb - 专业的 Markdown 写作、记笔记、静态博客生成软件。hot
      • Typora - 基于 Electron 的“读写一体” Markdown 编辑器。Freeware hot tuijian
      • MacDown - 一款开源的Markdown编辑器,深受Mou的影响。Open-Source Software tuijian Freeware
      • EME - 最近刚出的一款Markdown编辑器,界面很像Chrome浏览器的界面,很简约。
      • LightPaper - 简单的Markdown文本编辑器。
      • Cmd Markdown - Cmd Markdown 编辑阅读器,支持实时同步预览,区分写作和阅读模式,支持在线存储,分享文稿网址。 Freeware
    • 笔记 
      • Quiver - 程序猿的笔记本。
      • 有道云笔记 - 支持多目录,Markdown,iWork/Office预览。Freeware tuijian 必备
      • 为知笔记 - 支持Markdown,搜集整理图片链接导入文档。Freeware tuijian 必备
      • leanote - 支持Markdown的一款开源笔记软件,支持直接成为个人博客。Open-Source Software Freeware
      • Inkdrop - Markdown爱好者的笔记本应用程序。

    制作电子书

    • Calibre - 丑陋的软件,但强大的软件电子书管理和转换。Open-Source Software Freeware
    • Sigil - 多平台EPUB编辑器 Open-Source Software Freeware

    FTP客户端

    • Transmit - 一个FTP客户端,支持FTP + SFTP + S3。
    • Flow - 支持简单的 FTP + SFTP 客户端。
    • Yummy FTP - 专业快速,可靠的FTP客户端。
    • Cyberduck - 免费FTP,SFTP,S3和WebDAV客户端 & OpenStack Swift Client。Freeware
    • FileZilla - 跨平台的FTP,FTPS和SFTP客户端。hot

    软件打包工具

    • Finicky - Web应用程序转化为苹果的应用程序。Open-Source Software Freeware
    • nw.js - 使用HTML和JavaScript来制作桌面应用。Open-Source Software Freeware hot
    • Electron - 前身是 AtomShell,使用 JS、HTML 和CSS 构建跨平台的桌面应用程序。Open-Source Software Freeware hot
    • React Native Desktop for Mac - 用 React Native 技术构建 OS X 下的桌面应用程序。Open-Source Software Freeware tuijian
    • React Native Desktop for Ubuntu - 用 React Native 技术构建 Ubuntu 下的桌面应用程序。Open-Source Software Freeware tuijian
    • AppJS - 使用 JS、HTML 和CSS 构建跨平台的桌面应用程序。Open-Source Software Freeware
    • HEX - 使用 JS、HTML 和CSS 构建跨平台的桌面应用程序,有道出品。Open-Source Software Freeware
    • AlloyDesktop - 同上,腾讯出品,给个差评。Open-Source Software Freeware
    • MacGap - 桌面WebKit打包HTML、CSS、JS应用。Open-Source Software Freeware
    • ionic - 一个用来开发混合手机应用的,开源的,免费的代码库。 Open-Source Software Freeware

    下载工具

    • Transmission - 免费的BitTorrent客户端 Open-Source Software Freeware
    • aria2 - 一款支持多种协议的轻量级命令行下载工具。Open-Source Software Freeware
    • JDownloader - 下载工具,下载文件的一键式托管。Freeware
    • You-Get - 网络富媒体命令行下载工具。Open-Source Software Freeware
    • Free Download Manager - 功能强大的下载加速器。Freeware
    • FOLX - Folx 是一个Mac osx 系统风格界面的下载管理工具。 Freeware

    网盘

    推荐一些有Mac客户端的网盘。

    • Dropbox - 非常好用的免费网络文件同步工具,提供在线存储服务。Freeware
    • 百度云 - 百度云客户端。Freeware hot
    • 腾讯微云 - 腾讯云客户端。Freeware
    • 坚果云 - 坚果云客户端。Freeware
    • 115 - 115云客户端。Freeware
    • 360 - 360云客户端。Freeware
    • 快盘 - 金山快盘。 Freeware
    • owncloud - 私有云网盘。
    • Mega - 免费的云服务,提供50GB的免费存储空间。Freeware
    • 亿方云 - 硅谷团队打造,个人免费。Freeware

    输入法

    浏览器

    这里放Mac的浏览器应用

    • Safari - Mac预装自带浏览器。Freeware
    • Chrome - Chrome浏览器谷歌出品。star 4 Freeware
    • Firefox - 火狐浏览器。Freeware
    • Opera - Opera 浏览器。Freeware
    • QQ浏览器 - QQ浏览器-腾讯出品。Freeware
    • 傲游云浏览器 - 傲游云浏览器。Freeware
    • Vivaldi - Opera开发商出品新的浏览器。Freeware
    • Ōryōki - 小的web浏览器。这是一个试验性的项目,目前正在开发中Freeware

    翻译工具

    科学上网

    假设你是个勤奋的同学,你总有一天会强烈需要它们,上帝保佑他们吧。

    • SpechtLite - 支持 Shadowsocks 及规则管理的高效率代理。Open-Source Software Freeware hot
    • ShadowsocksX - 一个快速的隧道代理,可以帮助你绕过防火墙。Open-Source Software Freeware hot
    • ShadowsocksX-NG - 一款ShadowsocksX客户端软件。Open-Source Software Freeware
    • Lantern - 科学上网。Open-Source Software Freeware tuijian 必备 hot
    • 鱼摆摆 - 科学上网。
    • Tunnelblick - OpenVPN的免费软件。Freeware
    • GoAgentX - 科学上网。Open-Source Software Freeware
    • Surge - 科学上网。Freeware
    • 云梯 - 在圈内小有名气的VPN服务提供商。hottuijian
    • srocket - 开启科学上网。Freeware
    • LoCoVPN - 每天签到可获得2小时免费VPN加速。Freeware
    • 二师兄VPN - 提供无限流量、无限续期免费VPN账号。Freeware
    • GTX加速器 - 每天签到领取500M流量。Freeware
    • GreenVPN - 注册激活送免费VPN加速流量。Freeware
    • 风驰VPN - 无限流量、无限续期的免费VPN加速服务。Freeware
    • 开眼 - Chrome插件免费的科学上网利器。Freeware

    其它实用工具

    • 12306ForMac - Mac版12306 订票/捡票 助手。star 5 Open-Source Software Freeware tuijian hot
    • AirServer - 将手机投影到电脑上。
    • CheatSheet - CheatSheet 是一款Mac上的非常实用的快捷键快速提醒工具。star 4 Freeware
    • WWDC - Mac OS的非官方的WWDC APP。Open-Source Software Freeware
    • xScope - 测量、检查和测试屏幕上的图形和布局的工具。搜索你的苹果和网络,快速打开应用程序。
    • f.lux - 自动调整您的电脑屏幕,以匹配亮度。Freeware
    • Todoist - 跨平台的任务管理器与移动应用程序。
    • TaskPaper - 漂亮的纯文本任务列表。
    • Wunderlist - 奇妙清单跨平台的任务管理器与移动应用程序。Freeware
    • Ukelele - Unicode键盘布局编辑器。
    • Karabiner - 一个强大的和稳定的OS X的键盘定制。Open-Source Software Freeware
    • Keytty - 让你通过键盘使用鼠标。
    • AppCleaner - 一个小应用程序,让你彻底卸载不需要的应用程序。Freeware tuijian
    • BetterZip 3 - 压缩解压缩工具支持格式 ZIP、TAR、TGZ、TBZ、TXZ (new)、7-ZIP、RAR。Freeware hot tuijian 必备
    • Numi - 漂亮的计算器应用。Freeware
    • Fantastical - 日历应用程序,你将管理好生活。tuijian
    • OnyX - 多功能实用工具来验证磁盘和文件,运行清洁和系统维护任务,配置隐藏选项等。Freeware
    • SSH Tunnel - 管理你的SSH。
    • Mounty - NTFS 分区读写组件。Freeware
    • Paragon NTFS - 在Mac OS X中完全读写、修改、访问Windows NTFS硬盘、U盘等外接设备的文件。
    • Tuxera NTFS - Mac上的NTFS文件系统驱动。
    • gfxCardStatus - 控制Mac独立显卡与集成显卡之间的切换。Freeware tuijian
    • openEmu - 模拟器,可以玩魂斗罗之类,放松回到小时候。Open-Source Software Freeware tuijian
    • Alfred - 效率神器。tuijian hot
    • Hammerspoon - 功能强大的自动化工具,Lua 脚本驱动,支持窗口管理。Open-Source Software Freeware
    • DaisyDisk - 磁盘空间使用扫描工具。
    • iStat pro - 免费的Mac OS电脑硬件信息检测软件。Freeware
    • BitBar - 支持使用各种语言将信息展示到Mac OS的菜单栏。Open-Source Software Freeware
    • ClipMenu - 一个剪贴板操作的管理器。Freeware
    • ControlPlane - 自定义Mac情景模式。比如你到了公司后可以让Mac自动静音或是自动打开Mail客户端,晚上回到家后自动打开iTunes听歌,到了公共场所自行修改网络设置等等。Open-Source Software Freeware
    • Caffeine - 实用工具,菜单栏按钮,点击休眠。Freeware
    • Itsycal - 一款简洁实用的开源日历工具。Open-Source Software Freeware
    • HTML5 Player - Chrome插件解决中国视频网站播放视频电脑发热的情况。
    • Monity - 帮助用户实时监控系统的一款非常漂亮的软件。star 3
    • BetterTouchTool - 代替默认的系统操作方式(组合键、修饰键、手势等)。Freeware
    • iStats - iStats 是一个可以让你快速查看电脑 CPU 温度,磁盘转速和电池等信息的命令行工具。Open-Source Software Freeware
    • InsomniaX - 合上盖子不眠不休,继续听歌下载。
    • NoSleep - 合上盖子不休眠,可根据是否连接电源单独设置。
    • 窗口管理 
      • ShiftIt - 窗口位置和大小管理软件。star 4 Open-Source Software Freeware hot tuijian 必备
      • Moom - 多任务多窗口的软件。
      • Slate - 窗口管理器,可用JavaScript写配置。Open-Source Software Freeware
      • Amethyst - 窗口管理器(自动保持窗口大小的窗口)。Open-Source Software Freeware
      • Spectacle - 简单的移动和调整大小的窗口,和可定制的键盘快捷键。
    • 密码管理 
      • 1password - 跨平台帐号密码管理软件。hot tuijian 必备
      • LastPass - 密码管理器和安全的数字笔记。
      • KeePassX - 一个免费的,开源的,体积小的密码管理器。Open-Source Software Freeware
      • MacPass - 密码管理器。Open-Source Software Freeware
    • Finder 

    远程协助

    • TeamViewer - 远程协助及在线协作和会议功能的软件,商业软件个人使用免费。star 4 Freeware tuijian 必备
    • RealVNC 是一款免费的远程控制跨多平台的程序。 Freeware

    第三方应用市场APP

    这里讨论盗版问题或者提供黑名单?,拒绝盗版从我做起,欢迎大家监督。

    正版

    这里只提供正版软件购买下载的应用商店。

    • HackStore - 一个类似于cydia的第三方Mac应用市场,平台拒绝盗版。star 4 tuijian Freeware
    • MacUpdate Desktop - 管理/更新/下载App,跟踪优惠信息。star 4
    • homebrew-cask - 体验通过命令行安装Mac软件的工具。

    应用商店黑名单

    第三方应用市场APP黑名单,存在盗版软件传播和下载,拒绝盗版从我做起,欢迎大家监督它们。

    Mac软件下载网站

    这里主要是推荐一些软件下载的网站,还有一些Mac OSX软件分享网站

    正版/介绍

    盗版软件下载网站黑名单

    上面有大量的开源软件或者免费软件,拒绝盗版从我做起,下面被删除的网站提供大量破解软件下载,欢迎大家监督它们。

    • 玩转苹果:http://www.ifunmac.com
    • Mac软件下载站:http://www.pshezi.com
    • MacPeers:http://www.macpeers.com
    • Mac志:http://www.isofts.org
    • Mac软件分享:http://www.waitsun.com
    • AppKed:http://www.macbed.com
    • 苹果软件园:http://www.maczapp.com
    • Mac精品软件:http://xclient.info/
    • Macx:http://www.macx.cn/
    • 腾牛网:http://www.qqtn.com/mac/r_17_1.html

    ⬆ 返回顶部


    展开全文
  • 微信小程序资源汇总

    2018-08-20 17:19:21
    微信小程序汇总(10月16日更新小程序100+个教程或资讯与50+个Demo) 1:微信小程序官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 2:微信小程序简易教程:...
  • 第一章:什么是微信小程序 1-1 开篇及课程特色介绍 1、老师id:小楼昨夜又秋风:https://zhuanlan.zhihu.com/oldtimes ,知乎id:七月在夏天。 2、实践学习小程序开发:官方api文档 1-2 直观感受一下微信...
  • 微信公众平台开发

    2014-01-18 11:18:26
    微信公众平台开发(80) 上传下载多媒体文件 摘要: 微信公众账号在回复图片、语音、视频的时候,将使用media_id来调用相关文件,很多朋友咨询这个如何开发实现。本文将介绍在微信公众平台开发过程中,如何上传...
  • 微信小程序 bug 集中营 create byjsliangon2018-9-17 17:58:56 Recently revised in2018-10-18 09:38:15  Hello 小伙伴们,如果觉得本文还不错,记得给个star, 你们的star是我学习的动力!GitHub 地址  ...
  • 微信公众账号开发

    2014-02-27 15:00:52
    微信开发 微信公众平台开发(82) 天气预报 摘要: 在这篇教程中,我们将介绍如何在微信公众平台上开发天气预报功能。我们将使用中国天气网的气象数据接口来获取天气信息。这篇教程将介绍以下内容:获取...
  • 文章目录一、概述和了解...xx.wxss:微信的css xx.js:微信的js,负责交互 1.2 新建页面 在app.json的pages中按格式写入页面名 1.3 页面交互使用 在hello.js中的data里写入数据 data:{ name: '花崎泪', age: 18
  • 微信小程序踩坑集合

    2019-07-26 20:59:44
    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:...
  • 微信小游戏开发笔记

    2018-06-02 16:49:37
    1.文件结构:小程序包含一个描述整体程序的app和多个描述各自页面的page。1)小程序主体部分由三个文件组成,必须放在项目的根目录: app.js 必须有。小程序逻辑 app.json 必须有。小程序的公共设置 app.wxss 可...
  • 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:...
  • Android Studio在类微信程序完成"蓝牙聊天功能"实现蓝牙通信项目运行截图通信原理蓝牙权限strings.xmltab01.xml菜单文件option_menu.xmldevice_list.xmlChatService.javaDeviceList.javaweixinFragmnet.java项目源码...
  • Android 8.0 功能和 API

    2017-09-25 12:50:10
    Android 8.0 为用户和开发者引入多种新功能。本文重点介绍面向开发者的新功能。
  • 谷歌浏览器 Chrome 是我们最常用的浏览器之一,而Chrome浏览器自带的开发者工具Chrome DevTools是Web前端开发性能调试的必备工具。但是Chrome能做的远远不止这么简单,Chrome的功能通过成千上万的拓展工具进行拓展,...
  • 激励视频广告 ...开发者可以调用 wx.createRewardedVideoAd 创建激励视频广告组件。该方法返回的是一个全局单例。 const video1 = wx.createRewardedVideoAd({adUnitId: 'xxxx'}) const video2 = wx....
1 2 3 4 5 ... 20
收藏数 940
精华内容 376
关键字:

微信开发者工具隐藏式选项卡