1.打开微信web开发者工具
双击打开：微信web开发者工具

2.新建项目
点击添加项目。（appid，项目名，项目保存的路劲：可以随便输入。）

5.编写代码
创建页面
index.wxml
.wxml后缀的文件是页面结构文件

<!--index.wxml-->
<view >
  <button bindtap="button_xiaomage">小码哥教育：</button>
    <!-- 轮播图  -->
      <swiper class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000">
        <block wx:for-items="{{ads}}">
          <swiper-item>
            <image class = "header-swiper-img" src="{{ item.img_url }}" mode="aspectFill" ></image>
          </swiper-item>
        </block>
      </swiper> 
  <!-- scroll列表图  -->
  <scroll-view scroll-y="true" style="height:300%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
       <block wx:for-items="{{ motto }}">
          <swiper-item>
            <view  class="content-text" >
            <Text style="content-text" >{{item.name}}</Text>
           </view>
          </swiper-item>
        </block>
    </scroll-view>
</view>

index.wxss

index.wxml界面的css样式

/**index.wxss**/
.header-swiper {
    height: 120px;
}
.header-swiper-img {
    width: 100%;
    height: 320px;
}
.content-text{
  width:100%;
  height:30px;
  margin: 3px;
  border-color: #d8d8d8;
  border-width: 0.5px;
  border-style: solid;
}
.content-text{
    text-align: center;
    padding-top: 15px;
}

index.js

index.wxml界面的需要的js代码

//index.js
//获取应用实例
var app = getApp()
//页面上数据的准备
var indexData = {
  ads:[
        {
            "title": "",
            "img_url": "http://mall.520it.com/img/a1.jpg",
        },
        {
            "title": "",
            "img_url": "http://mall.520it.com/img/a2.jpg",
        },
        {
            "title": "",
            "img_url": "http://mall.520it.com/img/a3.jpg",
        },
        {
            "title": "",
            "img_url": "http://mall.520it.com/img/a4.jpg",
        },
        {
            "title": "",
            "img_url": "http://mall.520it.com/img/a5.jpg",
        }
  ],
  motto: [
   {"name":"Android学院"},
   {"name":"Android学院"},
  {"name":"UI学院"},
  {"name":"UI学院"},
   {"name":"IOS学院"},
   {"name":"IOS学院"},
  {"name":"Java学院"},
  {"name":"Java学院"},
  {"name":"C++学院"},
  {"name":"C++学院"},
  {"name":"H5学院"},
  {"name":"H5学院"}
  ]
}
Page({
  data: indexData,//初始化数据
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //实现点击小码哥教育跳转到logs界面
  button_xiaomage (){
     wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
      //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
      that.update()
    })
  }
})

app.js

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用MINA提供的丰富的API

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

app.json

app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释

“pages”:[
“pages/index/index”,
“pages/logs/logs”
]
在这声明引进了两个界面（index，logs）

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.wxss

app.wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

6.项目运行的效果
感谢：小码哥http://bbs.520it.com/portal.php
项目的下载地址：github