1.打開(kāi)微信web開(kāi)發(fā)者工具
雙擊打開(kāi)：微信web開(kāi)發(fā)者工具

2.新建項(xiàng)目
點(diǎn)擊添加項(xiàng)目。（appid，項(xiàng)目名，項(xiàng)目保存的路勁：可以隨便輸入。）

5.編寫(xiě)代碼
創(chuàng)建頁(yè)面
index.wxml
.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件

<!--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
//獲取應(yīng)用實(shí)例
var app = getApp()
//頁(yè)面上數(shù)據(jù)的準(zhǔn)備
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學(xué)院"},
   {"name":"Android學(xué)院"},
  {"name":"UI學(xué)院"},
  {"name":"UI學(xué)院"},
   {"name":"IOS學(xué)院"},
   {"name":"IOS學(xué)院"},
  {"name":"Java學(xué)院"},
  {"name":"Java學(xué)院"},
  {"name":"C++學(xué)院"},
  {"name":"C++學(xué)院"},
  {"name":"H5學(xué)院"},
  {"name":"H5學(xué)院"}
  ]
}
Page({
  data: indexData,//初始化數(shù)據(jù)
  //事件處理函數(shù)
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //實(shí)現(xiàn)點(diǎn)擊小碼哥教育跳轉(zhuǎn)到logs界面
  button_xiaomage (){
     wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
      //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){
      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
      that.update()
    })
  }
})

app.js

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用MINA提供的豐富的API

//app.js
App({
  onLaunch: function () {
    //調(diào)用API從本地緩存中獲取數(shù)據(jù)
    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{
      //調(diào)用登錄接口
      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是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋

“pages”:[
“pages/index/index”,
“pages/logs/logs”
]
在這聲明引進(jìn)了兩個(gè)界面（index，logs）

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

app.wxss

app.wxss是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則

/**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.項(xiàng)目運(yùn)行的效果
感謝：小碼哥http://bbs.520it.com/portal.php
項(xiàng)目的下載地址：github