Dans ce didacticiel de développement du mini-programme WeChat, nous présenterons comment utiliser le mini-programme WeChat pour développer des fonctions telles que la promotion et l'affichage internes de l'entreprise.
1. La partie principale du mini programme
La partie principale d'un mini programme est constituée de trois fichiers, qui doivent être placés dans le répertoire racine du projet, comme suit :
![](https://img.php.cn/upload/article/000/001/505/8a9226df4eb9c5d5897864caa4432b64-0.png)
1. Logique du mini-programme
1 2 3 4 5 6 | App({
onLaunch: function () {
onShow: function () {
onHide: function () {
globalData: 'fangbei' })
|
Copier après la connexion
2. Paramètres publics du mini-programme
Enregistrez principalement cinq pages, configurez la fenêtre et afficher trois pages dans la barre d'onglets
1 2 3 4 5 6 7 8 | { "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}
|
Copier après la connexion
3. Feuille de style publique
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 | @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;
}
|
Copier après la connexion
2. Partie page Business
La page applet est principalement composée des fichiers suivants. .
![](https://img.php.cn/upload/article/000/001/505/15e827f39cb61ce0f15251fab26bcd47-1.png)
Ce programme de projet est divisé en 4 pages : page d'accueil, page de détails de l'actualité, page de service produit et page de contact.
Partie page d'accueil
Le rendu de la page d'accueil est le suivant
![](https://img.php.cn/upload/article/000/001/505/15e827f39cb61ce0f15251fab26bcd47-2.png)
Structure de la page
Ci-dessus
se trouve un. image Graphique carrousel, avec une liste d'actualités au milieu et une vue ci-dessous pour en savoir plusNavigation
Le code de structure de la page est le suivant
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!--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>
|
Copier après la connexion
2. Le code de style de la feuille de style
est le suivant
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | .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;
}
|
Copier après la connexion
3. Traitement logique de la page
La logique de la page passe également par l' interface Obtenez les données du site Web et enregistrez-les dans un swipet, des actualités et d'autres données pour l'affichage frontal
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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 () {
console.log( 'onShareAppMessage' ) return {
title: '盛世华安' ,
desc: '小程序' ,
path: '/pages/index/index'
}
},
});
|
Copier après la connexion
Partie de la page produit et service
La page des produits et services est similaire à la page de liste d'actualités sur la page d'accueil
1 Structure de la page
Le code de structure de la page est le suivant
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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>
|
Copier après la connexion
. 2. Feuille de style
Utiliser une feuille de style publique .
3. Traitement logique de la page
Demander les données et l'affichage de l'interface du site officiel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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
})
}
})
|
Copier après la connexion
Contactez-nous partie de la page
1 .Structure de la page
Le code de structure de la page est le suivant.
1 2 3 4 5 6 7 8 | <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>
|
Copier après la connexion
2. La feuille de style
utilise une feuille de style publique.
3. Traitement logique de la page
Demander les données et l'affichage de l'interface du site officiel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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
})
}
})
|
Copier après la connexion
3. Rendus du programme
![](https://img.php.cn/upload/article/000/001/505/ccf9cb09391c0e2b864af0ec9998d58e-3.png)
![](https://img.php.cn/upload/article/000/001/505/ccf9cb09391c0e2b864af0ec9998d58e-4.png)
![](https://img.php.cn/upload/article/000/001/505/41daf0634632fab9c7ad9fb73136ae69-5.png)
![](https://img.php.cn/upload/article/000/001/505/41daf0634632fab9c7ad9fb73136ae69-6.png)
[Recommandations associées]
1.Téléchargement complet du code source du mini-programme WeChat
2.Mini-programme WeChat démo :Yangtao
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!