微信小程序开发指南：从准备到项目创建全流程解析

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发指南：从准备到项目创建全流程解析

进入小程序官网注册（我就不多说了）；登录后需要获取小程序的appid

由于后续会调用微信小程序的接口等功能，所以需要在开发的小程序中获取APPID，因此注册成功后，即可登录，然后获取APPID。

登录成功之后你可以看到如下界面，然后复制你的APPID并保存。

1.1.2 下载并安装微信开发工具

如图，下载并安装微信开发工具

1.1.3 创建新的小程序项目

打开微信小程序，新建项目，粘贴上面的appid微信小程序的开发工具，选择不使用云开发。

单击“确定”

这样我们就创建好了一个新的小程序项目。

2.微信小程序与普通网页开发的区别 2.1 网页小程序的运行机制不同

运行脚本和渲染都采用单线程机制，无法同时做两件事，渲染线程和脚本线程互斥，长时间运行脚本可能会导致页面丢失响应。

渲染线程和脚本线程是分开的，在不同的线程中运行。

Web开发可以使用各种浏览器公开的DOM API来执行DOM选择和操作。

小程序的逻辑层和渲染层是分离的，逻辑层运行在浏览器中，没有完整的浏览器对象，所以没有相关的 DOM API 和 BOM API，这个差异导致一些前端开发非常熟悉的库，比如 Zepto，无法在小程序中运行。

网页在浏览器环境中运行。

小程序运行在微信环境中。

2.2 不同开发环境中的Web开发

Web开发需要面对的环境是各种各样的浏览器，PC端需要面对IE、QQ浏览器等。

在移动端，需要面对各种类型的系统，当然还有iOS。

小程序开发

iOS/微信客户端、微信客户端、PC微信客户端、Mac微信客户端、小程序硬件框架以及微信开发调试工具等。

由于运行环境不同微信小程序开发指南：从准备到项目创建全流程解析，小程序中无法调用DOM和BOM的API，但是小程序可以调用微信环境提供的各种API，比如：1.地理定位；2.扫码；3.支付等。

2.3开发流程 Web开发小程序开发

在开发网页时，网页开发只需要使用浏览器和一些辅助工具或编辑器。

小程序的开发就不一样了，需要申请小程序账号、安装小程序开发工具、配置项目等才能完成。

网页开发模式：浏览器+代码编辑器

小程序有自己的一套标准开发模型：

1.申请小程序开发账号

2. 安装小程序开发工具

3.创建并配置小程序项目

3. 了解微信小程序3.1 微信开发工具

微信开发工具由五大功能区域组成

3.2小程序项目结构 3.2.1 基础项目结构

文件名描述

页面

用于存储所有小程序页面

工具类

存储所有工具函数，如时间格式化函数、数据处理函数等。

应用程序.js

小程序项目入口文件

应用程序.json

小程序项目的全局配置文件

应用程序.wxss

小程序项目的全局样式文件

..json

项目配置文件

.json

用于配置小程序及其页面是否被微信运行和搜索

3.2.2小程序页面构成

小程序官网建议所有小程序页面都放在pages文件夹中，作为单独的文件夹，每个页面由4个文件组成。

文件描述

.js

当前页面脚本文件

.json

当前页面的配置文件，配置了窗口的外观，性能等。

.wxml

当前页面的模板结构文件

.wxss

当前页面的样式文件

3.3 json配置文件

json配置文件的作用：

JSON() 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现，小程序项目也不例外：通过不同的 .json 配置文件可以对小程序项目进行不同层次的配置。

小程序项目中的json配置文件有4种类型

项目根目录下的app.json配置文件

项目根目录下的.json配置文件

项目根目录下的.json配置文件

每个页面文件夹中的配置文件

3.3.1 app.json配置文件

app.json 是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部标签等。

以我们当前的新项目为例

配置项说明

页面

用于记录当前小程序所有页面的路径

全局定义小程序所有页面的背景颜色、文字颜色等

风格

全局定义小程序组件使用的样式版本

指定 .json 文件的位置

3.3.2 ..json 文件

..json是项目的配置文件，用来记录我们对*小程序开发工具*的个性化配置。

配置项说明

编译相关配置

项目名

应用程序ID

项目使用的id

3.3.3 .json 文件

微信现在支持小程序内搜索，类似PC网页SEO，.json文件用于配置微信是否索引小程序页面。

当开发允许微信索引后，微信会使用爬虫对小程序页面内容进行索引，当用户的搜索关键词成功匹配到页面索引后，小程序页面便可能展示在搜索结果中。

注意：索引提示默认开启，若需要关闭索引提示，可以修改配置文件.json中字段。

3.3.4 页面的JSON配置文件

对于小程序的每个页面，你都可以使用json文件来配置该页面的窗口外观，页面中的配置项会覆盖app.json中同名的配置项。

注意：json文件中不能写任何注释。

3.4 创建新的小程序页面

只需要在app.json->pages属性下添加页面的路径，小程序开发工具就会自动帮我们创建对应的页面文件。

我们不再需要手动创建页面文件，非常方便。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等