微信小程序—智能小蜜（基於智能語義解析olami開放平臺）

概述

該程序支持功能有查天氣、查詩詞、查百科、算算術、查日曆、看笑話、看故事、聊天等，經過用戶輸入語句智能解析用戶意圖輸出相應答案。

詳細

代碼下載：http://www.demodashi.com/demo/11339.html

1、準備工做

 

一、電腦須要安裝有微信web開發者工具，若是沒有請點擊這裏安裝：下載地址

二、成爲微信小程序開發者，須要用到appID，詳細流程見微信公衆平臺流程介紹。

 

2、程序實現

一、掃碼體驗：

二、項目目錄以下：

• main爲首頁面，實現天氣查詢（使用modal組件顯示彈出框修改城市），和導航子頁面詩詞、日曆、數學、單位轉換、24點遊戲。

• joke爲笑話頁，實現看笑話、看故事。

• baike爲百科頁，實現百科知識查詢。

• other爲其餘頁，實現廣告頁輪播。

• detail爲從main頁導航到的子頁面，實現功能有詩詞、日曆、數學、單位轉換、24點遊戲、聊天等。

三、主要代碼說明：

1）、首頁：

a、支持天氣查詢（使用modal組件顯示彈出框修改城市）；

main.wxml

<modal title="請輸入城市名" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">
    <view class="setcity">
      <image style="width: 40px; height: 40px; " mode="aspectFit" src="../../image/city.png"></image>
      <input class="input" placeholder="點此手動輸入" placeholder-style="color:#6aa84f" maxlength="10" confirm-type="send" bindblur="bindConfirmControl" />
    </view>
  </modal>

main.js

modalConfirm: function (options) {
    var self = this;
    self.setData({
      modalHidden: true
    });
    var city = wx.getStorageSync("city")
    if (typeof city != 'undefined' && city != ''){
      NliProcess("今天" + city + "的天氣", self);
    }
  },

  modalCancel: function (options) {
    var self = this;
    self.setData({
      modalHidden: true
    });
    wx.clearStorage();
  },

  bindConfirmControl: function (e) {
    var inputTxt = e.detail.value;
    if (inputTxt != '')
    wx.setStorageSync("city", inputTxt);
  }

b、支持導航到子頁面詩詞、日曆、數學、單位轉換、24點遊戲。

main.js

appClick: function (options) {
    var id = options.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })

  }

main.wxml

<view class="list">
    <block wx:for="{{app_display}}">
      <view class="text-app" data-id="{{item.num}}" bindtap="appClick">
        <image class="img" style="width: 60px; height: 60px; " mode="widthFix" src="{{item.imgurl}}"></image>
        <text class="text-app-info">{{item.display}}</text>
      </view>
    </block>
  </view>

2）、支持搜索詩詞、日曆、數學、單位轉換、24點遊戲（使用radio組件實現單項選擇器）。

從main頁跳轉到detail頁時，傳的參數「id」可在detail.js的onLoad方法中得到。由id（即checkedno）值來設置radio的初始選項。

detail.js

onLoad: function (options) {
    var self = this;
    checkedno = options.id;  
    self.setData({
      checkedno: checkedno,
      failTxt: expList[checkedno]
    })   

  }

detail.wxml

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{radioitems}}">
    <radio value="{{item.name}}" checked="{{index == checkedno}}"/>{{item.value}}
  </label>
</radio-group>

3）、支持查百科。

icon組件type值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear。這裏用的search類型。

baike.wxml

<view class="text-search">
    <icon type="search" size="25" color="blue" class="searchIcon" />
    <input class="input" placeholder-style="color:#6aa84f" maxlength="50" placeholder="點此手動輸入" value="{{inputTxt}}" confirm-type="send" bindconfirm="bindConfirmControl" bindfocus="bindFocusClear" />
  </view>

4）、使用組件swiper實現圖片輪播。

other.wxml

<swiper indicator-dots="true" autoplay="true" interval="4000" duration="2000">
  <swiper-item>
    <image src="../../image/img1.png" class="slide-image"/>
  </swiper-item>
  <swiper-item>
    <image src="../../image/img2.png" class="slide-image"/>
  </swiper-item>
  <swiper-item>
    <image src="../../image/img3.png" class="slide-image"/>
  </swiper-item>
  <swiper-item>
    <image src="../../image/img4.png" class="slide-image"/>
  </swiper-item>
</swiper>

如下是背景圖片設置方式：

other.wxss

page{
  background-image:url('http://img.blog.csdn.net/20170812173448986?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTgyNzUwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center');
  background-size: cover;
}

3、運行效果

一、運行截圖以下：

 

 

 

 

4、其餘補充

一、開發過程當中常見問題：

1)、從視圖層到邏輯層的數據傳遞。詳情可參考微信小程序—事件

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})

其中event的信息以下：

{
"type":"tap",
"timeStamp":895,
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},

2)、currentTarget 與 target的區別。微信小程序—冒泡/非冒泡事件

target：觸發事件的源組件。

currentTarget：事件綁定的當前組件

如如下例子中，點擊 inner view 會前後觸發handleTap3和handleTap2(由於tap事件會冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，再也不向父節點傳遞)，點擊 middle view 會觸發handleTap2，點擊 outter view 會觸發handleTap1。

<view id="outter" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

3)、作微信小程序時，要嚴格遵照小程序審覈標準，注意：特殊行業所需資質材料

 

代碼下載：http://www.demodashi.com/demo/11339.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權