美文网首页
1分钟带你学会小程序开发者工具

1分钟带你学会小程序开发者工具

作者: 陶子taozi_39109 | 来源:发表于2017-01-12 15:16 被阅读0次

近段时间有很多小伙伴问微信小程序怎么开发啊?开发的第一步就是安装微信web开发者工具,今天就来教你设置好开发者工具。

一、下载开发者工具

(附上官方下载地址:http://t.cn/RfSjd2I)

下载安装好之后打开会进入这个界面,倘若开发者首次启动开发者工具,则需要微信账号扫码登录。

登录后,微信开发者工具会询问调试类型,请选择「本地小程序项目」。

二、创建项目

直接点击“添加项目”,就可以在电脑上新建小程序项目了。

这时会进入一个要求填写小程序AppID(如果没有则选择“无AppID”,如果有则开发时可在真机预览效果)、项目名称、开发目录的页面,无AppID的小伙伴也是可以正常开发的,不必担心~

注:小程序AppID:登录https://mp.weixin.qq.com就可以在网站的“开发”-“基本配置”中查看到微信小程序的 AppID 了,不可直接使用服务号或订阅号的 AppID 。

在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,这样会帮助我们在开发目录里生成一个简单的 demo。

三、开发项目

开发者工具主要分为编辑、调试、项目三个部分:

“编辑”:查看和编辑代码;

“调试”:测试代码并模拟小程序在微信客户端效果;

“项目”:发送到手机里预览实际效果。

四、真机预览(已填写AppID的开发者)

想到体验代码在真机上的运行效果?点击左侧“项目”-->"预览"后直接用本人微信扫码,可在手机进行预览小程序的效果。

注意:

1.开发者工具上的二维码仅限于登录开发工具的开发者本人可以扫码并预览;

2.请用微信客户端ios或Andriod的6.3.27及以上版本才可以扫码预览;

3.二维码只在5分钟之内有效。

在真机预览中还有一个很棒的体验,你可以在手机中看到右下角有一个“vConsole”的按钮,点击之后你会发现一个很熟悉的页面,没错~就是有点类似我们用chrome-devtools开发web一样:

PS:最后,献上我做的的一个小程序demo的真机测试gif图片,这个小程序有点类似大众点评、美团APP,集美食、视频、二手车、资讯于一身,流畅度也不错,如下图所示:

相关文章

  • 小程序官方教程地址总结

    小程序工具下载 开发者工具介绍开发者工具的快捷键 等等 小程序官方教程包括 小程序的基础教程1、起步、2、代码构成...

  • 小程序入门001~微信开发者工具的安装与使用

    我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。 一,其实很简单,只需要进...

  • (二) 小程序环境搭建与开发工具介绍

    知识点:·下载微信web开发者工具·没有小程序号的限制·新建小程序项目·微信web开发者工具界面功能介绍 开发者工...

  • 小程序文档整理,入门这一篇就够了

    准备工作 准备一个账号 账号注册地址下载小程序开发者工具 开发者工具下载地址小程序官方文档 文档地址...

  • 1分钟带你学会小程序开发者工具

    近段时间有很多小伙伴问微信小程序怎么开发啊?开发的第一步就是安装微信web开发者工具,今天就来教你设置好开发者工具...

  • 小程序开发工具

    开发工具 微信专为小程序打造开发工具,叫微信开发者工具 小程序的腾讯云 腾讯为开发者提供免费的开发环境和生产环境 ...

  • 👀每日见闻 18/09/11 「小程序·云开发」开放

    ?新鲜见闻 「小程序·云开发」开放 小程序的开发者工具新增「云开发」功能,开发者无需搭建服务器,就可实现小程序快速...

  • 2-1 开篇介绍 以及下载工具

    小程序开发环境 下载微信web开发工具 小程序目前的情况 没有小程序号的限制 新建小程序项目 微信web开发者工具...

  • 小程序极简入门1

    体验小程序 话不多说,直接开干... 首先下载 微信开发者工具 打开微信开发者工具,选择体验小程序 在本地磁盘新建...

  • 2018-09-17

    小程序 1 创建项目 我们需要通过开发者工具,来完成小程序创建和代码编辑。 开发者工具安装完成后,打开并使用微信扫...

网友评论

      本文标题:1分钟带你学会小程序开发者工具

      本文链接:https://www.haomeiwen.com/subject/pridbttx.html