简单易懂——适合零基础体验的微信体验小程序开发教程（微信小程序开发教程-从零开始-简单书）

由于工作需要，最近要开发一个微信小程序，这对我来说是一个挑战。因为是第一次接触，所以很兴奋，想尝试一下目前流行的小程序的开发。为了不辜负微信团队的信任，我决定战斗！但话又说回来，我是一名工程师！那么让我们从头开始吧！

从头开始编写一个小程序

所以这篇文章非常适合非前端工程师学习！哈哈！都说前端小程序出来了，就会抢移动端的饭碗，但据我了解，现在在读的很多人都是移动开发工程师，谁抢谁的饭碗还不一定！ PS：我问的是怎么获得小程序内测资格的。有一种东西叫内部资源！

准备工作 IDE搭建知识 准备从头开始启动app.app... 创建程序实例美化美化页面 配置首页超级事件绑定功能更新接口

准备

IDE构建

我就不多说了。如果您没有测试版代码，只需购买破解版即可。我用过，足够学习了！ IDE破解版+安装教程

程序员必备的接口测试调试工具：立即使用=++Mock+设计、调试、文档、自动化测试工具后端、前端、测试、在线协作同时进行，内容实时同步

知识准备

你还是得看看。我推荐廖雪峰的博客HTML+CSS教程。您只需要知道它的作用即可。

从头开始

微信小程序中有四种文件类型

js ---------- 文件 json -------- 项目配置文件，负责窗口颜色等 wxml ---------- 类似HTML文件wxss ----- -- 类似的 CSS 文件

根目录下名为app的这四种文件是程序入口文件。

应用程序.json

该文件必须存在。如果没有这个文件，IDE会报错，因为微信框架使用这个作为配置文件入口。您只需创建该文件并在其中写入大括号即可。后面我们会在这里配置整个小程序的全局配置。 。记录页面构成，配置小程序窗口背景色，配置导航栏样式，配置默认标题。

应用程序.js

应用程序.wxss

该文件不是必需的。因为它只是一个全局的CSS样式文件

应用程序.wxml

这个不是必须的，而且这个不是指主界面~因为小程序的主页面是由JSON文件中的配置决定的

有了这两个文件，当你运行程序时，IDE就不会报错了，这也意味着这就是最简单的微信小程序了。

.png

创建程序实例

app.js文件管理整个程序的生命周期，因此在其中添加以下代码：（进入App IDE时会有提示）

App({ : () { .log('应用程序') }, : () { .log('应用程序显示') }, : () { .log('应用程序隐藏') }})-

具体API解释如下

美化

json文件负责配置颜色。我们只需要在其中添加以下代码即可。参数解释如下图！

{ "":{"": "#","xt": "演示","le":"" }}-

现在让我们看看是不是这样！好吧，让我们继续编写我们的第一个界面

美化页面

为了美化页面，我们使用了wxml和wxss文件。为了简化程序代码结构，我们需要在目录下新建一个文件夹，名称随意。我们在这里调用它，然后创建一个新文件夹，名称在该文件夹中。我们在这里调用它，然后我们创建。 wxml 文件并在其中写入以下代码

-

然后创建一个.wxss文件并在其中写入以下代码

.{ =#;}-

然后我们创建一个.js文件，在文件中输入以下代码（进入Page IDE会有提示）

Page({ data:{ // text: "这是一个页面" }, :(){ // 页面初始化带的参数，用于页面跳转}, :(){ // 页面渲染完成}, :( ){ / / 页面显示}, :(){ // 页面隐藏}, :(){ // 页面关闭}})-

函数解释如下：