微信小程序

作者: Mrs祝 | 来源:发表于2019-04-19 11:20 被阅读0次

微信小程序基础
微信小程序教程、微信小程序开发资源下载汇总（6.16日更新，持续
微信小程序开发系列六：微信框架API的调用
近期200+热门微信小程序demo源码下载汇总
百度小程序教程，微信小程序教程，微信小程序开发模板汇总（2018
微信小程序浏览量可以刷吗,小程序刷uv访客,刷微信小程序注册
微信小程序使用cookie
小程序相关实用文章
如何做微信小程序后台的数据分析
微信小程序助你爬坑

产品商城模板
css.js、json、wxml、wxss

data: {

    message: [
      {
        title: "iPhoneX",
        author: "抽奖",
        img: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4120007999,281538152&fm=26&gp=0.jpg"
      },
      {
        title: "全新MacBookPro",
        author: "抽奖",
        img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=319301119,452133303&fm=26&gp=0.jpg"
      },
      {
        title: "iPhoneXR",
        author: "抽奖",
        img: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=19270294,2698966114&fm=26&gp=0.jpg"
      },
      {
        title: "iPad Pro",
        author: "抽奖",
        img: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4062447465,3055393178&fm=26&gp=0.jpg"
      }
    ]

  }

{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "white",
    "navigationBarTitleText": "Apple",
    "navigationBarTextStyle": "black"
}

<import src="../../template/message/message.wxml"/>
<template is="message" wx:for="{{message}}" data="{{...item}}"/>

@import "../../template/message/message.wxss";

detail.js、wxml、wxss

 data: {
    // 商品详情介绍
    detailImg: [
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_0_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_1000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_1500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_2000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_2500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_3000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_3500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_4000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_4500_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_5000_750_500&imageView&thumbnail=710x0&quality=85",
      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_5500_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nosdn1.127.net/8b8f60cb94b148e485dd50934e35ecca1511959468798jal1mola10610.jpg?imageView&quality=98&crop=0_6000_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_7500_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_8000_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_8500_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_9000_750_500&imageView&thumbnail=710x0&quality=85",

      "https://haitao.nos.netease.com/a108a6ae73914a91b7e07b8cc0ad32ad1511959470997jal1mqad10611.jpg?imageView&quality=98&crop=0_9500_750_376&imageView&thumbnail=710x0&quality=85",
    ],
      // banner
      imgUrls: [
        "http://img14.360buyimg.com/n0/jfs/t1/763/23/3810/69901/5b997c0bE935c19c5/ce91ae1a89c113c7.jpg",
        "https://img14.360buyimg.com/n0/jfs/t1/4460/2/3458/153299/5b997bf0Ed101778b/2361563781a99acb.jpg",
        "https://img14.360buyimg.com/n0/jfs/t1/21737/38/3433/75469/5c26e06aE7a296f9e/6e20b4387a648f4f.jpg",
        "https://img14.360buyimg.com/n0/jfs/t10450/186/1312686657/70920/1167f96b/59df2e83Nc6f15397.jpg",
        "https://img14.360buyimg.com/n0/jfs/t8284/363/1326459580/71585/6d3e8013/59b857f2N6ca75622.jpg"
      ],
      indicatorDots: true, //是否显示面板指示点
      autoplay: true, //是否自动切换
      interval: 3000, //自动切换时间间隔,3s
      duration: 1000, //  滑动动画时长1s
  }

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
        <image src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>
<!--图文详情按钮-->
<view class='tab-bar-detail'>
      <text>图文</text>
      <text>详情</text>
</view> 

<view class="product-price-wrap">
 <view>
    <p class="product-price-new">￥7935.84</p>  
    <p class="product-price-old">原价￥9018.00</p> 
    <p class="discount">8.8折</p>
  </view>
  <view>
    <image src="../img/fenxiang.png" />  
  </view>   
</view>
<view class="product-name-wrap">
  <text>Apple iPhone X手机 苹果x 全网通4G 全面屏手机 银色 官方标配 256G</text>
</view>
<view class="details"> 
   <scroll-view scroll-y="true"> 
       <block wx:for-items="{{detailImg}}" wx:key="name">
       <image class="image_detail" src="{{item}}" mode="widthFix"/> 
    </block>  
   </scroll-view> 
 </view>

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 直接设置swiper属性 */
swiper {
  /* height: 500rpx; */
    height: 600rpx;
    background: #F3F4F6;
    text-align: center;  
}
swiper-item image {
  width: 80%;
  height: 100%;
}
/**图文详情 浮层**/
.tab-bar-detail{
  width: 75rpx;
  height: 75rpx;
  background-color: #fff;
  border-radius:25px;
  position: fixed;  
  z-index: 2;
  right: 4%;
  top:500rpx;
  border:1rpx solid #F3F4F6; 
  line-height:25rpx; 
  text-align: center;  
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tab-bar-detail text{
  font-size: 22rpx;
  color: #e80080;
}
/**商品价格**/
.product-price-wrap{
  display: flex;
  justify-content:space-between;/**两边对齐**/
  flex-direction: row;
  flex-wrap: wrap;
  margin:5px 5px;
   /* border:1rpx solid red;   */
}
 .product-price-wrap .product-price-new{
  color: #e80080;
  font-weight:400;
  font-size: 24px;
}
.product-price-wrap .product-price-old{
  color: #888;
  text-decoration: line-through;
  padding-left: 5px;
  font-size: 14px;
  line-height:30px;
  font-weight:300;
}
.product-price-wrap .discount{
  margin: 5px 5px;
  background-color: #000;
  color: #fff;
  height: 18px;
  font-size: 14px;
  border-radius:2px;
} 
.product-price-wrap image{
  width:40rpx;
  height: 40rpx;
  margin: 5px 5px; 
}
.product-name-wrap{
  margin: 20px 10px;
   /* border:1rpx solid red;  */
}
.product-name-wrap text{
  font-size: 14px;
  font-weight:400;
  line-height: .48rem;
  color: #404040;
}
.details{
   width: 100%;
}
.detail {
  display: flex;
  flex-direction: column;
  margin-top: 15rpx;
  margin-bottom: 0rpx;
}

微信小程序基础
微信小程序介绍微信小程序开发工具的使用微信小程序框架文件微信小程序逻辑层微信小程序视图层微信小程序组件介绍微信小程...
微信小程序教程、微信小程序开发资源下载汇总（6.16日更新，持续
摘要：微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、...
微信小程序开发系列六：微信框架API的调用
微信小程序开发系列教程微信小程序开发系列一：微信小程序的申请和开发环境的搭建微信小程序开发系列二：微信小程序的...
近期200+热门微信小程序demo源码下载汇总
微信小程序外卖demo 微信小程序demo：课程列表微信小程序demo：宅男社区微信小程序——日历（支持农历...
百度小程序教程，微信小程序教程，微信小程序开发模板汇总（2018
摘要：微信小程序教程合集，微信小程序模板合集，微信小程序行业解决方案合集，微信小程序源代码合集，百度小程序教程合集...
微信小程序浏览量可以刷吗,小程序刷uv访客,刷微信小程序注册
微信小程序的访客量微信小程序刷用户量微信youtui2微信小程序刷uv访客刷微信小程序注册微信开放平台基础部助理...
微信小程序使用cookie
微信小程序没有cookie！！！微信小程序没有cookie！！！微信小程序没有cookie！！！但是在开发...
小程序相关实用文章
1、微信小程序开发常见之坑2、微信小程序联盟-微信小程序开发社区-小程序3、怎么在弹窗中加入输入框4、微信小程序实...
如何做微信小程序后台的数据分析
微信小程序后台有哪些功能能？微信小程序数据后台（部分数据截图）微信小程序后台上图是微信小程序的后台功能，小...
微信小程序助你爬坑
目录已更新微信小程序开发简介微信小程序账号注册及开发工具下载微信小程序目录结构介绍微信小程序获取App...