初试微信小程序

微信小程序官网：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1475052055364

1.打开微信web开发者工具

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

2.新建项目

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

3.打开项目

4.项目结构说明

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