微信小程序入门第一天

最新推荐文章于 2023-12-07 10:33:56 发布

一枚菜鸟yin

最新推荐文章于 2023-12-07 10:33:56 发布

阅读量325

点赞数

本文链接：https://blog.csdn.net/cinny1/article/details/79954513

版权

一，开发流程

二，准备工作

1，下载并安装好开发工具：微信小程序开发工具

2，初步了解小程序开发相关文档

三，创建第一个小程序

1，打开开发者工具并登录后，出现以下界面，

点击小程序项目，出现以下界面，在项目目录中选择目录结构，在填入AppID后下面有一个建立普通快速启动模板，将前面的勾默认勾选上，然后点击确定，它就会帮我们创建一个简单的下程序。创建后界面为下面第三张图

注意：如何获取AppID？

在申请账号后，在小程序管理平台可以自己的小程序进行管理，比如设置小程序的权限，查看数据报表，发布小程序等操作。登录 https://mp.weixin.qq.com ，可以在菜单 “设置”-“开发设置”看到小程序的AppID了

四，架构分析

1，文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下

一个小程序页面由四个文件组成，分别是：

2，文件作用

从上面知道有以下四种文件类型：

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

接下来看下这四种文件的作用

（1）JSON 配置

小程序配置 app.json

app.json 是对当前小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口的背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。默认生成项目的 app.json 配置内容如下：

以下为配置选项

pages:接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

如要增加一个新的界面可以这样做：

重新编译后可以发现目录结构发生变化，新加了一个first 的文件夹

window:用于设置小程序的状态栏，导航条，标题，窗口背景色，具体属性详见API 文档。如要设置导航栏的标题为捡拾书香，字体为白色，背景为黑色可以这么做：

tabBar :指定tab 栏的表现，以及tab 切换时显示的对应页面

注意：tabBar可以在页面上部，也可以在下部。tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序

如设置两个tab 栏，效果如下

可以这样设置

networkTimeout :可以设置各种网络请求的超时时间

debug: 可以在开发者工具里开启 debug模式，在开发者工具的控制台面板，调试信息以 info 的形式输出，其信息有 Page 的注册，页面路由，数据更新，事件触发可以帮助开发者快，速定位一些常见的问题。

工具配置project.config.json

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

页面配置page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

如在first.json 里配置如下内容：