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

前言

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

目录结构：

|- 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"请求数据。当时间是今天时显示天气状况，如果不是今天，则显示"今天"这个按钮，点击按钮会切换到今天数据，这里还做了一个简单的小动画，当页面滑动时，会根据滑动距离判断是否显示或隐藏天气或"今天"按钮做滑动。

  
    {{Day}} {{Month}}.{{Year}}
  
{{weather.city_name}}·{{weather.climate}} {{weather.temperature}}℃
今天
  

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

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

      


{{item.title}}|{{item.pic_info}}
{{item.forward}}
{{item.words_info}}

分享

编辑

{{content[is_show_view].volume}}

{{content[is_show_view].title}}|{{content[is_show_view].pic_info}}

 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

  WxParse.wxParse('content', 'html', content, that);