微信小程序开发教程

1、 初步准备工作

1.注册微信小程序开发者账号

在官网注册页面，选择要注册的小程序。账户分为个人版和企业版：

个人版的注册流程比企业版更简单、更宽松。

企业版注册需要300元的认证费，个人版不需要。企业版经过微信官方认证，可信度更高。

个人版不仅仅是一个展示平台。企业版可以用作一个完整的平台。个人版不能用作商业小程序，但企业版可以，个人版不能用于打开微信支付。

附近的小程序不显示个人版本，只能通过搜索和扫码找到。

个人版不支持快速访问微信用户的手机号码。

强烈建议有一定基础的学生去微信开发平台官网

https://developers.weixin.qq.com/community/homepage

2.下载微信开发者工具

对于微信平台官网上提供的开发工具，请选择适合您系统的版本并下载最新版本。最好开发小程序。您更喜欢使用其他软件，如vscode或webstorm（仅适用于代码生成后编写代码）。打包和上传仍然需要开发人员工具。

在详细介绍小程序历史和技术细节之前，请按照我们的步骤完成Hello World示例的开发。

具体步骤：

步骤1，请转到**https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html **

微信开发者工具下载页面根据自己的操作系统下载相应的安装包。

第二步：打开微信开发者工具，选择创建一个新的小程序项目。我们不需要先了解AppID的概念。创建新项目时，选择no AppID，并取消选中“创建常规快速启动模板”选项。

最后，让我们添加必要的代码。

创建app。json，其内容如下。

在根目录下创建一个新的pages目录，然后在pages目录下创建索引目录。然后创建两个文件，索引。wxml和索引。js，位于索引目录下。

指数wxml的内容如下所示。你好，世界

索引的内容。js如下所示。页面（｛｝）

通过编写上述简短的代码行，Hello World将显示在微信开发工具的模拟器界面上。

2、 小程序开发

创建新的初始小程序项目

可以根据项目要求创建。appId可以在官方网站设置中看到，也可以使用测试号开发（如果以后有小程序帐户，可以修改）。单击“新建”创建新的小程序模板。

下图是微信开发工具页面。默认情况下，左侧是开发页面显示，右侧上方是代码编辑区域，下侧是控制台，该工具可用于调试和查看开发过程中所需的信息（开发人员工具也可用于访问微信公众号页面以查看http请求或错误消息，前提是您拥有开发人员权限）。

开发工具常用功能介绍

编译：单击“编译”进行编译。默认情况下，每次修改和保存都将实时编译。您可以修改每个编译条件：

真机调试：生成二维码并扫描微信代码以调试真机（必须在网络下）；

版本管理：git可视化工具；

上传：如果appid是正式id，会有一个上传按钮将小程序上传到微信服务器（只上传编译后的项目，不上传源代码，仍需单独保存和管理）

上传后，在官方微信小程序网站上控制版本。具体流程如下：

开发工具上传>在官方网站上自动更新版本管理体验版本>提交体验版本供审核>等待批准>提交已批准的版本；

小程序目录结构

主要部分：

app。Js:applet初始化Js；

app。Json：小程序配置文件，如导航、窗口和页面导入；

app。Wxss：小程序公共样式；

每页：

页面：每个子页面由js+json+wxml+wxss组成，便于管理。页面可以在右侧快速生成；

小程序遵循MVC结构（模型-视图-控制器），js是页面逻辑（C&M），wxss是页面样式，它修改了wxml的DOM元素，wxml是页面机制（V），json是页面