当前位置: 首页 > news >正文

搭建微信小程序环境及项目结构介绍

一、注册

访问微信公众平台,将鼠标的光标置于账号分类中的小程序上,
在这里插入图片描述
点击‘查看详情
在这里插入图片描述
点击“前往注册
在这里插入图片描述
下方也可以点击注册
在这里插入图片描述
小程序注册页面
步骤a:进入小程序注册页,根据指引填写信息提交相应的资料,完成账号申请。
注意:
每个邮箱仅能申请一个小程序
作为登录账号,请填写未被微信公众平台注册未被微信开放平台注册未被个人微信号绑定的邮箱。
在这里插入图片描述
也可以 创建测试号,免注册快速体验小程序开发。立即申请
在这里插入图片描述
了解更多:开发辅助/测试号

为方便开发者开发和体验小程序、小游戏的各种能力,开发者可以申请小程序或小游戏的测试号,并使用此账号在开发者工具创建项目进行开发测试,以及真机预览体验。
申请测试号的过程非常简单。只需访问 申请地址 ,并使用微信扫描二维码,即可获得为自己分配好的小程序和小游戏测试账号。

步骤b:使用申请的微信公众平台账号登录小程序后台,单击开发 > 开发管理>开发设置,可以看到小程序的AppID(小程序的唯一标识)请记录AppID,后续操作中需要使用
小程序后台
在这里插入图片描述
AppSecret(小程序密钥)可以点击生成,只有第一次能够查看(需要复制粘贴保存下来),后面出于安全考虑,AppSecret不再被明文保存,忘记密钥请点击重置
在这里插入图片描述
步骤c: 在开发设置 > 服务器域名 > request合法域名中填入您的已备案域名(此处可以暂时不操作)。
使用 微信云开发 或 微信云托管 ,无需配置服务器域名,省心省力。如业务访问需要安全防护,可使用 Donut 安全网关 ,防爬防刷防攻击,实现业务安全。点击了解更多 域名配置要求
在这里插入图片描述

二、安装小程序开发环境并创建项目

1. 安装Node.js开发环境,请到Node.js页面下载并安装Node.js环境。
安装过程可参考:IDEA中Node.js环境下npm报错Error:0308010C:digital envelope routines:unsupported
安装配置nvm-windows对Node.js与npm进行版本控制

2. 下载并安装微信小程序开发工具。详细信息请参见开发工具下载。
在这里插入图片描述

3. 打开微信开发者工具,然后使用微信扫码登录。
4. 单击加号创建微信小程序示例项目。
在这里插入图片描述
5. 填写项目信息,最后单击新建。
项目名称:例如lifeAssistant
目录:例如D:\project\WeChatProjects\lifeAssistant
AppID小程序的唯一标识,从小程序控制台获取,参考步骤b
开发模式小程序
后端服务不使用云服务
在这里插入图片描述
三、小程序的项目结构

lifeAssistant
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json
├── sitemap.json
└── utils└── util.js

在这里插入图片描述

在这里插入图片描述

可以看到小程序的项目结构中有三种前缀为app的文件,它们定义了小程序的一些全局配置
app.json小程序的全局配置,用于配置小程序的页面列表默认窗口标题导航栏背景色等。更多请参见全局配置。
app.wxss 定义了全局样式,作用于当前小程序的所有页面
app.js 用于注册小程序应用,可配置小程序的生命周期声明全局数据调用丰富的 API

小程序所有的页面文件都在pages/路径下,页面文件有四种文件类型,分别是.js.wxml.wcss、和.json后缀的文件。
相比全局配置文件(三种前缀为app的文件)页面配置文件只对当前页面生效。
其中.wxml文件定义了当前页面的页面结构
小程序中的所有页面都需要在app.json文件中声明。更多请参见代码构成。
//app.json文件如下

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

此外,项目顶层还有开发工具配置文件project.config.json和爬虫索引文件sitemap.json。

其他
说明: 微信小程序提供了丰富的前端API和服务端API,您可以基于这些API来实现您的小程序功能,更多请参见小程序 API 使用说明。

现在微信小程序的环境搭建成功了,可以开始根据需求,开始编写前后端代码。

三、本地调试

1. 本地运行后端服务。。
2. 关闭小程序开发者工具HTTPS安全性校验
a. 单击工具栏中的设置 > 项目设置 > 本地设置
b. 在本地设置中勾选不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书
3. 接下来可以调用本地后端服务进行小程序的调试。

在这里插入图片描述

相关文章:

搭建微信小程序环境及项目结构介绍

一、注册 访问微信公众平台,将鼠标的光标置于账号分类中的小程序上, 点击‘查看详情’ 点击“前往注册” 下方也可以点击注册: 小程序注册页面: 步骤a:进入小程序注册页,根据指引填写信息和提交相应的资料&#x…...

Python通过pyecharts对爬虫房地产数据进行数据可视化分析(一)

一、背景 对Python通过代理使用多线程爬取安居客二手房数据(二)中爬取的房地产数据进行数据分析与可视化展示 我们爬取到的房产数据,主要是武汉二手房的房源信息,主要包括了待售房源的户型、面积、朝向、楼层、建筑年份、小区名称…...

关于测试组件junit切换testng的示例以及切换方式分享

文章目录 概要首先看看junit和testng的区别实践篇摸拟业务逻辑代码简单对象数据层摸拟类业务逻辑层摸拟类后台任务摸拟类 基于springmockjunit基于springmocktestng 示例的差异点junit与testng的主要变动不大,有以下几个点需要注意注解部分在before,after中testng多出按配置执行…...

nginx 内存管理(二)

共享内存 共享内存结构与接口定义nginx共享内存在操作系统上的兼容性设计互斥锁锁的结构体锁的一系列操作(core/ngx_shmtx.c)创建锁 原子操作nginx的上锁操作尝试加锁获取锁释放锁强迫解锁唤醒等待进程 slab共享内存块管理nginx的slab大小规格内存池结构…...

【DevChat】智能编程助手 - 使用评测

写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成…...

Geek challenge 2023 EzHttp

打开链接需要使用post请求提交username和password 查看源码得到提示,爬虫想到robots协议 访问robots.txt 访问得到的路径:/o2takuXXs_username_and_password.txt 拿到用户名和密码: username:admin password:dm1N123456r00t# 进行post传参…...

matlabR2021a正版免费使用

目录 matlab介绍: 安装: matlab介绍: MATLAB(Matrix Laboratory的缩写)是一种高级技术计算和编程环境,由MathWorks公司开发。它在科学、工程、数据分析和数学建模领域中广泛应用,为用户提供了…...

天气数据可视化平台-计算机毕业设计vue

天气变幻无常,影响着我们生活的方方面面,应用天气预报信息可以及时了解天气的趋势,给人们的工作、生活等带来便利,也可以为我们为未来的事情做安排和打算,所以一个精准的、易读 通过利用 程序对气象网站大量的气象信息…...

揭秘Java switch语句中的case穿透现象

揭秘Java switch语句中的case穿透现象 1. switch 语句简介2. case穿透现象的原因关于 goto 3. switch和if的区别4. 总结 导语:在 Java 开发中,我们经常使用switch语句来进行条件判断和分支选择。然而,有一个令人困惑的现象就是,当…...

Java-API简析_java.io.FilterOutputStream类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/134106510 出自【进步*于辰的博客】 因为我发现目前,我对Java-API的学习意识比较薄弱…...

C语言 每日一题 PTA 10.29 day7

1.特殊a串数列求和 给定两个均不超过9的正整数a和n,要求编写程序求a aa aaa⋯ aa⋯a(n个a)之和。 输入格式: 输入在一行中给出不超过9的正整数a和n。 输出格式: 在一行中按照“s 对应的和”的格式输出。 思路 n…...

持续集成部署-k8s-服务发现-Ingress 路径匹配与虚拟主机匹配

持续集成部署-k8s-服务发现-Ingress 路径匹配与虚拟主机匹配 1. 安装 Ingress-Nginx2. 创建要代理的 Service3. 创建一个新的 Ingress-Nginx1. 安装 Ingress-Nginx 要使用 Ingress-Nginx 首先第一步是需要先安装它,安装的步骤可以参考:持续集成部署-k8s-服务发现-Ingress 2…...

selenium工作原理和反爬分析

一、 Selenium Selenium是最广泛使用的开源Web UI(用户界面)自动化测试套件之一,支持并行测试执行。Selenium通过使用特定于每种语言的驱动程序支持各种编程语言。Selenium支持的语言包括C#,Java,Perl,PHP,Python和Ru…...

windows电脑安装系统后固态硬盘和机械硬盘的盘符号顺序显示错乱,解决方法

一、场景 由于电脑磁盘是SSD固态硬盘自己拓展的1T机械硬盘组成,固态硬盘分为C、D两个盘区,机械硬盘分为E、F两个盘区。为了提升运行速度,系统安装在C盘,安装完成后按照习惯盘区顺应该为C、D、E、F,但实际情况却是D、E…...

自定义控件的子控件布局(onLayout()方法)

onLayout()方法用于指定布局中子控件的位置,该方法通常在自定义的ViewGroup容器中重写。 重写onLayout()方法中的常用方法: getChildCount() 获取子控件数量 getChildAt( int index ) 获取指定index的子控件,返回View view.getVisibilit…...

vscode提取扩展出错xhr

在 Visual Studio Code (VSCode) 中提取扩展出现 XHR 错误通常意味着在下载扩展或进行扩展管理操作时出现了网络请求问题。XHR (XMLHttpRequest) 是一种用于在浏览器中进行 HTTP 请求的技术,通常用于获取数据或资源。在 VSCode 中,它也可用于管理扩展的下…...

Docker 笔记(上篇)

Docker 概述 Docker 概念 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之…...

python自动化测试(六):唯品会商品搜索-练习

目录 一、配置代码 二、操作 2.1 输入框“运动鞋” 2.2 点击搜索按钮 2.3 选择品牌 2.4 选择主款 2.5 适用性别 2.6 选择尺码 2.7 选择商品:(通过css的属性去匹配) 2.8 点击配送地址选项框 一、配置代码 # codingutf-8 from selen…...

深度强化学习用于博弈类游戏-基础测试与说明【1】

深度强化学习用于博弈类游戏-基础【1】 1. 强化学习方法2. 强化学习在LOL中的应⽤2.1 环境搭建2.2 游戏特征元素提取1)小地图人物位置:2)人物血量等信息3)在整个图像上寻找小兵、防御塔的位置4)自编码器提取3. 策略梯度算法简介参考资料1. 强化学习方法 伴随着人工智能的潮起…...

通过requests库使用HTTP编写的爬虫程序

使用Python的requests库可以方便地编写HTTP爬虫程序。以下是一个使用requests库的示例: import requests# 发送HTTP GET请求 response requests.get("http://example.com")# 检查响应状态码 if response.status_code 200:# 获取响应内容html response.…...

VIT模型IP核需要修改的地方

导入路径 "D:\VIT\HG-PIPE\instances\proj_ATTN0\work"选择“open project”整合多个 HLS IP 时 遇到“撞名”此时会报错:Top function not found: there is no function named top INFO: [HLS 200-1510] Running: set_directive_top -name top top...

BilibiliDown终极指南:三步搞定B站视频下载,支持批量收藏夹与UP主作品

BilibiliDown终极指南:三步搞定B站视频下载,支持批量收藏夹与UP主作品 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https:…...

硬件工程师成长指南:从理论到实战的完整路径

1. 硬件工程师的成长路线:从理论到实践的完整规划作为一名从业十年的硬件工程师,我见过太多新人一上来就埋头焊板子、调电路,结果浪费大量时间在低水平重复。硬件设计就像下围棋,没有全局思维的人永远只能当个业余爱好者。今天我想…...

超越简单拼接:如何用SuperFusion的语义约束,让你的图像融合结果直接服务于目标检测与分割?

超越简单拼接:语义约束如何重塑图像融合的下游任务价值 当红外与可见光图像在自动驾驶感知系统中相遇时,工程师们往往面临一个两难选择:追求视觉上自然的融合效果,还是确保关键目标特征能被检测算法准确识别?传统融合方…...

RRFLibraries:Duet 3D打印机固件的硬实时C++驱动库

1. RRFLibraries 项目概述RRFLibraries 是 RepRapFirmware 生态系统中高度工程化的底层软件基础设施,其定位并非通用型嵌入式库,而是专为 3D 打印固件——特别是 Duet 系列控制器(Duet 2 WiFi、Duet 3 Mainboard、Duet 3 Mini)——…...

终极指南:深度解析ExplorerBlurMica如何用3大核心技术重塑Windows文件资源管理器透明美化体验

终极指南:深度解析ExplorerBlurMica如何用3大核心技术重塑Windows文件资源管理器透明美化体验 【免费下载链接】ExplorerBlurMica Add background Blur effect or Acrylic (Mica for win11) effect to explorer for win10 and win11 项目地址: https://gitcode.co…...

Arrow终极指南:5步掌握可视化游戏叙事设计工具

Arrow终极指南:5步掌握可视化游戏叙事设计工具 【免费下载链接】Arrow Game Narrative Design Tool 项目地址: https://gitcode.com/gh_mirrors/arrow/Arrow Arrow是一款免费开源的游戏叙事设计工具,专门用于创建互动非线性故事和文本冒险游戏。这…...

手把手教你用CH32V208开发板实现蓝牙BLE5.3通信(附完整工程源码)

基于CH32V208开发板的蓝牙BLE5.3实战开发指南 在物联网设备爆发式增长的今天,低功耗蓝牙(BLE)技术因其低功耗、低成本的优势,成为短距离无线通信的首选方案之一。作为一款集成了BLE5.3模块的RISC-V微控制器,CH32V208为…...

Qwen3.5-4B-Claude-Opus部署案例:FastAPI+supervisor托管的生产级Web服务搭建

Qwen3.5-4B-Claude-Opus部署案例:FastAPIsupervisor托管的生产级Web服务搭建 1. 模型与部署概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF 是一个基于 Qwen3.5-4B 的推理蒸馏模型,重点强化了结构化分析、分步骤回答、代码与逻辑类问题的处…...

ECharts 进阶:用pictorialBar打造沉浸式3D数据看板

1. 从立体柱状图到3D数据看板的进化之路 第一次看到pictorialBar这个配置项时,我正对着产品经理要求的"科技感大屏"发愁。传统柱状图在会议室大屏上就像黑白电视一样乏味,直到发现ECharts这个隐藏技能——用几行代码就能把平面图表变成带光影效…...