剛剛擼出來的新鮮小程序一個(附源碼)

前言

最近出於我的興趣以及公司業務涉及到小程序這一塊，就去了解了一下小程序。首先以及必須是先去看了一下官方文檔，但百看不如一練啊。因此利用空暇時間一點一點的作了這麼一個小程序。

目錄結構：

|- 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下載代碼