1.微信小程序开发之准备工作

1.微信小程序账号注册

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

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

📌 注意事项

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

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

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

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

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

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

1.3 输入账号等注册信息

1.4 邮箱激活,需要进入邮箱进行激活

 

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

 

1.6 主体信息登记与确认

📌 注意:

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

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

 

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

 

 1.8 完善小程序账号信息

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

📌 注意事项

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

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

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

1.8.1 点击右上角添加类目

1.8.2 管理员授权

 1.8.3 手机微信进行认证

 1.8.4 添加小程序类目

 

 1.9  小程序开发者 ID

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

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

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

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

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

 

1.10 开发成员和体验成员

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

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

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

 


2.微信开发者工具

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

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

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

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

  3. 开发版:稳定性差,主要用于尽快修复缺陷和敏捷上线小的特性,如果想体验新特性,可以使用这个版本选择合适的版本进行下载,在下载完成后,双击下载好的微信开发者工具安装包,根据引导点击下一步、我接受、直至安装完成。第一次使用微信开发者工具的时候,需要使用手机微信扫码登录,登录成功即可进入项目选择界面

📌 注意事项

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

 


3.创建小程序项目

创建项目

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

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

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

  • 项目名称:输入项目名称

  • 目录:选择小程序开发文件夹,注意:小程序的目录建议是空目录,否则官方会有提示,见下图

  • AppID:填写自己申请的小程序 AppID

  • 开发模式:选择小程序

  • 后端服务:选择不使用云服务

  • 模板选择:选择不使用模板

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

 


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

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

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

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

文件名作用是否必须
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   ➡  项目私有配置文件(这个文件需要加入.gitignore文件)
│  sitemap.json              ➡ 小程序搜索优化(发布上线后的小程序可以在这个文件配置那些页面可以被直接检索到)

sitemap.json  文件:

project.config.json 文件:

 


 5.如何调试小程序

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

📌 注意事项:

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

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

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

 


 

6. 如何新建页面

第一种方式:

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

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

📌 注意事项:

  1. 在输入页面文件名称的时候,不要输入后缀名 ❗

  2. 新建页面成功以后,会在 app.json 的 pages 选项中新增页面路径

第二种方式:  

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

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

 


7.调试基础库

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

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

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

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

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

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

相关文章

springboot分页

1.代码分页 List<TbAjltData> pageViewList list.stream().skip((pageDomain.getPageNum() - 1) * pageDomain.getPageSize()).limit(pageDomain.getPageSize()).collect(Collectors.toList());2. Overridepublic List<TbAjk> selectTbAjkList(TbAjk tbAjk, Pag…

国网电力分公司、税务企业如何向央媒投稿?

税务、电力、银行等单位如果想要将稿件发布到中央媒体&#xff0c;可以遵循为大家整理的以下步骤和建议&#xff1a; 了解央媒的定位与要求&#xff1a;中央媒体&#xff0c;如新华社、人民日报、中央电视台等&#xff0c;都有其独特的报道风格和关注重点。在投稿前&#xff0…

【Web后端】会话跟踪技术及过滤器

1.会话跟踪技术 1.1 会话的概念 在web应用中&#xff0c;浏览器和服务器在一段时间内发送请求和响应的连续交互的全过程 1.2 会话跟踪概念 对同一个用户跟服务器的连续请求和接收响应的监视过程 1.3 会话跟踪作用 浏览器和服务器是以http协议进行通信&#xff0c;http协议是…

SD1005S控制电路LED光源恒流控制模块驱动放大器

SD1005S是一个集控制电路与发光电路于一体的智能外控LED光源。其外型与一个5050LED灯珠相同,每个 元件即为一个像素点。像素点内部包含了智能数字接口数据锁存信号整形放大驱动电路&#xff0c;防反接电路&#xff0c;还包含有 高精度的内部振荡器和高精度恒流控制模块&#xf…

LM3658单芯片充电器电源适配器50mA-1000mA充电电流

该LM3658是一个单芯片充电器IC专为手持应用。它 可以通过AC电源适配器或USB电源对单节锂离子/聚 合物电池进行安全充电和维护。USB/AC的输入电源 选择是自动的。两个电源同时存在时&#xff0c;交流电源优先 。当使用AC墙壁适配器时&#xff0c;充电电流通过外部电阻器 编程&am…

算法工程师面试问题 | YOLOv8面试考点原理全解析(一)

本文给大家带来的百面算法工程师是深度学习目标检测YOLOv8面试总结&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;我们还将介绍一些常见的深度学习目标检测面试问题&#xff0c;并提供参考的回答…

Vue中<style>标签的scoped属性

Vue中style标签的scoped属性 一、前言1、举例 二、总结 一、前言 scoped 是 Vue 中 <style> 标签的一个特殊属性&#xff0c;用于限定样式的作用范围。当你在 Vue 单文件组件&#xff08;.vue 文件&#xff09;中使用 <style scoped> 标签时&#xff0c;该样式只会…

树结构,JS某个节点的父节点 兄弟节点 以及子节点

获取某个节点的所有父节点: function getAllParentNodes(list, id) {for (let i in list) {if (list[i].id id) {return [list[i]].filter((v) > v.id ! id);}if (list[i].children?.length > 0) {let node getAllParentNodes(list[i].children, id);if (node) retur…

AWS RDS ElasticCache 监控可观测最佳实践

在当今的电子商务时代&#xff0c;一个高效、稳定的电商平台对于保持竞争力至关重要。数据库作为电商平台的核心支撑&#xff0c;其性能直接影响到用户体验和业务流畅度。本文将深入探讨如何在电商场景下通过观测云对亚马逊云科技 RDS&#xff08;MySQL&#xff09; 和 Elastic…

python+selenium - UI自动框架之封装log类

通过自定log类&#xff0c;能把执行过程记录到日志&#xff0c;方便检查和重现问题。 log类介绍&#xff1a; 每次调用log函数&#xff0c;会根据绝对路径生成日志文件在logs目录下面(在被调用的时候日志会输出到指定的文件&#xff09;&#xff0c;日志文件的格式是年月日.lo…

vue+element的表格(el-table)排班情况表(2024-05-09)

vueelement的表格&#xff08;el-table&#xff09;排班情况&#xff0c;增删查改等简单功能 代码&#xff1a; <template><!-- 表格 --><div class"sedules"><el-header><el-date-pickerv-model"monthValue2"type"month…

postgresql中控制符带来的数据错觉

简介 在数据库字符集中&#xff0c;由于数据质量的控制不够完善&#xff0c;每一个字符集都并不是所有字符的能看见&#xff0c;有些字符的展示可能会出现乱码&#xff0c;甚至出现不同字符展示成同样效果的可能&#xff0c;给开发人员造成分析错觉。 当数据库存入了控制符&am…

【Unity Shader入门精要 第7章】基础纹理(三)

1. 渐变纹理 另外一种对于纹理的使用方式是通过渐变纹理为物体提供漫反射光照效果。 顾名思义&#xff0c;渐变纹理本身就是一张颜色渐变&#xff08;可以是连续渐变&#xff0c;也可能是突变&#xff09;的图片&#xff0c;这个渐变的过程模拟的就是光源从不同的角度照射物体…

Win11下Java环境安装指南

Windows下Java环境安装指南 前言一、安装简介JDK与JRE安装包 二、JDK安装检查操作系统类型基于Win11基于Win10 安装包准备工作 三、配置环境配置JAVA_HOME配置Path配置CLASSPATH 四、检验配置是否打开cmd命令行窗口输出java -version命令 五、注意事项 前言 在Windows系统上安…

移动机器人的机动性

移动机器人的机动性 机器人底盘运动学的活动性是表示它在环境中直接运动的能力。限制活动性的基本约束是每一轮子必须满足它的滑动约束的规则。所以,我们可从方程(3.26)正式地推导机器人的活动性。 除了瞬时的运动学运动之外,移动机器人通过操纵可操纵的轮子,能够随时操纵它的…

基于springboot实现的教师人事档案管理系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&…

mysql 拆分字段为多行

留备 原数据idname1张三,李四,王二2zhangsan,lisi,wanger目标数据idname1张三1李四1王二2zhangsan2lisi2wanger select t.id, substring_index(substring_index(t.name,,,t1.help_topic_id1),,,-1) name from zq.test t inner join mysql.help_topic t1 on t1.he…

循环神经网络RNN的初学

1.循环神经网络的特点 x1——>y1的同时会产生a1&#xff0c;它包含了我们第一列处理信息的一些特点&#xff0c;然后这个a1就会被传送到y2上去&#xff0c;那么x2——>y2的序列中就会包含前一个的特点&#xff0c;依次类推&#xff0c;这就是我们的RNN结构**&#xff08…

八分钟“手撕”包装类与泛型

目录 一、包装类 基本数据类型和对应的包装类 装箱和拆箱 【思考题】 二、泛型 什么是泛型 引出泛型 怎么定义泛型和使用泛型 裸类型(Raw Type) 擦除机制 额外&#xff0c;注意下列代码&#xff1a; 泛型的上界 泛型的接口应用 泛型方法 一、包装类 简单来…

HNCTF_RE复现(一)

baby_python hnctf.yuanshen.life:33276 网页打不开&#xff0c;只能 nc 连接远程服务器。 运行没有回显 利用pickletools库进行反编译为字节码&#xff08;不知道为什么&#xff09; # Python 3.10.12 from pickle import loads import pickletools main b"\x80\x04ct…