小程序开发工具与基础之环境搭建与工具

chenyingying0 chenyingying0     2023-04-12     770

关键词:

小程序开发准备

1、申请小程序账号(appid)

2、下载并安装微信开发者工具

 

进入微信公众平台 https://mp.weixin.qq.com/

立即注册小程序

技术图片

 

 按照信息填写之后完成注册

具体操作可查看小程序官方开发文档

 

使用注册的小程序账号密码,登录 https://mp.weixin.qq.com/

在菜单-设置-开发者设置中,查看小程序的appID

技术图片

 

 

下载并安装微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

技术图片

 

 选择适合自己操作系统的最新稳定版本,傻瓜式下载安装即可

 

扫码登录

技术图片

 

 新建小程序项目

(没有appID可以暂时先使用测试号)

不过现在个人是可以注册小程序的,还是建议注册一个,因为测试号有很多限制

技术图片

 

 

小程序属于前端开发,单独的小程序是没有意义的

而完整的应用不仅要有前端,还需要服务器的支持(后端给前端提供数据)

小程序后端可以使用后端语言来开发,比如java python php node.js ,不懂后端的可以使用小程序云开发

 

技术图片

 

 进去以后的默认页面是这样的,微信头像+微信名,怎么这么大……

 

微信开发工具UI简介与小程序调试方法

创建类型:

技术图片

 

如果选择page,会生成4个文件 .js  .json  .xml  .xss

 

如何查看快捷键:

鼠标移动到代码区域,按F1,会出现所有操作及快捷键

技术图片

 

 

如何运行代码:

1、点击编译

技术图片

 

 2、小程序有自动编译功能

编辑完代码之后按ctrl+s保存即可自动编译

 

清缓存:

技术图片

 

 

如何查看项目的配置信息和状态:

点击设置-项目设置

技术图片

 

 技术图片

 

 或者点击右上角的详情

技术图片

 

 

 

关于调试:

1、console.log打印变量进行查看

2、断点调试,在控制台sources点击对应文件,左侧可以进行打断点操作

然后再点击下编译

技术图片

 

qtquick系列教程之开发环境的搭建

...eator是全新的跨平台QtIDE,可单独使用,也可与Qt库和开发工具组成一套完整的SDK.其中包括:高级C++代码编辑器,项目和生成管理工具,集成的上下文相关的帮助系统,图形化调试器,代码管理和浏览工具。Qt特性作为 查看详情

微信小程序之工具js封装与使用(代码片段)

工具库的创建与使用创建一个common文件夹在common文件夹中创建一个utils文件夹在utils文件夹中创建util.js//工具functiontool()console.log('iamatoolfunction.');module.exports=tool:tool在具体的页面js中调用首先要引入工具文件constutil=require('... 查看详情

python开发简介:conda,pip虚环境搭建配置与工程基础实践

...方式参考文献python虚拟环境有了集成开发环境,数据科学工具箱,我们还要准备搭建python的虚拟环境。这是由于开源软件目前更新换代非常快,不同开发包之间相互依赖和更新可能引起的冲突及连锁反应。进行Python开发时,多个... 查看详情

python小技能:搭建selenium与chromedriver环境4mac(代码片段)

...ao.org/mirrors/chromedriver/安装selenium1.1安装pippip是Python包管理工具,该工具提供了对Python包的查找、下载、安装、卸载的功能。 查看详情

环境搭建篇-导读

...“工预善其事,必先利其器”,做事之前提前准备好相应工具对完成任务来说是很有必要的。游戏安全是一个门槛相对较高、涉及知识面较广的行业,无论是攻还是防都需要具备开发能力与逆向分析能力。游戏安全知识学习的基... 查看详情

瞎搞搞之window_x64微信小程序环境搭建

...下:http://pan.baidu.com/s/1nv0IHhn(ylk7) 1、下载微信开发工具0.7.0_x64安装完成后,打开程序,进行微信扫码登录2、下载微信开发工具0.9.092300_x64注意:版本一定要是0.9.092300,小于这个版本,打开程序会白屏安装(覆盖0.7.0的版本... 查看详情

微信小程序入门与实战常用组件api开发技巧项目实战

...面进阶小程序!第2章小程序环境搭建与开发工具介绍小程序开发工具的下载与安装、微信Web开发者工具主要功能简介第3章从一个简单的“欢迎“页面开始小程序之旅完成第一个小程序页面,并 查看详情

《自然语言处理实战入门》----python开发环境搭建与编程基础

...成开发环境PyCharmSpyderjupyternotebookJupyterLabColaboratoryAnaconda工具箱python虚拟环境Conda和pipPython编码规范jupyternotebook实战配置参考文献工欲善其事,必先利其器,熟练掌握python开发环境,虚拟环境,anaconda等数据科学软件的使用技巧才... 查看详情

性能工具之gatling开发环境搭建(代码片段)

文章目录一、前言二、安装插件三、新建工程四、运行结果五、总结一、前言编写Gatling脚本需要搭建脚本开发环境,下面演示使用IDEA开发环境搭建脚本开发环境。二、安装插件打开IDEA,安装scala插件,首次使用,... 查看详情

开发环境搭建以及所需工具的安装(代码片段)

...比较多的,而且比较实用,并且都是采用目前最新版本的工具来配置的环境。下方内容主要包括了JDK1.8的安装、JavaEE版本的Eclipse的安装、Maven的安装、T 查看详情

[基础篇]esp8266-sdk教程之开发环境搭建=

...毕竟这个开发环境不单单是有台电脑就足够了,交叉编译工具链才是最重要的,我们需要 查看详情

hbase入门基础教程hbase之单机模式与伪分布式模式安装

...Hadoop完全分布式环境,搭建Hadoop环境请参考:【Hadoop入门基础教程】4、Hadoop之完全分布式环境搭建开发环境硬件环境:CentOS 6.5服务器4台(一台为Master节点,三台为Slave节点) 软 查看详情

spring之环境搭建sts工具和第一个spring程序

一、下载spring的jar包:地址:https://repo.spring.io/webapp/#/artifacts/browse/tree/General/libs-milestone  下载完后,所需jar包:    查看详情

新唐nuc980使用记录:开发环境准备与编译配置基础说明(代码片段)

...章目录目的开发环境准备调试烧录环境开发编译环境编译工具链uboot和linuxbuildroot应用程序示例NUC980NuWriterLinuxcommandlinetool编译配置基础说明开发编译工作目录U-BootLinuxKernel总结目的微处理器开发使用前需要先准备相应的开发环境&#... 查看详情

基于区块链的投票系统的设计与实现之环境的搭建

...ramework.com/ganache/ Node.js 是让js在服务器进行编译的工具。Git是一款免费、开源的分布式版本控制系统。Truffle框架提供智能合约编译运行部署一条龙服务,因此用它辅助发开智能合约非常方便。Ganache是DApp的测试 查看详情

工具技巧php之phalcon环境搭建(代码片段)

...架。我们的使命是给开发者一个开发web站点和应用的高级工具,让开发者不用担心框架的性能问题.官网地址:Phalcon7让一切变得简单!—Phalcon71.3.2文档1.安装phalocn(1)下载phalocncd/usr/local/srcgitclone--depth=1gi 查看详情

工具技巧php之phalcon环境搭建(代码片段)

...架。我们的使命是给开发者一个开发web站点和应用的高级工具,让开发者不用担心框架的性能问题.官网地址:Phalcon7让一切变得简单!—Phalcon71.3.2文档1.安装phalocn(1)下载phalocncd/usr/local/srcgitclone--depth=1gi 查看详情

vue的开发环境与项目的创建

...必须要安装nodejs 2、搭建vue的开发环境,安装vue的脚手架工具官方命令行工具 npminstall--globalvue-cli/cnpminstall--globalvue-cli(此命令只需要执行一次) 3、创建项目必须cd到 查看详情