小程序前端怎么开发？

时间：2023-07-01 14:05 阅读数：11 人阅读分类：知识百科

　　小程序前端怎么开发?正在学习如何开发微信小程序的小伙伴们一定会在开发过程中遇到各种问题，比如很多小伙伴可能都是做后台程序的，对于前端开发就不太了解了，会不会无从下手呢?为了帮助大家解决这个问题，小编今天就向大家介绍一下，如何进行小程序的前端开发!

　　一、开发前的准备

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

　　申请Appid：相关公司或个人申请到Appid后可以进行真机的调试和预览，否则只能在开发工具里进行调试。

　　备案域名和证书：微信小程序仅支持s协议，所以务必绑定含有证书的域名，才能在正式上线后进行使用。

　　二、项目结构

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

　　在开发工具中建立项目，选择quickstart选项，会自动生成项目的框架，并补充部分代码。

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

　　下面我们简单学习一下这三个文件的作用。

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

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

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

　　Pages文件夹里放置着各个页面的文件夹，utils里是一个通用工具类方法文件夹。我们在小程序里看到的每个页面，都是放置在pages文件夹里的。

　　三、页面文件结构

　　例如我们想要写一个充值页面叫做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文件中进行页面的注册，否则是无效的哦。

　　四、与后台通信

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

　　mp.weixin.qq/debug/wxadoc/dev/api/network-request.html#wxrequestobject这是官方的wx.request(OBJECT)网络请求API的文档，代码示例如下

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

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

　　五、手机预览

　　将自己的微信号绑定到小程序对应AppId的开发者当中，就可以实现扫一扫预览。

　　以上就是今天微微风小编为大家带来的小程序前端怎么开发的教程，俗话说“学如逆水行舟不进则退”，所以各位小伙伴一定要认真细致，耐*学习哦，小编在此预祝大家学习成功!