公司企业展示门户店铺展示宣传微信小程序前端源码

简介: 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。


全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。


微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。


首页页面

cf129835af580c0b406a87909da92c6.png


首页页面包括标题栏、轮播图、功能区和展示卡片,其文字内容、图片和图标等可以在如下代码中对应位置修改,方便简单。


<import src="../../template/item-template.wxml"/>
<view class="container">
    <view class="section section_gap swiper_box">
        <template is="index_index_scroll_tmpl" data="{{...index_index_scroll_tmpl}}"/>
    </view>
    <view class="text">
        <view class="line_y"></view>
        <text>服务范围</text>
    </view> 
    <view class="section index-nav">
       <template is="index_index_navs_tmpl" data="{{...index_index_navs_tmpl}}"/>
    </view>
    <view class="text">
        <view class="line_y"></view>
        <text>特别推荐</text>
    </view>
<view class="nr11">
    <image src="/image/a1.jpg"></image>
</view>
<view class="nr11">
    <image src="/image/a3.jpg"></image>
</view>
</view>


产品展示页面

48b704f12be0d89094302b55beb819d.png


所有产品展示页面包括头部标题栏、中间部分的图文卡片列表,其中的文字、图片和图标内容等可以在以下代码对应处简单方便地修改。


<view class="container">
    <image src="/image/V7702.jpg"></image>
</view>
<view class="container">
    <image src="/image/F9.jpg"></image>
</view>
<view class="container">
    <image src="/image/K77.jpg"></image>
</view>
<view class="container">
    <image src="/image/L77.jpg"></image>
</view>
<view class="container">
    <image src="/image/LS79.jpg"></image>
</view>
<view class="container">
    <image src="/image/T77.jpg"></image>
</view>
<view class="container">
    <image src="/image/T7701.jpg"></image>
</view>
<view class="container">
    <image src="/image/V77.jpg"></image>
</view>
<view class="container">
    <image src="/image/V177.jpg"></image>
</view>
<view class="container">
    <image src="/image/V551.jpg"></image>
</view>
<view class="container">
    <image src="/image/V7701.jpg"></image>
</view>
<view class="container">
    <image src="/image/V7703.jpg"></image>
</view>
<view class="container">
    <text class="daodi">到底了</text>
</view>

服务电话页面

c43c6240f784418e27832bb65185575.png

服务电话页面包括头部标题栏、中间部分的开锁服务、上门安装、销售、配置钥匙和门店电话等可展开菜单栏,其中的文字、图片和图标内容等可以在以下代码对应处简单方便地修改。




<view class="index">
    <view class="head">
        <view class="title">服务内容</view>
        <view class="desc">全国统一服务电话:4000000000</view>
    </view>
    <view class="body">
        <view class="widgets">
            <block wx:for-items="{{list}}" wx:key="item.id">
                <view class="widgets__item">
                    <view id="{{item.id}}" class="widgets__info {{item.open ? 'widgets__info_show' : ''}}" bindtap="widgetsToggle">
                        <text class="widgets__info-name">{{item.name}}</text>
                        <image class="widgets__info-img" src="/image/arrowright.png" mode="aspectFill" />
                    </view>
                    <view class="widgets__list {{item.open ? 'widgets__list_show' : ''}}">
                        <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="item.id">
                            <navigator url="component-pages/{{page}}/{{page}}" class="widget">
                                <text class="widget__name">{{page}}</text>
                                <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill" />
                                <view class="widget__line {{index == 0 ? 'widget__line_first' : ''}}"></view>
                            </navigator>
                        </block>
                    </view>
                </view>
            </block>
        </view>
    </view>
</view>



关于我们页面


8b1e303725650b77151a20082a0d43a.png


关于我们页面包括头部标题栏、图片展示、文字展示以及下方的“点击拨打客服电话”,其中的文字、图片和图标内容等可以在以下代码对应处简单方便地修改。点击“点击拨打客服电话”可以调起跳转手机的拨号界面。


<view class="gy1">
    <image src="/image/gy1.jpg"></image>
</view>
 <view class="text">
        <view class="line_y"></view>
        <text>关于企业</text>
    </view> 
     <view class="text2">
        <text>

  xxx公司是最大的锁业服务企业之一,一直以技术服务引领着锁业发展  

  核心技术在于防盗安全系统及便民的“锁事”服务。

公司地址:XXXXXXXXXXXXXXXXXXXXX

全国统一服务电话:400-0000-000

</text>
    </view> 
<view class="gy">
    <image src="/image/gy.jpg"></image>
</view>
<button type="default" bindtap="calling">点击拨打客服电话</button>



导入说明:下载源码后,解压,然后打开微信开发者工具,点击导入,导入包含app.json文件的这层文件夹。


相关文章
|
1月前
|
移动开发 小程序 安全
【个人小程序和企业小程序的区别】
【个人小程序和企业小程序的区别】
20 0
|
1月前
|
存储 小程序 算法
东郊到家预约系统开发|源码案例|小程序
区块链的最重要特性是去中心化,它不依赖于任何中心机构或第三方信任
|
1月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
13天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
18天前
|
人工智能 小程序 Java
Java智慧校园系统源码 微信小程序+电子班牌
通过设备管理对百纳智慧校园的智慧班牌以及百纳智慧屏(校牌)进行统一集中式管理,支持浏览所有设备的基本信息以及在离线状态,支持添加设备、设备一键开关机、一键重启、设置节假日开关机时间、设置日常开关机时间、远程班牌截屏、远程班牌升级等操作。
|
1月前
|
小程序 JavaScript 数据安全/隐私保护
分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存
看到好多坛友都在求SpringBoot2.X + Vue + UniAPP,全栈开发医疗小程序 - 带源码课件,我看了一下,要么链接过期,要么课件有压缩密码。特意整理了一份分享给大家,个人认为还是比较全面的。希望对大家有所帮助!课程仅供大家学习交流使用!
37 1
分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存
|
1月前
|
编解码 小程序 算法
短剧系统开发(网页版/APP/小程序)丨短剧系统开发运营版及源码出售
短剧系统开发功能旨在为用户提供观看、分享和交流短剧作品的平台,涉及多种功能和特性,
|
1月前
|
移动开发 负载均衡 小程序
代驾app开发丨代驾系统开发玩法详情丨代驾系统开发网页版/H5/小程序及源码部署
**司机/代驾员端**:司机可以通过APP接收订单,查看订单详情、路线和导航,提供现场服务并进行确认。
|
1月前
|
小程序 搜索推荐 算法
微信小程序外卖管理的设计与实现(论文+源码)_kaic
微信小程序外卖管理的设计与实现(论文+源码)_kaic
|
1月前
|
监控 小程序 前端开发
基于微信小程序充电桩预约管理系统的设计与实现(论文+源码)_kaic
基于微信小程序充电桩预约管理系统的设计与实现(论文+源码)_kaic