微信小程序—智能小蜜（基于智能语义解析olami开放平台）

悠悠 2022-05-31 11:54 138阅读 0赞

# 概述 #

该程序支持功能有查天气、查诗词、查百科、算算术、查日历、看笑话、看故事、聊天等，通过用户输入语句智能解析用户意图输出相应答案。

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/11339.html][http_www.demodashi.com_demo_11339.html] ####

#### 一、准备工作 ####

1、电脑需要安装有微信web开发者工具，如果没有请点击这里安装：[下载地址][Link 1]

2、成为微信小程序开发者，需要用到appID，详细流程见[微信公众平台流程介绍][Link 2]。

#### 二、程序实现 ####

1、扫码体验：

![gh\_0f55dac70965\_258.jpg][gh_0f55dac70965_258.jpg]

2、项目目录如下：

*  main为首页面，实现天气查询（使用modal组件显示弹出框修改城市），和导航子页面诗词、日历、数学、单位转换、24点游戏。
 *  joke为笑话页，实现看笑话、看故事。
 *  baike为百科页，实现百科知识查询。
 *  other为其他页，实现广告页轮播。
 *  detail为从main页导航到的子页面，实现功能有诗词、日历、数学、单位转换、24点游戏、聊天等。

![QQ图片20170825134746.jpg][QQ_20170825134746.jpg]

3、主要代码说明：

1）、首页：

a、支持天气查询（使用modal组件显示弹出框修改城市）；

main.wxml

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

4）、使用组件swiper实现图片轮播。

other.wxml

以下是背景图片设置方式：

other.wxss

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

#### 三、运行效果 ####

1、运行截图如下：

![QQ图片20170814165016.jpg][QQ_20170814165016.jpg]

![QQ图片20170814165009.jpg][QQ_20170814165009.jpg]

![QQ图片20170814165031.jpg][QQ_20170814165031.jpg]

![QQ图片20170814165022.jpg][QQ_20170814165022.jpg]

![QQ图片20170814164701.jpg][QQ_20170814164701.jpg]

#### 四、其他补充 ####

1、开发过程中常见问题：

1)、从视图层到逻辑层的数据传递。详情可参考[微信小程序—事件][Link 3]

`<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的区别。[微信小程序—冒泡/非冒泡事件][Link 3]

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)、做微信小程序时，要严格遵守小程序审核标准，注意：[特殊行业所需资质材料][Link 4]

#### 代码下载：[http://www.demodashi.com/demo/11339.html][http_www.demodashi.com_demo_11339.html] ####

#### 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_11339.html]: http://www.demodashi.com/demo/11339.html
[Link 1]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
[Link 2]: https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html
[gh_0f55dac70965_258.jpg]: /images/20220531/065d44e8b4824729ae1f44cd9f80b00c.png
[QQ_20170825134746.jpg]: /images/20220531/049c901ea727463cbc2da912a9ad6b8f.png
[QQ_20170814165016.jpg]: /images/20220531/f06cad544e6c43f19998d39d56b44039.png
[QQ_20170814165009.jpg]: /images/20220531/e0ac7ca84cf348ac8e2b3dd404ce9be9.png
[QQ_20170814165031.jpg]: /images/20220531/9e0ba4373b504ed2a361b45fab32e5d0.png
[QQ_20170814165022.jpg]: /images/20220531/9286d91312bf465195e4694b6fecf0e5.png
[QQ_20170814164701.jpg]: /images/20220531/674b291174b44c74a3907d20ae11c059.png
[Link 3]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
[Link 4]: https://mp.weixin.qq.com/debug/wxadoc/product/material.html