前言
最近出于个人兴趣以及公司业务涉及到小程序这一块,就去了解了一下小程序。首先以及必须是先去看了一下官方文档,但百看不如一练啊。所以利用空暇时间一点一点的做了这么一个小程序。
目录结构:
|- 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下载代码