使用微信开发者工具创建运行项目全流程

小程序基础知识

1. 认识什么是小程序

什么是微信小程序

微信小程序是一种运行在微信内部的 轻量级 应用程序。

在使用小程序时 不需要下载安装,用户 扫一扫 或 搜一下 即可打开应用。它也体现了 “用完即走” 的理念,用户不用关心安装太多应用的问题。它实现了应用“触手可及”的梦想,应用无处不在,随时可用,但又 无须安装卸载。

在这里插入图片描述

特点:

小程序的四大特性:无须安装、用完即走、无须卸载、触手可及

  1. 无须安装:体积小,用户感知不到下载的过程
  2. 触手可及:用户 扫一扫 或 搜一下 即可打开应用,通过下拉能访问使用的小程序
  3. 用完即走,无须卸载

在这里插入图片描述

2. 微信小程序账号注册

小程序开发 与 网页开发不一样,在开始微信小程序开发之前,需要访问 微信公众平台,注册一个微信小程序账号。

在拥有了小程序的账号以后,我们才可以开发和管理小程序,后续可以通过该账号进行开发信息的设置、成员的添加,也可以用该账号查看、运营小程序的相关数据。

📌 注意事项

在申请账号前,我们需要先准备一个邮箱,该邮箱要求:

1️⃣ 未被微信公众平台注册❗

2️⃣ 未被微信开放平台注册❗

3️⃣ **未被个人微信号绑定过 !**如果被绑定了需要解绑 或 使用其他邮箱 ❗

  1. 打开 微信公众平台,点击立即注册

在这里插入图片描述

  1. 选择注册的帐号类型,在这里我们需要 选择小程序

在这里插入图片描述

  1. 输入账号信息

在这里插入图片描述

  1. 邮箱激活,需要进入邮箱进行激活

在这里插入图片描述

在这里插入图片描述

  1. 信息登记,注册类型 (需要选择中国大陆和个人,企业其他需要资质认证)

在这里插入图片描述

  1. 主体信息登记与确认

    📌 注意:

    ​ 在进行管理员身份验证的时候,推荐使用自已的微信进行扫码,

    ​ 将自已设置为小程序账号的管理员,方便以后对小程序进行开发、成员等相关的设置

在这里插入图片描述

在这里插入图片描述

  1. 小程序注册完成,点击前往小程序,即可进入小程序后台

在这里插入图片描述
在这里插入图片描述

3. 完善小程序账号信息

在完成小程序账号的注册后,你便可以打开微信公众平台对小程序账号进行一些设置,这是你开发前的准备工作,完善后才可以进入后续的开发步骤,这是因为小程序在后续进行提交审核的时候,小程序账号信息是必填项,因此在注册小程序以后,需要补充小程序的基本信息,如名称、图标、描述等。

📌 注意事项

​ 在填写小程序类目时不要选择游戏类型,否则微信官方将会视为小游戏开发 ❗

在这里插入图片描述

点击 前往填写,填写小程序基本信息即可

在这里插入图片描述

点击 前往设置 , 设置小程序类目信息

  1. 点击右上角添加类目

    在这里插入图片描述

  2. 管理员授权

在这里插入图片描述

  1. 手机微信进行认证

在这里插入图片描述

  1. 添加小程序类目,注意:选择类目的时候不要选择小游戏类目 !!!!

在这里插入图片描述
在这里插入图片描述

4. 小程序开发者 ID

小程序的开发者账号是免费的,只要开发者满足开发资质就可以免费注册,并且会获得对应的开发者 ID

一个完整的开发者 ID 由 **小程序 ID(AppID)**和一个 **小程序密钥(AppSecret)**组成。

小程序 ID 即 AppId 是小程序在整个微信账号体系内的唯一身份凭证,后续在很多地方都会用到,例如:新建小程序项目、真机调试、发布小程序等操作时,必须有小程序 ID。

小程序密钥 是开发者对小程序拥有所有权的凭证,在进行 微信登录、微信支付,或进行发送消息等高级操作时会使用到

在微信公众后台,单击左侧开发标签,选择 “开发管理”,在新的页面中点击 “开发设置”,就可以看到开发者 ID 信息。请妥善保管你的小程序 ID 和小程序密钥,在后续的开发中会经常使用到,获取位置见下图:

在这里插入图片描述

5. 开发成员和体验成员

小程序提供了两种不同的成员角色:项目成员体验成员

项目成员:参与小程序开发、运营的成员,可登陆小程序管理后台,包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员,并设置项目成员的角色。

体验成员:参与小程序内测体验的成员,可使用体验版小程序,但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

在这里插入图片描述

在这里插入图片描述

6. 微信开发者工具

为了帮助开发者简单和高效地开发和调试微信小程序,微信官方提供了 微信开发者工具,利用开发者工具可以很方便地进行小程序开发、代码查看以及编辑、预览和发布等功能。

在 微信开发者工具 下载页面,可以看到微信开发者工具包含三个版本:

  1. 稳定版:稳定性高,开发中一般推荐大家使用稳定版本

  2. 预发布版:稳定性尚可,一般包含新的、大的特性,通过了内部测试

  3. 开发版:稳定性差,主要用于尽快修复缺陷和敏捷上线小的特性,如果想体验新特性,可以使用这个版本

在这里插入图片描述

选择合适的版本进行下载,在下载完成后,双击下载好的微信开发者工具安装包,根据引导点击下一步、我接受、直至安装完成。第一次使用微信开发者工具的时候,需要使用手机微信扫码登录,登录成功即可进入项目选择界面

📌 注意事项

​ 微信开发者工具必须联网使用 ❗

在这里插入图片描述

在这里插入图片描述

8. 创建小程序项目

创建项目

使用小程序开发者工具创建一个新的项目,步骤如下:

  1. 打开微信开发者工具,左侧选择小程序,点击 + 号即可新建项目

在这里插入图片描述

  1. 在弹出的新页面,填写项目信息

    • 项目名称:输入项目名称
    • 目录:选择小程序开发文件夹,注意:小程序的目录建议是空目录,否则官方会有提示,见下图
    • AppID:填写自己申请的小程序 AppID
    • 开发模式:选择小程序
    • 后端服务:选择不使用云服务
    • 模板选择:选择不使用模板

在这里插入图片描述

  1. 点击确定,如果能够看到小程序的开发主界面,说明小程序项目已经创建成功

在这里插入图片描述

开发者工具设置

为了后续高效的对小程序项目进行开发,我们需要对微信开发者工具进行一些个性化的设置,例如:设置模拟器位置、编辑器主题、编辑区行高等,当然你可以继续使用官方默认的,也可以按照自己的喜好设置,设置步骤如下:

  1. 将小程序模拟器移动右侧:点击菜单栏的 视图 ➡ 外观 ➡ 将模拟器移到右侧,小程序模拟器即可调整到右侧

在这里插入图片描述

在这里插入图片描述

  1. 小程序主题设置,点击菜单栏的 设置 ➡ 外观设置 ➡ 在弹框中将主题和调试工具选择为深色

在这里插入图片描述

在这里插入图片描述

  1. 编辑区的设置,点击菜单栏的 设置 ➡ 编辑器设置 ➡ 按照自己的洗好调整行距和字号,或者其他设置

在这里插入图片描述

9. 小程序目录结构和文件介绍

在将小程序项目创建好以后,我们先来熟悉小程序项目的目录结构,如下图:

在这里插入图片描述

一个完整的小程序项目分为两个部分:主体文件页面文件

主体文件 又称小程序全局文件,顾名思义,全局文件能够作用于整个小程序,影响到小程序的每个页面,且主体文件必须放到项目的根目录下,主要由三部分组成:

文件名作用是否必须
app.js小程序入口文件必须
app.json小程序的全局配置必须
app.wxss小程序的全局样式非必须

页面文件 是每个页面所需的文件,小程序页面文件都存放在 pages 目录下,一个页面一个文件夹,每个页面通常由四个文件组成,每个文件只对当前页面有效:

文件名作用是否必须
.js页面逻辑必须
.wxml页面结构必须
.wxss页面样式非必须
.json页面配置非必须

📌 注意事项

  1. 页面文件,wxss、json 文件能够覆盖主体文件中的样式和配置
  2. 强烈建议:页面文件夹名称和页面文件名称要保持一致 感叹号

新建小程序文件和文件夹作用清单:

├─pages	                    ➡ 小程序页面存放目录
│
│  ├─index				   ➡ index 文件夹代表是 index 页面所需的文件
│  │      index.js          ➡ index 页面逻辑
│  │      index.json        ➡ index 页面配置
│  │      index.wxml        ➡ index 页面结构
│  │      index.wxss        ➡ index 页面样式
│  .eslintrc.js              ➡ Eslint 配置文件
│  app.js                    ➡ 小程序入口,即打开小程序首页执行的项目
│  app.json                  ➡ 小程序的全局配置
│  app.wxss                  ➡ 小程序的全局样式
│  project.config.json       ➡ 小程序开发者工具配置
│  project.private.config.json
│  sitemap.json              ➡ 小程序搜索优化

10. 如何调试小程序

在进行项目开发的时候,不可避免的需要进行调试,那么如何调试小程序呢 ?

📌 注意事项:

微信开发者工具缓存非常严重❗❗❗❗

如果发现代码和预期不一样,先点击编译❗

编译后还是没有达到预期的效果,就需要清除缓存❗ 甚至重启项目才可以❗

在这里插入图片描述

在这里插入图片描述

11. 如何新建页面

第一种方式:

  1. 在 pages 目录上 点击右键 新建文件夹,输入页面目录的名称,例如:list

  2. 在 list 目录上 点击右键 点击 page,输入页面文件的名称,例如:list

📌 注意事项:

  1. 在输入页面文件名称的时候,不要输入后缀名 ❗
  2. 新建页面成功以后,会在 app.json 的 pages 选项中新增页面路径

第二种方式:

在 app.json 的 pages 选项中,新增页面路径即可

在新增页面目录以后,会自动在 pages 目录下生成页面文件

12. 调试基础库

小程序调试基础库是指 微信开发者工具中可以选择的微信基础库版本。

微信基础库是指小程序的运行环境,给小程序提供了运行所需的各种 API 和工具,以及基础框架和运行逻辑等。

小程序开发者可以在微信开发者工具中选择所需的微信基础库版本,作为运行和调试小程序时的运行环境。

每个小程序有自己所允许使用的基础库最低版本要求,开发者需要选择要兼容的基础库版本,从而确保小程序的功能正常运行。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/36099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SyntaxError: Unexpected token ‘<‘ (at chunk-vendors.fb93d34e.js:1:1)打包后页面白屏vue

本地运行一切正常,打包到线上,页面一篇空白。我确定输入路径正确。。。 控制台报错,我就开始百度,有的说清空缓存就行了,但我清空了还是这样。。。 然后我就去排查原因。看到页面请求js,但是请求的好像有点…

技术市集 | 如何通过WSL 2在Windows上挂载Linux磁盘?

你是否常常苦恼,为了传输或者共享不同系统的文件需要频繁地在 Windows 和 Linux 系统之间切换,既耽误工作效率,也容易出错。 那么有没有一种办法,能够让你在Windows系统中像访问本地硬盘一样来操作Linux系统中的文件呢&#xff1…

2024肥晨赠书活动第三期:《前端工程化:基于Vue.js 3.0的设计与实践》

文章目录 内容简介作者简介关于《前端工程化:基于Vue.js 3.0的设计与实践》文章目录文章简介《前端工程化:基于Vue.js 3.0的设计与实践》全书速览结束语 内容简介 本书以Vue.js的3.0版本为核心技术栈,围绕“前端工程化”和TypeScript的知识点…

简单的springboot整合activiti5.22.0

简单的springboot整合activiti5.22.0 1. 需求 我们公司原本的流程服务是本地workflow模块以及一个远程的webService对应的activiti服务,其中activiti版本为5.22.0,之前想将activiiti5.22.0进行升级,选择了camunda,也对项目进行了…

数据处理:数据转译、取小数点后三位

发现一个好用的写法&#xff1a; 一、英转中 <div class"text" v-if"kaBuLe">卡布叻星星&#xff1a;{{ getChinese(kaBuLeType) }} </div>const pageData: {[propName: string]: any } reactive({kaBuLeType:, }) //对应中文 function get…

ArcGIS Pro SDK (七)编辑 3 地图拓扑

ArcGIS Pro SDK &#xff08;七&#xff09;编辑 3 地图拓扑 目录 ArcGIS Pro SDK &#xff08;七&#xff09;编辑 3 地图拓扑1 构建地图拓扑 环境&#xff1a;Visual Studio 2022 .NET6 ArcGIS Pro SDK 3.0 1 构建地图拓扑 private async Task BuildGraphWithActiveView()…

Hive 和 Hive 的 JDBC 区别

Hive 和 Hive 的 JDBC 主要有以下区别&#xff1a; 1. Hive&#xff1a; Hive 是一个基于 Hadoop 的数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供了类似 SQL 的查询语言 HiveQL 来查询数据。 HiveQL 支持类似于 SQL 的语法&#xff0c…

1、加密算法-MD5随机盐

一、说明 MD5消息摘要算法&#xff0c;属Hash算法一类。MD5算法对输入任意长度的消息进行运行&#xff0c;产生一个128位的消息摘要(32位的数字字母混合码)。 二、主要特点 不可逆&#xff0c;相同数据的MD5值肯定一样&#xff0c;不同数据的MD5值不一样 (一个MD5理论上的确…

torch_scatter::scatter_max 转onnx再转tensorrt踩坑记录

torch_scatter::scatter_max转onnx onnx转tensorRT 方法选择 自定义算子。在TensorRT中实现NonZero&#xff0c;该过程非常复杂&#xff0c;参考&#xff1a;https://blog.csdn.net/weixin_45878768/article/details/128149343

小程序开发平台源码系统——内容付费(知识付费)小程序功能 带完整的安装代码包以及搭建部署教程

系统概述 随着互联网的发展&#xff0c;人们对于知识和信息的获取需求日益增长。内容付费小程序应运而生&#xff0c;为用户提供了一个便捷、高效的知识交易平台。小程序开发平台源码系统则为开发者提供了构建内容付费小程序的基础和工具&#xff0c;使其能够快速打造具有个性化…

十年磨一剑,华火电燃组合灶重磅问世,引领厨房新时代

十年磨一剑&#xff0c;华火研发团队经过不懈努力&#xff0c;成功将等离子电生明火技术与电陶炉红外线光波炉技术精妙融合&#xff0c;打造出的这款具有划时代是意义的电燃组合灶HH-SZQP60&#xff0c;终于在 2024 年6月震撼登场&#xff0c;该灶以其卓越的创新技术和独特的产…

VAE-pytorch代码

import osimport torch import torch.nn as nn import torch.nn.functional as F from torch.utils.data import DataLoaderfrom torchvision import transforms, datasets from torchvision.utils import save_imagefrom tqdm import tqdmclass VAE(nn.Module): # 定义VAE模型…

增值电信业务经营许可证详解

最近有很多人问小编&#xff0c;什么是增值电信业务经营许可证?可能大家对这个名词还很陌生&#xff0c;不着急&#xff01;今天小编就给大家好好讲讲这个证到底是什么?为什么需要办这个这个证&#xff1f;它可以给企业带来什么&#xff1f; 带着疑问我们继续往下看。 什么…

一步步带你解锁Stable Diffusion:老外都眼馋的 SD 中文提示词插件分享

大家好我是极客菌&#xff01;今天我们继续来分享一个外国人都眼馋的 SD 中文提示词插件。 那我们废话不多说&#xff0c;直接开整。 SD 的插件安装&#xff0c;小伙伴们应该都会了吧&#xff0c;我这里再简单讲下哦&#xff0c;到「扩展」中的「可下载」中点击「加载扩展列表…

LangChain资料总结

1、LangChain介绍 - 莫尔索随笔 2、LangChain 介绍 | LangChain中文网:500页中文文档教程&#xff0c;助力大模型LLM应用开发从入门到精通 3、&#x1f308; Spring AI 语雀 4、AI全栈「AGI」 专栏 语雀 5、GitHub - langchain4j/langchain4j: Java version of LangChain…

国标GB/T 28181详解:国标GBT28181-2022的目录通知流程

目录 一、定义 二、作用 1、实时同步设备目录状态 2、优化资源管理和调度 3、增强系统的可扩展性和灵活性 4、提高系统的可靠性和稳定性 5、支持多级级联和分布式部署 6、便于用户管理和监控 三、基本要求 1、目录通知满足以下基本要求 2、关键要素 &#xff08;1…

码农在低空经济领域的就业机遇与技能准备

在当今快速发展的经济格局中&#xff0c;低空经济正逐渐崭露头角&#xff0c;成为一个充满潜力和创新的领域。对于广大码农来说&#xff0c;这无疑是一片有待开拓的职业新蓝海。那么&#xff0c;码农们如何在低空经济中找到属于自己的就业机会呢&#xff1f; 首先&#xff0c;…

python-立方和不等式

[题目描述] 试求满足下述立方和不等式的 m 的整数解。 1^32^3...m^3≤n。本题算法如下&#xff1a; 对指定的 n&#xff0c;设置求和循环&#xff0c;从 i1 开始&#xff0c;i 递增1取值&#xff0c;把 i^3 (或 i∗i∗i)累加到 s&#xff0c;直至 s>n&#xff0c;脱离循环作…

docker配置redis主从复制

下载redis,复制redis.conf 主节点(6379) 修改redis.conf # bind 127.0.0.1 # 注释掉这里 protected-mode no # 改为no port 6379从节点(6380) 修改redis.conf bind 127.0.0.1 protected-mode no # 改为no port 6380 replicaof 172.17.0.2 6379 # 这里的ip为主节点容器的i…

Oracle数据库使用指南基本概念

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…