微信小程序功能介绍

微信小程序增加了很多新功能，让商家开发功能更丰富的小程序更加方便。下面小系列会一一列举。

1.分享

您可以与朋友或群聊分享小程序的页面。

2.模板消息

商家可以给已经收到服务的用户发送模板消息。用户可以在收到一次服务后的七天内收到一条模板消息。

3.客服新闻

用户可以在小程序中联系客服，并支持文字和图片。商家可以在48小时内回复用户。

4.扫一下

用户可以在小程序中使用扫描。

5.带参数的二维码

支持在开发者工具中生成带参数的二维码。扫描完代码后，用户可以打开不同页面的小程序。(目前仅由开发者和体验者使用)

此外，小程序优化和修复了100多个功能点，如大大增强了地图功能。

下面是题目的开头，小程序企业如何展示如何开发？标题到此结束

基于微信小程序功能的日益完善和微信平台的用户数量，很多企业开始利用小程序赚钱。但是企业小程序有一个棘手的点，就是小程序企业展示。以下是开发过程，希望能帮你解决问题。

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

首先，小程序的主要部分

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

1.小程序逻辑

app({

onlaunch:函数{

//启动时先做一些事情。},

onshow:函数show时做点什么。},

onhide:函数{ //隐藏时做点什么。},

globaldata: 'fangbei'})

2.小程序公共设置

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

{ ' pages ' :[' pages/index/index '，' pages/news/news '，' pages/news/news-details '，' pages/product/product '，' pages/contact/contact '

]，' window' : { '导航栏文字样式' :' black '，'导航栏标题文字' : '史圣华安'，'导航栏背景色' :' # fbf9fe '，'背景色' :' # fbf9fe '

}，' tab bar ' : { ' color ' : ' # d dd '，' selectedcolor': '#459ae9 '，' borderstyle': 'black '，' backgroundcolor': '#ffffff '，list ' :[{ ' page path ' : ' pages/index/index '，' icon path ' : ' images/index . png '，' selected con path ' : ' images/index _ 1

}，{ ' page path ' : ' pages/product/product '，' icon path ' : ' images/product . png '，' selected con path ' : ' images/product _ selected . png '，' text' :' product service '

}，{ ' page path ' : ' pages/contact/contact '，' icon path ' : ' images/contact . png '，' selected con path ' : ' images/contact _ selected . png '，' text' :' contact us '

}]

},“network time out”: {“request”: 10000，“connect socket”: 10000，“upload file”: 10000，“download file”: 10000

},“debug”: true }

3.通用样式表

@ import ' style/weui . wxss '；

@ import '/utils/wx parse/wx parse . wxss '；

第{

背景-color : # fbf 9fe；

高度：；

}.容器{

display: flex

flex-direction:柱；

比较小高度：；

justice-content :空格；

}.页眉{

display: flex

font-size : 32 rpx；

color: # aaa

margin-top : 50 rpx；

flex-direction:柱；

align-items : center；

}.页面-页眉-文本{

padding: 20rpx 40rpx

}.页面标题行{

width: 150rpx

height: 1px

border-bottom : 1px solid # ccc；

}.页面正文{

宽度：；

display: flex

flex-direction:柱；

align-items : center；

flex-grow : 1；

overflow-x:隐藏；

}.页面正文包装{

margin-top : 100 rpx；

display: flex

flex-direction:柱；

align-items : center；

宽度：；

}.页面正文包装表单{

宽度：；

}.页面-正文-措辞{

text-align:中心；

padding: 200rpx 100rpx

}.页面-正文-信息{

显示： flex

弯曲方向：柱；

对齐-项目：居中；

背景-color : # fff；

边缘-底部： 50 rpx

宽度： ;

padding: 50rpx 0 150rpx 0

}.页面-正文-标题{

边缘-底部： 100 rpx

font-size : 32 rpx

}.页面-正文-文本{

font-size : 30 rpx

线高： 26px

color: # ccc

}.页面-正文-文本-小{

font-size : 24 rpx

颜色： # 000

边缘-底部： 100 rpx

}.页面-正文-表单{

宽度： ;

背景-color : # fff；

显示： flex

弯曲方向：柱；

宽度： ;

border: 1px固体# eee

}.页面-正文-表单-项目{

显示： flex

对齐-项目：居中；

边距-左： 30 rpx

边框-底部： 1px实心# eee

高度： 88rpx

font-size : 34 rpx

}.page-body-form-key {

宽度： 180rpx

颜色： # 000

}.页面-正文-表单-值{

flex-grow : 1；

}.页面-正文-表单-值。输入占位符{

color: # b2b2b2

}.页面正文表单选取器{

显示： flex

正义-内容：空格；

高度： 100rpx

对齐-项目：居中；

font-size : 36rpx

左边距： 20 rpx

填充-右侧： 20 rpx

边框-底部： 1px实心# eee

}.页面-正文-表单-选取器-值{

color: # ccc

}.页面-正文-按钮{

宽度： ;

}.页面-正文-按钮{

margin: 25rpx

}.页面-正文-按钮图像{

宽度： 150rpx

高度： 150rpx

}.页脚{

文本-对齐：中心；

color : # 1 aad 19

font-size : 24 rpx

边距： 20 rpx 0；

}.绿色{

color: # 09bb07

}.红色{

颜色： # f76260

}.蓝色{

color: # 10aeff

}.黄色{

color: # ffbe00

}.灰色{

color : # c9 c 9；

}.strong{

font-weight : bold；

}.bc \u绿色{

背景-color : # 09bb 07；

}.bc_red{

背景-color : # f 76260；

}.bc_blue{

背景-color : # 10 aeff；

}.bc \u黄色{

背景-color : # ffbe 00；

}.bc_gray{

背景-color : # c9c 9c 9；

}.tc{

文本-对齐：中心；

}.页面输入{

padding: 20rpx 30rpx

背景颜色： #fff

；

}复选框，收音机{

右边距： 10 rpx

}.btn-区域{

padding: 10px 30px

}.btn-区域按钮{

margin-top : 20 rpx；

边缘-底部： 20 rpx

}.第{

比较小高度： ;

flex : 1；

背景-color : # fbf 9fe；

font-size : 32 rpx

font-family :-apple-system-font，heetica neue，heetica，sans-serif；

隐藏飞越：

}.pagehd{

padd : 50 rpx 50 rpx 100 rpx 50 rpx；

文本-对齐：中心；

}.页面标题{

显示器：内联块；

padding: 20rpx 40rpx

font-size : 32 rpx

颜色： # aaa

边框-底部： 1px实心# cccccc

}.pagedesc{

显示器：无；

margin-top : 20 rpx；

font-size : 26 rpx

color: # bbbbbb

}页面{

背景-color : # f8f8f8；

font-size : 16px

font-family :-apple-system-font，heetica neue，heetica，sans-serif；

}.pagehd {

padding: 40px

}.pagebd {

衬垫-底部： 40px

}.pagebd_spacing {

左衬垫： 15px

填充-右侧： 15px

}.pageft{

垫底： 10px

文本-对齐：中心；

}.页面标题{

文本-对齐：左侧；

font-size : 20px

font-weight : 400；

}.pagedesc {

margin-top : 5px；

颜色： # 888888

文本-对齐：左侧；

font-size : 14px

}.swiper {

宽度： ;

高度： 400rpx

}.幻灯片图像{

宽度： ;

}.新闻{

padd : 26 rpx 40 rpx 26 rpx 40 rpx

}.新闻标题{

颜色： # aaa

}.新闻项目{

margin: 10rpx 0 10rpx 0

背景-color : # fff；

}.新闻-项目-图片{

padd : 20 rpx 0 10 rpx 20 rpx

宽度： 160rpx

向左浮动：

}.新闻-项目-图片{

宽度： ;

}.新闻-项目-文字{

宽度： 450rpx

高度： 65px

向右浮动：

溢出-y:隐藏；

padding: 20rpx 10rpx

}.新闻-项目-标题{

font-size : 11pt

word-break :保留所有；

空白： nowrap

隐藏飞越：

文本-overflow:省略号；

}.新闻-项目-内容{

font-size : 8pt

行高： 13磅；

文本溢出：省略号；

color: # a9a9a9

}.新闻-更多{

颜色： # aaa

font-size : 14px

}.新闻-更多-在线{

左衬垫： -26rpx重要；

}.新闻-详细信息-内容{

padd : 0 40 rpx 100 rpx 40 rpx

}.视频{

}.视频输入{

border: 1px固体# cccccc

}.联系人{

padd : 40 rpx 40 rpx 40 rpx 40 rpx

}图像{

高度：自动

}

二、业务页面部分

主页部分

主页效果图如下

a

1.页面结构

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

其页面结构代码如下

autoplay=' { { autoplay } } ' interval=' { { interval } } ' duration=' { { duration } } '；

新闻动态

{{item.title_plain}}

{ { item。extract _平原} }

查看更多

2.样式表

样式代码如下所示

索引{

背景-color : # fbf 9fe；

font-family :-apple-system-font，heetica neue，heetica，sans-serif；

flex : 1；

比较小高度： ;

font-size : 32 rpx

}.头

padding: 80rpx

线高： 1;

}.body{

左衬垫： 30 rpx

填充-右： 30 rpx

隐藏飞越：

}.标题{

font-size : 52 rpx

}.desc{

margin-top : 10 rpx；

颜色： # 888888

font-size : 28 rpx

}.widgetsitem {

margin-top : 20 rpx；

边缘-底部： 20 rpx

背景-color : # ffffff；

隐藏飞越：

边界半径： 4r px

cursor:指针；

}.widgetsinfo{

显示： flex

padding: 40rpx

对齐-项目：居中；

挠曲方向：行；

}.widgetsinfo_show{

这里是第一段内容结尾。这里是结尾添加段小程序企业展示怎么开发？目前已获得了588位网友青睐！这里是正文结尾