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

01.商品详情-页面渲染

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

  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。都行
    在这里插入图片描述
    09-小程序(商品详情,轮播预览图片,富文本rich-text,分享功能,客服功能,组件通信)_第2张图片

  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比子组件初始更早

你可能感兴趣的:(笔记)