小程序前端如何开发？ 正在学习微信小程序开发的朋友在开发过程中肯定会遇到各种各样的问题。 比如很多小伙伴可能都在做后台程序，对前端开发了解不多。 会不会无从下手？ 为了帮助大家解决这个问题，今天小编就给大家介绍一下如何进行小程序的前端开发！

1、开发前的准备工作

开发环境：微信官方推出的开发工具。

应用：相关公司或个人申请后，可以调试和预览真机，否则只能在开发工具中调试。

记录域名和证书：微信小程序只支持该协议，所以正式上线后必须绑定包含证书的域名才可以使用。

2. 项目结构

微信小程序底层借鉴了框架的思想，整个开发围绕组件化开发和数据绑定的模式进行，这与传统的开发逻辑不同。

在开发工具中构建项目，选择选项，会自动生成项目的框架，并补充一些代码。

如图所示，.wxss后缀是样式文件，类似于css。 整个文件的书写语法与css一致。 .js后缀是脚本文件，与传统前端开发的js文件功能相同。 .json后缀的文件是一个配置文件，页面相关的配置都写在这个文件中。 这些文件会在进入小程序后运行，生成小程序的实例。

我们简单研究一下这三个文件的作用。

1.app.js是小程序的脚本代码。 在这个文件中，我们可以监控和处理小程序的生命周期函数，声明全局变量，建立一些用于登录和获取用户信息的全局方法前端微信小程序开发，以及读取、写入和存储本地数据。

2、app.json是整个小程序的全局配置。 在这个文件中，我们可以注册各个页面，设置小程序窗口的背景颜色和导航文本，设置小程序的标签页等。

3、app.wxss是整个小程序的公共样式表。 它是全局的，页面上的所有元素都可以直接使用这个文件中的样式规则。

文件夹中每个页面都有文件夹，还有通用工具类方法文件夹。 我们在小程序中看到的每个页面都放在一个文件夹中。

3. 页面文件结构

比如我们要写一个名为 的充值页面，首先要在 app.json 文件中注册该页面，然后新建一个名为 的文件夹，其中必须包含四个文件：.wxml、.wxss、.js 和 . json。 这四个文件缺一不可，需要保证除后缀之外的名称完全一致。

.wxml后缀文件是页面的结构，类似于传统前端开发的html文件，.wxss是页面的样式文件，.js是页面的脚本文件，.json是配置页面的文件。

一个简单的.wxml文件代码如下：

书写结构与html文件非常相似。 微信小程序只是重新定义了标签定义，但在小程序中，每个标签都是一个组件。 根据官方文档，我们可以快速找到常用组件的标签写法以及对应的属性。

小程序支持在wxml文件中进行数据绑定，使用“{{}}”完成绑定。 js文件中写入相应的数据即可。 同时小程序还支持条件渲染和列表渲染。

我们看一下js页面的简单结构：

在js文件中，我们可以声明绑定的数据、监听并处理页面的生命周期函数、定义页面的交互事件、获取小程序实例并调用实例方法等。

小程序的js文件中，内置对象是Page，而不是浏览器的内置对象。 因此，所有基于对象编写的库或插件都不能在小程序中使用（例如）。 另外，小程序中没有对象，所有的DOM操作都是根据绑定的数据来改变的，无法在脚本中直接进行DOM操作。 熟悉或者使用过Vue的朋友应该能够轻松理解这个设计。

需要注意的是，如果页面不需要新的配置项，还必须包含一个.json文件，并且文件中至少要有一个大括号（如“{}”），否则会报错。

这样我们就处理好了一个页面，每个页面都可以这样开发，但是请记得在app.json文件中注册页面，否则会失效。

四、与后台沟通

网络请求是开发中必不可少的环节，微信小程序的网络请求有一些需要注意的地方。

#这是wx.()官方网络请求API文档，代码示例如下

首先，微信小程序的请求都是请求。 其次，-type默认为'/json'，-type的设置需要注意。 地址url中不能有端口，同时还要保证服务器的TLS版本支持1.2及以下版本。

官方没有指出的是，微信小程序的请求不是内置的，这与传统浏览器的前端开发不同。 在实际开发中你会发现这一点。 因此，我们还必须使用一些开发技巧来保存相关的，并在网络请求时发送到后台。

5.手机预览

将自己的微信ID绑定到小程序对应的开发者上，即可扫描预览。

以上就是小风小编今天给大家带来的如何开发小程序前端的教程。 祝您学业有成！