婚纱摄影类小程序如何设计与制作

设计

真机视觉效果图

概念稿

总览

制作实现

轮播图

这里使用了视图容器的swiper组件，滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
</view>

Page({
  onShareAppMessage() {
    return {
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  },

  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },
})

图片展示

image组件，图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

视频

video组件，视频（v2.4.0 起支持同层渲染）。相关api：wx.createVideoContext

定位导航

map组件，地图（v2.7.0 起支持同层渲染，相关api wx.createMapContext。

在线客服

contact，打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息。