小程序（二） 一个简单的“欢迎”页面

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。如图2-1所示

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如图2-2所示

一个小程序页面由四个文件组成，如图2-3所示

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

创建项目启动页，如图2-4所示：

新建一个空白项目，点击 图2-5所示 “+” 创建小程序主体部分的三个文件及pages文件夹，在pages文件夹下新建一个index文件夹，如图2-5所示，选中pages文件夹 右键 新建目录

在index文件夹下创建 index.wxml 、index.wxss 、index.js 、index.json 四个文件。

注：除 顶级 目录文件/文件夹使用 图2-5 中的 “+” 创建外，其他文件创建选中其上级目录文件夹 右键 新建目录/文件

创建好文件后，在app.json中写入：

编辑 index.wxml 文件，此处会用到图片，需在顶级目录创建images文件夹用来存放图片汪念：

模拟器的机型设置为困轿困 iPhone6 ，小程序以IPhone6的屏幕尺寸为设计标准，像素使用 rpx 为单位，编辑 index.wxss 文件：

若使小程序呈现 图2-4 的效果，需编写 app.json 文件：

项目出现如图2-6 所帆派示错误：

编写index.js：

启动页面就完成了 ^ _ ^

一、注册阶段

1、首先你要确定小程序的定位、目的以及文案资料等（准备工作）。

2、打开微信公众平台官网，点击右上角的“立即注册”

3、在“选择注册的类型中”选择“小程序”

4、完善账号信息

5、邮箱激活公众平台账号

6、完善信息登记。按耐汪照流程信息填写完成后则代表认证成功，这时则可以开始创建小程序了

二、开发阶段悄铅

1、登录微信公众平台。就能在菜单“开发”、“基本配置”中看到小程序的AppID了。小程序的 AppID 相当于小程序平台的一个身份z，后续你会在很多地方要用到 AppID 。有了小程序帐号之后，就可以选择工具来开发小程序了。

2、前往“开发者工具”下载页面，安装“开发工具”，开发工具有windows64、windows32、mac三个版本，可根据实际情况，选启亩好择适合自己电脑的开发工具。安装后，就可以直接启动开发者工具了。

3、在小程序管理页面，点击“添加项目”

4、填入申请到的小程序的AppID、项目名称

5、然后点击“选择”，新建一个文件夹作为新的项目目录。再次点击“添加项目”，就可以新建出一个微信小程序项目了。懂程序的可以依靠开发者工具自行开发。但是如果你只是个小白，那你可能就需要专业的小程序制作开发平台来帮你比如沃然网络小程序制作开发平台。

6、制作完成的小程序提交审核，一般待7-14个工作日审核通过后你就可以拥有自己公司的微信小程序了。

该搜索框组件基于开源项目wxSearch进行了改册山灶进，主要有以下几个修改点：

1.增加了注释，修改了一些bug，项目可以跑起来。

2.为了解决搜索框和输入法界面重叠的问题，州扮将搜索组件作为一个独唯含立的页面。

3.修改了界面样式，更加美观。

4.减少了暴露接口，复杂性更低。

小程序演示：

项目地址：  前往github项目

---