句栈小程序

最近开发了一款句栈微信小程序，包含一句、早安心语和晚安心语三个页面，涵盖了日历、定位和天气预报等功能。目前这款微信小程序已经发布上线，感兴趣的朋友可以扫一下下面的小程序码使用。这里主要记录一下开发过程中的要点，全部代码已上传到GitHub句栈小程序
这是项目的小程序码

小程序的总体展示效果

首先先看一下项目结构

libs文件夹下面的是Bmob后端云的微信小程序SDK和腾讯位置服务的JavaScript SDK，分别实现了背景图片更新和位置定位功能。

一句

js

格式化日期和月份

//yiju.js
var month = util.shapeMonth(date.getMonth() + 1);
var day = util.shapeDay(date.getDate());

//util.js
function shapeDay(day) {
  if (day <= 9) day = "0" + day;
  return day;
}
//格式化月份
function shapeMonth(month) {
  if (month <= 9) month = "0" + month;
  return month;
}

对后台数据进行判空

var author = "佚名"
    //对数据中图片的来源判空
    var detail = {
      imgauthor: author,
      imgurl: "",
      word: "",
      wordfrom: ""
    }
    wx.request({
      url: "https://api.tianapi.com/txapi/one/index?key=&rand=1",
      success: res => {
        if (res.data.code == 200) {
          if (res.data.newslist[0] != null) {
            if (res.data.newslist[0].imgauthor != "") {
              detail.imgauthor = res.data.newslist[0].imgauthor
            }
            detail.word = res.data.newslist[0].word;
            detail.wordfrom = res.data.newslist[0].wordfrom;
            detail.imgurl = res.data.newslist[0].imgurl;
          }
          that.setData({
            content: detail
          })

点击放大图片

// 查看图片
  viewMoviePostImg: function(e) {
    var src = e.currentTarget.dataset.src;
    wx.previewImage({
      urls: [src], //需要预览的图片http链接列表
      current: src //当前显示图片的http链接
    })
  },

早安心语

js

经纬度转具体定位
util.js

//经纬度转具体定位

//引入获得地址的js文件
var QQMapWX = require("../libs/qqmap-wx-jssdk.js");
function getLocation(callBack) {
  //调用API得到经纬度
  wx.getLocation({
    type: 'wgs84',
    success: function (res) {
      var speed = res.speed;
      var accuracy = res.accuracy;
      var latitude = res.latitude;
      var longitude = res.longitude;

      //地址解析
      var demo = new QQMapWX({
        //在腾讯位置服务申请的key
        key: ''
      });
      demo.reverseGeocoder({
        //地址解析
        location: {
          latitude: latitude,
          longitude: longitude
        },
        success: res => {
          //获得地址
          callBack(res.result);
        }
      })
    },
    fail: function (res) {
      console.log(res);
    }
  })
}

morning.js

//这行代码在onload方法内写
util.getLocation(this.processAddress);

//在util回调数据
  processAddress: function (add) {
    that = this;
    var content;
    that.setData({
      address: add.address_component.district
    });
    var address = add.address_component.district
    wx.request({
      url: 'https://api.tianapi.com/txapi/tianqi/index?key=&city=' + address,
      success: res => {
        if (res.data.code == 200) {
          that.setData({
            content: res.data.newslist[0]
          })
        }else{
          that.setData({
            content: res.data.msg
          })
        }
      }
    })
  },

在Bmob后端云取图片数据

const query = Bmob.Query('morning');
    query.get('qXIY777c').then(res => {
      that = this;
      that.setData({
        imgurl: res.imgurl
      })
    }).catch(err => {
      console.log(err)
    })

晚安心语的具体功能跟早安心语的类似，这里就不在叙述。

至此，这个项目的总结完毕。