微信小程序入门教程 --（保姆级）-程序员宅基地

技术标签： 微信小程序  前端  

一、小程序注册

1、首先，到小程序官网注册自己的小程序账号，以下附有地址和教程：
小程序官网
进入这个地址之后，会看到这样的页面，点击立即注册按钮
在这里插入图片描述
2、在接下来的页面，选择小程序
在这里插入图片描述
3、然后根据提示完成三个注册步骤，(1).填写正确的邮箱和密码格式；(2).进行邮箱激活，在自己的邮箱里会收到一条验证信息，点击激活即可；(3).填写信息，进行信息登记，完成三个步骤即注册完成。
在这里插入图片描述
4、注册完成后，返回首页进行登录，用自己的微信扫描首页的二维码即可登录。
在这里插入图片描述
5、登录成功之后，按下面步骤找到自己的微信小程序 Id 账号。
在这里插入图片描述

二、下载微信开发者工具

1、下载

微信开发者工具就是开发微信小程序的一个编译工具，点击以下官网地址进行下载和安装。
微信开发者工具下载（稳定版）

2、安装

进入链接之后，选择适合自己系统的进行下载，下载完成之后，双击安装包进行安装，步骤如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、完成

点击完成之后会弹出一个二维码，用自己的微信扫描二维码，然后再手机上确认，就会弹出这样一个页面，接下来就可以新建第一个项目了。
在这里插入图片描述

三、新建项目

1、如果微信开发者工具下载完成之后没有弹出以上新建页面，就双击打开微信开发者工具，图标如下所示：
在这里插入图片描述
2、可以在桌面或者某一个文件夹里面创建一个空的文件夹，名字任意英文字母组成，例如：
在这里插入图片描述
3、点击+号，新建第一个项目
在这里插入图片描述
4、选择自己创建的文件夹目录，AppID 是刚才注册小程序的 ID 账号，复制粘贴即可，然后后端服务选择 不适用云服务，模板可以选择JavaScript基础模板，（如果你会 TypeScript ，也可以选择TypeScript 基础模板），然后点击确定即可创建第一个项目。
在这里插入图片描述
5、创建完成之后，进入到项目页面，如下所示：
在这里插入图片描述

四、项目目录介绍

1、工具介绍

在这里插入图片描述

2、项目目录介绍

在这里插入图片描述

  1. pages 用来存放所有小程序的页面
  2. utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
  3. .eslintrc.js 检测代码样式格式的文件
  4. app.js 小程序项目的入口文件
  5. app.json 小程序项目的全局配置文件
  6. app.wxss 小程序项目的全局样式文件
  7. project.config.json 项目的配置文件
  8. project.private.config.json 项目私有配置文件
  9. sitemap.json 用来配置小程序以及页面是否允许被微信索引
3、创建新页面

在 app.json 文件中，pages 目录下，添加 home 页面，写在最上面就会显示在模拟器中，保存之后会自动生成home页面。不要忘了加英文逗号！！！
在这里插入图片描述

4、书写简单样式

以下是简单的页面编写示范：接下来就可书写代码了，下面是随意创建了一个页面，演示了一些简单的代码，更多基础内容详解可查看首页其他文章。
在这里插入图片描述

五、微信小程序开发文档

微信小程序开发文档
上面这个是微信小程序开发文档的地址链接, 有各种不懂的问题都可以去查阅文档，有微信小程序开发步骤，各种 API 和组件等等。
在这里插入图片描述
这些是小程序入门教程，更多基础内容，可点击我的头像去个人中心查看，后续会持续更新~

希望各位不要吝啬，给个小赞赞~
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58953167/article/details/127851596

智能推荐

是选impala还是presto_SQL查询引擎对峙：Spark VS Impala VS Hive VS Presto-程序员宅基地

文章浏览阅读519次。近日，AtScale公布了第四季度主流大数据SQL引擎的测试结果，主要针对Spark、Impala、Hive/Tez以及Presto。测试结果证实了我们早已实践出的一些事情：Impala是中等大小数据库查询的最佳选择，并且已经积累了不少用户，Presto在这方面也做得不错。Hive和Spark更适用于长时间分析查询。AtScale产品管理方面副总Joshua Klar表示，许多公司客户使用两个引擎..._presto和tez

atop用法_atop是什么意思_atop的翻译_音标_读音_用法_例句_爱词霸在线词典-程序员宅基地

文章浏览阅读590次。全部在顶上Parapet applies to any low fortification, typically a wall atop a rampart.Parapet指低矮的防御工事, 典型的是壁垒上的墙.期刊摘选Pieprz: The University of Balamand is atop a dramatic hilltop site near Tripoli, north of ..._from atop

华为鸿蒙应用市场抽成,谷歌宣布抽成30%，开发者把华为鸿蒙看做是取代安卓的唯一救星...-程序员宅基地

文章浏览阅读3.4k次。都知道苹果最近因为抽成30%而被围攻，才不得已宣布暂停部分应用的抽成30%的规则，库克焦头烂额的同时，谷歌却要迎着炮火宣布将和苹果一样抽成30%，并且规定在谷歌应用商店的应用，必须使用谷歌自己的支付系统，不得使用应用内的独立系统，类似游戏和视频网站的APP，都下想着绕过谷歌的抽成。这表明谷歌正在收紧对Android系统的限制，此前已经收紧了，要求包括安卓在内的系统开机画面都必须有android的l..._鸿蒙系统有游戏抽成吗?

软工专硕考研_03 2018年考研经验贴：西安交通大学软件工程专硕-程序员宅基地

文章浏览阅读1k次。2018年考研经验贴西安交通大学软件工程专硕一切已经尘埃落定，录取结果已出，初试360，数学115，专业课119，英语67，政治59，录取方向云计算，说实话，一年中的甜大于苦，并没有想象中的那么难。西安交通大学软件工程专硕初试科目915(数据结构与程序设计)复试(四选二数据库操作系统微机原理与接口技术数字逻辑与系统设计)回忆下我一年中的经历：2月份到开学：过完年订下了考研的目标后，就开始收集相关信..._西安交通大学软工专硕

Yii框架报错修复2：Class 'app\controllers\YII' not found_yii2 class 'tekintian\pinyin_utils\pinyin' not fou-程序员宅基地

文章浏览阅读4.8k次。Yii框架报错修复2：Class 'app\controllers\YII' not foundYII类是全局类，应用时需要加上 \$id = \YII::$app->request->get('id');_yii2 class 'tekintian\pinyin_utils\pinyin' not found

Install Oracle Database 12 In Oracle Linux 6.5_install oracle database in linux-程序员宅基地

文章浏览阅读334次。原文出处 http://www.unixmen.com/install-oracle-database-12-oracle-linux-6-5/?utm_source=tuicoolIn this tutorial, I’d like to show you step by step latest Oracle installation in Oracle Linux 6.5 64bi_install oracle database in linux

随便推点

php依赖注入的三种方式,依赖反转 和 依赖注入 (PHP)-程序员宅基地

文章浏览阅读453次。读了文章 《深入探討依賴注入》做下笔记和总结文章主要说了这样一个思想进阶过程：传统实现 ——Interface(依赖反转)——工廠模式 ——Constructor Injection(依赖注入)——Method Injection1.传统实现class ShippingService{/*** @param string $companyName* @param int $weigh..._php依赖注入的三种方式

LearnTheArchitecture-MemoryManagement-程序员宅基地

文章浏览阅读948次，点赞19次，收藏22次。使用虚拟地址的好处是它允许管理软件，例如操作系统 (OS)，控制呈现给软件的内存视图。 操作系统可以控制哪些内存是可见的、该内存可见的虚拟地址以及允许对该内存进行哪些访问。 这允许操作系统沙盒应用程序（对另一个应用程序隐藏一个应用程序的资源）并提供对底层硬件的抽象。使用虚拟地址的一个好处是，操作系统可以将多个碎片化的内存物理区域作为单个、连续的虚拟地址空间呈现给应用程序。虚拟地址也有利于软件开发人员，他们在编写应用程序时不会知道系统的确切内存地址。 使用虚拟地址，软件开发人员无需关心物理内存。 应用

WebAssembly 的魅力：高效、安全、跨平台(下)_webassembly 技术分享-程序员宅基地

文章浏览阅读1.7k次，点赞30次，收藏25次。选择要加速的代码：首先，需要确定要加速的代码部分。这可能是计算密集型的任务，如图像处理、数据压缩、加密等。编写 WebAssembly 代码：使用支持 WebAssembly 的编程语言（如 C、C++、Rust 等）编写要加速的代码。确保代码符合 WebAssembly 的规范和语义。编译为 WebAssembly：使用相应的编译器将编写的代码编译为 WebAssembly 格式的二进制模块。嵌入 WebAssembly 模块：将生成的 WebAssembly 模块嵌入到 HTML 页面中。_webassembly 技术分享

Push rejected: Push to origin/master was rejected错误解决方案_push rejected push lesson-init to origin/lesson-in-程序员宅基地

文章浏览阅读4.1k次，点赞6次，收藏9次。解决方案如下：1.切换到自己项目所在的目录，右键选择GIT BASH Here，Idea中可使用Alt+F122.在terminl窗口中依次输入命令：git pullgit pull origin mastergit pull origin master --allow-unrelated-histories3.在idea中重新push自己的项目，成功！！！如果还不行：git push -u origin master -f..._push rejected push lesson-init to origin/lesson-init was rejected by the rem

Spring MVC + AJAX + Jquery ajax callback to success function is not working_ajaxcallback(action,data,cb,notshow)-程序员宅基地

文章浏览阅读1.8k次。There is some problem with callback function of Ajax by returning string value from Spring Controller. I want the image to be uploaded asynchronously, Upload is successful but the page is redirecting _ajaxcallback(action,data,cb,notshow)

poi填充word模板_poi 填充word模板-程序员宅基地

文章浏览阅读1.1k次。前提：用的都是poi的包，网上看到很多方式，我用了几个都没成功，自己倒腾了下、1 word模板提前制作好给填充的地方增加书签2代码package io.renren.common.utils;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java..._poi 填充word模板

推荐文章

热门文章

相关标签