微信小程序开发

1、 注册微信小程序账号

1.进入微信公众平台，注册小程序账号，按照提示填写相应信息。注意，微信小程序和微信公众号是两个不同的电子邮件帐户，但登录入口相同。请注意，它们在注册后被区分，这很容易混淆

2.注册成功后，进入主页并遵循小程序发布流程->小程序开发和管理->在服务器配置中，单击“开发人员设置”

3.获取AppID，记录AppID，然后在创建项目时使用它

2、 下载微信开发者工具：为了配合小程序开发，微信配备了自己的开发工具，您可以选择相应的版本进行安装

下载地址：，根据您的系统选择要下载和安装的版本

3、 启动工具并创建项目app

在启动该工具时，开发者需要使用在后台成功绑定的微信扫描二维码登录。所有后续操作将基于此微信账户。小程序发布需要企业级认证的公众账号，因此无法发布个人订阅账号。所以我在这里选择No AppID，选择一个空的本地文件夹来创建项目，然后选中Create quick start project来生成演示（我的示例是龙虾）

微信小程序开发工具启动界面.png

微信小程序开发界面.png

4、 工具配置项

通常，在使用工具时，每个人都会根据自己的偏好进行一些个性化配置，例如界面颜色、编译配置等。当您更换另一台计算机以重新安装工具时，需要重新配置它。

考虑到这一点，小程序开发工具将生成一个项目。config的根目录中，您在该工具上所做的任何配置都将写入该文件。当您重新安装该工具或更改计算机以工作时，只需加载同一项目的代码包，开发人员工具将自动帮助您恢复开发项目时的个性化配置，包括编辑器颜色、上传代码时自动压缩等一系列选项。

5、 编写小程序实例

1.实例目录结构

测验

├─ 页

│ └─ 指数

│ ├─ 索引.js

│ ├─ 索引.json

│ ├─ 索引.wxml

│ └─ 索引.wxss

├─ app.js

├─ app.json

└─ app.wxss

2.目录结构文件描述：小程序包含一个app（主要部分）和多个页面

（1） 该app描述了整个程序，由三个文件组成。演示初始化后，它将包含三个文件：app。js，app。json和app-wxss，这三个都是必不可少的，都放在项目的根目录中。小程序将读取这些文件以初始化实例。

app。Js——小程序的初始化脚本（必需），它可以监视小程序的生命周期、应用全局变量、调用API等

app（｛//使用app（）注册一个小程序。它必须在App.js中注册，并且不能注册多个小程序

OnLaunch:函数（）｛//侦听初始化

安慰日志（“app发布”）

},

OnShow:function（）｛//监视并显示（进入前景）

安慰日志（“app显示”）

},

OnHide:function（）｛//监控被隐藏（进入后台：按home离开微信）

安慰日志（“app隐藏”）

},

OnError:函数（消息）｛//侦听错误

控制台.log（消息）

},

GlobalFun:函数（）｛//自定义的全局方法

},

GlobalData:｛//自定义全局变量

hasLogin:错误

}

})

app。Json——小程序的全局配置文件（必需），用于全局配置微信小程序、确定页面文件的路径、窗口表示、设置网络超时、设置多个选项卡等。微信小程序中每个页面的[路径+页面名称]需要写在app的页面中。json，页面中的第一页是小程序的第一页。app。Json主要分为五个部分：页面：页面组、窗口：框架样式（状态栏、导航栏、标题、窗口背景色）、选项卡栏：底部菜单、网络超时：网络超时设置、调试：启用调试模式

{

“页面”：[

“页面/索引/索引”

],

“窗口”：{

“navigationBarTextStyle”：“黑色”，

“NavigationBarTitleText”：“欢迎页面”，

“navigationBarBackgroundColor”：“#fbf9fe”，

“backgroundColor”：“#fbf9fe”

},

“debug”：真

}

app。wxss——整个applet的公共样式表（可选），类似于common。网站开发中的css

第页{

背景色：#fbf9fe；

高度：100%；

}

.容器{

显示器：柔性；

弯曲方向：柱；

最小高度：100%；

对齐内容：间距；

}

（2） 页面描述页面。一页共