微信小程序智能生活小秘書開發(fā)詳解

>>>>>>>>>>>>>>>>>>>>>>>> 歡迎轉(zhuǎn)載 <<<<<<<<<<<<<<<<<<<<<<<<

本文原地址: http://blog.csdn.net/happycxz/article/details/75432928

“遙知之”微信小程序全部源碼打包下載： http://download.csdn.net/download/happycxz/9905134

實現(xiàn)功能

實現(xiàn)一個智能生活信息查詢的小秘書功能，支持查天氣、新聞、日歷、匯率、笑話、故事、百科、詩詞、郵編、區(qū)號、菜譜、股票、節(jié)目預告，還支持閑聊、算24點、數(shù)學計算、單位換算、購物、搜索等功能。

使用方式上支持搖一搖、點界面按鈕、手動輸入這三種方式。

掃碼試用（左右皆可）

界面展示

開發(fā)資源

1. 免費開放語義接口平臺 olami.ai
2. 微信小程序平臺
3. js, css

源碼分析

基本延用官方案例的目錄結(jié)構(gòu)和命名，index.xx是首頁面相關(guān)代碼，logs.xx是日志頁相關(guān)代碼。

比官方目錄結(jié)構(gòu)多了兩個文件：

1. config.js

   因為用到一些配置，放在.js里封裝起來比較好。

2. pics/bg.jpg

   小程序背景圖片，開發(fā)環(huán)境上加載本地文件作為背景圖片是生效的，預覽體驗時不生效，網(wǎng)上有人說不支持本地文件，因此這里這個圖片其實沒有用到，只是暫時留著。

小程序根目錄文件：app.js, app.json, app.wxss, config.js

app.js

提供獲取用戶微信賬號昵稱和所在地，獲取當前地理位置這兩個公共接口。

const corpusList = require('./config').corpus
var UTIL = require('./utils/util.js');

App({
  onShow: function () {
    UTIL.log('App Show')
  },
  onHide: function () {
    UTIL.log('App Hide')
  },
  onLaunch: function () {
    UTIL.log('App Launch')
    this.updateUserLocation()
  },

  updateUserLocation: function() {
    var that = this
    wx.getLocation({
      //type: 'wgs84',  // gps原始坐標
      type: 'gcj02', //國家標準加密坐標
      success: function (res) {
        that.globalData.latitude = res.latitude
        that.globalData.longitude = res.longitude
        that.globalData.speed = res.speed
        //var accuracy = res.accuracy
        UTIL.log('REFRESH LOCATION: ' + that.globalData.latitude + ' | ' + that.globalData.longitude + ' , speed: ' + that.globalData.speed)
      },
      fail: function(res) {
        UTIL.log('REFRESH LOCATION FAILED...')
      }
    })
  },

  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調(diào)用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              that.globalData.custId = UTIL.getUserUnique(that.globalData.userInfo);
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        },
        fail: function () {
          UTIL.log('登錄WX失敗了！')
        }
      })
    }
  },

  clearUserInfo: function() {
    var that = this
    that.globalData.userInfo = null;
    that.globalData.hasLogin = false;
  },

  globalData:{
    userInfo:null,
    corpus: corpusList,
    custId: '',
    latitude: 0.0,
    longitude: 0.0,
    speed: 0,
  }
})

app.json

配置小程序窗體相關(guān)屬性：標題名稱，背景色，網(wǎng)絡(luò)超時等。

配置首頁面為pages/index/index。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "black",
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "遙知之 -- olami語義支持",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#F8F8F8"
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  }
}

app.wxss

配置了“遙知之”小程序container全局樣式

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

配置文件：config.js

保存一些配置信息，包括NLI的key和secret，還有小程序中預置的語料集合。

module.exports = {

  //NLI appkey
  appkey: `b4118cd178064b45b7c8f1242bcde31f`,

  //NLI appsecret
  appsecret: `7908028332a64e47b8336d71ad3ce9ab`,

  corpus: [
    // '閑聊',
    // '天氣',
    // '詩詞',
    // '單位換算',
    // '新聞',
    // '算24點',
    // '菜譜',
    // '匯率',
    // '郵編',
    // '區(qū)號',
    // '股票',
    // '日歷',
    // '節(jié)目預告',
    // '笑話',
    // '故事',
    // '購物',
    // '數(shù)學運算',
    // '百科',
    // '搜索',

    '你今年多大啦',
    '上海今天天氣如何',
    '北京的呢',
    '李白寫過什么詩',
    '我要聽李白的靜夜思',
    '背一首將進酒',
    '一公里等于多少英尺',
    '我要看體育新聞',
    '4567算24點',
    '紅燒肉的做法',
    '1美元能換算多少人民幣',
    '查一下南昌的郵編',
    '鄭州的區(qū)號是多少',
    '中國石油的股價',
    '今年中秋節(jié)是哪一天',
    '明晚湖南衛(wèi)視放什么節(jié)目',
    '來個笑話',
    '講個故事聽聽',
    '我要買電腦',
    '1加到100等于多少',
    '黃山有多高',
    '百度搜一下薛之謙的照片',
  ]
};

utils目錄文件：GUID.js, MD5.js, NLI.js, util.js

獲取隨機GUID：GUID.js

//表示全局唯一標識符 (GUID)。
function Guid(g) {
  var arr = new Array(); //存放32位數(shù)值的數(shù)組

  if (typeof (g) == "string") { //如果構(gòu)造函數(shù)的參數(shù)為字符串
    InitByString(arr, g);
  } else {
    InitByOther(arr);
  }

  //返回一個值，該值指示 Guid 的兩個實例是否表示同一個值。
  this.Equals = function (o) {
    if (o && o.IsGuid) {
      return this.ToString() == o.ToString();
    } else {
      return false;
    }
  }

  //Guid對象的標記
  this.IsGuid = function () { }
  //返回 Guid 類的此實例值的 String 表示形式。
  this.ToString = function (format) {
    if (typeof (format) == "string") {
      if (format == "N" || format == "D" || format == "B" || format == "P") {
        return ToStringWithFormat(arr, format);
      } else {
        return ToStringWithFormat(arr, "D");
      }
    } else {
      return ToStringWithFormat(arr, "D");
    }
  }

  //由字符串加載
  function InitByString(arr, g) {
    g = g.replace(/\{|\(|\)|\}|-/g, "");
    g = g.toLowerCase();
    if (g.length != 32 || g.search(/[^0-9,a-f]/i) != -1) {
      InitByOther(arr);
    } else {
      for (var i = 0; i < g.length; i++) {
        arr.push(g[i]);
      }