微信小程序实战(附源码)

前言

最近出于个人兴趣以及公司业务涉及到小程序这一块，就去了解了一下小程序。首先以及必须是先去看了一下官方文档，但百看不如一练啊。所以利用空暇时间一点一点的做了这么一个小程序。

目录结构：

|- app.js      公共js文件
|- app.json    公共设置文件
|- app.wxss    公共样式文件
|- pages       项目各个文件所在文件
|   |- index     设置
|  |  |- index.js    设置模块的逻辑文件
|  |  |- index.wxml  设置模块的模板
|  |  |- index.wxss  设置模块的样式文件
|  |  |- map.js         地图
|  |  |- map.wxml
|  |  |- map.wxss
|  |- logs     日志
|  |  |- logs.js       
|  |  |- logs.wxml
|  |  |- logs.wxss
|     |- one   one模块目录
│   │   ├── edit.js      首页第一个item编辑
│   │   ├── edit.json
│   │   ├── edit.wxml
│   │   ├── edit.wxss
│   │   ├── essay.js    详情页
│   │   ├── essay.json
│   │   ├── essay.wxml
│   │   ├── essay.wxss
│   │   ├── index.js  首页
│   │   ├── index.json
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── story.js    电影故事详情页
│   │   ├── story.json
│   │   ├── story.wxml
│   │   └── story.wxss
│   └── template   公用模板
│       └── common.wxml
├── project.config.json
├── source   图片资源文件

效果展示和实现

2.gif

分析：

• 时间选择和天气
  切换时间，按时间查看每天的信息。选择时间后会触发绑定的方法"bindDateChange"请求数据。当时间是今天时显示天气状况，如果不是今天，则显示"今天"这个按钮，点击按钮会切换到今天数据，这里还做了一个简单的小动画，当页面滑动时，会根据滑动距离判断是否显示或隐藏天气或"今天"按钮做滑动。

<view class='top'>
  <picker mode="date" value="{{selectDate}}" bindchange="bindDateChange" start="2012-10-07" end="{{endDate}}">
    <view><label class='day'>{{Day}}</label> <label class='YM'>{{Month}}.{{Year}}</label></view>
  </picker>
<view wx:if="{{date=='今天'}}" animation="{{animationData}}"  class='weather'>{{weather.city_name}}·{{weather.climate}} {{weather.temperature}}℃</view>
<view wx:else class='weather' animation="{{animationDay}}"  bindtap='showTodayView' style='border:1px solid #F5F5F5;width:30px; text-align:center'>今天</view>
 </view> 

• 首页第一条图片封面和编辑按钮
  点击图片弹出展示层，长按图片可以保存到本地；点击编辑按钮进入编辑页，点击图片可以选择本地图片替换当前图片，文字内容也可以编辑，最后点击分享可以分享出去了。

  
  封面图片.gif
  编辑按钮点击.gif

<!-- wxml-->
<!-- category 是判断分类的 -->
<view wx:if="{{item.category==0}}">      
<!-- 点击图片触发showModelView方法，弹出遮罩层 -->
<image bindtap='showModelView' data-id="{{idx}}" class='hp_img' src='{{item.img_url}}' mode='aspectFill'></image>
<label class='hp_author'>{{item.title}}|{{item.pic_info}}</label>
<text class='hp_content'>{{item.forward}}</text>
<label class='text-author'>{{item.words_info}}</label>
<view class='share-view'>
<button class='share-btn' open-type="share" data-id="{{idx}}">分享</button>
<!-- 点击编辑按钮进入编辑页 -->
<button class='edit-btn' bindtap='editText'  data-id="{{idx}}">编辑</button>
</view>
</view>

<!-- 点击图片时弹出遮罩层 -->
<view bindtap='hiddenView' class='model-view' wx:if="{{is_show_view>=0}}">
<label class='model-title'>{{content[is_show_view].volume}}</label>
<image data-url="{{content[is_show_view].download_img_url}}" bindlongpress='saveImg' class='model-img' src='{{content[is_show_view].img_url}}'></image>
<label class='model-author'>{{content[is_show_view].title}}|{{content[is_show_view].pic_info}}</label>
</view>

<!-- js  跳转编辑页 -->
 editText:function(res) {
    var id = res.target.dataset.id,
        img_url = this.data.content[id].img_url,
        forward = this.data.content[id].forward,
        words_info= this.data.content[id].words_info
    wx.navigateTo({
        url: 'edit?img_url='+img_url+'&forward='+forward+'&words_info='+words_info,
    })
    wx.hideTabBar()
  }

• 首页进入详情页
  不同的分类标签，详情页除了ONE STROY、阅读、专栏一样外，其他分类是不一样的。详情页的内容因为获取到的是html数据，所以使用WxParse这个第三个插件，去解析html，在使用的地方引入

var WxParse = require('../../wxParse/wxParse.js');

ONE STORY详情页

ONE STROY、阅读、专栏详情页样式.gif

<!-- js文件 把需要解析的内容传入 -->
  WxParse.wxParse('content', 'html', content, that);   

<!-- wxml  文章内容 -->
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>

说明:1.详情页目前只能查看评论信息，评论没有实现哦。2.查看评论只能手动一直滑动到评论，暂未实现定位到评论区功能。3.如果文章有朗读信息，会显示播放控制信息，全局播放。

• 连载
  如果此连载目前只能发布了一篇文章，则下方的上一章和下一章按钮是不能点击的。反之则会跳转对应的章节。

  
  连载.gif

• 问答

  
  问答.gif

• 电影

  
  2.gif

音乐模块暂未开发
以上就是仿照one一个做的一个简单小程序，由于小程序的各种......，所以样式和one一个的APP不太一样，但这不是重点。重点是通过动手做一个小程序，可以对小程序组件以及整体开发过程有一个详情点的了解。最后不多做赘述了。代码奉上，虽然还有不少bug。
点击前往GitHub下载代码