小程序开发总结

离新年开始还有两三天。今天，让我们总结一下开发小程序的经验

开发前的准备

本文首先假设开发者已经大致阅读了微信小程序的开发文档，因此不介绍注册小程序的过程。但需要注意的是，小程序只允许企业用户注册，因此认证需要企业营业执照副本和加盖公章的小程序申请书。如果选择公众账号认证，则无需正式信函。此外，如果您需要使用微信支付界面，则需要执行另一次微信认证，该认证必须使用300元的方法。如果您想在第三方平台上开发小程序，建议使用公司帐户。通常，一个小程序只需几美分就可以通过身份验证。

开发工具简介

我用于调试的开发工具是微信提供的官方IDE。我仍然使用Atom编辑器编写代码。毕竟，代码突出显示是必要的。现在有很多第三方IDE或插件，但集成不如官方版本。要创建新项目，您需要输入注册小程序时获得的AppId。应该注意的是，设置页面：其中之一是开发环境不验证请求域名和TLS版本。需要检查此项，因为微信只支持HTTPS协议，并且必须是指定的域名，这使得开发人员很难使用localhost进行调试。检查此项后，没有此限制，但仅在开发环境中，

开发者工具调试界面类似于Chrome浏览器的开发者工具。调试工具分为七个功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor和Trace。

语言

首先，小程序类型的Web与我所知道的HTML不同。它有自己的开发语言：

JavaScript：微信小程序的JavaScript运行环境既不是浏览器，也不是节点js它在微信app的上下文中运行，不能在浏览器上下文下操作DOM，也不能通过Node J相关接口访问操作系统API。

WXML：作为微信小程序的表示层，它不使用Html，而是发明了自己的XML语法。

WXSS：用于装饰表示层的样式。官方描述是“WXSS（WeiXin Style Sheets）是一种用于描述WXML组件样式的样式语言。WXSS用于确定如何显示WXML组件。”

条目文件

小程序主要包含以下三个条目文件：

app。文件js是整个小程序的入口文件。我们主要做网络检测、用户信息获取等；当也可以注入公共方法时，可以通过其他页面中的getApp（）调用它（注意：在页面中调用app.js中的方法时，不需要通过require或import引入）

app。json文件可用于全局配置小程序、确定页面文件的路径、整体窗口表示、设置网络超时、设置多个选项卡等

app。Wxss是小程序的常用样式表

1、 准备工作

要注册小程序帐户，您必须使用未注册官方帐户的电子邮件地址。

注册帐户后，登录，单击主页左侧列表中的“设置”，然后在设置页面上选择“开发设置”以查看用于登录开发工具的AppID。

2、 启动项目

图像.png

项目目录需要为空

如果AppID不急于发布，则无法先填写。如果项目需要直接启动，必须填写

项目名称可以是中文和英文

检查快速启动模板

图像.png

启动后

图像.png

这是一个官方示例模板

1.框架

首先查看下一个目录：

图像.png

app。Js:小程序逻辑、生命周期、全局变量appJson:小程序公共设置、导航栏颜色等，不能评论appWxss:小app公共样式，类似CSS。

小程序页面组成：

图像.png

每个小程序页面由四个不同的后缀文件组成，它们在相同的路径下具有相同的名称，例如索引。js，索引。wxml，索引。wxss和index.json。

微信小程序中每个页面的[路径+页面名称]需要写在app Json页面中，页面中的第一页是小程序的主页。

图像.png

每个基本页面的组成

图像.png

四个文件根据其功能可分为三部分：

配置：json文件

逻辑层：js文件

视图层：wxss。wxml文件

在iOS上，小程序的javaScript代码在javaScript Core中运行。在Android上，小程序的JavaScriptCore代码是pars