全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解

简介: 全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解

这节课我们来说说微信提供的小程序开发工具。

一、首先我们从官网下载微信开发者工具,注意,不要下到旧版本的公众号调试工具。之前安装过web开发工具的朋友,可能会遇到一个奇怪的问题,明明下载的安装包是最新的,安装完打开的却是旧版的界面。这时候只要把旧版的卸载之后,把所有的文件都删除重新安装就可以了。从微信公众平台技术文档进入的微信web开发者工具的下载地址是错误的,要从小程序的文档进入的才是正确的。

下载了之后,执行安装一直下一步直到完成。

二、新建项目

1、安装完成打开微信开发者工具(以下称之为工具)

需要扫描工具登录二维码。这里和后台管理不同的地方时,扫码的微信号,不需要一定是这个小程序的管理员,也可以是小程序的开发者,开发者可以在小程序的后台,设置里面添加。

image.png

2、登录之后可以选择使用工具是开发小程序还是用于公众号网页开发。选择本地小程序项目。

image.png

点击加号按钮增加小程序项目,这里需要注意的是这个按钮即是打开也是新建。如果你选择的目标目录是一个空文件夹,那工具就认为你是要新建一个小程序,如果不是空文件夹,工具就会认为你是要打开一个现有的小程序。

image.png

如果发现新建项目错误,可能是目标目录不为空。

3、进入添加项目界面,appid从小程序后台获得,没有注册小程序的朋友可以参考上一节课的内容进行注册。也可以暂时跳过选择右边的无AppID,但是不建议使用这个,你后面还是需要提供appid的。而且没有appid是不能在真机上调试的。这里需要注意的是小程序的项目和appid不是强绑定的关系,你可以用别的小程序appid打开你之前写好的小程序项目。


勾选“在当前目录中创建 quick start项目”,新建一个官方demo,不勾选新建一个空白项目。这里我们勾选上这个选项。因为我们接下来会先带领大家阅读这个官方demo的源码。填写完毕,点击右下角的添加项目。

image.png

4、默认打开的是项目页面,我们可以点击预览

image.png

弹出二维码,可以使用手机扫描二维码,注意只有管理员、开发者和本小程序的体验者可以打开小程序。

image.png

5、点击上传按钮,就是编译部署了,也是要扫描二维码。需要填写版本号和日志。

6、点击工具左侧的选择卡,切换到“调试”页面。基本用法和谷歌的开发者工具差不多,需要特别注意的是因为小程序没有html所以查看界面结构是在wxml。这里留意一下右上角的七个模块。

image.png

6.1console控制台,可以在这里查看日志或者错误。原则是警告可忽略,错误必处理。

image.png

6.2sources用于查看脚本文件,可以在这个界面里标记断点,用于调试程序。

image.png

6.3network查看网络请求,可以查看下载的文件和请求,常用来查看请求头和返回的数据。

image.png

6.4storage用于显示当前项目的缓存数据,可以理解为web前端的小型数据存储库。

image.png

6.5appdata查看所有被激活的页面的数据,这些数据都是绑定到界面上的数据。

image.png

6.6wxml类似其他浏览器开发者工具中的elements模块,用于查看界面结构,但其实常用来编写css样式,因为在这里编辑css样式,所见即所得。

image.png

6.7sensor可以在这里选择模拟地理位置,也可以用于调试重力感应。

image.png

这节课的内容就到这里结束了。

感谢您的阅读。

我是小虎,希望你开心。

目录
相关文章
|
7天前
|
小程序 Android开发
|
2天前
|
小程序
|
3天前
|
小程序 数据安全/隐私保护
|
8天前
|
小程序
|
8天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
2天前
|
小程序
|
6天前
|
小程序
|
22天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
151 3
|
29天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
41 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
101 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章