走进小程序【二】微信小程序环境搭建并初始化第一个小程序项目

简介: 走进小程序【二】微信小程序环境搭建并初始化第一个小程序项目

🌟前言

哈喽小伙伴们,上一期带大家简单了解一下微信小程序,相信大家阅读之后也对微信小程序有了一定的认识。今天咱们继续小程序的第二篇,带大家手把手搭建小程序的开发环境以及属于我们自己的第一个的Hello Word小程序项目;话不多说,咱们直接开整!🤘

🌟开始

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。 跟随这个教程,开始你的小程序之旅吧!

1.进入微信公众平台,点击右上角的注册




2023-04-17.png2.选择小程序






2023-04-17 (1).png

3.申请账号

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。


2023-04-17 (2).png

4.在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。
登录 小程序后台 ,我们可以在菜单 开发-开发设置 看到小程序的 AppID 了 。


2023-04-17 (3).png

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号订阅号AppID)。

🌟微信开发者开发工具

有了小程序帐号之后,我们需要一个工具来开发小程序。

前往 开发者工具 下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》




2023-04-17 (4).png

这里推荐大家去下载稳定版🤘

🌟安装微信开发者工具

执行安装包,下载后双击执行文件




2023-04-17 (6).png



2023-04-17 (7).png

2023-04-17 (8).png2023-04-17 (9).png


2023-04-17 (10).png

2023-04-17 (11).png

如果出现以下这种问题



2023-04-17 (12).png

设置path变量:C:\Program Files (x86)\Tencent\微信web开发者工具\dll

具体要看你安装的位置,和node设置path方法一致


image.png

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧! 你的第一个小程序;

image.png

🌟你的第一个小程序

1.创建项目



image.png

左侧选择小程序,然后点击加号即可

image.png

按图所示全部选好以后,这里模板先选择第二个JavaScript - 基础模板进行开发

确定以后我们的第一个小程序项目就初始化好了

image.png

🌟目录结构

  • pages:页面文件夹,内部每一个文件夹既是一个页面;一个页面又由四部分组成:
文件后缀 作用
js 页面逻辑
json 页面配置
wxml 页面结构
wxss 页面样式表
  • utils:小程序所用得到公共类;
  • app.js:小程序的全局逻辑;
  • app.json:小程序的全局配置文件;
  • app.wxss:小程序的全局样式表;
  • sitemap.json: 微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中。


具体sitemap配置等后续用到咱们在细讲

image.png

🌟写在最后

这篇文章带着大家搭建了开发小程序所需的必要环境;后面几期我会带着大家做几个简单的案例,通过做案例来进一步熟悉小程序的基础知识生态。各位小伙伴让我们 let’s be prepared at all times!

目录
相关文章
|
13天前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
36 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
5天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
19 3
|
16天前
|
移动开发 小程序 前端开发
|
16天前
|
存储 运维 小程序
后端开发零负担!揭秘支付宝小程序云开发的高效与安全,你的项目也能飞速上线?
【8月更文挑战第27天】支付宝小程序云开发是由阿里云提供的集成开发环境,助力开发者高效、安全地构建小程序后端服务,免去服务器搭建,显著提高开发效率并降低运维成本。它集成了云函数、云数据库及云存储等功能,便于快速搭建后端逻辑。例如,仅需简单几行代码即可创建HTTP接口或进行数据管理。这使得开发者能更专注于业务逻辑和用户体验优化,同时平台还提供了强大的安全保障措施,确保数据安全和用户隐私。无论对于初创团队还是成熟企业,支付宝小程序云开发都能有效提升产品迭代速度和市场竞争力。
40 1
|
23天前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
22天前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
24天前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
28天前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
20天前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
221 65
|
13天前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图

热门文章

最新文章