登录  /  注册
首页 > 微信小程序 > 小程序开发 > 正文

小程序开发之企业展示

Y2J
发布： 2017-05-08 10:44:30
原创
3068人浏览过

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

一、小程序主体部分

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

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>
    <view>
        <swiper>
            <block>
                <swiper-item>
                    <navigator>
                        <image></image>
                    </navigator>
                </swiper-item>
            </block>
        </swiper>
    </view>
    <view>
        <text>新闻动态</text>

        <block>
        <navigator>
        <view>
            <view>
                <image></image>
            </view>
            <view>
                <view><text>{{item.title_plain}}</text></view>
                <view><text>{{item.excerpt_plain}}</text></view>
            </view>
        </view>
        </navigator>
        </block>

        <view>
            <navigator>
                <text>查看更多</text>
                <image></image>
                <view></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 &amp;&amp; res.data.status == 'ok') {          var data = res.data;          var swipers = [];          var news = [];
          
          console.log(data);          for (var i = 0; i ].*?&gt;/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>
        <text>产品服务</text>

        <block>
        <navigator>
        <view>
            <view>
                <image></image>
            </view>
            <view>
                <view><text>{{item.title_plain}}</text></view>
                <view><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 &amp;&amp; res.data.status == 'ok') {          var data = res.data;          var news = [];
          
          console.log(data);          for (var i = 0; i ].*?&gt;/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></import> <view>
  <view>
    <text></text>
    <text></text>
  </view>
    <view>
    <template></template>
    </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 &amp;&amp; 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中文网其它相关文章！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：小程序开发之热门电影 下一篇：微信公众平台开发之小黄鸡API
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
P粉722478067来自于2024-04-19 15:37:47
0 0 49
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');  &nb...
P粉722478067来自于2024-04-18 23:52:34
0 0 60
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 145
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 918
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 452
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 329
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 451
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 270
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 361
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1866
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部