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