2020-10-27

最新推荐文章于 2022-10-12 13:57:36 发布

小YI在努力变强

最新推荐文章于 2022-10-12 13:57:36 发布

阅读量330

点赞数

本文链接：https://blog.csdn.net/yifangfeii/article/details/109319229

版权

微信小程序大白项目

文章目录

一、pages
二、app.json
三、sitemap.json

一、pages

1.connection（联系我们）

wxml代码如下（示例）：

<!--pages/connection/connection.wxml-->
<view class="box">
<image src="../images/lx.jpg" class="pic"></image>
<view class="text" bindtap="call"><view class="tp"><image src="../images/tel.png"></image></view><view>
电话：1535488068（点击拨号）
</view></view>

<view class="text"><view class="tp"><image src="../images/weixin.png"></image></view><view>
微信：泉州大白网络科技
</view></view>

<view class="text"><view class="tp"><image src="../images/email.png"></image></view><view>
邮件：laosan0070@163.com</view></view>

<view class="text" bindtap="address"><view class="tp"><image src="../images/map.png"></image></view><view>内蒙古呼和浩特市托克托县光明路</view></view>
<button style="width: 700rpx;height: 100rpx;">在线客服</button>
<view class="footer">@2017 泉州大白网络科技 版权所有</view>
</view>

wxss代码如下（示例）：

/* pages/connection/connection.wxss */
.text image{
  width: 25rpx;
  height: 25rpx;
  
}
.text{
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100rpx;
  border-bottom: gainsboro 1px solid;
  line-height: 100rpx;
  justify-content: start;
}
.pic{
  width: 100%;
  height: 450rpx;
}
button{
  background-color: #32cd32;color:white;
  background-color: #32cd32;display: block;
}
.footer{
  color: darkgray;
}
.tp{
  margin-left: 20rpx;margin-right: 20rpx;
}

is添加功能代码如下（示例）：

call:function(){
  wx.makePhoneCall({
    phoneNumber: '1535488068' 
  })
}
,
address:function(){
  wx.getLocation({
    type: 'gcj02', //返回可以用于wx.openLocation的经纬度
    success (res) {
      const latitude = res.latitude
      const longitude = res.longitude
      wx.openLocation({
        latitude,
        longitude,
        scale: 18
      })
    }
   })
},

2.cpfw（产品服务、产品展示）

代码如下（示例）：

<!--pages/cpfw/cpfw.wxml-->
<view class="box">
<view class="box1">
<image src="../images/f1.jpg"></image>
<view class="fg"></view>
<view class="text">
<view class="xq">01商品详情</view>
1.
维意风格「郁金飘香」，以纯白色、深棕色为主，整体感觉典雅、细腻。该风格的面板是“胡桃木+白牡丹吸塑”，融合了现代与中式的设计风格，在款式和色调上强调简约‘舒适、温馨。此设计去繁就简、张弛有度，体现了现代人追求简约精致的高质量生活理念。
</view>
</view>
<view class="box1">
<image src="../images/f2.jpg"></image>
<view class="fg"></view>
<view class="text">
<view class="xq">02商品详情</view>
2.
维意风格「阿尔卑斯」，以奶白色、木黄色为主，整体感觉清新素雅。改风格的面板是“白蜡木+香雪意境吸塑”组合，共同营造淡雅的意境。此设计强调结构简单与功能舒适和实用，略偏简欧风格，着重在于突显出装饰主义风味的古典质感，因此简约而不失格调。
</view>
</view>
</view>

wxss代码如下（示例）：


/* pages/cpfw/cpfw.wxss */
.text{
  color: darkgray;
}
.box1 image{
width: 100vw;
height: 450rpx;
}
.fg{
  height: 50rpx;
  width: 100vw;
  background-color: gainsboro;
}
.xq{
  line-height: 100rpx;
  height: 100rpx;
border-bottom: solid 1px gainsboro;
text-align: center;
}

js代码如下（示例）：

3.cpxq（海报详情）

wxml代码如下（示例）：

<!--pages/cpxq/cpxq.wxml-->
<view class="box">
<view class="pic">
<image src="../images/a11.jpg" style="width: 100vw;height: 350rpx;"></image>
</view>
<view class="text">
海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，
</view>
<view class="pic">
<image src="../images/a12.jpg"></image>
</view>
<view class="text">
海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，
</view>
<view class="pic">
<image src="../images/a13.jpg"></image>
</view>
<view class="text">
海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，海报展示内容，
</view>
</view>

wxss代码如下（示例）：

/* pages/cpxq/cpxq.wxss */
.box image{
  width: 700rpx;
  height: 350rpx;
  display: flex;
  justify-content: center;
  margin-top: 50rpx;

}
.box{
  color:darkgray;
}
.text{
  margin-top: 60rpx;
}
.pic{
  display: flex;
  justify-content: center;
}

js代码如下（示例）：

4.dt（公司动态）

wxml代码如下（示例）：

/* pages/cpxq/cpxq.wxss */
.box image{
  width: 700rpx;
  height: 350rpx;
  display: flex;
  justify-content: center;
  margin-top: 50rpx;

}
.box{
  color:darkgray;
}
.text{
  margin-top: 60rpx;
}
.pic{
  display: flex;
  justify-content: center;
}

wxss代码如下（示例）：

/* pages/cpxq/cpxq.wxss */
.box image{
  width: 700rpx;
  height: 350rpx;
  display: flex;
  justify-content: center;
  margin-top: 50rpx;

}
.box{
  color:darkgray;
}
.text{
  margin-top: 60rpx;
}
.pic{
  display: flex;
  justify-content: center;
}

js代码如下（示例）：

5.dxal（典型案例）

wxml代码如下（示例）：

<!--pages/dxal/dxal.wxml-->
<view class="box">
<view class="nav"><image src="../images/d1.jpg"></image></view>
<view class="box1">
<view class="pic">
<image src="../images/2.jpg"></image>
</view>
<view class="text">对案例进行描述对案例进行描述对案例进行描述对案例进行描述对案例进行描述
</view>
</view>
<view class="box1">
<view class="pic">
<image src="../images/3.jpg"></image>
</view>
<view class="text">对案例进行描述对案例进行描述对案例进行描述对案例进行描述对案例进行描述
</view>
</view>
</view>

wxss代码如下（示例）：

/* pages/dxal/dxal.wxss */
.nav image{
width: 100vw;
height: 450rpx;
}
.pic image{
  height: 380rpx;
}
.pic{
margin-top: 45rpx;
  display: flex;
  justify-content: center;
}
.text{
  margin-top: 45rpx;
  color: darkgray;
}

js代码如下（示例）：

6.gsjj（公司简介）

wxml代码如下（示例）：

<!--pages/gsjj/gsjj.wxml-->
<view class="box">
<view>
<image src="../images/d1.jpg" style="width:100%;height:450rpx;"></image>
</view>
<view class="wz">
维意定制家具始创于2003年，是佛山维尚家具制造有限公司的核心品牌，公司位于广东佛山南海区大沥镇虹岭工业园博爱东路与虹岭路交界处，是一家集设计、制造、服务于一体的家具企业[1]。由国际影星李冰冰代言。
维意用全屋家私定制实现家居风格的统一，从设计、选材与规格、色彩，到功能、环保与配套升级，每一件家居产品都必须单独定制，但却都是全屋定制体系的构成单元。每个空间都有多种风格主题实现个性的需要，才能称为全屋家私定制。
致力于达到“物超所值的顾客体验”，是维意的经营哲学与愿景。让顾客亲眼看到、亲身体验到产品和服务所能给他带来的价值。让顾客弄清这些价值是怎么产生的，又有着怎样的理论依据，并以此来验证每一位顾客所看到或体验到的不是商家玩的噱头而是真正的事实。
</view>
</view>

wxss代码如下（示例）：

/* pages/gsjj/gsjj.wxss */
.box{
 
}
.wz{
 width:700rpx;
margin-left: 40rpx;
color: darkgray;
text-indent: 2em;
}

js代码如下（示例）：

7.gy

wxml代码如下（示例）：

<!--pages/gy/gy.wxml-->
<view class="box">
<view class="text">
爬行者网络工作室是一家专业的摄影工作室,我们每月都有新场景,每月都有新样片,每天都有新客照,我们卖的质量和服务,我们呈现的是尊贵和高端,我们只做定制级婚纱摄影.</view>
<view class="pic"><image src="../images/a2.jpg"></image></view>
<view class="text">
服务小众，品质高端，主营业务为高端私人婚纱摄影、高端个人写真、高端儿童私人摄影、商业摄影等。</view>
<view class="pic"><image src="../images/a1.jpg"></image></view>
<view class="text">
一直坚持“驻留温情怀念，呈现灵动瞬间”的服务理念，拍摄了大量时尚、专业图片，摄影作品散见于报刊、杂志及各大摄影网站，时尚、清新、独特的摄影风格广受好评与肯定。</view>
</view>

wxss代码如下（示例）：

/* pages/gy/gy.wxss */
.pic image{
  
  width: 700rpx;
  height: 350rpx;
}
.pic{display: flex;
  justify-content: center;}
.box{
  color: darkgrey;
  text-indent: 2em;
}

js代码如下（示例）：

7.index

wxml代码如下（示例）：

<!--index.wxml-->
<view class="lunbo">
	<swiper indicator-dots='true' autoplay="ture" interval="5000">
		<block wx:for="{{imgurls}}" >
			<swiper-item bindtap="clickHandler1">
				<image src="{{item}}"></image>
			</swiper-item>
		</block>
	</swiper>
</view>
<view class="column">
	<view class="column1" wx:for="{{mid}}" bindtap="clickHandler" data-key="{{item.linkurl}}">
		<image src="{{item.img}}"></image>
		<view>{{item.title}}</view>
	</view>
</view>

<view class="dt">
<image src="../images/b3.jpg"></image>
<image src="../images/b2.jpg"></image>
</view>

wxss代码如下（示例）：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
.lunbo image{
  width: 100%;
  height: 450rpx;
}
.column image{
  width: 120rpx;
  height: 120rpx;
}
/* .column{
  display: flex;
  flex-direction: column;
  
} */
.column{
  margin-top: 10rpx;
  width: 100vw;
  height: 400rpx;
  font-size: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;

  
}
.column1 image{
  width: 120rpx;
  height: 120rpx;
}

.column1{
  width: 200rpx;
  height:200rpx;
text-align: center;
}
.dt image{
  width: 750rpx;
  height: 300rpx;
}

js代码如下（示例）：

//index.js
//获取应用实例
const app = getApp()

Page({

  clickHandler: function (data) {
    // console.log(data)
    var linkurl = data.currentTarget.dataset.key;
    if (linkurl == '../cpfw/cpfw') {
      wx.switchTab({
        url: linkurl
      })
    } else {
      wx.navigateTo({
        url: linkurl,
      })
    }
  },
  clickHandler1: function () {
    wx.navigateTo({
      url: '../cpxq/cpxq'
    })
  },
  data: {
    imgurls: [
      '../images/a11.jpg',
      '../images/a12.jpg',
      '../images/a13.jpg'
    ],
    mid: [{
        
        title: "公司简介",
        img: "../images/n1.png",
        linkurl: "../gsjj/gsjj"
      },
      {
        
        title: "产品服务",
        img: "../images/n2.png",
        linkurl: "../cpfw/cpfw"
      },
      {
       
        title: "典型案例",
        img: "../images/n3.png",
        linkurl: "../dxal/dxal"
      },
      {
        
        title: "公司动态",
        img: "../images/n4.png",
        linkurl: "../dt/dt"
      },
      {
        
        title: "合作共赢",
        img: "../images/n5.png",
        linkurl: "../gy/gy"
      },
      {
        
        title: "最新产品",
        img: "../images/n6.png",
        linkurl: "../zx/zx"
      }
    ]
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

8.zx

wxml代码如下（示例）：

<!--pages/zx/zx.wxml-->
<view class="box">
<view class="box1 bj">
<image src="../images/h1.jpg"></image>
<view class="order">
<view class="od1">
木地板
</view>
<view class="od2">
<view class="kc">
<text>库存：1009</text><text>运费：12</text>
</view>
<view class="xj">
<text>原价</text><text class="my">现价：￥888</text>
</view>
</view>
<view class="od3">
<button style="width: 700rpx;height: 100rpx;background-color: #32cd32;color:white;margin-top:20rpx">电话订单</button>
</view>
</view>
</view>
<view class="box2 bj">
<view class="xq">商品详情</view>
本店所有商品介绍，本店所有商品介绍，本店所有商品介绍，本店所有商品介绍，本店所有商品介绍，本店所有商品介绍，本店所有商品介绍
</view>
</view>

wxss代码如下（示例）：

/* pages/zx/zx.wxss */
.box{
  height: 100vh;
  width: 100vh;
  background-color: gainsboro;
}
.bj{
  background-color: white;
}
.box image{
  width: 100vw;
  height: 400rpx;
}
.od1{
text-align: center;
width: 100vw;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: gainsboro 1px solid;
 
}
.od2{width: 100vw;
  /* height: 160rpx; */
  border-bottom: gainsboro 1px solid;
}

.kc{
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
.xj{
  display: flex;
justify-content: space-between;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.my{
  font-size: 40rpx;
  color: red;
  font-weight: bolder;
}
.od3{
  height: 160rpx;
  width: 100vw;
}
.box2{
  width: 100vw;
  height: 600rpx;
  margin-top: 40rpx;
  color: darkgray;
}
.xq{
  color: gainsboro;
  width: 100vw;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: gainsboro 1px solid;
}

js代码如下（示例）：

二、app.json

{
  "pages":[
    "pages/index/index",
    "pages/show/show",
    "pages/connection/connection",
    "pages/logs/logs",
    "pages/gsjj/gsjj",
    "pages/cpfw/cpfw",
    "pages/dxal/dxal",
    "pages/dt/dt",
    "pages/gy/gy",
    "pages/zx/zx",
    "pages/cpxq/cpxq"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#32cd32",
    "navigationBarTitleText": "泉州大白网络科技",
    "navigationBarTextStyle": "black",
    "backgroundColorTop": "#f15b6c",
    "backgroundColorBottom": "#00FFFF",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "selectedColor":"#000000",
    "color": "#a9a9a9",
    "backgroundColor": "#f0f0f0",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "pages/images/12.png",
        "selectedIconPath":"pages/images/11.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/cpfw/cpfw",
        "iconPath": "pages/images/32.png",
        "selectedIconPath":"pages/images/31.png",
        "text": "产品展示"
      },
      {
        "pagePath": "pages/connection/connection",
        "iconPath": "pages/images/22.png",
        "selectedIconPath":"pages/images/21.png",
        "text": "联系我们"
      }
    ]
  },

  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

三、sitemap.json

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

小YI在努力变强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-27

微信小程序大白项目文章目录一、pages1.connection（联系我们）2.cpfw（产品服务、产品展示）3.cpxq（海报详情）4.dt（公司动态）5.dxal（典型案例）6.gsjj（公司简介）7.gy7.index8.zx二、app.json三、sitemap.json一、pages1.connection（联系我们）wxml代码如下（示例）：<view class="box">
复制链接

扫一扫