开发微信小程序安装及程序配置，需要掌握以下技能
发表时间：2023-10-19 10:25:36
文章来源：炫佑科技
浏览次数：180
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
开发微信小程序安装及程序配置，需要掌握以下技能
前言：小程序因其便捷的操作和丰富的功能，已经普及到生活的各个领域。 很多人对小程序只知道如何使用，但并不了解其系统。 本节讲解开发工具的安装和程序配置。
⛳️ 1. 应该掌握的技能
开发微信小程序，需要掌握以下技能
1.HTML
HTML是Web开发的前端三剑客之一。 它主要负责网页的骨架，就像动物的骨骼一样。
HTML语言是支持网页布局的骨架。
2.CSS
CSS 是层叠样式表的缩写。 主要负责网页样式，
网页内容的分布方式、部分背景、颜色和其他外观问题都可以通过 CSS 控制。
3.
（简称“JS”）是一种轻量级、解释型或即时编译型、功能优先的编程语言。
尽管它作为开发网页的脚本语言而闻名，但它也用于许多非浏览器环境。
基于原型编程和多范式的动态脚本语言，支持面向对象、命令式、声明式和函数式编程范式
⛳️2.申请账户
开发小程序的**步就是拥有一个小程序账号。 通过该账号，您可以管理您的小程序。
请按照以下步骤开始您的小程序之旅！
官方网站：
进入小程序注册页面，按照指引填写信息并提交相应材料，即可拥有自己的小程序账号。
在这个小程序管理平台中，您可以管理您的小程序的权限、查看数据报表、发布小程序等操作。
登录小程序后台，我们可以在菜单“开发”-“开发设置”中看到小程序的AppID。
小程序的AppID相当于小程序平台的身份证。
后面你会在很多地方用到这个AppID（注意这里一定要和服务账号或者订阅账号的AppID不同）。
当我们有了小程序账号之后，我们就需要一个开发小程序工具。
⛳️ 3.安装开发工具
根据您的操作系统下载对应的安装包并安装。
打开小程序开发工具，使用微信扫描二维码登录开发工具，准备开发你的**小程序吧！
你的**个小小程序
新建项目，选择小程序项目，选择存放代码的硬盘路径，填写刚刚申请的小程序的AppID。
为您的项目起一个好听的名称并选中“不使用云服务”
（注意：创建项目必须选择空目录），点击新建，
你已经有了你的**小程序，
单击顶部菜单上的“编译”即可在微信开发工具中预览您的**小程序。
⛳️ 4.小程序代码组成
我们通过开发工具很快创建了一个项目。 您可以注意到该项目中生成了不同类型的文件：
带有 .json 后缀的 JSON 配置文件
带有 .wxml 后缀的 WXML 模板文件
带有 .wxss 后缀的 WXSS 样式文件
.js后缀的JS脚本逻辑文件
接下来我们分别看看这四个文件的作用。
4.1 JSON配置
JSON 是一种数据格式，而不是一种编程语言。 在小程序中，JSON起到静态配置的作用。
我们可以看到项目根目录下有一个app.json和..json，在pages/logs目录下也有一个logs.json。 我们依次解释一下它们的用途。
✨✨小小程序配置app.json
app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面性能、网络超时、底部标签等。 项目中app.json配置内容如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
}
}
简单说一下这个配置各个项的含义:
pages字段 —— 用于描述当前小程序所有页面路径，
这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
其他配置项细节可以参考文档 小程序的配置 app.json 。
✨✨ 工具配置..json
通常大家在使用一个工具的时候，都会根据自己的喜好进行一些个性化的配置，比如界面颜色、编译配置等开发微信小程序安装及程序配置，需要掌握以下技能，当你换到另一台电脑，重新安装该工具时，就得重新配置。
考虑到这一点，小程序开发工具会在每个项目的根目录下生成一个..json。 您对该工具所做的任何配置都将写入此文件。 当您重新安装工具或者换电脑工作时，只要加载同一个项目的代码包，开发工具就会自动帮您恢复开发项目时的个性化配置，包括编辑器的颜色、自动上传代码时的压缩，以及一系列选项。
✨✨ 页面配置 page.json
这里的page.json实际上是用来表示小程序页面相关的配置，比如pages/logs目录下的logs.json。
如果你的整个小程序的风格是蓝色，那么你可以在app.json中声明顶部颜色为蓝色。 实际情况可能并非如此。 也许你的小程序中的每个页面都有不同的色调来区分不同的功能模块。 因此，我们提供了page.json，以便开发可以独立定义每个页面的一些属性，比如刚才讲的顶部颜色、是否允许下拉刷新等。
✨✨ JSON 语法
下面是小程序中JSON配置的一些注意事项。
JSON 文件包含在大括号 {} 中，数据以键值形式表示。 JSON 的 Key 必须用双引号括起来。 实践中，在编写JSON时，忘记在Key值上加双引号或者写双引号而不是单引号是一个常见的错误。
JSON的值只能是以下数据格式。 任何其他格式都会触发错误，例如 in.
数字，包括浮点数和整数
字符串，需要用双引号括起来
布尔值，true 或 false
数组，需要用方括号[]括起来
对象需要用大括号 {} 括起来
无效的
还需要注意的是，JSON 文件中不能使用注释，尝试添加注释会导致错误。
4.2 WXML模板
从事过Web编程的人都知道，Web编程使用的是HTML+CSS+JS的组合。 HTML用于描述当前页面的结构，CSS用于描述页面的外观，JS通常用于对页面进行处理。 与用户的互动。
同样的，在小程序中也有同样的作用，其中WXML扮演着与HTML类似的角色。 打开pages/index/index.wxml，您将看到以下内容：
{{userInfo.nickName}}
{{motto}}
与 HTML 非常相似，WXML 由标签、属性等组成。 但也有很多区别，我们一一解释一下：
标签名称略有不同
在编写HTML时微信小程序开发编辑器，经常使用的标签是div、p和span。 开发在编写页面的时候，可以根据这些基本的标签来组合不同的组件，比如日历、弹窗等。换句话来说，既然大家都需要这些组件，为什么我们不能把这些常用的组件封装到一起呢？大大提高了我们的开发效率。
从上面的例子可以看到，小程序的WXML中使用的标签有view、text等，这些标签是小程序为开发封装的基础能力。 我们还提供地图、视频、音频等组件能力。 。
更详细的组件说明请参考下一章小程序的能力。
