小程序的开发与传统的web前端开发极其相似，如何简单上手开发小程序

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

小程序的开发与传统的web前端开发极其相似，如何简单上手开发小程序

第1步：安装

首先下载微信开发工具

直接下载安装，点击下一步

然后扫码进入微信公众号，会自动获取您的公众号和微信

扫描二维码登录后，选择本地小程序项目小程序的开发与传统的web前端开发极其相似，如何简单上手开发小程序，点击添加项目，然后填写相关信息：

第2步：基本配置

进入创建的初始demo后，可以看到如下页面：

点击编辑后，可以发现右侧目录结构中有两个文件夹，根目录中有三个文件。 这三个文件是 app.js、app.json 和 app.wxss。 下面分别介绍这三个文件的作用。 :

应用程序.js

app.js 是一个脚本文件。 我们可以监控和处理小程序的生命周期函数，声明全局变量以及调用app.js中提供的各种API。 比如*初的demo，调用登录接口，获取数据。

应用程序.json

该文件由两部分组成。 我们可以定义页面的路径，还可以定义一些小程序的窗口背景颜色，配置导航栏样式，配置默认标题。 我们可以发现，这对应了pages文件中的两个页面。 如果我们要添加新的页面，我们也需要先在这里声明路径。 “pages”数组中的一个页面就是小程序的首页。

注意：app.json 中不能添加注释！ ！ ！

应用程序.wxss

小程序的公共样式定义在app.wxss中。 这里声明的样式可以在其他页面直接引用。

第三步：页面创建

如前所述，这个初始演示中有两个页面。 微信小程序中每个页面的【路径+页面名称】需要写在app.json的页面中。

每个小程序页面由同一路径下四个不同的同名后缀文件组成，如：index.js、index.wxml、index.wxss、index.json。 .js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的文件是样式表文件，.wxml 后缀的文件是页面结构文件。 让我们一次看一下每个文件的内容：

index.wxml是页面结构，相当于我们写的.html文件。 index.wxml 和 .html 之间仍然存在一些差异。 我们发现上面文件中的标签与`.html`中的标签非常相似。 其他,,`标签的使用与.html`类似。

索引.js

index.js是页面的脚本文件，与我们之前的.js文件功能相同。 在这个文件中，我们可以监控和处理页面的生命周期函数、获取小程序实例、声明和处理数据、响应页面交互事件等。

索引.wxss

index.wxss是页面的样式表，类似于.css。 当存在页面样式表时，页面样式表中的样式规则会级联到app.wxss中的样式规则。 如果不指定页面的样式表，也可以直接使用页面结构文件中app.wxss中指定的样式规则。

索引.json

页面配置文件是可选的。 当存在页面配置文件时，页面中的配置项会覆盖app.json中相同的配置项。 如果没有指定页面配置文件微信小程序全流程开发，页面会直接使用app.json中的默认配置。

第四步：调试

点击开发框左侧的Debug，进入调试界面：

调试与chrom调试代码相同

第5步：项目预览

开发工具上方的“设置--项目设置”模块包括：当前项目详情、上传以及项目的一些其他设置。

由于没有AppID，部分功能无法使用。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等