（一）开发工具下载及项目创建

这里到官方的小程序api文档里面下载就可以了。

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122

下载完之后点击添加项目。填写相关信息之后就可以开始开发了。如下图

（二）创建文件

一个页面由四个文件组成。 分别是wxml,wxss, js,json 四个文件。 例如我要写一个首页， 首先要创建一个名为index的文件夹，然后在其内部创建index.wxml, index.wxss, index.js ,index.json。四个文件。同时，需要把文件写入app.json里的pages里面。同时，处于page的第一个位置的文件会在页面中作为首页展示出来

"pages":[
"pages/index/index"

]

这里只需要写文件名即可，不需要加扩展名。小程序会自动识别的

(三) 关于app.json 以及其他的json文件内容

app.json内的配置可以参阅官方文档，https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161122。值得一提的为window所配置的navigationBar。有很多小伙伴会有疑问，官方没有说，如何在navigationBar上面加自定义的icon图标呢？ 这里可以告诉各位小伙伴。 navigationBar上面的图标是微信自带的，无法人为更改。 同时，子页面的json文件只能配置window这个属性!。其写法如下，需注意不能写window!!

{

    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"


}

(四)关于app.wxss以及引入weUI样式库

app.xss内存放的是全局通用样式， 同时，若小伙伴们想引入weUI库，可以使用import方法。注意从网上下载下来的库后缀名必须为 .wxss 才能引入使用。大家可以在github上下载。下载地址：https://github.com/weui/weui-wxss

@import ‘styleLibs/weui.wxss‘;

（五）html开发

 开发时使用了rpx作为单位。 他与px的换算关系为: 1px = 2rpx; 

 同时，也对标签进行了重做。 具体可以查看官方文档，其中view相当于div，是块状元素，text相当于span,为内联元素

小程序入门教程（一）