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

简介: 微信小程序,小程序的一种,英文名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文件的这层文件夹。


相关文章
|
2天前
|
小程序 数据安全/隐私保护
跑腿小程序系统源码
这是一款跑腿小程序,带有智能派单、系统派单、同城配送、校园跑腿、预约取件、用户端+骑手端 基于FastAdmin+thinkphp和uniapp开发的优创同城跑腿系统,支持帮取、帮送模式,包含用户端、骑手端、运营后台。
51 32
|
3天前
|
移动开发 开发框架 小程序
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
30 6
|
20天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
151 18
|
2天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
12 0
|
27天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
115 3
|
27天前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
16天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
60 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
478 3
|
3月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
75 0
微信小程序更新提醒uniapp

热门文章

最新文章