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

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

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

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

實(shí)現(xiàn)功能

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

使用方式上支持搖一搖、點(diǎn)界面按鈕、手動(dòng)輸入這三種方式。

掃碼試用（左右皆可）

界面展示

開(kāi)發(fā)資源

1. 免費(fèi)開(kāi)放語(yǔ)義接口平臺(tái) olami.ai
2. 微信小程序平臺(tái)
3. js, css

源碼分析

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

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

1. config.js

   因?yàn)橛玫揭恍┡渲?，放?js里封裝起來(lái)比較好。

2. pics/bg.jpg

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

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

app.js

提供獲取用戶(hù)微信賬號(hào)昵稱(chēng)和所在地，獲取當(dāng)前地理位置這兩個(gè)公共接口。

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原始坐標(biāo)
      type: 'gcj02', //國(guó)家標(biāo)準(zhǔn)加密坐標(biāo)
      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)屬性：標(biāo)題名稱(chēng)，背景色，網(wǎng)絡(luò)超時(shí)等。

配置首頁(yè)面為pages/index/index。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "black",
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "遙知之 -- olami語(yǔ)義支持",
    "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，還有小程序中預(yù)置的語(yǔ)料集合。

module.exports = {

  //NLI appkey
  appkey: `b4118cd178064b45b7c8f1242bcde31f`,

  //NLI appsecret
  appsecret: `7908028332a64e47b8336d71ad3ce9ab`,

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

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

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

獲取隨機(jī)GUID：GUID.js

//表示全局唯一標(biāo)識(shí)符 (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);
  }

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

  //Guid對(duì)象的標(biāo)記
  this.IsGuid = function () { }
  //返回 Guid 類(lèi)的此實(shí)例值的 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]);
      }