本实例将演示从零开发一个微信应用号的过程,页面轮播与跳转传值,实现单元格自定义布局,全部源码可通过github下载。
下载最新版的微信小程序开发工具,目前是v0.9.092300
下载地址:https://mp.weixin.qq.com/debu...

官方文档:https://mp.weixin.qq.com/debu...

git下载地址:http://git.oschina.net/dotton...

先看下效果图:

26005330_82nk.png

一、新建应用

1.内测阶段对于无内测号的开发者,请点无AppId。

26003208_ERlJ.png

2.然后选择一个本地目录作为工程目录。

26003410_GYzu.png

3.项目名称任意,设置好目录,勾上当前目录创建quick start项目。如图:

26003432_W0yd.png

4.点击添加项目,这时可以运行的效果。是自己的微信个人信息以及一HelloWorld文本框。

5.右边是调试窗口,有2个警告,是由于没有AppID导致的,可以暂时忽略,不影响开发。

26003447_UNdQ.png

6.提示一下,在app.json中设置debug:true,这样控制台看到实时的交互信息,以及将来在js文件中设置断点,类似与Chrome的调试工具以及Firefox的Firebug。

关于首页配置:

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

其中pages属性表明每一个页面的存在,其中第一条为首页,即pages/index/index

二、请求网络API接口

1.前提条件:

这里需要用到聚合数据的新闻接口,前往:https://www.juhe.cn/docs/api/... 注册、申请接口,拿到key,我这里已经申请到一个key:482e213ca7520ff1a8ccbb262c90320a,可以直接拿它做测试,然后就可以将它集成到自己的应用了。

2.使用微信小程序接口来访问网络:

改写index.js文件:

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    motto: 'Hello World',  
    userInfo: {}  
  },  
  //事件处理函数  
  bindViewTap: function() {  
    wx.navigateTo({  
      url: '../logs/logs'  
    })  
  },  
  onLoad: function () {  
  // 访问聚合数据的网络接口  
  wx.request({  
    url: 'http://v.juhe.cn/toutiao/index',  
    data: {  
     type: '' ,  
     key: '482e213ca7520ff1a8ccbb262c90320a'  
    },  
    header: {  
        'Content-Type': 'application/json'  
    },  
    success: function(res) {  
      console.log(res.data)  
    }  
  })  
  
    console.log('onLoad')  
    var that = this  
    //调用应用实例的方法获取全局数据  
    app.getUserInfo(function(userInfo){  
      //更新数据  
      that.setData({  
        userInfo:userInfo  
      })  
    })  
  }  
})  

3.查看效果,检查Console控制台,得到以下信息:

26004022_5TJr.png

说明已经成功取得到了数据。

三、将json格式的数据渲染到视图

这里要用到swipe组件实现大图轮播,文档见:https://mp.weixin.qq.com/debu...

1.清空原index.wxml内容,加入如下代码:

<swiper indicator-dots="true"  
  autoplay="true" interval="5000" duration="1000">  
  <block wx:for="{{topNews}}">  
    <swiper-item>  
      <image src="{{item.thumbnail_pic_s02}}" class="slide-image" width="355" height="150"/>  
    </swiper-item>  
  </block&gt;  
&lt;/swiper>  

2.相应地在index.js文件的onLoad方法中加入如下代码来获取网络数据

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    topNews:[],  
    techNews:[]  
  },  
  onLoad: function () {  
    var that = this  
  // 访问聚合数据的网络接口-头条新闻  
  wx.request({  
    url: 'http://v.juhe.cn/toutiao/index',  
    data: {  
     type: 'topNews' ,  
     key: '482e213ca7520ff1a8ccbb262c90320a'  
    },  
    header: {  
        'Content-Type': 'application/json'  
    },  
    success: function(res) {  
      if (res.data.error_code == 0) {  
        that.setData({  
        topNews:res.data.result.data  
        })  
      } else {  
        console.log('获取失败');  
      }  
    }  
  })  
  
  }  
})  

3.看到轮播已经成功的展示出来了

26004057_IyKr.png

4.依样画葫芦,同样操作读取列表新闻:

&lt;view class="news-list"&gt;  
  &lt;block wx:for="{{techNews}}"&gt;  
    &lt;text class="news-item"&gt;{{index + 1}}. {{item.title}}&lt;/text>  
  </block&gt;  
&lt;/view>  

配合样式表,不然列表文字排版是横向的,将以下css加到index.wxss中:

.news-list {  
  display: flex;  
  flex-direction: column;  
  padding: 40rpx;  
}  
.news-item {  
  margin: 10rpx;  
}  

26004219_NGxK.png

继续美化,文字列表也采用缩略图+大标题+出处+日期的形式
26004233_6235.png

样式表与布局文件
index.wxss

/**index.wxss**/  
.news-list {  
  display: flex;  
  flex-direction: column;  
  padding: 40rpx;  
}  
  
.news-item {  
  display: flex;  
  flex-direction: row;  
  height:200rpx;  
}  
  
.news-text {  
  display: flex;  
  flex-direction: column;  
}  
  
.news-stamp {  
    font-size: 25rpx;  
    color:darkgray;  
    padding: 0 20rpx;  
    display: flex;  
    flex-direction: row;  
    justify-content:space-between;  
}  
  
.news-title {  
  margin: 10rpx;  
  font-size: 30rpx;  
}  
  
.container {  
  height: 5000rpx;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-between;  
  /*padding: 200rpx 0;*/  
  box-sizing: border-box;  
}  
  
.list-image {  
  width:150rpx;  
  height:100rpx;  
}  

index.wxml

&lt;!--index.wxml--&gt;  
&lt;swiper indicator-dots="true"  
  autoplay="true" interval="5000" duration="1000"&gt;  
  &lt;block wx:for="{{topNews}}"&gt;  
    &lt;swiper-item&gt;  
      &lt;image src="{{item.thumbnail_pic_s02}}" mode="aspectFill" class="slide-image" width="375" height="250"/&gt;  
    &lt;/swiper-item>  
  </block&gt;  
&lt;/swiper>  
<view class="container news-list">  
  <block wx_for="{{techNews}}">  
    <view class="news-item">  
      <image src="{{item.thumbnail_pic_s}}" mode="aspectFill" class="list-image"/&gt;  
      &lt;view class="news-text"&gt;  
        &lt;text class="news-title"&gt;{{item.title}}&lt;/text>  
        <view class="news-stamp">  
          <text>{{item.author_name}}</text&gt;  
          &lt;text&gt;{{item.date}}&lt;/text>  
        </view&gt;  
      &lt;/view>  
    </view&gt;  
  &lt;/block>  
</view&gt;  

四、跳转详情页与传值

保存当前点击的新闻条目信息中的title,参见官方文档:https://mp.weixin.qq.com/debu...

传值到详情页