小程序，虽说小，但俗话说的好：“麻雀虽小五脏俱全”，我希望所有的IT工作者，从小程序出发，了解程序的所有结构联系，坚持下去，总有一天你会看到自己的努力换来的都是值得的，加油哦！
小程序初期模型的搭建推荐：https://qz.fkw.com
tabbar所需的图标推荐下载网址：https://www.iconfont.cn
一、小程序的初始工作
1、现在微信公众平台注册微信小程序，获取APPID然后下载微信开发者工具，打开通过APPID创建自己的第一个小程序（注意必须将小程序的位置放到空目录下）
2、进入微信开发者工具，删除没有用的目录文件，只剩下sitemap88.json和sitemap.json这两个配置文件即可
3、创建app.js app.wxss app.wxml三个必备的文件，用于后期对小程序进行全局配置
4、创建一个空目录名为pages，用于存放后期的所有页面，创建名为images的空目录，用于后期上传所需要的图片
二、创建页面及配置
1、创建首页
在微信开发者工具中选择创建（+号），创建一个名为index的目录，再在此目录下点+号，选择Page选项，输入index，就会直接创建一个页面所必备的四个文件（index.wxml index.wxss index.js index.json）
2、创建其它页面
可以按上述操作，也可直接在app.json中通过输入路径的方式，保存之后就会直接在pages中生成相对应的页面如下：
"pages": [
"pages/index/index",
"pages/time/time",
"pages/phone/phone",
"pages/all/all"
],
先后创建了名为index time phone all 的四个页面
3、实现底部 tabbar
在app.json中添加 tabBar并添加list数组，在数组中配置我们的tabbar，即：底部的主页面，实现的功能就那么几个，在这里就不具体说明了，代码附上：（注：底部需要的图标请参考：https://www.iconfont.cn进行下载）
{
"pages": [
"pages/index/index",
"pages/time/time",
"pages/phone/phone",
"pages/all/all",
"pages/a/a"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/index1.png",
"selectedIconPath": "images/index2.png"
},
{
"pagePath": "pages/all/all",
"text": "热销产品",
"iconPath": "images/all1.png",
"selectedIconPath": "images/all2.png"
},
{
"pagePath": "pages/time/time",
"text": "新品特惠",
"iconPath": "images/time1.png",
"selectedIconPath": "images/time2.png"
},
{
"pagePath": "pages/phone/phone",
"text": "联系我们",
"iconPath": "images/phone1.png",
"selectedIconPath": "images/phone2.png"
}
],
"selectedColor": "#efb336"
},
"sitemapLocation": "sitemap88.json"
}
三、首页的配置（index中实现）
目前实现的主要是三部分，如下：
1、轮播图
负责实现的组件主要是<swiper></swiper>，结构如下：
在 index.wxml 中用<view>组件将<swiper></swiper>包裹，<swiper-item>进行遍历，然后用<navigator>实现页面跳转，最内层包裹的是<image>标签，然后用wxss实现对index.wxml的样式设置，需要遍历的图片路径存放在index.js中
2、导航栏
在index.wxml中用两个<view>组件（一个是用来对整个框架实现的包裹，另一个对图片跟文字实现遍历）嵌套图片跟下方的字，当然图片跟下面的字也都是用<view>组件分别包裹，实现对图片和文字样式的设置
3、新品、热销
这个就是用<view>组件简单的实现标题和图片的渲染
【首页配置的代码如下】
wxml:
<view class="lunbo">
<swiper autoplay="true" interval="3000" duration="800" circular="true">
<swiper-item wx:for="{{imageUrl}}">
<navigator url="{{item.link}}" open-type="redirect">
<image src="{{item.url}}" mode="aspectFill"></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 导航栏 -->
<view class="category">
<view wx:for="{{iconArray}}" class="icon_item">
<navigator url="{{item.link2}}" open-type="redirect">
<view class="icon_wrap">
<image src="{{item.iconUrl}}" class="index_icon"></image>
</view>
<view class="category_item_text">
<text>{{item.iconText}}</text>
</view>
</navigator>
</view>
</view>
<!-- 新品、热销 -->
<view class="word2 ">
<text style="margin-bottom=‘20rpx‘ ">— 新品上市 —</text>
</view>
<view>
<image src="/images/new.jpg " class="new "></image>
</view>
<view class="word2 ">
<text>— 热销产品 —</text>
</view>
<view>
<image src="/images/guo.jpg " class="rexiao "></image>
</view>
wxss:
/* 轮播图的样式 */
.lunbo{
width: 100%;
height: 1100rpx;
}
swiper{
width: 100%;
height: 1100rpx;
}
.lunbo image{
width: 100%;
height: 1100rpx;
}
/* 导航栏的样式 */
.category {
padding: 40rpx 20rpx 20rpx 20rpx;
margin-bottom: 10px;
}
.index_icon {
width: 320rpx;
height: 200rpx;
margin: 20rpx;
border-radius: 20rpx !important;
}
.category_item_text {
text-align: center;
font-size: 13px;
color: #737373;
}
.icon_item{
float: left;
width: 50%;
}
/* 新品、热销 */
.new{
width: 100%;
height: 600rpx;
}
.rexiao{
width: 100%;
height: 600rpx;
}
.word2 {
margin-top: 15rpx;
margin-bottom: 20rpx;
text-align: center;
font-size: 18px;
color: #737373;
}
js:
Page({
data: {
"imageUrl": [{
"link": "../a/a",
"url": "/images/L1.jpg"
}, {
"link": "../all/all",
"url": "/images/L2.jpg"
}, {
"link": "../all/all",
"url": "/images/L3.jpg"
}],
iconArray: [{
"link2": "../a/a",
"iconUrl": ‘/images/guo.jpg‘,
"iconText": ‘国朝、国风‘
},
{
"link2": "../a/a",
"iconUrl": ‘/images/katong.jpg‘,
"iconText": ‘卡通、动漫‘
},
{
"link2": "../a/a",
"iconUrl": ‘/images/shishang.jpg‘,
"iconText": ‘时尚、个性‘
},
{
"link2": "../a/a",
"iconUrl": ‘/images/personal.jpg‘,
"iconText": ‘私人定制‘
}
]
},
});
未完，待续……
原文地址：https://www.cnblogs.com/guo-2020/p/12254006.html