❤微信小程序项目(三)❤

7. 商品详情⻚⾯

7.1. 效果

7.2. 页面逻辑

1. 渲染商品详情数据
   接口
   1.首先在接口拿到数据,放在组件js文件的data中,从data中拿到数据遍历渲染到页面,使用flex容器布局css,完成之后,还有个大图预览,大图预览是小程序官方中的一个方法, 点击图片之后显示当前点击的图片进行大图预览, 大图预览的参数写在下方:
   wx.previewImage(Object object)

   以 Promise 风格 调用：支持
   小程序插件：支持，需要小程序基础库版本不低于 1.9.6

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

   参数

   Object object

   属性	类型	默认值	必填	说明	最低版本
   urls	Array.		是	需要预览的图片链接列表。2.2.3 起支持云文件ID。
   showmenu	boolean	true	否	是否显示长按菜单	2.13.0
   current	string	urls 的第一张	否	当前显示图片的链接
   success	function		否	接口调用成功的回调函数
   fail	function		否	接口调用失败的回调函数
   complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

   代码:

//点击轮播图预览大图
  //在swiper-item上添加的一个点击事件clicklb
  clicklb(e) {
    const urls = this.GoodsInfoAll.pics.map(item => item.pics_mid)
    const current = e.currentTarget.dataset.url
    wx.previewImage({
      current, // 当前显示图片的http链接
      urls // 需要预览的图片http链接列表
    })
  },

2. 图文详情
   拿到数据中的图文详情直接使用小程序中的富文本rich-text就可以显示在页面中
   rich-text用法:
   rich-text

   基础库 1.4.0 开始支持，低版本需做兼容处理。

   富文本。

   属性	类型	默认值	必填	说明	最低版本
   nodes	array/string	[]	否	节点列表/HTML String	1.4.0
   space	string		否	显示连续空格	2.4.1

   space 的合法值

   值	说明	最低版本
   ensp	中文字符空格一半大小
   emsp	中文字符空格大小
   nbsp	根据字体设置的空格大小

   nodes

   现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node*

   属性	说明	类型	必填	备注
   name	标签名	string	是	支持部分受信任的 HTML 节点
   attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法
   children	子节点列表	array	否	结构和 nodes 一致

   文本节点：type = text*

   属性	说明	类型	必填	备注
   text	文本	string	是	支持entities

代码:

<!-- 图文详情 -->
<view class="detail_info">
    <view class="info_title">
        图文详情
    </view>
    <view class="info_content">
        <rich-text class="" nodes="{{goodsObj.goods_introduce}}">
            
        </rich-text>
          
    </view>
      
</view>

3. 最下面的tabbar,使用position:fixed;相对于浏览器窗口进行定位,图标是icon阿里巴巴图标库的,tabbar里面使用flex容器布局,客服使用的是小程序组件中的button按钮,给他的属性open-type加上contact,点击就会进入到客服界面,分享也是给open-type属性加上share只,就会触发分享链接,open-type的值给大家写在下方:
   open-type 的合法值

   值	说明	最低版本
   contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （小程序插件中不能使用）	1.1.0
   share	触发用户转发，使用前建议先阅读使用指引	1.2.0
   getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 （小程序插件中不能使用）	1.2.0
   getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用）	1.3.0
   launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	1.9.5
   openSetting	打开授权设置页	2.0.7
   feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0

总结:

轮播图遍历数据,
图文详情使用rich-text富文本
tabbar功能
客服button组件中open-type的值contact
分享button组件中open-type的值share