15_心理咨询_微信小程序项目实战_数据交互_首页

前置

        把十方智育的图片资源、视频资源等都放在json-server的public目录下面的指定文件夹中；
                public    json-server的静态资源目录
                        images    所有的图片资源
                        audio    所有的音频资源
                        video    所有的视频资源
    
        我们在实际开发中，图片、视频、音频等资源都是放在外部服务器上的，tabBar对应的图片必须是本地图片；因为微信小程序的代码包必须控制在2M以内；

        既然我们的json-server服务器已经搭建完成，那么我们肯定要进行数据交互；我们页面中需要的图片、数据都从json-server中获取；

        注：把除tabBar图片外的所有图片，都放在json-server public文件夹的images文件夹中；

        数据交互三步：
                1、数据定义，在json-server定义所需数据
                2、数据操作，在微信小程序的对应的js文件中，发送请求操作数据(查询/更新/删除/修改)
                3、数据处理，把得到的反馈数据进行对应的处理

        对于页面中无需改变的图片，我们直接在wxml写路径即可，比如：搜索框里面的放大镜；但是对于需要改变的图片，我们最后不要在wxml中直接写路径，而是通过数据的方式引入图片的地址(图片的路径是定义在json-server的data中)，比如导航菜单、轮播图；

一、搜索框图片

        1、搜索框的图片不怎么会改变，我们可以直接写图片路径；
                <image src="http://localhost:3004/images/@2x_find.png"></image>
                上述写法的问题: 如果整个项目中有1000张图片都是这么写的路径，如果将来把存储图片的服务器给换了一个，那么ip地址肯定发生了改变，那么我们需要把1000张图片的路径都改了； 
                代码可维护性太低；
                把ip地址和端口号路径都定义成变量，然后在页面中引入变量即可；将来只需要改变这个变量即可；
                但是这个最好定义成全局的，因为所有的页面都要使用；
    
        2、在app.js的globalData里面定义baseUrl:"http://localhost:3004/"

        3、哪个页面需要用到baseUrl，就在对应的js通过app对象获取得到即可；
                3.1 怎么获取全局唯一app实例? const app = getApp()
                3.2 通过app实例获取得到baseUrl
                3.3 把baseUrl赋值给当前页面的某个变量

app.js代码：

// app.js
App({
  onLaunch (options) {
    // 生命周期回调——监听小程序初始化。
    console.log("监听小程序初始化 - 小程序启动了...");
  },
  onShow (options) {
    // 生命周期回调——监听小程序启动或切前台
    console.log("小程序切换到前台");
  },
  onHide () {
    // 生命周期回调——监听小程序切后台。
    console.log("小程序切换到后台");
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: {
    userInfo: null,
    baseUrl:"http://localhost:3004/"
  }
})

index.js代码：

// 获取应用实例
const app = getApp()

data: {
    baseUrl:"",
}

onLoad() {
	// 获取baseUrl,赋值给当前页面的data里面的baseUrl变量
	var baseUrl = app.globalData.baseUrl;

	// 把获取得到的baseUrl赋值给当前页面的baseUrl
	// this表示当前页面的page对象
	this.setData({
		baseUrl:baseUrl
	})
}

index.wxml代码：

<!-- 顶部搜索框的实现 -->
<view id="searchOuterView">
  <view id="searchInnerView">
    <image src="{{baseUrl}}images/@2x_find.png"></image>
    <text> 搜索</text>
  </view>
</view>

二、轮播图

        轮播图是可以点击的，点击跳转到对应的详情页去；轮播图详情页和热门文章的详情页是类似的，我们目前仅使用动态数据，后面我们实现具体的详情展示；

        1、定义轮播图所需的数据；在db.json里面定义news数组，用来存储轮播图所需的数据；
                id                新闻编号
                news_title        新闻标题
                news_info        新闻内容，新闻都是通过PC端的后台来添加的，使用的是富文本，但是富文本微信小程序不识别，后续的课程，会给大家讲解富文本解析；
                image            新闻展示图片
                source            新闻来源
                cjsj            新闻创建时间

"news":[
    {
        "id": "2c9065246df6837f016e8d29c47f0082",
        "news_title": "社会心理服务体系建设试点工作方案",
        "news_info": "略...",
        "image": "images/img1.png",
        "source": "十方智育",
        "cjsj": 1574325884000
    },
    {
        "id": "2c9065246df6837f016e8d2298280081",
        "news_title": "关于加强心理健康服务的指导意见　",
        "news_info": "略...",
        "image": "images/img2.png",	
        "source": "十方智育",
        "cjsj": 1574325884000
    },
    {
        "id": "2c90652467500e6801685fa5514b0035",
        "news_title": "加强社会心理服务体系建设",
        "news_info": "略...",
        "image": "images/img3.png",
        "source": "十方智育",
        "cjsj": 1547792896000
    }
]

        2、在index.js的onload函数，获取json-server中news的数据（目前news的数据我们指定要了三条，就当成轮播图来用即可，也不用考虑分页了）；
        wx.request(Object object)    发起 HTTPS 网络请求。

属性	类型	默认值	必填	说明
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
timeout	number		否	超时时间，单位为毫秒
method	string	GET	否	HTTP 请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型
enableHttp2	boolean	false	否	开启 http2
enableQuic	boolean	false	否	开启 quic
enableCache	boolean	false	否	开启 cache
enableHttpDNS	boolean	false	否	是否开启 HttpDNS 服务。如开启，需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS
httpDNSServiceId	boolean		否	HttpDNS 服务商 Id 。 HttpDNS 用法详见 移动解析HttpDNS
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.method 的合法值

值	说明	最低版本
OPTIONS	HTTP 请求 OPTIONS
GET	HTTP 请求 GET
HEAD	HTTP 请求 HEAD
POST	HTTP 请求 POST
PUT	HTTP 请求 PUT
DELETE	HTTP 请求 DELETE
TRACE	HTTP 请求 TRACE
CONNECT	HTTP 请求 CONNECT

        报错信息：
                http://localhost:3004 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html(env: Windows,mp,1.05.2108130; lib: 2.19.5)

        错误解析：
                微信小程序不推荐http，推荐https；我们可以在详情-》本地设置-》不校验合法域名....

        3、把获取的数据展示在index.wxml中，那么就在data中定义news，把获取得到是数据赋值给news；然后在页面中遍历展示即可；
                注：我们只需要res里面的data数据即可；
                this表示当前页面对象,可以在page对象的函数中使用，但是不能在函数的函数中使用；我们可以在当前页面的函数中通过_this变量来存储this值；

index.js代码：

data: {
    ...
    news:"",
    ...    
}
    
onLoad() {
    var _this = this;

    // 获取baseUrl,赋值给当前页面的data里面的baseUrl变量
    var baseUrl = app.globalData.baseUrl;
    /*
      把获取得到的baseUrl赋值给当前页面的baseUrl
      this表示当前页面的page对象
    */
    _this.setData({
        baseUrl:baseUrl
    })

    // 获取得到news的数据
    wx.request({
        url: baseUrl+"news",
        method: "GET",
        header: {
            'content-type': 'application/json'
        },
        success (res) { // res是服务器响应的数据
            _this.setData({
                news: res.data
            })
        }
    })

}

index.wxml代码：

<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{activeColor}}" autoplay="{{autoplay}}"
  interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
  <block wx:for="{{news}}" wx:key="*this">
    <swiper-item>
      <!-- 跳转路径目前可以空置,后续我们讲解富文本解析的时候,再说 -->
      <navigator open-type="navigate" url="...">
        <image src="{{baseUrl + item.image}}"></image>
      </navigator>
    </swiper-item>
  </block>
</swiper>

三、导航菜单

        导航菜单图片可以定义成动态的，因为很多app或pc端网站，在某个节日，比如春节、三八妇女节等都会改变图片的图标，那么我们也通过数据来定义；

        1、定义导航菜单所需的数据；在db.json里面定义navs数组，用来存储导航菜单所需的数据；
                navImg        导航菜单的图片
                navText        导航菜单的文本

"navs":[
    {
        "navImg":"images/@2x_ceping.png",
        "navText":"心理测评"
    },
    {
        "navImg":"images/@2x_yuyue.png",
        "navText":"咨询预约"
    },
    {
        "navImg":"images/@2x_dayi.png",
        "navText":"心理答疑"
    },
    {
        "navImg":"images/@2x_zhishi.png",
        "navText":"心理知识"
    },
    {
        "navImg":"images/@2x_FM.png",
        "navText":"FM"
    },
    {
        "navImg":"images/@2x_gongyi.png",
        "navText":"公益中心"
    }
]

        2、在index.js的onload中请求navs数据，然后复制给data的中navs，然后遍历到index.wxml中；

index.js代码：

data:{
    ...
    navs:"",
    ...    
}

// 获取得到navs的数据
wx.request({
    url: baseUrl+"navs",
    method: "GET",
    header: {
        'content-type': 'application/json'
    },
    success (res) { // res是服务器响应的数据
        _this.setData({
            navs: res.data
        })
    }
})

index.wxml代码：

<!-- 导航菜单 -->
<view id="navView">
  <view class="navItemView" wx:for="{{navs}}" wx:key="*this">
    <image src="{{baseUrl + item.navImg}}"></image>
    <text>{{item.navText}}</text>
  </view>
</view>

四、在线客服/请求回答

        在线客服和请求回答直接使用图片路径即可；

<!-- 在线客服 -->
<view id="onlineView">
  <image src="{{baseUrl}}/images/@2x_zixunpeixun.png"></image>
  <text> 咨询助理在线客服</text>
  <!-- 右箭头实现 -->
  <view class="arrow"></view>
</view>

<!-- 请求回答 -->
<view id="askView">
  <image src="{{baseUrl}}/images/@2x_fudong.png"></image>
</view>

五、精选文章

        首页的精选文章获取的是访问量前3的数据;

        1、定义精选文章所需的数据；在db.json里面定义hotArticles数组，用来存储精选文章所需的数据；

"hotArticles":[
    {
        "SOURCE": "十方智育",
        "ARTICLES_TITLE": "失眠—你失控情绪的另一个出口",
        "CJSJ": 1585708931000,
        "ID": "2c9065246e96ad950171339e1a1f07b1",
        "IMAGE": "/images/rmwz01.jpg",
        "INFO": "失眠，已经成为当下许多年轻人的困扰。正如一句网络流行语调侃的那样，许多人的现状就是“也不是不困，就是想再等等……到底等什么呢？不知道，就是想再等等。”失眠造成的困扰不言而喻，有时会伴随着焦虑、抑郁、烦躁等情绪问题。尤其在隔离环境当中，突然没有平日忙碌的工作来填补时间的情况下，那些",
        "pv":9999
    }, {
        "SOURCE": "十方智育",
        "ARTICLES_TITLE": "最易让人生病的八种心理情绪",
        "CJSJ": 1572253623000,
        "ID": "2c9065246df6837f016e119e63b6002a",
        "IMAGE": "/images/rmwz02.jpg",
        "INFO": "　　生活中总是伴随着各种情绪，反映着我们的喜怒哀乐。不过丰富的情绪并不是件好事，有时还会影响我们的身心健康。下面是男人常见的八种心理情绪，小心这些情绪也会让你生病!　　恶劣情绪NO.1：敌意　　这是个讲究TEAMWORK的社会，不能和他人积极合作更容易引发敌意。专家发现：“敌视情",
        "pv":996
    }, {
        "SOURCE": "十方智育",
        "ARTICLES_TITLE": "成人磨牙暗示着心理压力大",
        "CJSJ": 1572253453000,
        "ID": "2c9065246df6837f016e119bccf90029",
        "IMAGE": "/images/rmwz03.jpg",
        "INFO": "在入睡后磨牙，医学上称为“磨牙症”，磨牙症多见于儿童。不过成年磨牙也逐渐增多趋势，据了解，这与成人的心理状况有关，属于潜意识中的心理压力。　磨牙意味潜意识中的压力　　口腔生理学与心理学认为，口腔是人体首先兴奋的源点，是与外界交流的渠道，且口腔具有表示紧张、悲观等情绪的功能。当今人",
        "pv":38
    }, {
        "SOURCE": "十方智育",
        "ARTICLES_TITLE": "职场解压的15个心理技巧",
        "CJSJ": 1572253333000,
        "ID": "2c9065246df6837f016e1199f6e80028",
        "IMAGE": "/images/rmwz04.jpg",
        "INFO": "练习日常用来减压的技巧职场人士必须学会用简单方法放松自己，这是能够有效地减轻各种压力所导致的紧张不安的一种重要途径。 下面列出了日常放松自己或者减轻压力的一些简单方法，只要你稍加练习就可以掌握。　　1、当面对繁重压力时，小睡一会。打盹被认为是减少和预防压力最有效的办法之一。　　2",
        "pv":10
    }, {
        "SOURCE": "十方智育",
        "ARTICLES_TITLE": "从性格判断你的健康状况",
        "CJSJ": 1572253131000,
        "ID": "2c9065246df6837f016e1196e18c0027",
        "IMAGE": "/images/rmwz05.jpg",
        "INFO": "从一个人的性格能判断其健康状况吗？答案是“能”，而且性格还会很大程度上影响到人的健康。健康心理学家表示，人的个性受到遗传基因和生活环境的双重影响。个性基本上可以分为以下八类，同时它们也能分别映射出不同疾病。虽然人们不能绝对对号入座，但它至少能提醒我们身边存在的潜在风险。　　1",
        "pv":1088
    }
]

        2、在index.js的onload函数中，获取得到访问量前三的文章，赋值给data里面的hotArticles变量，然后遍历在wxml精选文章列表中；

        3、模版图片展示问题：我们引入模版，不会走模版的js文件，并且引入过来之后，当前页面的baseUrl识别不出来；那么我们可以对获取的数据进行操作，把数据的url拼接上baseUrl；

articleTemplate.wxml代码：

<!-- 文章列表结构模版 -->
<template name="articleTemplate">
  <!-- 一个文章列表结构,肯定对应的是一个对象数据,所以插值表达式在引用数据的时候,使用对象写法 -->
  <!-- 模版中的动态数据,只需要使用对象的key即可 -->
  <view class="articleView">
    <view>
      <image src="{{IMAGE}}"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        {{ARTICLES_TITLE}}
      </view>
      <view class="articleDesc">
        {{INFO}}
      </view>
    </view>
  </view>
</template>

articleTemplate.wxss代码：

.articleTitle{
  font-size: 28rpx;
  font-weight: bold;
  line-height: 50rpx;
  height: 50rpx;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 文本不换行 */
  white-space: nowrap;
  /* 多余文本使用省略号替代 */
  text-overflow: ellipsis;
}

.articleDesc{
  font-size: 26rpx;
  color: #A9A9A9;
  line-height: 35rpx;
  height: 70rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  align-content: center;
}

index.js代码：

data:{
    ...
    hotArticles:""
    ...
}

// 获取得到hotArticles的数据
wx.request({
    url: baseUrl+"hotArticles?_sort=pv&_order=desc&_limit=3",
    method: "GET",
    header: {
        'content-type': 'application/json'
    },
    success (res) { // res是服务器响应的数据
        // 把响应过来的数据的IMAGE的路径之前拼接上baseUrl
        for(var i = 0;i < res.data.length;i++){
            res.data[i].IMAGE = baseUrl + res.data[i].IMAGE;
        }

        _this.setData({
            hotArticles: res.data
        })
    }
})

index.wxml代码：

<!-- 文章列表 - 使用模版 -->
<block wx:for="{{hotArticles}}" wx:for-item="article" wx:key="*this">
    <template is="articleTemplate" data="{{...article}}"></template>
</block>

六、报错处理

        控制台会报渲染层错误，加载本地图片失败；但是页面显示正常；

        原因：当渲染层渲染wxml的时候，碰到images/xxx.png，肯定先从根目录的images文件夹中查找，然而images里面并没有这张图片，所以报错；后续加载js里面的data的数据，又从外部服务器获取了图片地址，找到了，就显示图片；这就是为什么控制台会报渲染层错误，加载本地图片失败；但是页面显示正常；

        我们可以把图片也定义成动态的，解决报错信息；

 index.wxml代码：

<!-- 顶部搜索框的实现 -->
<view id="searchOuterView">
  <view id="searchInnerView">
    <image src="{{baseUrl + findImg}}"></image>
    <text> 搜索</text>
  </view>
</view>

<!-- 在线客服 -->
<view id="onlineView">
  <image src="{{baseUrl + kefuImg}}"></image>
  <text> 咨询助理在线客服</text>
  <!-- 右箭头实现 -->
  <view class="arrow"></view>
</view>

<!-- 请求回答 -->
<view id="askView">
  <image src="{{baseUrl + fudongImg}}"></image>
</view>

index.js代码：

data: {
    findImg:"",
    kefuImg:"",
    fudongImg:"",
}

_this.setData({
    baseUrl:baseUrl,
    findImg:"images/@2x_find.png",
    kefuImg:"images/@2x_zixunpeixun.png",
    fudongImg:"images/@2x_fudong.png"
})