09-小程序(商品详情,轮播预览图片,富文本rich-text,分享功能,客服功能,组件通信)

01.商品详情-页面渲染

1. 参数从哪里来
   1. 搜索列表点击一个商品跳转的，并传参goods_id
      1. @click:toItem
      2. 跳转uni.navigateTo
      3. 传参goodsId
      4. 模拟器页面参数检验goodsId是OK的
      5. 添加商品详情编译模式，设置启动参数goodsId=291
      6. 在商品详情获取到传参
2. 分析接口
   1. get请求 /api/public/v1/goods/detail?goods_id=57396
3. 发请求
   1. 发请求的时机，获取到传参后
   2. 请求方法queryGoodsDetail
4. 渲染
   1. 请求返回的数据作为data属性goodsInfo

02.商品详情-轮播图预览图片

1. wx.preview

   1. 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作

   2. 使用

      1. urls参数必须给上

      wx.previewImage({
        current: '', // 当前显示图片的https链接
        urls: [img1,img2,img3] // 需要预览的图片https链接列表
      })
      

2. 点击轮播图某一张图片时，预览图片显示我点击的那一张

   1. 点击@click:prevImg

   2. 对比uniapp previewImage，基本上差不多，只不过current可以传number

      uni.previewImage({
          // current:urls[index],
          current:index, //预览图片的默认图片下标。传下标更好
          // urls:urls
          urls  //需要预览的图片链接数组
      })
      

3. 手机扫码预览

注意点：

1. map会返回新数组，遍历数组每一项,每一项执行指定函数，函数的返回结果push新数组。一般用来改造数据的结构

03.商品详情-图文介绍和规格

1. 图文介绍和规格的切换

   1. data属性数组来渲染tabs，一次性注册事件
   2. data属性activeIndex
   3. activeIndex决定结构，是否添加样式
   4. 点击时，改变activeIndex

2. 微信小程序rich-text

   1. 富文本组件

   2. 使用

      1. 只支持部分标签，常用标签比如img是支持的

      <rich-text nodes="节点列表/HTML String">rich-text>
      

3. 图文介绍内容渲染

   <rich-text v-if="!activeIndex" :nodes="goodsInfo.goods_introduce">rich-text>
   

注意点：

1. v-html最终也会转化成rich-text。都行
   
   

2. 富文本，是一个介绍于纯文本和HTML之间的一个语法，解释效率比浏览器组件要快，支持的html标签并不会太多。

3. 商详图文介绍，一般都是图片，特别适合用rich-text

04-小程序分享功能

传送门

onShareAppMessage

两种分享方法

1. 右上角菜单“转发”按钮的行为

2. 需要声明onShareAppMessage

3. 页面内转发按钮（button 组件 open-type="share"）

4. 页面内需要声明 button open-type="share"

   <button open-type="share">分享button>
   

5. 需要声明onShareAppMessage

onShareAppMessage就用来定制分享弹框的,跟onLoad同等级位置写

Page({
  onShareAppMessage: function () {
      //return对象就是定制分享弹窗的
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123' //分享的小程序，别人点击时，跳转的页面路径，默认是当前
      imageUrl:"" //分享弹窗里面的图片
    }
  }
})

05-商品详情-分享的功能

1. 在结构中声明按钮，不能影响之前样式

   1. 占满透明

      1. position:absolute
      2. opacity:0

      <button open-type="share">分享button>
      

2. onShareAppMessage声明在和onLoad平级，并定制弹窗

   onShareAppMessage(){
       return {
           title: this.goodsInfo.goods_name,
          //path: 'pages/item/item?goodsId='+this.goodsInfo.goods_id 默认是当前页面路径
           imageUrl:this.goodsInfo.pics[0].pics_big
       }
   },
   

06-商品详情-客服功能

1. button声明，需要功能，不需要样式

   1. position:absolute
   2. opacity:0

   <button open-type="contact" bindcontact="handleContact">button>
   

2. 后台接入

客服功能

1. 用户联系时，先用机器人陪聊，用户需要人工，挑选一个客服人员进行沟通
2. 特点：需求很早就有，大部分公司都需要，功能都差不多。所以市场上可以低价买到客服系统
3. 在腾讯云提供了客服系统，包括后端服务器和代码

07-工作经验分享-商详分享图片

1. 需求小程序和App都需要分享一张包括商品图片，价格，名称，优惠，小程序二维码组合成一张图片
2. 方案：
   1. iOS和安卓获取商品属性后生成图片，再交给js来分享
      1. iOS和安卓需要发布版本
   2. canvas画图，导出png
      1. 性能差
   3. 在后台管理系统添加商品时生成shareImg,前端可以直接分享，兼容更优
      1. 后台管理系统添加商品时已经有生成shareImg所有的属性
      2. 具体生成canvas画图，导出Png. 添加属性shareImg
      3. 前端（iOS,安卓，小程序，h5）查询商品详情时，就有一个字段,shareImg

注意点

1. 后台管理系统本质就是改数据库，方便运营人员来修改数据库

08-Vue组件通信-父传子

1. 基本使用

   1. 父使用子组件所在的dom上，传属性

      <child 属性名="不要早恋"></child>
      

   2. 子组件声明props

      1. 子组件使用this.prop，

       props: ['属性名']
      

2. 在html里面属性名命名格式parent-msg, 在声明props时可以对应parentMsg

   1. 原因是在html里面，标签和属性不认大写

注意点：

1. .vue文件父传子属性名可以驼峰，背后vue-loader支持这个，不受html文件的限制。

09-Vue组件通信-父传子动态

1. 子组件添加一个属性，用props赋值

   1. 这样符合单向数据流

   props: ['msg'],
       data(){
       return{
           myMsg:this.msg  //如果对象的话，需要克隆一份
       }
   },
   

2. 如果父组件传值是动态的话，需要watch prop

    watch:{
        msg(newValue){
            // console.log(newValue)
            this.myMsg = newValue
        }
    }
   

注意点：

1. 父传子是非复杂类型的话，子改父prop，会报错
2. 父传子是复杂类型的话，子改父prop，不会报错。但是尽量遵从单向数据流
3. 单向数据流与双向数据绑定
   1. 单向数据流是指组件之间通信，应该总是由父传子，子传孙
   2. 双向数据绑定v-model
      1. 视图改变->数据
      2. 数据->视图

10-Vue组件通信-子传父

基本使用

1. 子组件使用$emit发送消息

   this.$emit('事件名',父传子消息)
   

2. 父使用子组件所在的dom注册事件，在事件处理方法里面获取到子传父的消息

   <child @事件名="事件处理方法">child>
   

   事件处理方法(父传子消息){
   }
   

11-搜索列表-抽取头部输入框为单独的组件

抽取的原因：因为搜索列表和搜索页面顶部的输入框样式很像。使用共用的组件

步骤：

1. 引入SearchBar组件
2. 注册
3. 使用
4. 调整样式

注意点：

1. left,right都有的时，left优先级更高

12-搜索列表-SearchBar的基本功能

1. 设置输入框弹出键盘右下角按钮的文案 confirm-type
2. 输入框有内容就展示x，没有内容就展示x
   1. 获取输入框内容v-model:inputVal
   2. x的显示 v-show=“inputVal”
3. 点击x清除输入
   1. @click:clearInput

13-搜索列表-输入框触发搜索

描述：SearchBar组件的输入框输入内容，点击键盘右下角按钮时，触发搜索列表页面的搜索，搜索关键字是inputVal

步骤：

1. 点击键盘右下角按钮 @confirm:confirmHandler

2. confirmHandler子传父

   1. inputVal如果为空，返回
   2. this.$emit(事件名，inputVal)
   3. 事件名@search

3. search_list.vue使用SearchBar所在的dom上，注册事件

   <SearchBar @search="doSearch"/>
   

4. doSearch方法，按子传给父的inputVal来搜索

   1. 把inputVal赋值给keyword

注意点：

1. 微信开发者工具的appdata无法查看子组件的data属性

14 -搜索列表-输入框初始值

1. 父使用子所在的dom上传递属性

   <SearchBar @search="doSearch" :keyword="keyword"/>
   

2. 子用prop接受

   props:['keyword'],
   

3. 不有直接把keyword用v-model绑定到输入框，要符合单向数据

   1. 把Keyword赋值给inputVal

   data() {
       return {
           // 输入框的值
           inputVal: this.keyword
       };
   },
   

4. 经过第3步后，从分类页面跳转过来，输入框的值是空的，但是搜索列表keyword是有值的

   1. 父组件的onLoad执行时机比子组件的data()慢
   2. 解决方案：
      1. 监听keyword的变化，有变化赋值给inputVal

注意点

1. uniapp的页面里面onLoad并不等同于Vue组件里面created
   1. vue created比子组件初始更早