✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：微信小程序开发零基础教学，难点与应用实战总结
景天的主页：景天科技苑

小程序开发核心

1.尺寸单位和样式

1.1 创建小程序项目–纯净环境

纯净环境

我们把app.json里面的window的配置拿过来

 "window": {"navigationBarTitleText": "功能演示",   # 标题"navigationBarBackgroundColor": "#0000FF", #颜色"enablePullDownRefresh": false,  # 是否带下拉刷新"backgroundColor": "#00FFFF",    # 下拉刷新颜色"backgroundTextStyle": "dark"    # light ，下拉刷新的点点什么颜色},

我们将index.wxml的导航栏改为自己的

在app.json中配置下tabbar

"tabBar": {"selectedColor": "#b4282d","position": "bottom","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/home.png","selectedIconPath": "images/home_select.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/my.png","selectedIconPath": "images/my_select.png"}]
},

将相关文件夹，文件都拷过来，上述操作都是上一章的内容，如有遗忘，可以翻过去复习一下

1.2 关于小程序显示的尺寸单位

1 小程序中–》手机屏幕大小可能不一样–》使用px 像素就会有问题–》小程序统一了–》整个宽度就是 750rpx—》这样无论在什么手机上能等比例缩放

2 以后在高度，宽度的时候–》统一都用 rpx

1.3 样式

1.3.1 全局样式 app.wxss

1 以后在这里面写css 样式

2 样式一般不会直接写在wxml文件中，全局的样式一般写在app.wxss里面。整个小程序 都生效

.myview {height: 500rpx;width: 750rpx;background-color: aquamarine;font-size: 30rpx;
}

然后在wxml里面调用

1.3.2 局部样式 页面.wxss

1 以后在这里面写css 样式

2 只在当前页面中生效

.myview{background-color: rebeccapurple;
}

个人中心wxml

个人中心样式

此时我们点击个人中心，北京颜色就是我们在个人中心设置的局部背景颜色

2.首页案例

内置组件
text span
view div
image img
icon 提示

这些组件都是怎么用的呢，我们可以子啊开发工具中，将光标放在标签处，然后点击微信开放文档

点进去，就会跳到组件使用介绍页

2.1 button组件使用

1 在 页面.wxml 中

<button size="mini" type="default" plain class="mybutton">我是个按钮</button>
<button size="mini" type="warn" plain>我是个按钮</button>
<button size="mini" type="primary" plain>我是个按钮</button>

plain 镂空，北京透明色

2 在 页面.wxss中使用 可以给按钮设置单独的样式

.mybutton{/* 距离顶部30rpx */margin-top: 300rpx;   /* 距离底部30rpx */margin-bottom: 30rpx;/* 优先以这个样式为准 */background-color: red !important;
}

3 后续其它属性，都比较简单，参照官网，相信大家可以实现效果
-按钮带加载
-按钮不可点击
。。。。

2.2 swiper+swiper-item首页轮播图

看下各参数属性

把之前我们得首页代码全删了，来制作首页轮播图
我们可以把swiper放在view里面

2.2.1 index.wxml

<view><swiper autoplayindicator-dotscircularindicator-color='#FFFFF'interval='3000'
><swiper-item><image src="/images/banner/banner1.jpg" mode="widthFix" style="width: 750rpx;"/></swiper-item><swiper-item><image src="/images/banner/banner2.png" mode="widthFix" style="width: 750rpx;" /></swiper-item><swiper-item><image src="/images/banner/banner3.jpg" mode="widthFix" style="width: 750rpx;" /></swiper-item>
</swiper>
</view>

效果

真机调试效果

2.2.2 把轮播图放在 images/banner目录下

2.3 首页提示板块

index.wxml

<view class="tips"><text class="iconfont icon-tishi icon"></text><text>欢迎使用我们的系统，谢谢~~</text>
</view>

index.wxss

.tips{/* 背景色 */background-color: #f5eedf;/* 字大小 */font-size: 32rpx;/* 字颜色 */color:#e9ab4e; /* 圆角效果 */border-radius: 50rpx;/* 距离上下右左距离 */margin:30rpx 10rpx 30rpx 10rpx;padding-left:130rpx ;
}
.icon{padding-right: 10rpx;
}

3.小程序引入矢量图

小程序中我们经常会用到图标，自己绘制图标可能比较麻烦，也不一定满意，此时我们可以使用阿里的矢量库图标
我们使用 阿里 矢量库图标

1 注册阿里矢量图账号

• 打开 https://www.iconfont.cn/
• 注册成功
  

2 搜索想要的图标

在搜索框输入想要搜索的图标，按回车搜索

• 加入购物车
  

• 在购物车中添加至项目
  

刚开始没有项目，需要新建项目

可以多选几个需要用到的图标，添加到项目

3 我的项目–项目设置–》打开base64，然后点击保存

4 选择font class --》生成代码–》点击链接地址打开

点击生成

点击链接，可以看到里面写了一些样式
此时的图片等资源是用base64编码得到的，不用去远程去下载

5 把打开的链接地址内容复制到项目中

• static/css/font.wxss
  

6 在app.wxss中引入

一般我们都会将样式单独写在一个一个文件中，然后在app.wxss中引入

@import "/static/css/font.wxss";

7 在想用图标的位置，加入text组件

想加入什么图标，就在图标悬浮处，复制代码

放入到text中

<text class="iconfont icon-tishi icon"></text>

可以看到图标显示出来了