社群
學習
工具庫
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

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++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信箱登陸入口在哪裡
7824
15
Java教學
1647
14
CakePHP 教程
1402
52
Laravel 教程
1300
25
PHP教程
1238
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開發的下拉式選單實作方法 Jun 04, 2023 am 10:31 AM

今天我們來學習微信小程式中PHP開發的下拉式選單實作方法。微信小程序是一種輕量級的應用程序，用戶可以在微信裡直接使用，而且不需要下載安裝，非常方便。而PHP是一種非常流行的後端程式語言，也是與微信小程式配合很好的語言。下面我們就來看看如何在微信小程式中使用PHP開發下拉式選單。首先，我們需要準備好開發環境，包括PHP、微信小程式開發工具和伺服器。然後我們

小程式開發中的PHP資料快取與快取策略 小程式開發中的PHP資料快取與快取策略 Jul 05, 2023 pm 02:57 PM

小程式開發中的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