社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
一、小程序主体部分
二、业务页面部分
主页部分
产品服务页部分
联系我们页部分
三、程序效果图
首页 微信小程序 小程序开发 小程序开发之企业展示

小程序开发之企业展示

Y2J
Y2J
May 08, 2017 am 10:44 AM

在这篇微信小程序开发教程中，我们将介绍如何使用微信小程序开发企业内部宣传展示等功能。

一、小程序主体部分

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

1. 小程序逻辑

App({
  onLaunch: function() { 
    // Do something initial when launch.  },
  onShow: function() {      // Do something when show.  },
  onHide: function() {      // Do something when hide.  },
  globalData: 'fangbei'})
登录后复制

2. 小程序公共设置

主要注册五个页面，设置窗口，以及显示在tabbar中显示三个页面

{  "pages": [    "pages/index/index",    "pages/news/news",    "pages/news/news-details",    "pages/product/product",    "pages/contact/contact"
  ],  "window": {    "navigationBarTextStyle": "black",    "navigationBarTitleText": "盛世华安",    "navigationBarBackgroundColor": "#fbf9fe",    "backgroundColor": "#fbf9fe"
  },  "tabBar": {    "color": "#dddddd",    "selectedColor": "#459ae9",    "borderStyle": "black",    "backgroundColor": "#ffffff",    "list": [{      "pagePath": "pages/index/index",      "iconPath": "images/index.png",      "selectedIconPath": "images/index_selected.png",      "text": "公司盛况"
    }, {      "pagePath": "pages/product/product",      "iconPath": "images/product.png",      "selectedIconPath": "images/product_selected.png",      "text": "产品服务"
    }, {      "pagePath": "pages/contact/contact",      "iconPath": "images/contact.png",      "selectedIconPath": "images/contact_selected.png",      "text": "联系我们"
    }]
  },  "networkTimeout": {    "request": 10000,    "connectSocket": 10000,    "uploadFile": 10000,    "downloadFile": 10000
  },  "debug": true}
登录后复制

3. 公用样式表

@import 'style/weui.wxss';
@import "/utils/wxParse/wxParse.wxss";


page {
  background-color: #fbf9fe;
  height: 100%;
}.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
}.page-header {
  display: flex;
  font-size: 32rpx;
  color: #aaa;
  margin-top: 50rpx;
  flex-direction: column;
  align-items: center;
}.page-header-text {
  padding: 20rpx 40rpx;
}.page-header-line {
  width: 150rpx;
  height: 1px;
  border-bottom: 1px solid #ccc; 
}.page-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  overflow-x: hidden;
}.page-body-wrapper {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}.page-body-wrapper form {
  width: 100%;
}.page-body-wording {
  text-align: center;
  padding: 200rpx 100rpx;
}.page-body-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  margin-bottom: 50rpx;
  width: 100%;
  padding: 50rpx 0 150rpx 0;
}.page-body-title {
  margin-bottom: 100rpx;
  font-size: 32rpx;
}.page-body-text {
  font-size: 30rpx;
  line-height: 26px;
  color: #ccc;
}.page-body-text-small {
  font-size: 24rpx;
  color: #000;
  margin-bottom: 100rpx;
}.page-body-form {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #eee;
}.page-body-form-item {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  border-bottom: 1px solid #eee;
  height: 88rpx;
  font-size: 34rpx;
}.page-body-form-key {
  width: 180rpx;
  color: #000;
}.page-body-form-value {
  flex-grow: 1;
}.page-body-form-value .input-placeholder {
  color: #b2b2b2;
}.page-body-form-picker {
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  align-items: center;
  font-size: 36rpx;
  margin-left: 20rpx;
  padding-right: 20rpx;
  border-bottom: 1px solid #eee;
}.page-body-form-picker-value {
  color: #ccc;
}.page-body-buttons {
  width: 100%;
}.page-body-button {
  margin: 25rpx;
}.page-body-button image {
  width: 150rpx;
  height: 150rpx;
}.page-footer {
  text-align: center;
  color: #1aad19;
  font-size: 24rpx;
  margin: 20rpx 0;
}.green{
    color: #09BB07;
}.red{
    color: #F76260;
}.blue{
    color: #10AEFF;
}.yellow{
    color: #FFBE00;
}.gray{
    color: #C9C9C9;
}.strong{
    font-weight: bold;
}.bc_green{
    background-color: #09BB07;
}.bc_red{
    background-color: #F76260;
}.bc_blue{
    background-color: #10AEFF;
}.bc_yellow{
    background-color: #FFBE00;
}.bc_gray{
    background-color: #C9C9C9;
}.tc{
    text-align: center;
}.page input{
    padding: 20rpx 30rpx;
    background-color: #fff;
}checkbox, radio{
    margin-right: 10rpx;
}.btn-area{
    padding: 10px 30px;
}.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}.pagehd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}.pagetitle{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}.pagedesc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}page{
    background-color: #F8F8F8;
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}.pagehd {
    padding: 40px;
}.pagebd {
    padding-bottom: 40px;
}.pagebd_spacing {
    padding-left: 15px;
    padding-right: 15px;
}.pageft{
    padding-bottom: 10px;
    text-align: center;
}.pagetitle {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
}.pagedesc {
    margin-top: 5px;
    color: #888888;
    text-align: left;
    font-size: 14px;
}.swiper {
    width: 100%;
    height: 400rpx;
}.slide-image {
    width: 100%;
}.news {
    padding: 26rpx 40rpx 26rpx 40rpx;
}.news-title {
    color: #AAAAAA;
}.news-item {
    margin: 10rpx 0 10rpx 0;
    
    background-color: #fff;
}.news-item-pic {
    padding: 20rpx 0 10rpx 20rpx;
    width: 160rpx;
    
    float: left;
}.news-item-image {
    width: 100%;
}.news-item-words {
    width: 450rpx;
    height: 65px;
    float: right;
    overflow-y: hidden;
    padding: 20rpx 10rpx;
}.news-item-title {
    font-size: 11pt;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.news-item-content {
    font-size: 8pt;
    line-height: 13pt;
    text-overflow:ellipsis; 
    color: #a9a9a9;
}.news-more {
    color: #AAAAAA;
    font-size: 14px;
    
}.news-more-line {
    padding-left: -26rpx important;
}.news-details-content {
    padding: 0 40rpx 100rpx 40rpx;
}.video {
    
}.video-input {
    border: 1px solid #CCCCCC;   
}.contact {
    padding: 40rpx 40rpx 40rpx 40rpx;
}image {
    height: auto;
}
登录后复制

二、业务页面部分

小程序页面主要由以下文件组成。

本项目程序分为4个页面：主页、新闻详情页、产品服务页、联系我们页。

主页部分

主页效果图如下

1. 页面结构

上方是一个图片轮播图，中间是新闻列表，下文有一个查看更多导航

其页面结构代码如下

<!--index.wxml--><view class="index">
    <view class="slider">
        <swiper class="swiper" indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{swipers}}">
                <swiper-item>
                    <navigator url="/pages/news/news-details?id={{item.id}}" class="widget">
                        <image mode="widthFix" src="{{item.thumbnail_images.medium_large.url}}" class="slide-image" width="" height=""></image>
                    </navigator>
                </swiper-item>
            </block>
        </swiper>
    </view>
    <view class="news">
        <text class="news-title">新闻动态</text>

        <block wx:for="{{news}}">
        <navigator url="/pages/news/news-details?id={{item.id}}">
        <view class="news-item line">
            <view class="news-item-pic">
                <image mode="widthFix" src="{{item.thumbnail}}" class="news-item-image" width="" height=""></image>
            </view>
            <view class="news-item-words">
                <view class="news-item-title"><text>{{item.title_plain}}</text></view>
                <view class="news-item-content"><text>{{item.excerpt_plain}}</text></view>
            </view>
        </view>
        </navigator>
        </block>

        <view class="widgetslist widgetslist_show">
            <navigator url="/pages/news/news?cat={{cat}}" class="widget_more">
                <text class="news-more">查看更多</text>
                <image class="widgetarrow" src="/images/arrowright.png" mode="aspectFill" />
                <view class="widgetline widgetline_first"></view>
            </navigator>
        </view>
    </view></view>
登录后复制

2. 样式表

样式代码如下所示

.index{
    background-color: #FBF9FE;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    flex: 1;
    min-height: 100%;
    font-size: 32rpx;
}.head{
    padding: 80rpx;
    line-height: 1;
}.body{
    padding-left: 30rpx;
    padding-right: 30rpx;
    overflow: hidden;
}.title{
    font-size: 52rpx;
}.desc{
    margin-top: 10rpx;
    color: #888888;
    font-size: 28rpx;
}.widgetsitem{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    background-color: #FFFFFF;
    overflow: hidden;
    border-radius: 4rpx;
    cursor: pointer;
}.widgetsinfo{
    display: flex;
    padding: 40rpx;
    align-items: center;
    flex-direction: row;
}.widgetsinfo_show{
}.widgetsinfo_show .widgetsinfo-img{
    transform: rotate(-90deg);
}.widgetsinfo-name{
    flex: 1;
}.widgetsinfo-img{
    width: 32rpx;
    height: 32rpx;
    transition: transform .4s;
    transform: rotate(90deg);
}.widgetslist{
    display: none;
}.widgetslist_show{
    display: block;
}.widget{
    position: relative;
    padding-top: 26rpx;
    padding-bottom: 26rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
}.widget_more{
    position: relative;
    padding-top: 26rpx;
    padding-bottom: 26rpx;
    padding-left: 0rpx;
    padding-right: 40rpx;
}.widgetarrow{
    position: absolute;
    top: 28rpx;
    right: 44rpx;
    width: 32rpx;
    height: 32rpx;
}.widgetline{
    content: " ";
    position: absolute;
    left: 40rpx;
    top: 0;
    right: 0;
    height: 2rpx;
    background-color: #F0F0F0;
}.widgetline_first{
    left: 0;
    right: 0;
    background-color: #D8D8D8;
}
登录后复制

3、 页面逻辑处理

页面逻辑也是通过接口取网站的数据，并且存到swipet,news等数据中，供前端显示

var CONFIG = require('../../utils/config.js')

Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    swipers: [],
    news: [],
    cat: '17',
  },

  onLoad: function () {    var that = this;
    wx.request({
      url: CONFIG.API_URL.GET_INDEX,
      method: 'GET',
      data: {},
      header: {        'Accept': 'application/json'
      },
      success: function(res) {
        console.log(res);        if (res.statusCode == 200 && res.data.status == 'ok') {          var data = res.data;          var swipers = [];          var news = [];
          
          console.log(data);          for (var i = 0; i < data.count; i++) {            if (i < 3) {
              swipers.push(data.posts[i]);
            }            else {              var excerpt_plain = data.posts[i].excerpt.replace(/<[^>].*?>/g, "");
              data.posts[i].excerpt_plain = excerpt_plain.replace(/\[[^\]].*?\]/g, "");
              news.push(data.posts[i]);
            }
          }
          that.setData({swipers: swipers});
          that.setData({news: news});
        } else {
          
        }
      }
    })
  },
  onShareAppMessage: function () {   // return custom share data when user share.
   console.log('onShareAppMessage')   return {
      title: '盛世华安',
      desc: '小程序',
      path: '/pages/index/index'
    }
  },
});
登录后复制

产品服务页部分

 产品服务页和主页的新闻列表页类似

1. 页面结构

其页面结构代码如下

<view class="news">
        <text class="news-title">产品服务</text>

        <block wx:for="{{news}}">
        <navigator url="/pages/news/news-details?id={{item.id}}">
        <view class="news-item line">
            <view class="news-item-pic">
                <image mode="widthFix" src="{{item.thumbnail}}" class="news-item-image" width="" height=""></image>
            </view>
            <view class="news-item-words">
                <view class="news-item-title"><text>{{item.title_plain}}</text></view>
                <view class="news-item-content"><text>{{item.excerpt_plain}}</text></view>
            </view>
        </view>
        </navigator>
        </block>
    </view>
登录后复制

2. 样式表

使用公共样式表。

3、 页面逻辑处理

请求官网接口数据并显示

var CONFIG = require('../../utils/config.js')

Page({
  data: {
  },
  onLoad: function () {    var that = this;
    wx.request({
      url: CONFIG.API_URL.GET_CATEGORY + '14',
      method: 'GET',
      data: {},
      header: {        'Accept': 'application/json'
      },
      success: function(res) {
        console.log(res);        if (res.statusCode == 200 && res.data.status == 'ok') {          var data = res.data;          var news = [];
          
          console.log(data);          for (var i = 0; i < data.count; i++) {            var excerpt_plain = data.posts[i].excerpt.replace(/<[^>].*?>/g, "");
            data.posts[i].excerpt_plain = excerpt_plain.replace(/\[[^\]].*?\]/g, "");
            news.push(data.posts[i]);
          }
          that.setData({news: news});
        } else {
          
        }
      }
    })
  },
  onReady:function(){    // 页面渲染完成  },
  onShow:function(){    // 页面显示  },
  onHide:function(){    // 页面隐藏  },
  onUnload:function(){    // 页面关闭  },
  go: function(event) {
    wx.navigateTo({
      url: '/pages/news/news-details?id=' + event.currentTarget.dataset.type
    })
  }
})
登录后复制

联系我们页部分

1. 页面结构

其页面结构代码如下.

<import src="../../utils/wxParse/wxParse.wxml"/> <view class="page">
  <view class="pagehd">
    <text class="pagetitle"></text>
    <text class="pagedesc"></text>
  </view>
    <view class="news-details-content wxParse">
    <template is="wxParse" data="{{wxParseData:content.nodes}}"/>
    </view></view>
登录后复制

2. 样式表

使用公共样式表。

3、 页面逻辑处理

请求官网接口数据并显示

var CONFIG = require('../../utils/config.js')var WxParse = require('../../utils/wxParse/wxParse.js');

Page({
  data: {
  },
  onLoad: function () {    var that = this;
    wx.request({
      url: CONFIG.API_URL.GET_PAGE + '36',
      method: 'GET',
      data: {},
      header: {        'Accept': 'application/json'
      },
      success: function(res) {
        console.log(res);        if (res.statusCode == 200 && res.data.status == 'ok') {          var data = res.data;
          
          that.setData({page: data.page});
          WxParse.wxParse('content', 'html', data.page.content, that, 25)
        } else {
          
        }
      }
    })
  },
  onReady:function(){    // 页面渲染完成  },
  onShow:function(){    // 页面显示  },
  onHide:function(){    // 页面隐藏  },
  onUnload:function(){    // 页面关闭  },
  go: function(event) {
    wx.navigateTo({
      url: '/pages/news/news-details?id=' + event.currentTarget.dataset.type
    })
  }
})
登录后复制

三、程序效果图

【相关推荐】 

1.微信小程序完整源码下载

2.微信小程序demo：阳淘

 

以上是小程序开发之企业展示的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
4 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前 By DDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前 By DDD
如何修复KB5055523无法在Windows 11中安装？
2 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7725
15
Java教程
1643
14
CakePHP 教程
1397
52
Laravel 教程
1290
25
PHP教程
1233
29
显示更多
Related knowledge
小程序开发中的PHP权限管理与用户角色设定 小程序开发中的PHP权限管理与用户角色设定 Jul 04, 2023 pm 04:48 PM

小程序开发中的PHP权限管理与用户角色设定随着小程序的普及和应用范围的扩大，用户对于小程序的功能和安全性提出了更高的要求，其中权限管理和用户角色设定是保证小程序安全性的重要一环。在小程序中使用PHP进行权限管理和用户角色设定能够有效地保护用户的数据和隐私，下面将介绍如何实现这一功能。一、权限管理的实现权限管理是指根据用户的身份和角色，授予不同的操作权限。在小

PHP在小程序开发中的页面跳转与路由管理 PHP在小程序开发中的页面跳转与路由管理 Jul 04, 2023 pm 01:15 PM

PHP在小程序开发中的页面跳转与路由管理随着小程序的快速发展，越来越多的开发者开始将PHP与小程序开发相结合。在小程序开发中，页面跳转和路由管理是非常重要的一部分，它能够帮助开发者实现页面之间的切换和导航操作。PHP作为一种常用的服务器端编程语言，可以很好地与小程序进行交互和数据传递，下面我们来详细了解一下PHP在小程序中的页面跳转与路由管理。一、页面跳转基

如何在uniapp中实现小程序开发和发布 如何在uniapp中实现小程序开发和发布 Oct 20, 2023 am 11:33 AM

如何在uni-app中实现小程序开发和发布随着移动互联网的发展，小程序成为了移动应用开发的一个重要方向。而uni-app作为一个跨平台的开发框架，可以同时支持多个小程序平台的开发，如微信、支付宝、百度等。下面将详细介绍如何使用uni-app开发和发布小程序，并提供一些具体的代码示例。一、小程序开发前准备在开始使用uni-app开发小程序之前，需要做一些准备工

小程序开发中的PHP安全防护与攻击防范 小程序开发中的PHP安全防护与攻击防范 Jul 07, 2023 am 08:55 AM

小程序开发中的PHP安全防护与攻击防范随着移动互联网的迅猛发展，小程序成为了人们生活中重要的一部分。而PHP作为一种强大而灵活的后端开发语言，也被广泛应用于小程序的开发中。然而，安全问题一直是程序开发中需要重视的方面。本文将重点介绍小程序开发中PHP的安全防护与攻击防范，同时提供一些代码示例。XSS（跨站脚本攻击）防范XSS攻击是指黑客通过向网页注入恶意脚本

小程序开发中的PHP数据缓存与缓存策略 小程序开发中的PHP数据缓存与缓存策略 Jul 05, 2023 pm 02:57 PM

小程序开发中的PHP数据缓存与缓存策略随着小程序的快速发展，更多的开发者开始关注如何提高小程序的性能和响应速度。其中一个重要的优化手段就是使用数据缓存来减少对数据库和外部接口的频繁访问。而在PHP中，我们可以利用各种缓存策略来实现数据缓存。本文将介绍PHP中的数据缓存原理，并提供几个常见的缓存策略的示例代码。一、数据缓存原理数据缓存是指将数据存放在内存中，以

微信小程序中PHP开发的下拉菜单实现方法 微信小程序中PHP开发的下拉菜单实现方法 Jun 04, 2023 am 10:31 AM

今天我们来学习一下微信小程序中PHP开发的下拉菜单实现方法。微信小程序是一种轻量级的应用程序，用户可以在微信里直接使用，而且不需要下载安装，非常方便。而PHP是一种非常流行的后端编程语言，也是与微信小程序配合很好的一种语言。下面我们就来看看如何在微信小程序中使用PHP开发下拉菜单。首先，我们需要准备好开发环境，包括PHP、微信小程序开发工具和服务器。然后我们

小程序开发中的PHP页面动画效果与交互设计 小程序开发中的PHP页面动画效果与交互设计 Jul 04, 2023 pm 11:01 PM

小程序开发中的PHP页面动画效果与交互设计导语：小程序是一种在移动设备上运行的应用程序，能够提供类似原生应用的体验。而在小程序开发中，PHP作为一种常用的后端语言，可以为小程序页面增添动画效果与交互设计。本文将介绍一些常用的PHP页面动画效果与交互设计，并附上代码示例。一、CSS3动画CSS3提供了丰富的属性和方法，用于实现各种动画效果。而在小

UniApp实现字节跳动小程序的开发与上线流程解析 UniApp实现字节跳动小程序的开发与上线流程解析 Jul 06, 2023 pm 05:01 PM

UniApp实现字节跳动小程序的开发与上线流程解析字节跳动小程序作为一种新兴的移动应用开发方式，正逐渐在业界流行起来。在开发字节跳动小程序之前，我们需要了解如何使用UniApp来实现开发和上线的流程。一、UniApp简介UniApp是一套基于Vue.js开发的以HTML5、App、小程序为多端统一开发的框架，通过编写一套代码，可以同时在多个平台上运行，包括字

See all articles