微信小程序开发(4) 企业展示
在这篇微信小程序开发教程中，我们将介绍如何使用微信小程序开发企业内部宣传展示等功能。
一、小程序主体部分
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
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": ,
"connectSocket": ,
"uploadFile": ,
"downloadFile":
},
"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:;
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:;
}
.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:;
background-color: #FBF9FE;
font-size: 32rpx;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
overflow: hidden;
}
.page__hd{
padding: 50rpx 50rpx 100rpx 50rpx;
text-align: center;
}
.page__title{
display: inline-block;
padding: 20rpx 40rpx;
font-size: 32rpx;
color: #AAAAAA;
border-bottom: 1px solid #CCCCCC;
}
.page__desc{
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;
}
.page__hd {
padding: 40px;
}
.page__bd {
padding-bottom: 40px;
}
.page__bd_spacing {
padding-left: 15px;
padding-right: 15px;
} .page__ft{
padding-bottom: 10px;
text-align: center;
} .page__title {
text-align: left;
font-size: 20px;
font-weight:;
} .page__desc {
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="widgets__list widgets__list_show">
<navigator url="/pages/news/news?cat={{cat}}" class="widget_more">
<text class="news-more">查看更多</text>
<image class="widget__arrow" src="/images/arrowright.png" mode="aspectFill" />
<view class="widget__line widget__line_first"></view>
</navigator>
</view>
</view>
</view>
2. 样式表
样式代码如下所示
.index{
background-color: #FBF9FE;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
flex:;
min-height: 100%;
font-size: 32rpx;
}
.head{
padding: 80rpx;
line-height:;
}
.body{
padding-left: 30rpx;
padding-right: 30rpx;
overflow: hidden;
}
.title{
font-size: 52rpx;
}
.desc{
margin-top: 10rpx;
color: #888888;
font-size: 28rpx;
}
.widgets__item{
margin-top: 20rpx;
margin-bottom: 20rpx;
background-color: #FFFFFF;
overflow: hidden;
border-radius: 4rpx;
cursor: pointer;
}
.widgets__info{
display: flex;
padding: 40rpx;
align-items: center;
flex-direction: row;
}
.widgets__info_show{
}
.widgets__info_show .widgets__info-img{
transform: rotate(-90deg);
}
.widgets__info-name{
flex:;
}
.widgets__info-img{
width: 32rpx;
height: 32rpx;
transition: transform .4s;
transform: rotate(90deg);
}
.widgets__list{
display: none;
}
.widgets__list_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;
}
.widget__arrow{
position: absolute;
top: 28rpx;
right: 44rpx;
width: 32rpx;
height: 32rpx;
}
.widget__line{
content: " ";
position: absolute;
left: 40rpx;
top:;
right:;
height: 2rpx;
background-color: #F0F0F0;
}
.widget__line_first{
left:;
right:;
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="page__hd">
<text class="page__title"></text>
<text class="page__desc"></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
})
}
})
三、程序效果图
四、源代码下载
扫描下方二维码并关注公众账号，回复 “1238” 获取
源代码使用方法，请参考 微信小程序开发入门教程
微信小程序开发(4) 企业展示的更多相关文章
- 微信小程序开发日记——高仿知乎日报（中）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
- 微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
- 微信小程序开发详解——小程序，大颠覆！
微信小程序开发 联系 苏念 188.1414.7927 微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序 ...
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- 《腾讯游戏人生》微信小程序开发总结
为打通游戏人生擂台赛与线下商家的O2O衔接,同时响应时下日臻火热的微信小程序,项目团队决定也开发一款针对性的微信小程序,以此方便商家在我们平台入驻并进行擂台赛事的创建和奖励的核销,进一步推广擂台赛的玩 ...
- 微信小程序开发日记——高仿知乎日报（上）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发工具测评
1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序开发之入门篇（熟悉开发工具）
个人的每一篇博文都谈不上有什么技术含量,只是为了帮助不熟悉微信小程序开发的自己及他人提供一下思路.谢谢,下面开始! PS: 因为本人没有小程序的内测资格,所以所有的开发及Demo都是无AppId的,如 ...
随机推荐
- Paint the Wall ZOJ - 2747
点数很多,坐标值很大,然后离散化一下用一个点表示一小块的面积对应的颜色,然后更新的时候一块一块更新,查询的时候一块一块查询 #include<map> #include<set> ...
- HDU6333 Harvest of Apples （杭电多校4B）
这莫队太强啦 先推公式S(n,m)表示从C(n, 0) 到 C(n, m)的总和 1.S(n, m) = S(n, m-1) + C(n, m) 这个直接可以转移得到 2.S(n, m) = ...
- NOIP 飞扬的小鸟 题解
题目描述 Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便宣 ...
- CF1131E String Multiplication（？？？）
这题难度2200,应该值了. 题目链接:CF原网 题目大意:定义两个字符串 $s$ 和 $t$($s$ 的长度为 $m$)的乘积为 $t+s_1+t+s_2+\dots+t+s_m+t$.定义一个字符 ...
- bzoj3467: Crash和陶陶的游戏
就一篇题解: BZOJ3467 : Crash和陶陶的游戏 - weixin_34248487的博客 - CSDN博客 1.离线,建出Atrie树:B树的倍增哈希数组,节点按照到根路径字典序排序 2. ...
- A1144. The Missing Number
Given N integers, you are supposed to find the smallest positive integer that is NOT in the given li ...
- postman 请求带cookie
以亚马逊为例,我抓包随便看一个返回是json数据格式的一个接口,比如随便点一个,我的订单 随便找一条,然后复制url过滤 右键,copy下url 将url放入filter过滤: 在postman里面, ...
- JSP页面用<a>标签访问 Action 出错
问题: JSP页面 <a href="/crud1/crud1/add.action" >添加</a> struts.xml 中: <package ...
- Luogu P3966 [TJOI2013]单词
题目链接 \(Click\) \(Here\) 本题\(AC\)自动机写法的正解之一是\(Fail\)树上跑\(DP\). \(AC\)自动机是\(Trie\)树和\(Fail\)树共存的结构,前者可 ...
- node.js小案例_留言板
一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示: 2.案列源码:https://github.com/45612 ...