微信小程序开发-新闻简讯demo_移动端新闻录入开发

闲来无聊体验了一把微信小程序开发，从开发的角度来说，还是蛮好的事，减少开发成本，不需要复杂的环境配置，api使用简单，开发出来的产品体验也还不错，确实很多不常用的app可以使用小程序来开发。不过现在还很多限制，API不够完善，我只是尝试使用几个常见的控件就遇到很多不支持，后期完善API后，是个不错的方向。

当然这个demo第一次尝试，只是学习使用，很多问题一起谈论，写的不好轻喷
效果图：

1.环境配置

官方下载开发工具包，安装完成就可以进入开发了。

2.项目结构

开发之前搞清楚项目结构
创建项目看见3个部分文件夹
App：属于全局配置，整个项目都可以使用到其定义的数据
utils： 主要包含一些工具方法
pages：页面，我们开发的东西都放在pages下

关于这3个东西详细介绍还是去看官网吧

3.创建页面

就拿index介绍
index.js、index.json、index.wxss，index.wxml这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文,.wxml后缀的界面布局数据显示。

4.代码实现

通过一个简单的实例，实现新闻列表，及其新闻详情展示

要实现这个功能需要熟悉view，image，text，swiper，navigator这几个组件

view：视图容器，用来包裹其他控件，呈现在页面上

view class="xxx">
  <text>title</text>
  <view class="content">
       ......  
  </view>
</view>
1
2
3
4
5
6

text文本显示

组件内只支持 嵌套，除了文本节点以外的其他节点都无法长按选中。
接收数据使用双大括号{{xxx}}

  <text>{{text}}</text>
1

image 图片

 <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{data.src}}"></image>
1
2

mode相当于android的image View的scaleType，图片模式
src=”{{data.src}}”访问远程链接，也可以直接把url贴进去

<image src="http://img5.imgtn.bdimg.com/it/u=2621845315,288777556&fm=21&gp=0.jpg"/>
1

本地图片,直接传入路径

<image src="../iamges/xx.png"/>
1

swiper 滑块容器

用来实现自动播放的广告栏

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="100%" height="200"/>
    </swiper-item>
  </block>
</swiper>
1
2
3
4
5
6
7
8

传入一个数组或列表的数据源

 <block wx:for="{{imgUrls}}">
1

列表中的单个item，直接使用item接受数据

    <swiper-item>
      <image src="{{item}}"/>
    </swiper-item>
1
2
3

navigator 页面链接

  <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
1

一个简单页面需要的元素就差不多了，有布局，有图片，有文案，还有页面之间的跳转。

接下来就是数据：

请求接口

这里要做功能比较简单，只是用到wx.request

wx.request({
  url: 'http://news-at.zhihu.com/api/4/news/latest', //接口地址
  data: {
    //请求的参数
    //数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String
     x: '' ,
     y: ''
  },
  //设置请求的 header 
  header: {
      'content-type': 'application/json'
  },
  //收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'}
  success: function(res) {
    console.log(res.data)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

把数据绑定到界面：

 this.setData({
     list:this.data.stories
    })
1
2
3

this.data.stories是接口返回的对象

页面使用通过双大括号访问数据

{{list}}
1

这样就完成了请求数据–》数据显示的全部过程了

完整代码请下载：https://github.com/honjane/wxnewsDemo