小程序-demo：小熊の日记

ylbtech-小程序-demo：小熊の日记

1、CHANGELOG.md

# 2016-10-12

* 更新开发者工具至`v0.10.101100`
* 修改`new`页的数据绑定方式 & 修改多行文本框输入时的bug

# 2016-10-13

* 完善日志编辑页

2、README.md

# 微信小程序之小熊の日记 #

## 关于 ##

* 我是一名后端程序员，做这个仅仅是因为觉得微信小程序好玩；
* 没有明确的产品意图，东抄抄西抄抄只是为了验证和学习微信小程序；
* 大体是想做一个个人/家庭日常记录的app;
* 持续开发中，有兴趣请持续关注

## 预览 ##

* 概览

<p align="center">
    <img src="./files/preview.gif" alt="截频演示" width="100%">
</p>

## 功能特点 ##

* 功能完备，实用导向
* Server端API支持
* 涵盖众多组件、API使用，适用于学习微信小程序
* 多行文本模拟实现
* tab切换
* 模态框
* 本地数据组织及存储
* 图片预览功能

## 使用步骤

1. 克隆代码:

```bash
$ cd path/to/your/workspace
$ git clone https://github.com/harveyqing/BearDiary.git
```

2. 打开`微信Web开放者工具`（注意：须`v0.10.101100`及以上版本）

3. 添加项目

    * AppID：选`无AppID`
    * 项目名称：任意填写
    * 项目目录：path/to/your/workspace
    * 点击 `添加项目`

## 开发计划 ##

- [ ] 开发server端API接口
- [ ] 完成日记撰写页
- [ ] 添加评论、喜欢、收藏功能
- [ ] 规范`coding style`

## 小程序开发相关资源 ##

### 开发者工具下载 ###

> 最新版本 0.10.101100

- [windows 64](https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki&t=1476434677599)
- [windows 32](https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki&t=1476434677599)
- [mac](https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki&t=1476434677599)

### 开发者文档 ###

- [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/)

### 最好的资源集 ###

- [justjavac/awesome-wechat-weapp](https://github.com/justjavac/awesome-wechat-weapp)

## Anyway, 欢迎PR ##

## LICENSE ##

[MIT](./LICENSE)

3、

1.返回顶部

0、

1、app.js

// app.js

const config = require('config');
const diaries = require('demo/diaries');

App({

  onLaunch: function () {
  },

  // 获取用户信息
  getUserInfo: function(cb) {
    var that = this;

    if (this.globalData.userInfo) {
      typeof cb == 'function' && cb(this.globalData.userInfo)
    } else {
      // 先登录
      wx.login({
        success: function() {
          wx.getUserInfo({
            success: (res) => {
              that.globalData.userInfo = res.userInfo;
              typeof cb == 'function' && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },

  // 获取本地全部日记列表
  getDiaryList(cb) {
    var that = this;

    if (this.globalData.diaryList) {
      typeof cb == 'function' && cb(this.globalData.diaryList);
    } else {
      let list = [];

      this.getLocalDiaries(storage => {
        // 本地缓存数据
        for (var k in storage) {
          list.push(storage[k]);
        }
      });

      // 本地假数据
      list.push(...diaries.diaries);
      that.globalData.diaryList = list;
      typeof cb == 'function' && cb(that.globalData.diaryList)
    }
  },

  // 获取本地日记缓存
  getLocalDiaries(cb) {
    var that = this;

    if (this.globalData.localDiaries) {
      typeof cb == 'function' && cb(this.globalData.localDiaries);
    } else {
      wx.getStorage({
        key: config.storage.diaryListKey,
        success: (res) => {
          that.globalData.localDiaries = res.data;
          typeof cb == 'function' && cb(that.globalData.localDiaries);
        },
        fail: (error) => {
          that.globalData.localDiaries = {};
          typeof cb == 'function' && cb(that.globalData.localDiaries);
        }
      });
    }
  },

  // 获取当前设备信息
  getDeviceInfo: function(callback) {
    var that = this;

    if (this.globalData.deviceInfo) {
      typeof callback == "function" && callback(this.globalData.deviceInfo)
    } else {
      wx.getSystemInfo({
        success: function(res) {
          that.globalData.deviceInfo = res;
          typeof callback == "function" && callback(that.globalData.deviceInfo)
        }
      })
    }
  },

  globalData: {
    // 设备信息，主要用于获取屏幕尺寸而做适配
    deviceInfo: null,

    // 本地日记缓存列表 + 假数据
    // TODO 真实数据同步至服务端，本地只做部分缓存
    diaryList: null,

    // 本地日记缓存
    localDiaries: null,

    // 用户信息
    userInfo: null,
  }

})

2、app.json

{
  "pages":[
    "pages/list/list",
    "pages/mine/mine",
    "pages/new/new",
    "pages/entry/entry"
  ],
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#39b5de",
    "navigationBarTitleText": "小熊の日记",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#eceff4"
  },
  "tabBar": {
    "color": "#858585",
    "selectedColor": "#39b5de",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list":[
      {
        "pagePath": "pages/list/list",
        "iconPath": "images/icons/mark.png",
        "selectedIconPath": "images/icons/markHL.png",
        "text": "印记"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/icons/mine.png",
        "selectedIconPath": "images/icons/mineHL.png",
        "text": "我的"
      }
    ]
  },
  "debug": true
}

3、app.wxss

/**
 app.wxss
 全局样式
**/

  page {
  width: 100%;
  height: 100%;
  padding: 0;
  background-color: #eceff4;
  font-size: 30rpx;
  font-family: -apple-system-font, 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;

}

3、config.js

// 全局配置

module.exports = {
    /** 腾讯地图 **/
    map: {
        baseUrl: 'https://apis.map.qq.com/ws',
        key: '2TCBZ-IM7K5-XHCIZ-QXLRT-CIT4J-DEFSM',
    },

    /** 输入框控件设置 **/
    input: {
        charWidth: 14,  // 单个字符的宽度，in rpx
    },

    /** 本地存储 **/
    // TODO 数据通过API全部存储于服务端
    storage: {
        diaryListKey: 'bearDiaryList',
    }
};

4、project.config.json

{
    "description": "项目配置文件。",
    "packOptions": {
        "ignore": []
    },
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "2.2.3",
    "appid": "wx7d22ab7088f2db6a",
    "projectname": "BearDiary",
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

5、images

6、

2. pages返回顶部

1、demo

-diaries.js

var diaries = [
  {
    meta: {  // 内容元数据
      cover: "http://m.chanyouji.cn/index-cover/64695-2679221.jpg?imageView2/1/w/620/h/330/format/jpg",
      avatar: "https://pic4.zhimg.com/e515adf3b_xl.jpg",
      title: "此刻静好，愿幸福长存",
      meta: "2016.10.17",
      create_time: "2016.10.18 11:57:27",
      nickName: "肥肥的小狗熊",
    },
    list: [
      {
        type: "TEXT",
        content: '9月11日，15年的911事件使这天蒙上了特殊的意义。2016年的这一天，怀着激动的心情，开启了高原寻秘之旅，向着那圣洁之地出发。全程自驾近2000公里，雨崩徒步80公里，完成觐见之旅。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "北京市",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
          type: "IMAGE",
          content: 'http://p.chanyouji.cn/1473699595/1740E45C-D5AF-497E-A351-06E5BA22B1A3.jpg',
          poi: {
              longitude: 117.2,
              latitude: 37.5,
              name: "深圳市",
          },
          description: "深圳宝安国际机场",
          id: 2,
          commentNum: 1,
          likeNum: 5,
      },
      {
        type: "IMAGE",
        content: 'http://p.chanyouji.cn/1473699603/7C3B253F-0A31-4754-B042-E04115F2C931.jpg',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "丽江三义机场",
        },
        description: "丽江三义机场",
        id: 2,
        commentNum: 1,
        likeNum: 5,
      },
      {
        type: "TEXT",
        content: ' 玉水寨在白沙溪镇，是纳西族中部地区的东巴圣地，是丽江古城的溯源。\n\nTips:门票50元/人，游玩时间2小时。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "玉水寨",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "IMAGE",
        content: 'http://p.chanyouji.cn/1473685830/2A48B40F-1F11-498D-ABD2-B0EDCD09F776.jpg',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "玉水寨",
        },
        description: "阳光下的玉水寨",
        id: 2,
        commentNum: 1,
        likeNum: 5,
      },
      {
        type: "VIDEO",
        content: 'http://flv.bn.netease.com/videolib3/1605/22/auDfZ8781/HD/auDfZ8781-mobile.mp4',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "深圳宝安国际机场",
        },
        description: "",
        id: 2,
        commentNum: 10,
        likeNum: 200,
      },
    ]
  },
  {
    meta: {  // 内容元数据
      cover: "http://m.chanyouji.cn/articles/625/ca9e50f74e273041e3a399bf5528f7b5.jpg?imageView2/1/w/620/h/330/format/jpg",
      avatar: "https://pic4.zhimg.com/e515adf3b_xl.jpg",
      title: "梦想实现的地方-马达加斯加第二季",
      meta: "2013.8.10",
      create_time: "2016.10.18 11:57:27",
      nickName: "小闹钟",
    },
    list: [
      {
        type: "TEXT",
        content: '2012年十一，我和朋友一行五人第一次登上这个被非洲大陆抛弃的岛屿，看到了可爱的狐猴，憨态可掬的变色龙，明信片一样的猴面包树，天真的孩子淳朴的人民，结识了我们生命中一个重要的朋友导游小温（可以加地接小温QQ或微信咨询：109300820），从此，我们爱上了这片土地。马达加斯加是一个海岛，一年分成旱季和雨季，没有特别的低温或者高温季节，几乎全年都适合旅游，只是观赏的重点略有不同而已。 \n导游小温向我们介绍，在这里，每年的7月到9月，可以近距离观看座头鲸，于是，我们从那时开始期待这个夏季的到来。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "TEXT",
        content: '第一天 8月10日 天气晴\n\n长时间的飞行，多少会有一些枯燥，然而只要你愿意，依然可以看到心中的那片风景。 \n嗨！别郁闷了，和我一起到三万英尺的高空来看云。 \n喜欢飞机起飞的刹那间，加速再加速直到脱离开地球的引力冲向自由的天空。喜欢像鸟一样俯视地面的视角，高高在上，笑看人间。 \n天，蓝，云，白。机窗外的云时而像珍珠点点，时而像棉絮团团。\n夕阳将至，云和机翼被镀上一层华丽的金。 \n金红色的阳光与蓝色的天空最终合成出一片淡淡的紫，绚丽而梦幻。',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 1,
        commentNum: 0,
        likeNum: 0,
      },
      {
        type: "IMAGE",
        content: 'http://p.chanyouji.cn/64695/1377177446705p182j2oa9031j1p0b5vpuvj1voj2.jpg-o',
        poi: {
          longitude: 117.2,
          latitude: 37.5,
          name: "塔那那利佛",
        },
        description: "",
        id: 2,
        commentNum: 1,
        likeNum: 5,
      },
    ]
  }
]

module.exports = {
  diaries: diaries,
}

2、services

-geo.js

// 基于腾讯地图API的地理位置功能封装

const config = require('../config.js');
const request = require('request.js');

const statusCodeMap = {  // 请求失败原因映射
    110: '请求来源未被授权',
    301: '请求参数信息有误',
    311: 'key格式错误',
    306: '请求有护持信息请检查字符串',
}

module.exports = {

    // 地图API请求方法
    mapRequest(method, params, callback) {
        var url = [config.map.baseUrl, method, 'v1/'].join('/');
        let param = Object.assign({'key': config.map.key}, params);
        let queryString = Object.keys(param).map(q => [q, param[q]].join('=')).join('&');
        url += '?' + queryString;

        request({'method': 'GET', 'url': url}).then(resp => {
            if (resp.status != 0) {
                console.log('请求错误：' + (statusCodeMap[resp.status] || resp.message));
                request
            }

            return callback(resp);
        }).catch(err => {console.log(err);});
    },

    // 格式化地理位置
    formatLocation(loc) {
        return [loc.latitude, loc.longitude].map(f => f.toString()).join(',');
    },
}

-request.js

// 对微信网络请求的异步封装

module.exports = (options) => {
    return new Promise((resolve, reject) => {
        options = Object.assign(options, {
            success(result) {
                if (result.statusCode === 200) {
                    resolve(result.data);
                } else {
                    reject(result);
                }
            },

            fail: reject,
        });

        wx.request(options);
    });
};

3、utills

-input.js

// 输入框相关处理函数

module.exports = {

  // 计算字符串长度（英文占一个字符，中文汉字占2个字符）
  strlen(str) {
    var len = 0;
    for (var i = 0; i < str.length; i++) {
      var c = str.charCodeAt(i);
      if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
        len++;
      } else {
        len += 2;
      }
    }
    return len;
  },
}

-utill.js

// 工具函数

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds();


  return [year, month, day].map(formatNumber).join('.') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

// 将一维数组转为二维数组
function listToMatrix(list, elementPerSubArray) {
  let matrix = [], i, k;

  for (i = 0, k = -1; i < list.length; i += 1) {
    if (i % elementPerSubArray === 0) {
      k += 1;
      matrix[k] = [];
    }

    matrix[k].push(list[i]);
  }

  return matrix;
}

module.exports = {
  formatTime: formatTime,
  listToMatrix: listToMatrix,
}