小程序前端怎么开发？如何进行微信小程序的前端开发？
正在学习开发微信小程序的朋友在开发过程中肯定会遇到各种各样的问题。比如，很多朋友可能是做后端程序的，对前端开发不太了解。他们会不知道如何开始吗？为了帮助大家解决这个问题，今天小编就给大家介绍一下如何进行小程序的前端开发！
1、开发前的准备工作
开发环境：微信官方推出的开发工具。
申请Appid：相关公司或个人申请Appid后，可以对真机进行调试和预览。否则只能在开发工具中调试。
注册域名和证书：微信小程序只支持https协议，所以正式上线后必须绑定包含证书的域名才可以使用。
2. 项目结构
微信小程序底层借鉴了React框架的思想。整个开发是围绕组件开发和数据绑定模型进行的，与传统的jQuery开发逻辑不同。
在开发工具中创建一个项目并选择快速启动选项。项目框架会自动生成，并添加一些代码。
如图所示，wxss后缀是样式文件，类似于css。整个文件的书写语法与css一致。js后缀是脚本文件，与传统前端开发中的js文件功能相同。json后缀的文件是配置文件。页面相关配置的写入都在这个文件中。这些文件会在进入小程序后运行，生成小程序实例。
我们简单研究一下这三个文件的作用。
1、app.js是小程序的脚本代码。在这个文件中，我们可以监控和处理小程序的生命周期函数，声明全局变量，建立一些登录和获取用户信息的全局方法，以及读写和存储本地数据。
2、app.json是整个小程序的全局配置。在这个文件中，我们可以注册各个页面，设置小程序窗口的背景颜色和导航文字，设置小程序的tab分页等。
3、app.wxss是整个小程序的通用样式表。它是全局的，页面上的所有元素都可以直接使用这个文件中的样式规则。
Pages文件夹包含各个页面的文件夹，utils是通用工具类方法文件夹。我们在小程序中看到的每个页面都放在pages文件夹中。
3. 页面文件结构
例如，如果我们要编写一个名为charge的充值页面，首先要在app.json文件中注册该页面，然后在pages中新建一个名为charge的文件夹。该文件夹必须包含四个文件： charge.wxml 、 charge.wxss 、 charge.js 和charge.json 。这四个文件缺一不可，除了后缀之外的名称必须完全一致。
.wxml后缀的文件是页面的结构，类似于传统前端开发的html文件。wxss是页面的样式文件，js是页面的脚本文件，json是页面的配置文件。
一个简单的.wxml文件代码如下：
其书写结构与HTML 文件非常相似。微信小程序只是重新定义了标签。然而，在小程序中，每个标签都是一个组件。根据官方文档，我们可以快速找到常用组件的标签书写方法以及对应的属性。
小程序支持wxml文件中的数据绑定，使用“{{}}”完成绑定。对应的数据可以写在js文件中。同时，小程序还支持条件渲染和列表渲染。
我们看一下js页面的简单结构：
在js文件中，我们可以声明绑定的数据、监听处理页面的生命周期函数、定义页面的交互事件、获取小程序实例并调用实例方法等。
小程序的js文件内置对象是Page，而不是浏览器内置的window对象。因此，所有基于window对象编写的库或者插件都不能在小程序中使用（比如jQuery）。另外，小程序中没有Document对象。所有的DOM操作都是基于绑定的数据进行改变的，并且DOM操作不能直接在脚本中进行。熟悉Angular、React 或Vue 的朋友应该能够轻松理解这个设计。
需要注意的是，如果页面不需要新的配置项，还必须包含一个.json文件，并且该文件中至少要有一个大括号（如“{}”），否则会报错报道称。
这样我们就处理好了一个页面。每个页面都可以这样开发，但是请记得在app.json文件中注册页面，否则无效。
4. 与后端通信
网络请求是开发的重要组成部分。微信小程序的网络请求有一些需要注意的地方。
https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject 这是官方的wx.request(OBJECT)网络请求API文档。代码示例如下
首先，微信小程序的请求都是HTTPS请求。其次，内容类型默认为“application/json”。需要注意content-type的设置。地址URL 中不能有端口。您还必须确保服务器的TLS 版本支持它。 1.2及以下。
官方没有指出的是，微信小程序的请求是不带Session的。这与传统浏览器的前端开发不同。在实际开发中你会发现这一点。因此，我们还必须使用一些开发技巧来保存相关的会话，并将其与网络请求一起发送到后台。
5. 手机预览
将您的微信ID与小程序对应AppId的开发者绑定，即可扫描预览。
