微信小程序系列--1、开发工具介绍

开发工具介绍

  1. 版本: 截止2016-10-31,开发工具已经更新到0.10.101400
  2. 界面介绍:

    微信小程序系列--1、开发工具介绍_第1张图片

    开发工具应该是用NW开发的,NW不知道是什么,可以自行百度,打开之后如上图,需要微信扫码登录,才能进行开发。

    登录成功之后

    微信小程序系列--1、开发工具介绍_第2张图片

    如上图,最近才更新的,以前没有这个选项的,直接是本地小程序项目,这次更新多了一个”公众号网页开发”,这个还没来得及测试,进去看了一下应该是调试微信网页的(在这里不做赘述)。好,接下来点击“本地小程序项目”:

    微信小程序系列--1、开发工具介绍_第3张图片
    上面有个“代理”,应该也是新更新出来的,以前没见过(也有可能是我没注意到,哈哈),这个代理是干什么的呢,简单介绍一下吧:
    我们在开发小程序的时候,很多时候需要真机调试,而这个开发工具是基于chrome开发的,调试功能都是基于chrome的,但是chrome的真机调试在国内需要才行,所以这里就有了个代理(也不知道说的对不对,不对的话请大神指正,莫要喷我,我是菜鸟),工具的话就不做介绍了,自行百度吧,如果找不到,可以留言问我。

接下来点击“添加项目”创建一个新的小程序项目。

微信小程序系列--1、开发工具介绍_第4张图片

根据提示填写,AppID选择无AppID(现在只有有内测号的人才有AppID),默认会选中“在当前目录中创建quick start项目”,就是个小小的demo,相当于复杂一点点的“hello world”吧。最后点击“添加项目”啊,说了半天废话,终于进来了。。。

微信小程序系列--1、开发工具介绍_第5张图片

微信小程序系列--1、开发工具介绍_第6张图片

根据上图,做下简单的介绍:
1. 菜单栏
a. 设置,其实就是刚刚所说的代理,点开之后,是一样一样的;
b. 动作,有三个功能,刷新、后退、前进;
c. 帮助,工具介绍
唉。。菜单好简单啊,毕竟是内侧版本,功能少是正常的
2. 左侧菜单栏
a. 头像,微信头像,点击后,可以退出;
b. 编辑,进入编辑界面(之后详细介绍);
c. 调试,进入调试界面(之后详细介绍);
d. 项目,展示项目的详细信息和配置;

微信小程序系列--1、开发工具介绍_第7张图片

e. 关闭,关闭项目,进入项目选择界面
3. 预览,这里是预览界面,编辑代码后,可以在这里预览效果

4 控制台,前端的小伙伴肯定很熟悉,这就是chrome的控制台吗,有点不一样哦,但是基本是一样的,分别是console、sources、network、storage、appData、wxml(这个读作–微信妹儿,不叫–达不溜叉妹儿),前三个不做介绍,前端小伙伴都知道,不做解释,不知道的百度吧,storage–本地存储,一听就知道干什么的啦,appData,这个很有用,他会展示所运行的界面的数据,并且可以直接修改,预览就会实时的相应,很有意思,这个是官网介绍的,可以去看看。然后是wxml–大家应该都知道element,对,和chrome的element功能是一样的(没有chrome的强大,只是展示结构,没有功能,后续有可能会添加)

下面介绍编辑界面:

微信小程序系列--1、开发工具介绍_第8张图片

  1. 最左边的红框还是预览界面,
  2. 中间的是项目目录
  3. 最右边是代码编辑界面
    上个版本在编辑界面没有预览框,这次更新竟然加上了,不进可以隐藏起来(点击左上角手机按钮隐藏),而且还是实时刷新的,编辑完代码,保存,预览界面会立即刷新,很方便。

好像忘了讲三个按钮,
一个是–编译,编译按钮相当于刷新,
然后是–后台,推测应该是模仿手机后台运行
最后一个是–缓存,如果编译后没有得到想要的效果,可以尝试清理下缓存。
这节就讲到这里吧,下次再见。

你可能感兴趣的:(微信小程序)