微信小程序3小时即可入门

很多人把小程序的开发入门难度夸大了，即使从未接触过开发其实也能很快上手开发一款简单的小程序。复杂的小程序还是找开发商购买吧。

开发小程序只需要简单的学一下html和css的部分知识就可以。

下面介绍下小程序的开发流程。

选择开发工具

开发工具有很多种选择，微信开发者工具、webStorm、微软的VScode，后者的开发效率高，新手的话可以直接选择微信开发者工具，直接到官方选择对应的系统版本下载就可以。新手推荐选择稳定版。

项目选择及介绍

带支付的项目一般都很复杂，需要用到云服务器。而不带支付的项目虽然也需要云服务器，确是有办法省去的。以常见的企业展示项目为例，很多厂家产品和介绍万年不变，确又想自己做款小程序在微信上展示，其实很低的成本就可以做下来。

简单展示项目开发

首先，安装微信开发者工具，直接无脑下一步就可以。然后运行，微信扫码登录，开始建立项目

项目名称--中英文都可以

目录--选择保存目录

AppID-- 填写注册的小程序后台的AppID，也可以先使用测试号

开发模式--选择小程序（默认就是这个）

后端服务--选择不使用云服务

直接点击新建，项目就建立好了，很简单。

然后就进入了下面的界面

开发工具会自动生成一个示例的小程序，可以不管它或者把pages下的index和log文件夹删除掉，把

app.json

里面框住的那两行删除。

文件的作用

pages那个字段里面是页面信息，每建立一个页面必须填在这个里面，也就是俗称的页面注册，第一行填的就是首页页面，就是打开小程序时候的第一个页面。

为了省去服务器的开支，我们可以建立一个js文件，把需要展示的产品信息，图片地址以json的格式放到这个js文件里面，如下图：

如何新建页面

选中pages文件夹下的一个文件夹，点鼠标右键，选择新建pages，输入新建的页面名称（必须英文字母）敲击回车后就会建立好4个页面文件。

页面文件的作用及意义

一个页面有四个文件，分别是以wxml、wxss、js和json为后缀名 ，那么都有什么作用呢？

wxml文件是页面的显示文件，相当于网页的html但是标签和html是不同的，因为这是微信专门为小程序开发的，所以不需要懂html直接看小程序的文档就行了。

wxss文件是样式文件，决定了wxml文件展示给客户看的样式，相当于网站的css文件，这个文件的用法和css基本是一样的，其实只需要会flexbox（伸缩盒）就可以了，其它那些传统htnl网站的div布局方式根本不需要懂。

js文件是数据绑定文件，也是比较重要的一个文件，只有通过js文件setData的数据才可以在wxml显示。当然如果你简单粗暴的直接把要写的东西都写在wxml里也可以，不过涉及到页面跳转就没办法把数据都写到wxml里，毕竟要用最少的代码做更多的事。

例如：从产品列表跳转到产品详情，从新闻列表跳转到新闻详情，总不能每篇详情、每个新闻都写一个页面，那就效率太低了。这时候就要用到js文件了，只需要写一个详情页面，然后通过js文件判断下是进入哪个详情里，把数据给绑定上，就完成了。

json文件，这个初期的时候基本是用不到的，主要用在组件化的时候，这属于稍微高阶的用法了，新手基本用不到这个文件。

当然，严谨点说

app.json

文件用到的还是很多的，标题、tab等一些设置都要在这个文件里配置。

发一下刚刚写完的示例

我是紫逸风，喜欢请转发点赞