:-: 小程序01
> 小程序是运行在微信中的应用!!不能直接运行在浏览器!是微信团队自己研发一套开发体系! 对外提供大量API接口! 方便我们通过微信和手机进行各种交互!
# 学习策略:
1. 读文档,使用时能快速定位!
2. 做项目
# 本节目标
- 介绍课程和项目
- 微信开发工具
- wxss
- 事件及页面跳转
- 数据绑定及轮播
- 编辑视图
- 数据适配
- 循环加载视图
- template
# 介绍
>什么是小程序? 如何学习? 环境如何搭建? 我们最终的目标是什么?
## 什么是小程序?
> 小程序是运行在微信中的应用!!不能直接运行在浏览器!是微信团队自己研发一套开发体系! 对外提供大量API接口! 方便我们通过微信和手机进行各种交互!
核心: 运行在微信内部! 大量API和组件
## 官方文档地址
[Api-小程序](https://developers.weixin.qq.com/miniprogram/dev/)
官方文档学习目录:
说明
- 简易教程: 学前必读! 自己注册账号, 记住`AppId`并下载开发工具!
- 框架: 整体介绍小程序架构!
- 组件: 内置也微信风格一致的组件!
扩展:基本上，组件代表着一些具有图形界面，并且具有内在逻辑能力的 程序单元。下图列出了三种用于实现乒乓切换的组件
- API: 小程序内置JS方法! wx.* , 方便调用微信提供的能力! 比如用户资料,本地存储,支付等...
## 美文音乐项目
# 简易教程
- 第一个微信项目
带appid,支持预览!可发布!
三个核心文件
1. html--->wxml
2. css----->wxss `小程序对弹性盒模型支持友好`
3. js------->j
- 界面
- 调试(wxml表示页面)
- 预览
- 远程调试
# 框架-目录结构
# 组件
简单常用组件介绍
view
text
image
# 框架-视图层-wxss
1. flex布局
2. 尺寸 rpx
小程序规定: 屏幕宽度为750rpx;则750rpx = 375px = 750物理像素(手机实际分辨率)
场景1: IPhone6设计原稿按照分辨率: 750px*高度
场景2: 效果图尺寸: rpx 比例: 1:2
```
案例:按照原稿或效果图切图!
```
# 实战1: 欢迎页制作
欢迎页布局
```
<view class="container">
<image class='logo' src='../images/logo.png'></image>
<text class='user-name'>Hello,zzy</text>
<view class='fenXiang btn' bindtap='goArtical' >
<text>和音乐一起分享时光</text>
</view>
<view bindtap='lookLocation' class='location btn'>
<text>查看当前位置</text>
</view>
<view bindtap='callMe' class='callMe btn' >
<text>联系我们</text>
</view>
</view>
```
欢迎页样式
```
.container{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/*logo*/
.logo{
width: 392rpx; /*196*2 100*2 */
height: 200rpx;
margin-top: 200rpx;
}
.user-name{
margin-top: 100rpx;
font-size: 32rpx; /* 16px 32rpx*/
font-weight: bold;
color:#109D59;
}
.fenXiang, .btn{
margin-top: 50rpx;
border: 1px solid #109D59;
width: 300rpx; /*150px* 40px */
height: 80rpx;
border-radius: 5px;
text-align: center;
line-height: 80rpx;
}
.fenXiang text, .btn text{
font-size: 22rpx;
font-weight: bold;
color:#109D59;
}
```
# 实战2: 首页tab
# 实战3:导航栏样式设置
# 实战4: 事件和跳转
# 实战5: 轮播和动态数据绑定
# 实战6: 文章视图html和css制作
# 实战7: js模拟动态数据-模块化
位置: 框架-视图层-模块化
1. 公用js代码保存为js文件, export可以导出属性或方法
2. 其他js复用先引入! require
# 实战8: 文章数据绑定
# 实战9: 循环加载视图
# 实战10:template
