小程序开发的初步准备

1.环境准备

在开发微信程序之前，您必须准备好相应的环境

1.1.注册账户

建议使用新的电子邮件地址，该地址未注册任何其他小程序或公众号。访问注册办公室并完成注册。

1.2.获取APPID

这是开发人员的唯一身份验证。您必须在发布app之前提供APPID，然后才能联机。（当然，如果你不发布APPID，如果你没有使用APPID也没关系。）不过，在后期，你需要在微信app中询问开发者的APPID（如支付、访问手机信息等），这样你就可以在注册成功后获得APPID。成功登录后，您可以看到以下界面

1.3.开发工具下载

微信程序配有开发人员的工具，在一个完整的环境中集成开发、预览、调试和发布。

不过，由于编码体验不好，建议使用“vs码+微信小程序编辑工具”来实现编码，“vs代码”负责键入代码，“微信编辑工具”负责预览

2.第一个小程序2.1打开微信开发者工具。请注意，您需要扫描第一次登录的代码

2.2成功登录新小程序项目后，将显示以下界面。单击加号创建新项目

2.3微信开发人员工具微信开发工具，详见。

3.小程序结构目录

的目标是使开发人员在微信中开发具有本地APP体验的服务尽可能简单高效。

整个小程序框架系统分为两部分：（app服务）和（视图）。小程序提供自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层和逻辑层之间提供数据传输和事件系统，以便开发人员能够专注于数据和逻辑。

3.1小程序文件结构与传统web的比较

根据以上分析，传统网络是三层结构。微信程序是四层结构，配置了更多层。json公司

3.2项目基本目录

4.小程序配置文件

程序应包括最基本的两种配置。⼀⼀⼰⼀⼰⼀⼀⼀⼀⼰⼰⼾⼾⾯⾯⾃⾃⼰⼰⼰⼰⼰

4.1全局配置app.jsonapp。json是当前程序的全局配置，包括程序的所有路径、接口、网络超时和底部选项卡。app。json在普通快速启动项旁边

字段的含义

1.页面字段描述当前程序的所有路径。这是为了让微信用户知道您当前程序的定义。

2.窗口字段定义程序中所有字符的顶部背景色、字符颜色等。

3.有关完整的配置信息，请参阅

4.选项卡

四点二

每个小程序页面也可以使用。json文件来配置此页面的窗口表示。页面中的配置项将覆盖app窗口中的相同配置项。json。文件内容是具有以下属性的JSON对象：

5.创建项目后要做什么

5.1创建项目后，单击全局配置文件app.json

① 删除冗余页面的内容，只保留索引

② 修改“navigationBarTitleText”的名称

5.2删除多余项目① 删除页面中多余的页面，只保留索引

② 单击app。wxss删除所有内容

③ 单击app。js，删除所有内容，输入wx app，然后单击enter重新生成

④ 删除整个实用程序

5.3打开索引文件

① 打开索引。wxml，删除所有内容，输入view，输入enter，然后进入主页

② 打开索引。wxss并删除所有内容

③ 打开索引。js，删除所有内容，进入wx页面，单击enter，然后重新生成

④ 打开索引。json并添加“navigationBarTitleText”--页面标题

5.4新项目所需的基本文件夹

样式组件lib-utils请求

5.5导入字体图标库

① 打开阿里巴巴矢量图标库

② 选择要添加到购物车的所需图标

③ 单击购物车将其添加到项目中（项目名称由您自己选择）

④ 单击字体类生成在线链接，单击此复制代码（即链接），然后用新页面打开此链接

⑤ 复制新页面的所有代码，返回项目，查找样式，创建图标信息。wxss，并粘贴刚刚复制的代码

⑥ 单击app。wxss导入图标信息。wxss，@import“./style/iconfont.wxss”

⑦ 使用示例<；/文本>

5.6更少的使用

① 编辑器vscode

② 轻松安装插件

③ 将以下内容添加到vscode设置中，并配置

“less.compile”：｛“outExt”：“.wxss”｝

④ 创建较少的文件，如索引。少，你想去哪里