刚刚撸出来的新鲜小程序一个(附源码)

前言

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

目录结构：

|- 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   图片资源文件

效果展现和实现

分析：
- 时间选择和天气
切换时间，按时间查看天天的信息。选择时间后会触发绑定的方法“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> 

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

<!-- 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详情页

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

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

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

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

音乐模块暂未开发
以上就是仿照one一个作的一个简单小程序，因为小程序的各类……，因此样式和one一个的APP不太同样，但这不是重点。重点是经过动手作一个小程序，能够对小程序组件以及总体开发过程有一个详情点的了解。最后很少作赘述了。代码奉上，虽然还有很多bug?。
点击前往GitHub下载代码