开发准备

开发微信小程序之前，必须有相应的开发工具，而小程序已经为我们提供了很好的开发工具，可以到官网上去下载安装即可，而它的开发入门也还算简单，首先我们必须去官网上了解它的开发文档，像一些组件、API等。

创建项目应用：安装完成后，打开并扫码登录。小程序个人订阅号是不能发布的。所以我这里选择无AppID，创建项目选择一个本地空文件夹，勾选创建quick start 项目生成一个demo。如下面的界面

初始界面

创建项目之后，就会得到相应的项目界面，界面的右边就是小程序的结构了，如下图

项目界面图

对于小程序的结构，目录下的三个结构都是全局。app.js是小程序的初始化脚本，可以在这个文件中监听小程序的生命周期，申请全局变量和调用API等，也就是跟我们熟悉的JavaScript差不多。
app.json是对小程序的全局配置，pages设置页面路径组成（默认第一条为首页），window设置默认页面的窗口表现等。
app.wxss 是整个小程序的公共样式表。也跟就是HTML的css语法相似，对于选择器、style差别不大，主要差异在于小程序有一些布局不一样，如flex等。

创建页面：在pages目录下的index页面，由一个文件夹中的四个同名不同类型文件组成。.js是脚本文件，.json是配置文件，.wxss是样式表文件，.wxml是页面结构文件，其中json和wxss文件为非必须（默认会继承app的json和wxss默认设置）。由此我们必须在app.json下配置页面的路径。
先说index.wxss,也就是页面的布局，其中view组件就像是HTML里的div标签。其布局与HTML一样可以轻松实现布局。
index.wxss就是css样式，不同的是其有一些独特的样式，可以去查阅文档来写。
index.js就是写页面数据处理和页面事件等等

实例一个页面

image.png

//.wxml布局
<view class="frist">

  <template name="fristtemp">  //使用模板
  <view class='temp'>
   <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">
  <view class='img'><image src='{{img}}'></image></view>
  <view class='content'>
     <view class='title'>{{name}}</view>
      <view class='time'>{{time}}</view>
  </view>
  </navigator>
  </view>
  </template>
  <view wx:for="{{temp}}" wx:for-item="temp">//输出模板
  <template is="fristtemp" data="{{...temp}}" />

  </view>
 </view></br>








 // .wxcss样式
.frist{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  }
    .temp{
    display: flex;
    flex-direction: row;
    height: auto;
     width: auto;
    border: 20rpx solid #fff;
}
  .img{
  width: 200rpx;
  height: 200rpx;
  float: left;
  }
.img image{
    width: 200rpx;
  height: 200rpx;
}
.content{
    width: auto;
     height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 30rpx;
  overflow: hidden;
}
.title{
  position: relative;
  height: 80%;


}
.time{
  font-size: 30rpx;
  position: relative;


}


    //.js
        Page({
          data:{
          temp:[
      {
              id:1,
              name:"测试小程序",
              img:"../../image/weixin.jpg",
     
        },
       {
             id:2,
             name:"微信",
             img: "../../image/weixin.jpg",
       },
       {
           id:3,
           name:"wechat",
           img: "../../image/weixin.jpg",

       }
    ]


    },
  } )

这就是一个简单的页面设计，对于这个页面是写死的，即不能动态显示，再下一节将会实现小程序与自建服务器数据的动态显示。