做一个企业展示小程序代码,给我详细步骤和详细代码
时间: 2024-03-06 19:47:32 浏览: 53
微信小程序码生成详细方法步骤
这里提供一个简单的企业展示小程序代码示例,包括首页、关于我们、产品展示和联系我们四个页面。以下是详细步骤和代码:
1. 新建小程序项目,选择空白模板,命名为“company-demo”。
2. 在 app.json 中配置页面路径和底部导航栏,代码如下:
```json
{
"pages": [
"pages/index/index",
"pages/about/about",
"pages/products/products",
"pages/contact/contact"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-active.png"
},
{
"pagePath": "pages/about/about",
"text": "关于我们",
"iconPath": "icons/about.png",
"selectedIconPath": "icons/about-active.png"
},
{
"pagePath": "pages/products/products",
"text": "产品展示",
"iconPath": "icons/products.png",
"selectedIconPath": "icons/products-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "icons/contact.png",
"selectedIconPath": "icons/contact-active.png"
}
]
}
}
```
3. 在 index 页面中添加企业简介、新闻动态等内容,代码如下:
index.wxml
```html
<view class="container">
<view class="header">
<image class="logo" src="/icons/logo.png"></image>
<view class="title">企业名称</view>
</view>
<view class="section">
<view class="subtitle">企业简介</view>
<view class="content">
这里是企业简介的内容。
</view>
</view>
<view class="section">
<view class="subtitle">新闻动态</view>
<view class="content">
这里是新闻动态的内容。
</view>
</view>
</view>
```
index.wxss
```css
.container {
padding: 16px;
}
.header {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.logo {
width: 64px;
height: 64px;
margin-right: 16px;
}
.title {
font-size: 24px;
font-weight: bold;
}
.section {
margin-bottom: 16px;
}
.subtitle {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}
.content {
font-size: 16px;
line-height: 1.5;
}
```
4. 在 about 页面中添加企业介绍、发展历程等内容,代码如下:
about.wxml
```html
<view class="container">
<view class="header">
<image class="logo" src="/icons/logo.png"></image>
<view class="title">企业名称</view>
</view>
<view class="section">
<view class="subtitle">企业介绍</view>
<view class="content">
这里是企业介绍
阅读全文